73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
import { type ReactNode } from "react";
|
|
|
|
interface SectionHeadingProps {
|
|
/** Small tag label — e.g. "team", "get in touch" */
|
|
tag?: string;
|
|
/** Main heading text */
|
|
title: string | ReactNode;
|
|
/** Optional description paragraph below the heading */
|
|
description?: string;
|
|
/** HTML heading level */
|
|
titleAs?: "h1" | "h2" | "h3" | "h4";
|
|
/** Wrapper className */
|
|
className?: string;
|
|
/** Title className override */
|
|
titleClassName?: string;
|
|
/** Description className override */
|
|
descriptionClassName?: string;
|
|
/** Tag className override */
|
|
tagClassName?: string;
|
|
}
|
|
|
|
/**
|
|
* SectionHeading — page-level section header.
|
|
*
|
|
* Pattern: [tag] + heading + optional description.
|
|
* Used for top-level section titles across all pages.
|
|
*
|
|
* For card-internal headings, use `CardHeading` instead.
|
|
*/
|
|
export function SectionHeading({
|
|
tag,
|
|
title,
|
|
description,
|
|
titleAs: Tag = "h2",
|
|
className = "",
|
|
titleClassName = "",
|
|
descriptionClassName = "",
|
|
tagClassName = "",
|
|
}: SectionHeadingProps) {
|
|
return (
|
|
<div className={className}>
|
|
{tag && (
|
|
<span
|
|
className={`aiero-subheading mb-4 text-aiero-teal ${tagClassName}`}
|
|
style={{ fontFamily: "var(--font-sora)" }}
|
|
>
|
|
{tag}
|
|
</span>
|
|
)}
|
|
|
|
<Tag
|
|
className={`tracking-[-0.03em] ${titleClassName}`}
|
|
style={{
|
|
fontFamily: "var(--font-dm-sans)",
|
|
fontSize: "clamp(32px, 4vw, 56px)",
|
|
fontWeight: 500,
|
|
lineHeight: 1.1,
|
|
}}
|
|
>
|
|
{title}
|
|
</Tag>
|
|
|
|
{description && (
|
|
<p
|
|
className={`mt-6 text-base leading-relaxed text-aiero-text-muted ${descriptionClassName}`}
|
|
>
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|