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({
-  params,
-}: ComingSoonPageProps) {
+export default async function ComingSoonPage({ 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">
-            <HeroMotionItem>
-              <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">
-                <Sparkles className="h-3.5 w-3.5 text-brand-secondary" />
-                {t("kicker")}
-              </p>
-            </HeroMotionItem>
+          <div className="mx-auto w-full max-w-[60rem]">
+            <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">
+              {/* top hairline highlight */}
+              <span
+                aria-hidden
+                className="pointer-events-none absolute inset-x-8 top-0 h-px bg-gradient-to-r from-transparent via-foreground/25 to-transparent"
+              />
+              {/* 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>
-              <p className="mx-auto mt-8 max-w-[34rem] text-sm leading-7 text-foreground/68 sm:text-base">
-                {t("description")}
-              </p>
-            </HeroMotionItem>
+                <HeroMotionItem>
+                  <p className={cn("mt-7 text-xs font-medium text-foreground/45", trackedEyebrow)}>
+                    {t("kicker")}
+                  </p>
+                </HeroMotionItem>
 
-            <HeroMotionItem className="mt-8 flex flex-col items-center justify-center gap-3 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>
+                <HeroTitle locale={localeKey} lines={lines} className="mx-auto mt-4 tracking-normal" />
+
+                <HeroMotionItem>
+                  <p className="mx-auto mt-8 max-w-[36rem] text-sm leading-7 text-foreground/68 sm:text-base">
+                    {t("description")}
+                  </p>
+                </HeroMotionItem>
+
+                <HeroMotionItem className="mt-11 flex flex-col items-center gap-4">
+                  <span className={cn("text-xs font-medium text-foreground/45", trackedLabel)}>
+                    {t("countdownLabel")}
+                  </span>
+                  <LaunchCountdown
+                    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>