Refine coming-soon UI glass controls and language toggle

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

@@ -1,6 +1,9 @@
-import { CalendarClock, Rocket, ShieldCheck, Sparkles } from "lucide-react";
+import { Sparkles } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
 
 import { MotionFade } from "@/components/motion-fade";
+import { ThemeToggle } from "@/components/theme-toggle";
 import { resolveLocale } from "@/lib/site-data";
 
 type ComingSoonPageProps = {
@@ -11,104 +14,98 @@ type ComingSoonPageProps = {
 
 export default function ComingSoonPage({ params: { locale } }: ComingSoonPageProps) {
   const localeKey = resolveLocale(locale);
+  const targetLocale = localeKey === "de" ? "en" : "de";
+  const languageLabel = targetLocale.toUpperCase();
 
   const copy =
     localeKey === "de"
       ? {
-          badge: "In Vorbereitung",
-          title: "Wir bauen gerade etwas Grosses.",
+          badge: "Coming Soon",
+          titleStart: "Etwas",
+          titleAccent: "Neues",
+          titleEnd: "ist auf dem Weg.",
           description:
-            "Die Website ist aktuell im Wartungsmodus. Wir finalisieren Inhalte, Feinschliff und Integrationen fuer den Launch.",
-          cardOneTitle: "Launch Fokus",
-          cardOneText: "Performance, UX und klare Conversion-Flows.",
-          cardTwoTitle: "Naechster Schritt",
-          cardTwoText: "Deployment-Checks und finale Inhalte.",
-          cardThreeTitle: "Status",
-          cardThreeText: "Systeme sind online und werden vorbereitet.",
-          adminLink: "Zum Root Bereich",
-          footer: "Danke fuer deine Geduld.",
+            "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.",
         }
       : {
-          badge: "Preparing",
-          title: "We are building something big.",
+          badge: "Coming Soon",
+          titleStart: "Something",
+          titleAccent: "new",
+          titleEnd: "is on the way.",
           description:
-            "The website is currently in maintenance mode. We are finalizing content, polish and integrations before launch.",
-          cardOneTitle: "Launch focus",
-          cardOneText: "Performance, UX and clear conversion flows.",
-          cardTwoTitle: "Next step",
-          cardTwoText: "Deployment checks and final content updates.",
-          cardThreeTitle: "Status",
-          cardThreeText: "Systems are online and being prepared.",
-          adminLink: "Open root area",
-          footer: "Thank you for your patience.",
+            "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.",
         };
 
   return (
-    <div className="relative overflow-hidden">
-      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(24,24,27,0.1),transparent_55%)] dark:bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.18),transparent_55%)]" />
-      <div className="relative mx-auto flex min-h-[70vh] w-full max-w-6xl flex-col justify-center gap-8 px-4 py-14 sm:px-6 lg:px-8 lg:py-20">
-        <MotionFade>
-          <section className="rounded-3xl border border-zinc-200 bg-white/95 p-8 shadow-sm backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/95 lg:p-12">
-            <p className="inline-flex items-center gap-2 rounded-full border border-zinc-300 bg-zinc-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-zinc-700 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300">
-              <Sparkles className="h-3.5 w-3.5" />
-              {copy.badge}
-            </p>
+    <div className="relative min-h-screen overflow-hidden bg-app">
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(circle at 14% 18%, color-mix(in oklab, var(--color-brand-secondary) 36%, transparent), transparent 48%), radial-gradient(circle at 86% 82%, color-mix(in oklab, var(--color-brand-primary) 32%, transparent), transparent 50%)",
+        }}
+      />
 
-            <h1 className="mt-5 max-w-3xl text-4xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-5xl lg:text-6xl">
-              {copy.title}
-            </h1>
+      <div className="pointer-events-none absolute left-1/2 top-[-120px] h-[340px] w-[340px] -translate-x-1/2 rounded-full bg-[color-mix(in_oklab,var(--color-brand-secondary)_32%,transparent)] blur-[96px]" />
 
