Finalize multilingual routing and translations

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

@@ -1,10 +1,17 @@
+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 { Container } from "@/components/layout/container";
 import { MotionFade } from "@/components/motion-fade";
 import { ThemeToggle } from "@/components/theme-toggle";
-import { resolveLocale } from "@/lib/site-data";
+import { buildLocalizedMetadata } from "@/lib/metadata";
+import { getLocalizedPath, 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 = {
   params: {
@@ -12,101 +19,108 @@ type ComingSoonPageProps = {
   };
 };
 
-export default function ComingSoonPage({ params: { locale } }: ComingSoonPageProps) {
+export async function generateMetadata({
+  params: { locale },
+}: ComingSoonPageProps): Promise<Metadata> {
   const localeKey = resolveLocale(locale);
-  const targetLocale = localeKey === "de" ? "en" : "de";
-  const languageLabel = targetLocale.toUpperCase();
+  const t = await getTranslations({ locale: localeKey, namespace: "comingSoon" });
 
-  const copy =
-    localeKey === "de"
-      ? {
-          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.",
-        }
-      : {
-          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.",
-        };
+  return buildLocalizedMetadata({
+    locale: localeKey,
+    pathname: "/coming-soon",
+    title: `${t("badge")} | moh-sass`,
+    description: t("description"),
+  });
+}
+
+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-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="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="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">
+      <Container className="relative flex min-h-screen items-center py-14">
         <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]" />
+          <AppCard
+            level={3}
+            className="brand-glow mx-auto max-w-4xl overflow-hidden border-border/70"
+          >
+            <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" />
 
-            <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 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>
+
+                <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">
+                  {t("titleStart")}{" "}
+                  <span className="brand-gradient-text">{t("titleAccent")}</span>{" "}
+                  {t("titleEnd")}
+                </h1>
+
+                <p className="mx-auto mt-5 max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
+                  {t("description")}
+                </p>
+
+                <p className="mx-auto mt-6 max-w-2xl text-sm text-foreground/72 sm:text-base">
+                  {t("note")}
+                </p>
               </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>
+            </CardContent>
+          </AppCard>
         </MotionFade>
-      </div>
+      </Container>
     </div>
   );
 }