113 lines
5.0 KiB
TypeScript
113 lines
5.0 KiB
TypeScript
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 = {
|
|
params: {
|
|
locale: string;
|
|
};
|
|
};
|
|
|
|
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: "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 (
|
|
<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>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|