feat(coming-soon): premium themed redesign with launch countdown

Full refactor of the maintenance/coming-soon page for all locales (de/en/ar,
RTL-aware) with a refined, theme-aware (light + dark) premium composition:
glass panel, live status indicator, hero title, description, launch countdown
and CTAs. Reuses the existing hero/motion system; no new dependencies.

- Add components/site/launch-countdown.tsx: hydration-safe client countdown
  (days/hours/minutes/seconds), localized labels, Arabic-aware typography,
  "launched" fallback when the target passes.
- Rewrite app/[locale]/coming-soon/page.tsx around the countdown and a single
  easy-to-edit LAUNCH_DATE_ISO constant (default ~45 days out).
- Add comingSoon i18n keys (status, countdownLabel, unit labels, launched)
  to en/de/ar.

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

@@ -1,15 +1,20 @@
 import type { Metadata } from "next";
 import { unstable_noStore as noStore } from "next/cache";
 import Link from "next/link";
-import { ArrowLeft, ArrowRight, Mail, Sparkles } from "lucide-react";
+import { ArrowLeft, ArrowRight, Mail } from "lucide-react";
 import { getLocale, getTranslations } from "next-intl/server";
 
 import { FloatingPreferences } from "@/components/layout/floating-preferences";
 import { HeroContentMotion, HeroMotionItem, HeroShell, HeroTitle } from "@/components/layout/site-hero";
+import { LaunchCountdown } from "@/components/site/launch-countdown";
 import { Button } from "@/components/ui/button";
 import { getSiteSettings } from "@/lib/app-config";
 import { buildLocalizedMetadata } from "@/lib/metadata";
 import { getLocalizedPath, resolveLocale } from "@/lib/locale";
+import { cn } from "@/lib/utils";
+
+// Target launch date for the countdown. Edit this single line to change it.
+const LAUNCH_DATE_ISO = "2026-08-28T12:00:00Z";
 
 type ComingSoonPageProps = {
   params: Promise<{
@@ -36,9 +41,7 @@ export async function generateMetadata({ params }: ComingSoonPageProps): Promise
   });
 }
 
