MohFarawati
59094eba85
Reduce the "interchangeable cards" monotony flagged in Phase 0 and apply the warm-premium type scale. - SectionHeading: use the type scale (eyebrow via .eyebrow with brand tint, text-h2 title, body-lg description). Propagates to every home section. - CapabilitiesSection: cleaner cards with a brand-tinted icon tile, type-scale title/body, soft elevation (drops the AppCard wrapper). - ProcessSection: reworked into an editorial numbered timeline (large translucent brand numerals, top rule, no boxes) so it no longer looks identical to Capabilities. Verified: eslint clean, no new type errors, tailwind generates the utilities.
38 lines
823 B
TypeScript
38 lines
823 B
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
type SectionHeadingProps = {
|
|
eyebrow: string;
|
|
title: string;
|
|
description: string;
|
|
align?: "left" | "center";
|
|
className?: string;
|
|
};
|
|
|
|
export function SectionHeading({
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
align = "left",
|
|
className,
|
|
}: SectionHeadingProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"space-y-4",
|
|
align === "center" && "mx-auto max-w-3xl text-center",
|
|
className,
|
|
)}
|
|
>
|
|
<p className="eyebrow text-caption font-medium text-brand-primary">
|
|
{eyebrow}
|
|
</p>
|
|
<h2 className="max-w-4xl text-balance text-h2 text-foreground">
|
|
{title}
|
|
</h2>
|
|
<p className={cn("text-body-lg text-muted-foreground", align === "center" ? "mx-auto" : "max-w-2xl")}>
|
|
{description}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|