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">
+    <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%)",
+        }}
+      />
+
+      <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]" />
+
+      <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="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>
 
-            <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}
+              <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="mt-5 max-w-2xl text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
+              <p className="mx-auto mt-5 max-w-2xl text-base leading-relaxed text-muted-strong sm:text-lg">
                 {copy.description}
               </p>
 
-            <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>
+              <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>
   );

app/globals.css

@@ -3,22 +3,227 @@
 @tailwind utilities;
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --color-bg: #f5f6f8;
+  --color-fg: #111214;
+  --color-surface: #ffffff;
+  --color-surface-soft: #eef0f3;
+  --color-surface-elevated: #fdfdfd;
+
+  --color-border: #dde1e7;
+  --color-border-strong: #bec5d0;
+
+  --color-muted: #4b5565;
+  --color-muted-strong: #374151;
+  --color-subtle: #6b7380;
+
+  --color-inverse-bg: #111214;
+  --color-inverse-fg: #f3f4f6;
+
+  --color-brand-primary: #dd4124;
+  --color-brand-secondary: #f7b91f;
+
+  --color-success-bg: #dcfce7;
+  --color-success-fg: #166534;
+  --color-warning-bg: #fef3c7;
+  --color-warning-fg: #92400e;
+  --color-danger-bg: #fee2e2;
+  --color-danger-fg: #991b1b;
 }
 
 .dark {
-  --background: #0a0a0a;
-  --foreground: #ededed;
+  --color-bg: #090b0f;
+  --color-fg: #eef1f7;
+  --color-surface: #10141c;
+  --color-surface-soft: #151b24;
+  --color-surface-elevated: #1b2230;
+
+  --color-border: #2a3342;
+  --color-border-strong: #3a465a;
+
+  --color-muted: #c6cfdd;
+  --color-muted-strong: #dbe4f3;
+  --color-subtle: #98a4b8;
+
+  --color-inverse-bg: #eff3f9;
+  --color-inverse-fg: #0e1118;
+
+  --color-success-bg: rgba(22, 101, 52, 0.35);
+  --color-success-fg: #86efac;
+  --color-warning-bg: rgba(146, 64, 14, 0.35);
+  --color-warning-fg: #fde68a;
+  --color-danger-bg: rgba(153, 27, 27, 0.35);
+  --color-danger-fg: #fecaca;
+}
+
+html {
+  color-scheme: light;
+  background-color: var(--color-bg);
+}
+
+html.dark {
+  color-scheme: dark;
 }
 
 body {
-  color: var(--foreground);
-  background: var(--background);
+  min-height: 100vh;
+  color: var(--color-fg);
+  background: var(--color-bg);
+}
+
+::selection {
+  background: color-mix(in oklab, var(--color-brand-primary) 72%, black 0%);
+  color: #ffffff;
 }
 
 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  .bg-app {
+    background-color: var(--color-bg);
+  }
+
+  .bg-surface {
+    background-color: var(--color-surface);
+  }
+
+  .bg-surface-soft {
+    background-color: var(--color-surface-soft);
+  }
+
+  .bg-surface-elevated {
+    background-color: var(--color-surface-elevated);
+  }
+
+  .bg-inverse {
+    background-color: var(--color-inverse-bg);
+  }
+
+  .text-fg {
+    color: var(--color-fg);
+  }
+
+  .text-muted {
+    color: var(--color-muted);
+  }
+
+  .text-muted-strong {
+    color: var(--color-muted-strong);
+  }
+
+  .text-subtle {
+    color: var(--color-subtle);
+  }
+
+  .text-inverse {
+    color: var(--color-inverse-fg);
+  }
+
+  .border-default {
+    border-color: var(--color-border);
+  }
+
+  .border-strong {
+    border-color: var(--color-border-strong);
+  }
+
+  .status-success {
+    background-color: var(--color-success-bg);
+    color: var(--color-success-fg);
+  }
+
+  .status-warning {
+    background-color: var(--color-warning-bg);
+    color: var(--color-warning-fg);
+  }
+
+  .status-danger {
+    background-color: var(--color-danger-bg);
+    color: var(--color-danger-fg);
+  }
+
+  .hover-surface-soft:hover {
+    background-color: var(--color-surface-soft);
+  }
+
+  .hover-fg:hover {
+    color: var(--color-fg);
+  }
+
+  .group:hover .group-hover-fg {
+    color: var(--color-fg);
+  }
+
+  .group:hover .group-hover-border-strong {
+    border-color: var(--color-border-strong);
+  }
+
+  .btn-primary {
+    background-color: var(--color-inverse-bg);
+    color: var(--color-inverse-fg);
+  }
+
+  .btn-primary:hover {
+    opacity: 0.9;
+  }
+
+  .btn-secondary {
+    border: 1px solid var(--color-border-strong);
+    color: var(--color-muted-strong);
+    background-color: transparent;
+  }
+
+  .btn-secondary:hover {
+    background-color: var(--color-surface-soft);
+  }
+
+  .field-surface {
+    border: 1px solid var(--color-border-strong);
+    background-color: var(--color-surface);
+    color: var(--color-fg);
+  }
+
+  .field-surface:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-brand-primary) 20%, transparent);
+  }
+
+
+  .brand-gradient-text {
+    background: linear-gradient(120deg, var(--color-brand-primary), var(--color-brand-secondary));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  .brand-glow {
+    box-shadow:
+      0 10px 40px -16px color-mix(in oklab, var(--color-brand-primary) 52%, transparent),
+      0 8px 32px -18px color-mix(in oklab, var(--color-brand-secondary) 58%, transparent);
+  }
+
+  .float-slow {
+    animation: float-slow 9s ease-in-out infinite;
+  }
+
+  .float-medium {
+    animation: float-medium 7s ease-in-out infinite;
+  }
+}
+
+@keyframes float-slow {
+  0%,
+  100% {
+    transform: translateY(0px) translateX(0px) scale(1);
+  }
+  50% {
+    transform: translateY(-12px) translateX(10px) scale(1.04);
+  }
+}
+
+@keyframes float-medium {
+  0%,
+  100% {
+    transform: translateY(0px) translateX(0px) scale(1);
+  }
+  50% {
+    transform: translateY(10px) translateX(-8px) scale(1.03);
   }
 }