From 0f48381894e94b0b0bf75590ed3880948a967b78 Mon Sep 17 00:00:00 2001
From: MohFarawati <mf@planetmutlu.com>
Date: Tue, 14 Jul 2026 22:38:08 +0200
Subject: [PATCH] refactor(home): align contact CTA typography to the type
 scale

Use the eyebrow/.text-h2/body-lg tokens and caption/small labels so the
contact CTA matches the unified section styling. No structural change.
---
 components/home/contact-cta-section.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/home/contact-cta-section.tsx b/components/home/contact-cta-section.tsx
index 6cbe98b..ff9d0d9 100644
--- a/components/home/contact-cta-section.tsx
+++ b/components/home/contact-cta-section.tsx
@@ -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>