Refine hero typography and coming soon flow

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

@@ -78,11 +78,9 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
         kicker={t("heroKicker")}
         title={t("heroTitle")}
         description={t("heroText")}
-        portfolioLabel={t("toPortfolio")}
-        contactLabel={t("toContact")}
       />
 
-      <Container className="relative z-10 -mt-6 flex flex-col gap-section pb-12 lg:-mt-8 lg:pb-16">
+      <Container id="home-content" className="relative z-10 -mt-6 flex scroll-mt-28 flex-col gap-section pb-12 lg:-mt-8 lg:pb-16">
         <MotionFade delay={0.05}>
           <AppCard
             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"

app/[locale]/coming-soon/page.tsx

@@ -1,15 +1,13 @@
 import type { Metadata } from "next";
-import { ArrowRight, Sparkles } from "lucide-react";
+import { Sparkles } from "lucide-react";
-import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 
 import { FloatingPreferences } from "@/components/layout/floating-preferences";
 import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";
 import { MotionFade } from "@/components/motion-fade";
-import { Button } from "@/components/ui/button";
 import { getSiteSettings } from "@/lib/app-config";
 import { buildLocalizedMetadata } from "@/lib/metadata";
-import { getLocalizedPath, resolveLocale } from "@/lib/locale";
+import { resolveLocale } from "@/lib/locale";
 
 type ComingSoonPageProps = {
   params: {
@@ -38,6 +36,7 @@ export default async function ComingSoonPage({
 }: ComingSoonPageProps) {
   const localeKey = resolveLocale(locale);
   const t = await getTranslations({ locale: localeKey, namespace: "comingSoon" });
+  const isArabic = localeKey === "ar";
 
   return (
     <div className="relative min-h-screen overflow-hidden">
@@ -50,21 +49,37 @@ export default async function ComingSoonPage({
 
         <MotionFade className="relative z-10 w-full">
           <div className="mx-auto max-w-[56rem] text-center">
-            <p className="inline-flex items-center gap-2 rounded-full border border-white/24 bg-[linear-gradient(180deg,rgba(255,255,255,0.2),rgba(255,255,255,0.08))] px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-foreground/78 shadow-[inset_0_1px_0_rgba(255,255,255,0.42),0_18px_44px_-28px_rgba(15,23,42,0.22)] backdrop-blur-[24px] dark:border-white/10 dark:bg-[linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03))]">
+            <p className="inline-flex items-center gap-2 rounded-full border border-black/6 bg-white/24 px-4 py-2 text-sm font-medium tracking-[-0.02em] text-[hsl(var(--hero-ink)/0.84)] shadow-[0_14px_34px_-24px_rgba(15,23,42,0.18)] backdrop-blur-[18px] dark:border-white/10 dark:bg-white/4 dark:text-foreground/84 dark:shadow-[0_20px_48px_-28px_rgba(0,0,0,0.58)]">
               <Sparkles className="h-3.5 w-3.5 text-brand-secondary" />
-              {t("badge")}
-            </p>
-
-            <p className="mx-auto mt-8 max-w-[20rem] text-base font-medium tracking-[-0.03em] text-[hsl(var(--hero-ink)/0.76)] drop-shadow-[0_10px_24px_rgba(15,23,42,0.16)] sm:text-lg">
               {t("kicker")}
             </p>
 
-            <h1 className="mx-auto mt-5 flex max-w-[42rem] flex-col gap-y-1 pb-[0.08em] text-[3.15rem] font-semibold leading-[0.94] tracking-[-0.08em] text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.22)] sm:text-[4.8rem] lg:gap-y-2 lg:text-[6rem]">
+            <h1
-              <span className="self-start bg-[linear-gradient(135deg,hsl(var(--hero-ink)),hsl(var(--hero-left)/0.9))] bg-clip-text text-transparent">
+              className={
+                isArabic
+                  ? "mx-auto mt-8 flex max-w-[40rem] flex-col items-center gap-y-2 overflow-visible pb-[0.12em] text-[3.35rem] font-bold leading-[1.12] tracking-normal text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.18)] sm:text-[4.7rem] lg:max-w-[44rem] lg:text-[5.5rem]"
+                  : "mx-auto mt-8 flex max-w-[44rem] flex-col gap-y-0.5 overflow-visible pb-[0.2em] text-[3.15rem] font-semibold leading-[0.98] tracking-[-0.05em] text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.22)] sm:text-[4.8rem] lg:max-w-[46rem] lg:gap-y-1 lg:pb-[0.22em] lg:text-[5.85rem]"
+              }
+            >
+              <span
+                className={
+                  isArabic
+                    ? "hero-title-line hero-title-accent-soft self-center whitespace-nowrap"
+                    : "hero-title-line hero-title-accent-soft self-start whitespace-nowrap"
+                }
+              >
                 {t("titleLineOne")}
               </span>
-              <span className="self-end">{t("titleLineTwo")}</span>
+              <span className={isArabic ? "hero-title-line self-center whitespace-nowrap" : "hero-title-line self-end whitespace-nowrap"}>
-              <span className="self-start bg-[linear-gradient(135deg,hsl(var(--hero-ink)),hsl(var(--hero-right)/0.85))] bg-clip-text text-transparent">
+                {t("titleLineTwo")}
+              </span>
+              <span
+                className={
+                  isArabic
+                    ? "hero-title-line hero-title-accent self-center whitespace-nowrap"
+                    : "hero-title-line hero-title-accent self-start whitespace-nowrap"
+                }
+              >
                 {t("titleLineThree")}
               </span>
             </h1>
@@ -76,23 +91,6 @@ export default async function ComingSoonPage({
             <p className="mx-auto mt-4 max-w-[32rem] text-sm leading-6 text-foreground/54 sm:text-base">
               {t("note")}
             </p>
-
-            <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
-              <Button asChild size="lg" className="min-w-[11rem] px-6">
-                <Link href={getLocalizedPath(localeKey, "/contact")}>
-                  {t("primaryCta")}
-                  <ArrowRight className="h-4 w-4" />
-                </Link>
-              </Button>
-              <Button
-                asChild
-                variant="outline"
-                size="lg"
-                className="min-w-[11rem] border-white/40 bg-white/35 px-6 backdrop-blur-sm hover:bg-white/55 dark:border-white/14 dark:bg-white/6 dark:hover:bg-white/10"
-              >
-                <Link href={getLocalizedPath(localeKey, "/")}>{t("secondaryCta")}</Link>
-              </Button>
-            </div>
           </div>
         </MotionFade>
       </section>

app/globals.css

@@ -360,6 +360,112 @@ html[lang="ar"] {
     background: linear-gradient(180deg, transparent, hsl(var(--background)));
   }
 
+  .hero-title-line {
+    display: inline-block;
+    padding-inline: 0.02em;
+    padding-block-end: 0.05em;
+  }
+
+  .hero-title-accent {
+    background-image: linear-gradient(
+      120deg,
+      hsl(var(--hero-ink)) 0%,
+      hsl(var(--hero-ink)) 24%,
+      hsl(var(--primary) / 0.58) 52%,
+      hsl(var(--hero-right) / 0.34) 78%,
+      hsl(var(--hero-ink)) 100%
+    );
+    background-size: 220% 220%;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    animation: hero-title-shift 8s ease-in-out infinite alternate;
+  }
+
+  .hero-title-accent-soft {
+    background-image: linear-gradient(
+      120deg,
+      hsl(var(--hero-ink)) 0%,
+      hsl(var(--hero-ink)) 34%,
+      hsl(var(--hero-left) / 0.26) 62%,
+      hsl(var(--primary) / 0.24) 82%,
+      hsl(var(--hero-ink)) 100%
+    );
+    background-size: 220% 220%;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    animation: hero-title-shift 10s ease-in-out infinite alternate;
+  }
+
+  .hero-scroll-link {
+    display: inline-flex;
+    height: 3.25rem;
+    width: 3.25rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    border: 1px solid hsl(var(--border) / 0.55);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16));
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.38),
+      0 18px 44px -28px rgba(15, 23, 42, 0.28);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    transition:
+      transform 220ms ease,
+      border-color 220ms ease,
+      background-color 220ms ease;
+  }
+
+  .hero-scroll-link:hover {
+    transform: translateY(2px);
+    border-color: hsl(var(--primary) / 0.42);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.22));
+  }
+
+  .hero-scroll-link svg {
+    animation: hero-scroll-bob 1.8s ease-in-out infinite;
+  }
+
+  .dark .hero-scroll-link {
+    border-color: rgba(255, 255, 255, 0.12);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.08),
+      0 18px 44px -28px rgba(0, 0, 0, 0.58);
+  }
+
+  .dark .hero-scroll-link:hover {
+    border-color: rgba(255, 255, 255, 0.18);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
+  }
+
+  @keyframes hero-title-shift {
+    0% {
+      background-position: 0% 50%;
+    }
+
+    50% {
+      background-position: 100% 50%;
+    }
+
+    100% {
+      background-position: 45% 100%;
+    }
+  }
+
+  @keyframes hero-scroll-bob {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(4px);
+    }
+  }
+
   .hero-header-bridge {
     position: absolute;
     left: 50%;

components/layout/floating-preferences.tsx

@@ -19,9 +19,18 @@ export function FloatingPreferences({
 
   return (
     <div className={cn("fixed inset-x-0 top-0 z-50 px-4 pt-4 sm:px-6", className)}>
-      <div className="mx-auto flex w-full max-w-max items-center justify-center gap-2">
+      <div className="mx-auto flex w-full justify-center">
-        <ThemeToggle ariaLabel={t("themeToggle")} className="bg-background/90" />
+        <div className="inline-flex items-center justify-center gap-1 rounded-[var(--radius-pill)] border border-black/6 bg-white/24 p-1 shadow-[0_14px_34px_-24px_rgba(15,23,42,0.18)] backdrop-blur-[18px] dark:border-white/10 dark:bg-white/4 dark:shadow-[0_20px_48px_-28px_rgba(0,0,0,0.58)]">
-        <LocaleToggle locale={locale} />
+          <ThemeToggle
+            ariaLabel={t("themeToggle")}
+            variant="ghost"
+            className="h-9 w-9 rounded-[var(--radius-pill)] border border-transparent bg-transparent text-[hsl(var(--hero-ink)/0.76)] hover:border-black/5 hover:bg-white/36 hover:text-[hsl(var(--hero-ink))] dark:text-foreground dark:hover:border-white/10 dark:hover:bg-white/10"
+          />
+          <LocaleToggle
+            locale={locale}
+            className="h-9 w-9 rounded-[var(--radius-pill)] border border-transparent bg-transparent p-0 text-[hsl(var(--hero-ink)/0.76)] hover:bg-white/36 hover:text-[hsl(var(--hero-ink))] dark:text-foreground dark:hover:bg-white/10"
+          />
+        </div>
       </div>
     </div>
   );

components/layout/home-hero.tsx

@@ -1,17 +1,12 @@
-import { ArrowRight } from "lucide-react";
+import { ArrowDown } from "lucide-react";
-import Link from "next/link";
 
 import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";
-import { Button } from "@/components/ui/button";
-import { getLocalizedPath } from "@/lib/locale";
 
 type HomeHeroProps = {
   locale: string;
   kicker: string;
   title: string;
   description: string;
-  portfolioLabel: string;
-  contactLabel: string;
 };
 
 export function HomeHero({
@@ -19,8 +14,6 @@ export function HomeHero({
   kicker,
   title,
   description,
-  portfolioLabel,
-  contactLabel,
 }: HomeHeroProps) {
   const titleLines = title.split("\n").filter(Boolean);
   const isArabic = locale === "ar";
@@ -31,15 +24,15 @@ export function HomeHero({
       <div className="hero-header-bridge" />
       <div className="hero-content-bridge" />
       <div className="relative z-10 mx-auto flex w-full max-w-[72rem] flex-col items-center justify-center px-4 pb-12 pt-24 text-center sm:px-6 lg:px-8 lg:pb-16 lg:pt-28">
-        <div className="mx-auto flex max-w-[46rem] flex-col items-center">
+        <div className="mx-auto flex max-w-[46rem] flex-col items-center overflow-visible">
           <p className="text-base font-medium tracking-[-0.03em] text-[hsl(var(--hero-ink)/0.76)] drop-shadow-[0_10px_24px_rgba(15,23,42,0.16)] sm:text-lg">
             {kicker}
           </p>
           <h1
             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-5 flex w-full max-w-[40rem] flex-col overflow-visible pb-[0.1em] text-[3rem] font-bold leading-[1.1] 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 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]"
+                : "mt-4 flex w-full max-w-[37rem] flex-col gap-y-0.5 overflow-visible pb-[0.18em] text-[3.25rem] font-semibold leading-[0.98] tracking-[-0.05em] text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.22)] sm:max-w-[39rem] sm:text-[4.9rem] lg:max-w-[40rem] lg:gap-y-1 lg:pb-[0.2em] lg:text-[6rem]"
             }
           >
             {titleLines.map((line, index) => (
@@ -48,13 +41,13 @@ export function HomeHero({
                 className={
                   isArabic
                     ? index === 1
-                      ? "self-center whitespace-nowrap"
+                      ? "hero-title-line self-center whitespace-nowrap"
-                      : "self-center whitespace-nowrap bg-[linear-gradient(135deg,hsl(var(--hero-ink)),hsl(var(--primary)))] bg-clip-text text-transparent"
+                      : "hero-title-line hero-title-accent self-center whitespace-nowrap"
                     : index === 1
-                      ? "self-end"
+                      ? "hero-title-line self-end whitespace-nowrap"
                       : index === titleLines.length - 1
-                        ? "self-start bg-[linear-gradient(135deg,hsl(var(--hero-ink)),hsl(var(--primary)))] bg-clip-text text-transparent"
+                        ? "hero-title-line hero-title-accent self-start whitespace-nowrap"
-                        : "self-start bg-[linear-gradient(135deg,hsl(var(--hero-ink)),hsl(var(--primary)/0.78))] bg-clip-text text-transparent"
+                        : "hero-title-line hero-title-accent-soft self-start whitespace-nowrap"
                 }
               >
                 {line}
@@ -64,16 +57,10 @@ export function HomeHero({
           <p className="mx-auto mt-8 max-w-[30rem] whitespace-pre-line text-sm leading-7 text-[hsl(var(--hero-ink)/0.72)] drop-shadow-[0_8px_18px_rgba(15,23,42,0.12)] sm:text-base">
             {description}
           </p>
-          <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
+          <div className="mt-10 flex items-center justify-center">
-            <Button asChild size="lg" className="min-w-[10.5rem] px-6">
+            <a href="#home-content" aria-label="Scroll to content" className="hero-scroll-link text-[hsl(var(--hero-ink)/0.74)] dark:text-foreground/82">
-              <Link href={getLocalizedPath(locale, "/portfolio")}>
+              <ArrowDown className="h-5 w-5" />
-                {portfolioLabel}
+            </a>
-                <ArrowRight className="h-4 w-4" />
-              </Link>
-            </Button>
-            <Button asChild variant="outline" size="lg" className="min-w-[10.5rem] border-white/40 bg-white/35 px-6 backdrop-blur-sm hover:bg-white/55 dark:border-white/14 dark:bg-white/6 dark:hover:bg-white/10">
-              <Link href={getLocalizedPath(locale, "/contact")}>{contactLabel}</Link>
-            </Button>
           </div>
         </div>
       </div>

components/layout/locale-toggle.tsx

@@ -42,16 +42,16 @@ export function LocaleToggle({ locale, className, showLabel = false }: LocaleTog
           aria-label={`Locale: ${currentLocale.toUpperCase()}`}
           className={cn(
             "group cursor-pointer rounded-pill border border-transparent text-muted-foreground hover:border-border/70 hover:bg-background/80 hover:text-foreground",
-            showLabel ? "gap-2 px-3" : undefined,
+            showLabel ? "gap-2 px-3" : "h-9 w-9 p-0",
             className,
           )}
         >
           <Image
             src={localeFlags[currentLocale].src}
             alt={localeFlags[currentLocale].alt}
-            width={18}
+            width={20}
-            height={18}
+            height={20}
-            className="h-[18px] w-[18px] rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
+            className="h-5 w-5 rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
           />
         </Button>
       </DropdownMenuTrigger>
@@ -72,9 +72,9 @@ export function LocaleToggle({ locale, className, showLabel = false }: LocaleTog
               <Image
                 src={localeFlags[targetLocale].src}
                 alt={localeFlags[targetLocale].alt}
-                width={18}
+                width={20}
-                height={18}
+                height={20}
-                className="h-[18px] w-[18px] rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
+                className="h-5 w-5 rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
               />
             </a>
           </DropdownMenuItem>

messages/ar.json

@@ -15,12 +15,12 @@
   },
   "comingSoon": {
     "badge": "قريباً",
-    "kicker": "مرحبااا، أنا محمد",
+    "kicker": "مرحبا، أنا محمد",
-    "titleLineOne": "نسخة أوضح",
+    "titleLineOne": "الموقع",
-    "titleLineTwo": "وأقوى",
+    "titleLineTwo": "رح يفتح",
-    "titleLineThree": "بالطريق.",
+    "titleLineThree": "قريباً.",
-    "description": "عم نجهز النسخة الجديدة بهوية أنضف، محتوى أوضح، وتجربة أرتب من البداية للنهاية.",
+    "description": "عم حضّر الموقع بحلّة جديدة، محتوى أوضح، وتجربة أرتب من أولها لآخرها.",
-    "note": "إذا عندك مشروع أو فكرة، فيك تتواصل من هلق ونبلش نحكي بالتفاصيل.",
+    "note": "إذا حابب تبلّش من هلق، ابعتلي ومنحكي بالتفاصيل.",
     "primaryCta": "تواصل معي",
     "secondaryCta": "العودة للرئيسية"
   },
@@ -76,7 +76,10 @@
     "intro": "ابعث لي هدفك باختصار وسأعود إليك بسرعة.",
     "name": "الاسم",
     "email": "البريد الإلكتروني",
+    "phone": "الهاتف",
+    "company": "الشركة",
     "message": "الرسالة",
+    "note": "اذكر السياق والهدف وأي موعد مهم حتى تكون الإجابة أدق.",
     "submit": "إرسال",
     "preview": "فتح صفحة النجاح",
     "city": "برلين، ألمانيا"