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>

app/globals.css

@@ -40,6 +40,9 @@
 
   --brand-primary: 214 84% 42%;
   --brand-secondary: 191 78% 42%;
+  --ambient-primary-alpha: 0.18;
+  --ambient-secondary-alpha: 0.14;
+  --ambient-grid-alpha: 0.4;
 
   --radius-surface: 0rem;
   --radius-nested: 0rem;
@@ -111,6 +114,9 @@
 
   --brand-primary: 205 88% 64%;
   --brand-secondary: 190 76% 57%;
+  --ambient-primary-alpha: 0.22;
+  --ambient-secondary-alpha: 0.18;
+  --ambient-grid-alpha: 0.32;
 
   --shadow-xs: 0 1px 2px hsl(220 50% 2% / 0.42);
   --shadow-sm: 0 14px 30px -20px hsl(220 50% 2% / 0.48);
@@ -145,7 +151,24 @@ html.dark {
   }
 
   body {
-    @apply min-h-screen bg-background text-foreground antialiased;
+    @apply min-h-screen text-foreground antialiased;
+    background-color: hsl(var(--background));
+    background-image:
+      radial-gradient(
+        circle at top,
+        hsl(var(--brand-primary) / var(--ambient-primary-alpha)),
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at bottom right,
+        hsl(var(--brand-secondary) / var(--ambient-secondary-alpha)),
+        transparent 30%
+      ),
+      linear-gradient(hsl(var(--border) / var(--ambient-grid-alpha)) 1px, transparent 1px),
+      linear-gradient(90deg, hsl(var(--border) / var(--ambient-grid-alpha)) 1px, transparent 1px);
+    background-size: auto, auto, 24px 24px, 24px 24px;
+    background-position: center top, right bottom, center center, center center;
+    background-attachment: fixed;
   }
 
   a {
@@ -187,4 +210,18 @@ html.dark {
     background-size: 24px 24px;
     background-position: center center;
   }
+
+  .surface-ambient {
+    background-image:
+      radial-gradient(
+        circle at top,
+        hsl(var(--brand-primary) / calc(var(--ambient-primary-alpha) + 0.04)),
+        transparent 36%
+      ),
+      radial-gradient(
+        circle at bottom right,
+        hsl(var(--brand-secondary) / calc(var(--ambient-secondary-alpha) + 0.03)),
+        transparent 32%
+      );
+  }
 }

components/layout/animated-logo.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { motion, useMotionTemplate, useMotionValue, useSpring } from "framer-motion";
+import Image from "next/image";
+
+export function AnimatedLogo() {
+  const rotateX = useMotionValue(0);
+  const rotateY = useMotionValue(0);
+  const springX = useSpring(rotateX, { stiffness: 180, damping: 18 });
+  const springY = useSpring(rotateY, { stiffness: 180, damping: 18 });
+  const glowX = useMotionTemplate`${springY}px`;
+  const glowY = useMotionTemplate`${springX}px`;
+
+  function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const offsetX = event.clientX - rect.left - rect.width / 2;
+    const offsetY = event.clientY - rect.top - rect.height / 2;
+
+    rotateX.set((-offsetY / rect.height) * 14);
+    rotateY.set((offsetX / rect.width) * 14);
+  }
+
+  function handlePointerLeave() {
+    rotateX.set(0);
+    rotateY.set(0);
+  }
+
+  return (
+    <motion.div
+      onPointerMove={handlePointerMove}
+      onPointerLeave={handlePointerLeave}
+      animate={{
+        y: [0, -6, 0],
+        scale: [1, 1.015, 1],
+      }}
+      transition={{
+        duration: 8,
+        repeat: Number.POSITIVE_INFINITY,
+        ease: "easeInOut",
+      }}
+      style={{
+        rotateX: springX,
+        rotateY: springY,
+        transformPerspective: 900,
+      }}
+      className="relative mx-auto flex w-fit items-center justify-center"
+    >
+      <motion.div
+        animate={{
+          opacity: [0.28, 0.42, 0.28],
+          scale: [0.96, 1.04, 0.96],
+        }}
+        transition={{
+          duration: 6,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: "easeInOut",
+        }}
+        style={{
+          x: glowX,
+          y: glowY,
+        }}
+        className="absolute inset-0 -z-10 rounded-full bg-brand-primary/20 blur-3xl"
+      />
+
+      <Image
+        src="/logos/light-primary.svg"
+        alt="mohfarawati"
+        width={220}
+        height={52}
+        className="block h-auto w-[140px] dark:hidden sm:w-[180px] lg:w-[220px]"
+        priority
+      />
+      <Image
+        src="/logos/dark-primary.svg"
+        alt="mohfarawati"
+        width={220}
+        height={52}
+        className="hidden h-auto w-[140px] dark:block sm:w-[180px] lg:w-[220px]"
+        priority
+      />
+    </motion.div>
+  );
+}