-export default async function ComingSoonPage({
+export default async function ComingSoonPage({ params }: ComingSoonPageProps) {
-  params,
-}: ComingSoonPageProps) {
   noStore();
   await params;
   const siteSettings = await getSiteSettings();
@@ -46,60 +49,111 @@ export default async function ComingSoonPage({
   const t = await getTranslations({ locale: localeKey, namespace: "comingSoon" });
   const isArabic = localeKey === "ar";
   const DirectionIcon = isArabic ? ArrowLeft : ArrowRight;
+
   const lines = [
     {
       text: t("titleLineOne"),
       tone: "soft" as const,
-      align: isArabic ? "center" as const : "start" as const,
+      align: isArabic ? ("center" as const) : ("start" as const),
     },
     {
       text: t("titleLineTwo"),
       tone: "default" as const,
-      align: isArabic ? "center" as const : "end" as const,
+      align: isArabic ? ("center" as const) : ("end" as const),
     },
     {
       text: t("titleLineThree"),
       tone: "accent" as const,
-      align: isArabic ? "center" as const : "start" as const,
+      align: isArabic ? ("center" as const) : ("start" as const),
     },
   ];
 
+  const trackedEyebrow = isArabic ? "tracking-normal" : "uppercase tracking-[0.28em]";
+  const trackedLabel = isArabic ? "tracking-normal" : "uppercase tracking-[0.24em]";
+  const trackedPill = isArabic ? "tracking-normal" : "uppercase tracking-[0.12em]";
+
   return (
     <div className="relative min-h-screen overflow-hidden">
       <FloatingPreferences locale={localeKey} defaultLocale={siteSettings.defaultLocale} />
 
       <HeroShell className="min-h-screen" showBridges>
         <HeroContentMotion className="relative z-10 w-full">
-          <div className="mx-auto max-w-[56rem] text-center">
+          <div className="mx-auto w-full max-w-[60rem]">
-            <HeroMotionItem>
+            <div className="relative overflow-hidden rounded-[calc(var(--radius-surface)+10px)] border border-foreground/10 bg-background/45 px-6 py-12 shadow-panel backdrop-blur-[26px] dark:border-foreground/12 dark:bg-background/25 sm:px-14 sm:py-16">
-              <p className="inline-flex items-center gap-2 rounded-pill border border-foreground/8 bg-background/55 px-4 py-2 text-sm font-medium tracking-[0.08em] text-[hsl(var(--hero-ink)/0.84)] shadow-[var(--shadow-sm)] backdrop-blur-[18px] dark:border-foreground/10 dark:bg-background/20 dark:text-foreground/84">
+              {/* top hairline highlight */}
-                <Sparkles className="h-3.5 w-3.5 text-brand-secondary" />
+              <span
-                {t("kicker")}
+                aria-hidden
-              </p>
+                className="pointer-events-none absolute inset-x-8 top-0 h-px bg-gradient-to-r from-transparent via-foreground/25 to-transparent"
-            </HeroMotionItem>
+              />
+              {/* soft brand glow */}
+              <span
+                aria-hidden
+                className="pointer-events-none absolute -top-28 left-1/2 h-64 w-[38rem] max-w-[120%] -translate-x-1/2 rounded-full bg-[radial-gradient(closest-side,hsl(var(--brand-primary)/0.18),transparent)] blur-2xl"
+              />
 
-            <HeroTitle locale={localeKey} lines={lines} className="mx-auto mt-8 tracking-normal" />
+              <div className="relative flex flex-col items-center text-center">
+                <HeroMotionItem>
+                  <span
+                    className={cn(
+                      "inline-flex items-center gap-2.5 rounded-pill border border-foreground/10 bg-background/55 px-4 py-2 text-xs font-medium text-[hsl(var(--hero-ink)/0.82)] shadow-[var(--shadow-sm)] backdrop-blur-[18px] dark:border-foreground/12 dark:bg-background/20 dark:text-foreground/82",
+                      trackedPill,
+                    )}
+                  >
+                    <span className="relative flex h-2 w-2">
+                      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-secondary opacity-70" />
+                      <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-secondary" />
+                    </span>
+                    {t("status")}
+                  </span>
+                </HeroMotionItem>
 
-            <HeroMotionItem>
+                <HeroMotionItem>
-              <p className="mx-auto mt-8 max-w-[34rem] text-sm leading-7 text-foreground/68 sm:text-base">
+                  <p className={cn("mt-7 text-xs font-medium text-foreground/45", trackedEyebrow)}>
-                {t("description")}
+                    {t("kicker")}
-              </p>
+                  </p>
-            </HeroMotionItem>
+                </HeroMotionItem>
 
-            <HeroMotionItem className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
+                <HeroTitle locale={localeKey} lines={lines} className="mx-auto mt-4 tracking-normal" />
-              <Button asChild size="lg" className="w-full sm:w-auto">
+
-                <Link href={getLocalizedPath(localeKey, "/contact", siteSettings.defaultLocale)}>
+                <HeroMotionItem>
-                  <Mail className="h-4 w-4" />
+                  <p className="mx-auto mt-8 max-w-[36rem] text-sm leading-7 text-foreground/68 sm:text-base">
-                  {t("primaryCta")}
+                    {t("description")}
-                </Link>
+                  </p>
-              </Button>
+                </HeroMotionItem>
-              <Button asChild variant="outline" size="lg" className="w-full sm:w-auto">
+
-                <Link href={getLocalizedPath(localeKey, "/", siteSettings.defaultLocale)}>
+                <HeroMotionItem className="mt-11 flex flex-col items-center gap-4">
-                  {t("secondaryCta")}
+                  <span className={cn("text-xs font-medium text-foreground/45", trackedLabel)}>
-                  <DirectionIcon className="h-4 w-4" />
+                    {t("countdownLabel")}
-                </Link>
+                  </span>
-              </Button>
+                  <LaunchCountdown
-            </HeroMotionItem>
+                    targetIso={LAUNCH_DATE_ISO}
+                    arabic={isArabic}
+                    launchedLabel={t("launched")}
+                    labels={{
+                      days: t("unitDays"),
+                      hours: t("unitHours"),
+                      minutes: t("unitMinutes"),
+                      seconds: t("unitSeconds"),
+                    }}
+                  />
+                </HeroMotionItem>
+
+                <HeroMotionItem className="mt-12 flex w-full flex-col items-center justify-center gap-3 sm:w-auto sm:flex-row">
+                  <Button asChild size="lg" className="w-full sm:w-auto">
+                    <Link href={getLocalizedPath(localeKey, "/contact", siteSettings.defaultLocale)}>
+                      <Mail className="h-4 w-4" />
+                      {t("primaryCta")}
+                    </Link>
+                  </Button>
+                  <Button asChild variant="outline" size="lg" className="w-full sm:w-auto">
+                    <Link href={getLocalizedPath(localeKey, "/", siteSettings.defaultLocale)}>
+                      {t("secondaryCta")}
+                      <DirectionIcon className="h-4 w-4" />
+                    </Link>
+                  </Button>
+                </HeroMotionItem>
+              </div>
+            </div>
           </div>
         </HeroContentMotion>
       </HeroShell>

components/site/launch-countdown.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+type CountdownLabels = {
+  days: string;
+  hours: string;
+  minutes: string;
+  seconds: string;
+};
+
+type LaunchCountdownProps = {
+  /** Target launch date as an ISO string. */
+  targetIso: string;
+  labels: CountdownLabels;
+  /** Shown once the target date has passed. */
+  launchedLabel: string;
+  /** Arabic script: drop uppercase/letter-spacing on labels. */
+  arabic?: boolean;
+  className?: string;
+};
+
+type Remaining = {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  done: boolean;
+};
+
+function computeRemaining(target: number): Remaining {
+  const diff = target - Date.now();
+
+  if (diff <= 0) {
+    return { days: 0, hours: 0, minutes: 0, seconds: 0, done: true };
+  }
+
+  const totalSeconds = Math.floor(diff / 1000);
+
+  return {
+    days: Math.floor(totalSeconds / 86400),
+    hours: Math.floor((totalSeconds % 86400) / 3600),
+    minutes: Math.floor((totalSeconds % 3600) / 60),
+    seconds: totalSeconds % 60,
+    done: false,
+  };
+}
+
+function pad(value: number): string {
+  return value.toString().padStart(2, "0");
+}
+
+export function LaunchCountdown({
+  targetIso,
+  labels,
+  launchedLabel,
+  arabic = false,
+  className,
+}: LaunchCountdownProps) {
+  // Start null so the server and first client render match (no hydration
+  // mismatch); the real value is filled in on mount and every second after.
+  const [remaining, setRemaining] = useState<Remaining | null>(null);
+
+  useEffect(() => {
+    const target = new Date(targetIso).getTime();
+
+    if (Number.isNaN(target)) {
+      return;
+    }
+
+    setRemaining(computeRemaining(target));
+
+    const interval = window.setInterval(() => {
+      setRemaining(computeRemaining(target));
+    }, 1000);
+
+    return () => window.clearInterval(interval);
+  }, [targetIso]);
+
+  if (remaining?.done) {
+    return (
+      <p
+        className={cn(
+          "text-sm font-medium tracking-[0.02em] text-[hsl(var(--hero-ink))]",
+          className,
+        )}
+      >
+        {launchedLabel}
+      </p>
+    );
+  }
+
+  const units = [
+    { key: "days", label: labels.days, value: remaining?.days },
+    { key: "hours", label: labels.hours, value: remaining?.hours },
+    { key: "minutes", label: labels.minutes, value: remaining?.minutes },
+    { key: "seconds", label: labels.seconds, value: remaining?.seconds },
+  ];
+
+  return (
+    <div
+      className={cn("flex items-start justify-center gap-2.5 sm:gap-3.5", className)}
+      role="timer"
+      aria-live="off"
+    >
+      {units.map((unit) => (
+        <div key={unit.key} className="flex flex-col items-center gap-2.5">
+          <div className="group relative flex h-[4.5rem] w-[4.5rem] items-center justify-center overflow-hidden rounded-[calc(var(--radius-nested)+2px)] border border-foreground/10 bg-background/55 shadow-[var(--shadow-sm)] backdrop-blur-[18px] dark:border-foreground/12 dark:bg-background/20 sm:h-24 sm:w-24">
+            <span
+              aria-hidden
+              className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-foreground/25 to-transparent"
+            />
+            <span className="text-3xl font-semibold tabular-nums text-[hsl(var(--hero-ink))] sm:text-[2.6rem]">
+              {unit.value === undefined ? "--" : pad(unit.value)}
+            </span>
+          </div>
+          <span
+            className={cn(
+              "text-[0.68rem] font-medium text-foreground/55 sm:text-xs",
+              arabic ? "tracking-normal" : "uppercase tracking-[0.16em]",
+            )}
+          >
+            {unit.label}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}

messages/ar.json

@@ -28,7 +28,14 @@
     "titleLineThree": "وسيعود قريباً",
     "description": "أعيد بناء الموقع ليعرض الخدمات، الأعمال المختارة، وطريقة التعاون بشكل مباشر ومنظم.",
     "primaryCta": "ابدأ مشروعاً",
-    "secondaryCta": "العودة للرئيسية"
+    "secondaryCta": "العودة للرئيسية",
+    "status": "قيد التطوير · يعود قريباً",
+    "countdownLabel": "الإطلاق خلال",
+    "unitDays": "أيام",
+    "unitHours": "ساعات",
+    "unitMinutes": "دقائق",
+    "unitSeconds": "ثوانٍ",
+    "launched": "نُطلق قريباً جداً"
   },
   "homepage": {
     "meta": {

messages/de.json

@@ -28,7 +28,14 @@
     "titleLineThree": "bald wieder online",
     "description": "Ich baue die Website neu auf, damit Leistungen, ausgewählte Arbeiten und Zusammenarbeit klarer, direkter und ohne Wiederholungen sichtbar werden.",
     "primaryCta": "Projekt starten",
-    "secondaryCta": "Zur Startseite"
+    "secondaryCta": "Zur Startseite",
+    "status": "In Entwicklung · bald zurück",
+    "countdownLabel": "Start in",
+    "unitDays": "Tage",
+    "unitHours": "Stunden",
+    "unitMinutes": "Minuten",
+    "unitSeconds": "Sekunden",
+    "launched": "Wir starten sehr bald"
   },
   "homepage": {
     "meta": {

messages/en.json

@@ -28,7 +28,14 @@
     "titleLineThree": "returning soon",
     "description": "I am rebuilding the site to present services, selected work, and collaboration details with sharper structure and less noise.",
     "primaryCta": "Start a project",
-    "secondaryCta": "Back to homepage"
+    "secondaryCta": "Back to homepage",
+    "status": "In development · back soon",
+    "countdownLabel": "Launching in",
+    "unitDays": "Days",
+    "unitHours": "Hours",
+    "unitMinutes": "Minutes",
+    "unitSeconds": "Seconds",
+    "launched": "Launching very soon"
   },
   "homepage": {
     "meta": {