refactor(home): unify section headings, differentiate capabilities and process
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.
This commit is contained in:
@@ -23,13 +23,13 @@ export function SectionHeading({
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
|
||||
<p className="eyebrow text-caption font-medium text-brand-primary">
|
||||
{eyebrow}
|
||||
</p>
|
||||
<h2 className="max-w-4xl text-balance text-3xl font-semibold tracking-[-0.05em] text-foreground sm:text-4xl lg:text-5xl">
|
||||
<h2 className="max-w-4xl text-balance text-h2 text-foreground">
|
||||
{title}
|
||||
</h2>
|
||||
<p className="max-w-3xl text-sm leading-7 text-muted-foreground sm:text-[1.02rem]">
|
||||
<p className={cn("text-body-lg text-muted-foreground", align === "center" ? "mx-auto" : "max-w-2xl")}>
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user