-            <p className="mt-5 max-w-2xl text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
-              {copy.description}
-            </p>
+      <div className="relative mx-auto flex min-h-screen w-full max-w-6xl items-center px-4 py-14 sm:px-6 lg:px-8">
+        <MotionFade className="w-full">
+          <section className="brand-glow relative mx-auto max-w-4xl overflow-hidden rounded-[2.25rem] border border-default bg-surface-elevated p-7 text-center shadow-[0_24px_70px_-26px_rgba(0,0,0,0.35)] sm:p-10 lg:p-14">
+            <div className="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-[color-mix(in_oklab,var(--color-brand-secondary)_30%,transparent)] blur-[90px]" />
+            <div className="pointer-events-none absolute -bottom-24 -left-24 h-80 w-80 rounded-full bg-[color-mix(in_oklab,var(--color-brand-primary)_28%,transparent)] blur-[110px]" />
 
-            <div className="mt-8">
-              <a
-                href="/root"
-                className="inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300"
-              >
-                <ShieldCheck className="h-4 w-4" />
-                {copy.adminLink}
-              </a>
+            <div className="relative">
+              <div className="mx-auto mb-8 flex w-fit items-center gap-2 rounded-xl border border-strong bg-surface px-2 py-2">
+                <ThemeToggle />
+                <Link
+                  href={`/${targetLocale}/coming-soon`}
+                  className="inline-flex h-9 min-w-11 items-center justify-center rounded-md border border-strong px-3 text-xs font-semibold tracking-wide text-muted-strong transition hover-surface-soft"
+                  aria-label={`Switch language to ${targetLocale}`}
+                >
+                  {languageLabel}
+                </Link>
+              </div>
+
+              <p className="inline-flex items-center gap-2 rounded-full border border-default bg-surface px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-muted-strong">
+                <Sparkles className="h-3.5 w-3.5" />
+                {copy.badge}
+              </p>
+
+              <div className="mt-7 flex items-center justify-center">
+                <Image
+                  src="/logos/light-primary.svg"
+                  alt="Logo"
+                  width={190}
+                  height={44}
+                  className="block h-auto w-[150px] dark:hidden sm:w-[190px]"
+                  priority
+                />
+                <Image
+                  src="/logos/dark-primary.svg"
+                  alt="Logo"
+                  width={190}
+                  height={44}
+                  className="hidden h-auto w-[150px] dark:block sm:w-[190px]"
+                  priority
+                />
+              </div>
+
+              <h1 className="mx-auto mt-7 max-w-3xl text-4xl font-semibold tracking-tight text-fg sm:text-5xl lg:text-6xl">
+                {copy.titleStart} <span className="brand-gradient-text">{copy.titleAccent}</span> {copy.titleEnd}
+              </h1>
+
+              <p className="mx-auto mt-5 max-w-2xl text-base leading-relaxed text-muted-strong sm:text-lg">
+                {copy.description}
+              </p>
+
+              <p className="mx-auto mt-6 max-w-2xl text-sm text-subtle sm:text-base">{copy.note}</p>
             </div>
           </section>
         </MotionFade>
-
-        <section className="grid gap-4 md:grid-cols-3">
-          <MotionFade delay={0.05}>
-            <article className="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
-              <p className="inline-flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-200">
-                <Rocket className="h-4 w-4" />
-                {copy.cardOneTitle}
-              </p>
-              <p className="mt-3 text-sm text-zinc-600 dark:text-zinc-300">{copy.cardOneText}</p>
-            </article>
-          </MotionFade>
-
-          <MotionFade delay={0.1}>
-            <article className="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
-              <p className="inline-flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-200">
-                <CalendarClock className="h-4 w-4" />
-                {copy.cardTwoTitle}
-              </p>
-              <p className="mt-3 text-sm text-zinc-600 dark:text-zinc-300">{copy.cardTwoText}</p>
-            </article>
-          </MotionFade>
-
-          <MotionFade delay={0.15}>
-            <article className="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
-              <p className="inline-flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-200">
-                <ShieldCheck className="h-4 w-4" />
-                {copy.cardThreeTitle}
-              </p>
-              <p className="mt-3 text-sm text-zinc-600 dark:text-zinc-300">{copy.cardThreeText}</p>
-            </article>
-          </MotionFade>
-        </section>
-
-        <MotionFade delay={0.2}>
-          <p className="text-sm text-zinc-500 dark:text-zinc-400">{copy.footer}</p>
-        </MotionFade>
       </div>
     </div>
   );