Refine coming soon experience and global ambient UI

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

@@ -1,17 +1,15 @@
 import type { Metadata } from "next";
 import { Sparkles } from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 
+import { AnimatedLogo } from "@/components/layout/animated-logo";
 import { Container } from "@/components/layout/container";
+import { FloatingPreferences } from "@/components/layout/floating-preferences";
 import { MotionFade } from "@/components/motion-fade";
-import { ThemeToggle } from "@/components/theme-toggle";
 import { getSiteSettings } from "@/lib/app-config";
 import { buildLocalizedMetadata } from "@/lib/metadata";
-import { getLocalizedPath, resolveLocale } from "@/lib/locale";
+import { resolveLocale } from "@/lib/locale";
 import { AppCard } from "@/components/ui/app-card";
-import { Button } from "@/components/ui/button";
 import { CardContent } from "@/components/ui/card";
 
 type ComingSoonPageProps = {
@@ -40,73 +38,33 @@ export default async function ComingSoonPage({
   params: { locale },
 }: ComingSoonPageProps) {
   const localeKey = resolveLocale(locale);
-  const localeOptions = ["de", "en", "ar"] as const;
   const t = await getTranslations({ locale: localeKey, namespace: "comingSoon" });
-  const tNav = await getTranslations({ locale: localeKey, namespace: "navigation" });
 
   return (
-    <div className="relative min-h-screen overflow-hidden bg-background">
-      <div className="surface-grid absolute inset-0 opacity-30" />
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,hsl(var(--brand-primary)/0.18),transparent_42%),radial-gradient(circle_at_bottom_right,hsl(var(--brand-secondary)/0.14),transparent_36%)]" />
+    <div className="surface-ambient relative min-h-screen overflow-hidden">
+      <FloatingPreferences locale={localeKey} />
 
-      <Container className="relative flex min-h-screen items-center py-14">
+      <Container className="relative flex min-h-screen items-center py-24 sm:py-28">
         <MotionFade className="w-full">
           <AppCard
             level={3}
-            className="brand-glow mx-auto max-w-4xl overflow-hidden border-border/70"
+            className="mx-auto w-full max-w-4xl overflow-hidden border-border/70 bg-surface-1/88 shadow-none"
           >
-            <CardContent className="relative p-7 text-center sm:p-10 lg:p-14">
-              <div className="pointer-events-none absolute -right-20 -top-20 h-64 w-64 rounded-full bg-brand-secondary/15 blur-3xl" />
-              <div className="pointer-events-none absolute -bottom-24 -left-16 h-72 w-72 rounded-full bg-brand-primary/15 blur-3xl" />
+            <CardContent className="relative p-6 text-center sm:p-10 lg:p-14">
+              <div className="pointer-events-none absolute -right-20 -top-20 h-48 w-48 rounded-full bg-brand-secondary/15 blur-3xl sm:h-64 sm:w-64" />
+              <div className="pointer-events-none absolute -bottom-24 -left-16 h-56 w-56 rounded-full bg-brand-primary/15 blur-3xl sm:h-72 sm:w-72" />
 
               <div className="relative">
-                <div className="mx-auto mb-8 flex w-fit items-center gap-2 rounded-surface border border-border bg-surface-1 px-2 py-2 shadow-sm">
-                  <ThemeToggle ariaLabel={tNav("themeToggle")} />
-                  <div className="flex items-center gap-2">
-                    {localeOptions.map((targetLocale) => (
-                      <Button
-                        key={targetLocale}
-                        asChild
-                        type="button"
-                        variant={targetLocale === localeKey ? "secondary" : "outline"}
-                        size="sm"
-                      >
-                        <Link
-                          href={getLocalizedPath(targetLocale, "/coming-soon")}
-                          aria-label={targetLocale.toUpperCase()}
-                        >
-                          {targetLocale.toUpperCase()}
-                        </Link>
-                      </Button>
-                    ))}
-                  </div>
-                </div>
-
                 <p className="inline-flex items-center gap-2 rounded-pill border border-border bg-surface-1 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-foreground/80">
                   <Sparkles className="h-3.5 w-3.5 text-brand-secondary" />
                   {t("badge")}
                 </p>
 
-                <div className="mt-7 flex items-center justify-center">
-                  <Image
-                    src="/logos/light-primary.svg"
-                    alt="mohfarawati"
-                    width={190}
-                    height={44}
-                    className="block h-auto w-[150px] dark:hidden sm:w-[190px]"
-                    priority
-                  />
-                  <Image
-                    src="/logos/dark-primary.svg"
-                    alt="mohfarawati"
-                    width={190}
-                    height={44}
-                    className="hidden h-auto w-[150px] dark:block sm:w-[190px]"
-                    priority
-                  />
+                <div className="mt-8">
+                  <AnimatedLogo />
                 </div>
 
-                <h1 className="text-balance mx-auto mt-7 max-w-3xl text-4xl font-semibold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
+                <h1 className="text-balance mx-auto mt-8 max-w-3xl text-4xl font-semibold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
                   {t("titleStart")}{" "}
                   <span className="brand-gradient-text">{t("titleAccent")}</span>{" "}
                   {t("titleEnd")}
@@ -116,7 +74,7 @@ export default async function ComingSoonPage({
                   {t("description")}
                 </p>
 
-                <p className="mx-auto mt-6 max-w-2xl text-sm text-foreground/72 sm:text-base">
+                <p className="mx-auto mt-4 max-w-2xl text-sm text-foreground/72 sm:mt-5 sm:text-base">
                   {t("note")}
                 </p>
               </div>