116 lines
5.2 KiB
TypeScript
116 lines
5.2 KiB
TypeScript
import { CalendarClock, Rocket, ShieldCheck, Sparkles } from "lucide-react";
|
|
|
|
import { MotionFade } from "@/components/motion-fade";
|
|
import { resolveLocale } from "@/lib/site-data";
|
|
|
|
type ComingSoonPageProps = {
|
|
params: {
|
|
locale: string;
|
|
};
|
|
};
|
|
|
|
export default function ComingSoonPage({ params: { locale } }: ComingSoonPageProps) {
|
|
const localeKey = resolveLocale(locale);
|
|
|
|
const copy =
|
|
localeKey === "de"
|
|
? {
|
|
badge: "In Vorbereitung",
|
|
title: "Wir bauen gerade etwas Grosses.",
|
|
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.",
|
|
}
|
|
: {
|
|
badge: "Preparing",
|
|
title: "We are building something big.",
|
|
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.",
|
|
};
|
|
|
|
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>
|
|
|
|
<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>
|
|
|
|
<p className="mt-5 max-w-2xl text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
|
|
{copy.description}
|
|
</p>
|
|
|
|
<div className="mt-8">
|
|
<a
|
|
href={`/${localeKey}/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>
|
|
</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>
|
|
);
|
|
}
|