components/layout/floating-preferences.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+import { LocaleToggle } from "@/components/layout/locale-toggle";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { cn } from "@/lib/utils";
+
+type FloatingPreferencesProps = {
+  locale: string;
+  className?: string;
+};
+
+export function FloatingPreferences({
+  locale,
+  className,
+}: FloatingPreferencesProps) {
+  const t = useTranslations("navigation");
+
+  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">
+        <ThemeToggle ariaLabel={t("themeToggle")} className="bg-surface-1/90" />
+        <LocaleToggle locale={locale} />
+      </div>
+    </div>
+  );
+}

components/layout/locale-toggle.tsx

@@ -1,8 +1,15 @@
 "use client";
 
+import { Languages } from "lucide-react";
 import { usePathname } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { AppLocale, getLocalizedPath, stripLocalePrefix } from "@/lib/locale";
 
 type LocaleToggleProps = {
@@ -16,20 +23,32 @@ export function LocaleToggle({ locale }: LocaleToggleProps) {
   const currentLocale = (["de", "en", "ar"].includes(locale) ? locale : "de") as AppLocale;
 
   return (
-    <div className="flex items-center gap-2">
-      {locales.map((targetLocale) => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
         <Button
-          key={targetLocale}
-          asChild
-          variant={targetLocale === currentLocale ? "secondary" : "outline"}
-          size="sm"
-          className="text-xs"
+          type="button"
+          variant="outline"
+          size="icon"
+          aria-label={`Locale: ${currentLocale.toUpperCase()}`}
         >
-          <a href={getLocalizedPath(targetLocale, currentPath)}>
-            {targetLocale.toUpperCase()}
-          </a>
+          <Languages className="h-4 w-4" />
         </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[8rem]">
+        {locales.map((targetLocale) => (
+          <DropdownMenuItem key={targetLocale} asChild>
+            <a
+              href={getLocalizedPath(targetLocale, currentPath)}
+              className="flex items-center justify-between gap-4"
+            >
+              <span>{targetLocale.toUpperCase()}</span>
+              {targetLocale === currentLocale ? (
+                <span className="text-xs text-muted-foreground">Active</span>
+              ) : null}
+            </a>
+          </DropdownMenuItem>
         ))}
-    </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }

messages/ar.json

@@ -14,12 +14,12 @@
     "copyright": "© {year} moh-sass. جميع الحقوق محفوظة."
   },
   "comingSoon": {
-    "badge": "Coming Soon",
-    "titleStart": "شيء",
-    "titleAccent": "جديد",
-    "titleEnd": "في الطريق.",
-    "description": "الموقع حالياً في وضع الصيانة. عم أنهي المحتوى واللمسات الأخيرة قبل الإطلاق.",
-    "note": "شكراً على صبرك. قريباً ستنطلق نسخة أوضح وأسرع وأقوى."
+    "badge": "قريباً",
+    "titleStart": "تجربة",
+    "titleAccent": "أقوى",
+    "titleEnd": "قيد الإطلاق.",
+    "description": "نعمل حالياً على تحديث الموقع وتحسين التفاصيل البصرية والمحتوى لنقدّم تجربة أوضح، أسرع، وأكثر احترافية.",
+    "note": "شكراً لصبرك. النسخة الجديدة ستصل قريباً بهوية أنضج وحضور أدق."
   },
   "homepage": {
     "heroKicker": "Digital Studio",

messages/de.json

@@ -15,11 +15,11 @@
   },
   "comingSoon": {
     "badge": "Coming Soon",
-    "titleStart": "Etwas",
-    "titleAccent": "Neues",
-    "titleEnd": "ist auf dem Weg.",
-    "description": "Meine Website ist aktuell im Wartungsmodus. Ich finalisiere Inhalte und den letzten Feinschliff vor dem Launch.",
-    "note": "Danke fuer deine Geduld. Bald geht eine klarere, schnellere und staerkere Version live."
+    "titleStart": "Ein praeziserer",
+    "titleAccent": "digitaler Auftritt",
+    "titleEnd": "entsteht gerade.",
+    "description": "Die Website wird aktuell in Inhalt, Gestaltung und Gesamtwirkung verfeinert, damit der Launch klarer, hochwertiger und stimmiger wird.",
+    "note": "Danke fuer deine Geduld. Die naechste Version geht bald mit mehr Klarheit, Tempo und Charakter live."
   },
   "homepage": {
     "heroKicker": "Digital Studio",

messages/en.json

@@ -15,11 +15,11 @@
   },
   "comingSoon": {
     "badge": "Coming Soon",
-    "titleStart": "Something",
-    "titleAccent": "new",
-    "titleEnd": "is on the way.",
-    "description": "My website is currently in maintenance mode. I am finalizing content and polish before launch.",
-    "note": "Thank you for your patience. A cleaner, faster, and stronger version is launching soon."
+    "titleStart": "A sharper",
+    "titleAccent": "digital presence",
+    "titleEnd": "is taking shape.",
+    "description": "The site is being refined with stronger storytelling, cleaner visuals, and a more polished experience before launch.",
+    "note": "Thank you for your patience. The next version is arriving soon with more clarity, speed, and intent."
   },
   "homepage": {
     "heroKicker": "Digital Studio",