mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

refactor(home): align contact CTA typography to the type scale
CI / quality (push) Has been cancelled
Details

Browse Source 
Use the eyebrow/.text-h2/body-lg tokens and caption/small labels so the
contact CTA matches the unified section styling. No structural change.
This commit is contained in:
MohFarawati
2026-07-14 22:38:08 +02:00
parent 59094eba85
commit 0f48381894
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/home/contact-cta-section.tsx
+8 -8
View File
@@ -19,26 +19,26 @@ export function ContactCtaSection({
<AppCard className="overflow-hidden">
<div className="grid gap-6 rounded-nested border border-border/70 bg-background p-6 sm:p-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end lg:p-10">
<div className="space-y-4">
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
<p className="eyebrow text-caption font-medium text-brand-primary">
{copy.eyebrow}
</p>
<h2 className="max-w-3xl text-balance text-3xl font-semibold tracking-[-0.05em] text-foreground sm:text-4xl lg:text-5xl">
<h2 className="max-w-3xl text-balance text-h2 text-foreground">
{copy.title}
</h2>
<p className="max-w-2xl text-sm leading-7 text-muted-foreground sm:text-base">
<p className="max-w-2xl text-body-lg text-muted-foreground">
{copy.description}
</p>
<div className="flex flex-wrap gap-6 text-sm">
<div className="flex flex-wrap gap-8 pt-2">
<div className="space-y-1">
<p className="font-semibold text-foreground">{copy.emailLabel}</p>
<a href={`mailto:${copy.emailValue}`} className="text-muted-foreground hover:text-foreground">
<p className="text-caption font-medium text-muted-foreground">{copy.emailLabel}</p>
<a href={`mailto:${copy.emailValue}`} className="text-small text-foreground transition-colors hover:text-brand-primary">
{copy.emailValue}
</a>
</div>
<div className="space-y-1">
<p className="font-semibold text-foreground">{copy.availabilityLabel}</p>
<p className="text-muted-foreground">{copy.availabilityValue}</p>
<p className="text-caption font-medium text-muted-foreground">{copy.availabilityLabel}</p>
<p className="text-small text-foreground">{copy.availabilityValue}</p>
</div>
</div>
</div>