Refine homepage services section and hero spacing

app/[locale]/(site)/page.tsx

@@ -85,23 +85,22 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
       <Container className="relative z-10 -mt-6 flex flex-col gap-section pb-12 lg:-mt-8 lg:pb-16">
         <MotionFade delay={0.05}>
           <AppCard
-            level="inverse"
-            className="overflow-hidden border border-white/6 bg-[linear-gradient(145deg,hsl(var(--foreground)),hsl(221_42%_10%))] text-primary-foreground"
+            className="overflow-hidden border border-border/70 bg-[linear-gradient(145deg,rgba(255,255,255,0.82),rgba(236,240,251,0.72))] text-foreground shadow-[0_24px_64px_-40px_rgba(15,23,42,0.28)] backdrop-blur-xl dark:border-white/10 dark:bg-[linear-gradient(145deg,rgba(17,24,39,0.78),rgba(10,16,30,0.7))] dark:text-primary-foreground"
           >
             <CardContent className="p-6 lg:p-10">
               <div className="grid gap-8 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)] lg:items-start">
                 <div>
-                  <p className="text-sm font-medium tracking-[0.08em] text-primary-foreground/62">
+                  <p className="text-sm font-medium tracking-[0.08em] text-foreground/56 dark:text-primary-foreground/62">
                     {t("servicesEyebrow")}
                   </p>
-                  <h2 className="mt-4 max-w-[12ch] text-balance text-4xl font-semibold leading-[0.92] tracking-[-0.06em] text-primary-foreground sm:text-5xl lg:text-6xl">
+                  <h2 className="mt-4 max-w-[12ch] text-balance text-4xl font-semibold leading-[0.92] tracking-[-0.06em] text-foreground sm:text-5xl lg:text-6xl dark:text-primary-foreground">
                     {t("servicesTitle")}
                   </h2>
-                  <p className="mt-5 max-w-[34rem] text-sm leading-7 text-primary-foreground/76 sm:text-base">
+                  <p className="mt-5 max-w-[34rem] text-sm leading-7 text-muted-foreground sm:text-base dark:text-primary-foreground/76">
                     {t("servicesText")}
                   </p>
-                  <div className="mt-7 flex flex-wrap gap-3">
-                    <Button asChild size="lg" variant="secondary" className="min-w-[11rem]">
+                  <div className="mt-8 flex flex-wrap gap-3">
+                    <Button asChild size="lg" className="min-w-[11rem]">
                       <Link href={getLocalizedPath(localeKey, "/contact")}>
                         {t("servicesPrimaryCta")}
                         <ArrowRight className="h-4 w-4" />
@@ -111,7 +110,7 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
                       asChild
                       size="lg"
                       variant="outline"
-                      className="min-w-[11rem] border-white/16 bg-white/6 text-primary-foreground hover:bg-white/10 hover:text-primary-foreground"
+                      className="min-w-[11rem] border-border/80 bg-background/70 hover:bg-background dark:border-white/16 dark:bg-white/6 dark:text-primary-foreground dark:hover:bg-white/10 dark:hover:text-primary-foreground"
                     >
                       <Link href={getLocalizedPath(localeKey, "/portfolio")}>
                         {t("servicesSecondaryCta")}
@@ -127,10 +126,12 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
                     return (
                       <div
                         key={item}
-                        className="rounded-nested border border-white/10 bg-white/6 p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-sm transition-colors hover:bg-white/8"
+                        className="rounded-nested border border-border/70 bg-white/54 p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.5)] transition-colors hover:bg-white/78 dark:border-white/10 dark:bg-white/6 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] dark:hover:bg-white/8"
                       >
-                        <Icon className="h-5 w-5 text-primary-foreground/72" />
-                        <p className="mt-4 text-sm font-medium leading-6 text-primary-foreground/88 sm:text-base">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[linear-gradient(135deg,hsl(var(--hero-left)/0.42),hsl(var(--hero-right)/0.26))] dark:bg-[linear-gradient(135deg,rgba(99,125,214,0.18),rgba(192,137,170,0.16))]">
+                          <Icon className="h-5 w-5 text-foreground/78 dark:text-primary-foreground/78" />
+                        </div>
+                        <p className="mt-4 text-sm font-medium leading-6 text-foreground/88 sm:text-base dark:text-primary-foreground/88">
                           {item}
                         </p>
                       </div>

components/layout/home-hero.tsx

@@ -39,7 +39,7 @@ export function HomeHero({
             className={
               isArabic
                 ? "mt-5 flex w-full max-w-[40rem] flex-col text-[3rem] font-bold leading-[1.12] tracking-normal text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.16)] sm:text-[4.25rem] lg:max-w-[48rem] lg:text-[5.35rem]"
-                : "mt-4 flex w-full max-w-[36rem] flex-col gap-y-1 text-[3.25rem] font-semibold leading-[0.9] tracking-[-0.085em] text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.22)] sm:max-w-[38rem] sm:text-[4.9rem] lg:max-w-[39rem] lg:gap-y-2 lg:text-[6.15rem]"
+                : "mt-4 flex w-full max-w-[36rem] flex-col gap-y-1 pb-[0.08em] text-[3.25rem] font-semibold leading-[0.94] tracking-[-0.085em] text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.22)] sm:max-w-[38rem] sm:text-[4.9rem] lg:max-w-[39rem] lg:gap-y-2 lg:text-[6.15rem]"
             }
           >
             {titleLines.map((line, index) => (

messages/ar.json

@@ -25,18 +25,18 @@
     "heroKicker": "مرحبااا، أنا محمد",
     "heroTitle": "مطور واجهات ويب\nومصمم جرافيك",
     "heroText": "بشتغل على حلول رقمية لمشاكل حقيقية\nبتطلع ممتازة وبتشتغل بكفاءة.",
-    "servicesEyebrow": "كيف بقدر ساعدك",
-    "servicesTitle": "أقدر أساعدك تبني حضور رقمي مرتب وفعّال.",
-    "servicesText": "إذا بدك تطلق براند، موقع، متجر، إضافة ووردبريس، أو بدك ترتب السيو والتراكنغ وتبني سستم خاص لشغلك، بقدر ساعدك من الفكرة للتنفيذ بشكل واضح وعملي.",
+    "servicesEyebrow": "شو فيني قدّم",
+    "servicesTitle": "حلول رقمية مصممة حسب شغلك، مو قوالب جاهزة.",
+    "servicesText": "من الهوية والموقع، للمتجر والسيو والتراكنغ، لحد الأنظمة الخاصة الداخلية. الفكرة إنو كل شيء يطلع مرتب، مفهوم، وقابل للنمو.",
     "servicesPrimaryCta": "احكيلي عن مشروعك",
     "servicesSecondaryCta": "شوف شغلي",
-    "serviceBrand": "بقدر ساعدك تبني براند واضح ومرتب.",
-    "serviceWebsite": "بقدر ساعدك تبني موقع إلكتروني يليق بشغلك.",
-    "serviceStore": "بقدر ساعدك تبني متجر يبيع بشكل أوضح وأسهل.",
-    "serviceWordPress": "بقدر ساعدك تبني إضافة WordPress خاصة فيك.",
-    "serviceSeo": "بقدر ساعدك تحسن ظهور موقعك بمحركات البحث.",
-    "serviceTracking": "بقدر ساعدك تضبط التراكنغ وتفهم حركة الزوار.",
-    "serviceSystem": "بقدر ساعدك تبني سستم خاص لشركتك أو لموظفينك.",
+    "serviceBrand": "بناء براند واضح ومرتب.",
+    "serviceWebsite": "موقع إلكتروني يليق بشغلك.",
+    "serviceStore": "متجر أسهل بالعرض والبيع.",
+    "serviceWordPress": "إضافة WordPress خاصة فيك.",
+    "serviceSeo": "تحسين الظهور بمحركات البحث.",
+    "serviceTracking": "تراكنغ واضح وفهم لحركة الزوار.",
+    "serviceSystem": "سستم خاص لشركتك أو لفريقك.",
     "toPortfolio": "عرض الأعمال",
     "toProducts": "عرض المنتجات",
     "toContact": "تواصل معي"

messages/de.json

@@ -25,18 +25,18 @@
     "heroKicker": "Hi, ich bin Moh",
     "heroTitle": "frontend\ndeveloper\n& designer",
     "heroText": "Ich entwickle digitale Loesungen fuer echte Probleme,\ndie gut aussehen und sauber funktionieren.",
-    "servicesEyebrow": "Wobei ich helfen kann",
-    "servicesTitle": "Ich kann dir helfen, den richtigen digitalen Aufbau fuer dein Business zu schaffen.",
-    "servicesText": "Von Brand Aufbau und Websites bis zu Shops, WordPress Plugins, SEO, Tracking und internen Systemen helfe ich dir dabei, die passende digitale Loesung klar und sauber umzusetzen.",
+    "servicesEyebrow": "Leistungen",
+    "servicesTitle": "Digitale Arbeit, die sich an deinem Geschaeft orientiert und nicht an Vorlagen.",
+    "servicesText": "Von Markenaufbau und Websites bis zu Shops, SEO, Tracking, WordPress Plugins und internen Systemen geht es immer um dasselbe: mehr Klarheit, bessere Wirkung und eine saubere Grundlage fuer Wachstum.",
     "servicesPrimaryCta": "Erzaehl mir von deinem Projekt",
     "servicesSecondaryCta": "Meine Arbeiten ansehen",
-    "serviceBrand": "Ich kann dir helfen, eine klare und starke Marke aufzubauen.",
-    "serviceWebsite": "Ich kann dir helfen, eine Website fuer dein Business zu bauen.",
-    "serviceStore": "Ich kann dir helfen, einen Shop mit besserer Klarheit aufzubauen.",
-    "serviceWordPress": "Ich kann dir helfen, ein eigenes WordPress Plugin zu entwickeln.",
-    "serviceSeo": "Ich kann dir helfen, deine Sichtbarkeit in Suchmaschinen zu verbessern.",
-    "serviceTracking": "Ich kann dir helfen, Tracking sauber aufzusetzen und auszuwerten.",
-    "serviceSystem": "Ich kann dir helfen, ein eigenes System fuer deine Firma oder dein Team zu bauen.",
+    "serviceBrand": "Markenaufbau mit klarer Richtung.",
+    "serviceWebsite": "Websites mit sauberer Struktur.",
+    "serviceStore": "Shops, die klarer verkaufen.",
+    "serviceWordPress": "Eigene WordPress Plugins.",
+    "serviceSeo": "Mehr Sichtbarkeit in Suchmaschinen.",
+    "serviceTracking": "Tracking und bessere Auswertung.",
+    "serviceSystem": "Interne Systeme fuer Teams und Firmen.",
     "toPortfolio": "Portfolio ansehen",
     "toProducts": "Produkte ansehen",
     "toContact": "Kontakt aufnehmen"

messages/en.json

@@ -25,18 +25,18 @@
     "heroKicker": "Hi, I am Moh",
     "heroTitle": "frontend\ndeveloper\n& designer",
     "heroText": "I craft digital solutions for human problems\nthat look good and work well.",
-    "servicesEyebrow": "How I Can Help",
-    "servicesTitle": "I can help you build the right digital setup for your business.",
-    "servicesText": "From brand foundations and websites to stores, WordPress plugins, SEO, tracking, and internal systems, I can help shape, build, and refine the setup your business actually needs.",
+    "servicesEyebrow": "Capabilities",
+    "servicesTitle": "Digital work shaped around what your business actually needs.",
+    "servicesText": "From brand direction and websites to stores, SEO, tracking, WordPress plugins, and internal systems, the goal is the same: clearer structure, better performance, and room to grow.",
     "servicesPrimaryCta": "Tell me about your project",
     "servicesSecondaryCta": "See my work",
-    "serviceBrand": "I can help you build a clear and reliable brand.",
-    "serviceWebsite": "I can help you build a website that fits your business.",
-    "serviceStore": "I can help you launch an online store that sells more clearly.",
-    "serviceWordPress": "I can help you build a custom WordPress plugin.",
-    "serviceSeo": "I can help you improve your visibility in search engines.",
-    "serviceTracking": "I can help you set up tracking and understand user behavior.",
-    "serviceSystem": "I can help you build a custom system for your company or team.",
+    "serviceBrand": "Brand systems and visual direction.",
+    "serviceWebsite": "Business websites with clear structure.",
+    "serviceStore": "Stores built for easier selling.",
+    "serviceWordPress": "Custom WordPress plugin development.",
+    "serviceSeo": "Search visibility and technical SEO.",
+    "serviceTracking": "Tracking setup and user insights.",
+    "serviceSystem": "Custom internal systems for teams.",
     "toPortfolio": "View portfolio",
     "toProducts": "View products",
     "toContact": "Contact me"