61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
import { CheckCircle2 } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
import { MotionFade } from "@/components/motion-fade";
|
|
import { resolveLocale } from "@/lib/site-data";
|
|
|
|
type SuccessPageProps = {
|
|
params: {
|
|
locale: string;
|
|
};
|
|
};
|
|
|
|
export default function SuccessPage({ params: { locale } }: SuccessPageProps) {
|
|
const localeKey = resolveLocale(locale);
|
|
|
|
const copy =
|
|
localeKey === "de"
|
|
? {
|
|
title: "Danke fuer deine Nachricht",
|
|
text: "Wir haben deine Anfrage erhalten und melden uns zeitnah.",
|
|
home: "Zur Startseite",
|
|
contact: "Zur Kontaktseite",
|
|
}
|
|
: {
|
|
title: "Thank you for your message",
|
|
text: "We received your request and will reply shortly.",
|
|
home: "Go to homepage",
|
|
contact: "Back to contact",
|
|
};
|
|
|
|
return (
|
|
<div className="mx-auto flex w-full max-w-4xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
|
|
<MotionFade className="w-full">
|
|
<section className="w-full rounded-3xl border border-zinc-200 bg-white p-8 text-center dark:border-zinc-800 dark:bg-zinc-950">
|
|
<CheckCircle2 className="mx-auto h-12 w-12 text-emerald-500" />
|
|
<h1 className="mt-4 text-3xl font-semibold text-zinc-900 dark:text-zinc-100 sm:text-4xl">
|
|
{copy.title}
|
|
</h1>
|
|
<p className="mx-auto mt-3 max-w-2xl text-base text-zinc-600 dark:text-zinc-300">
|
|
{copy.text}
|
|
</p>
|
|
<div className="mt-6 flex flex-wrap items-center justify-center gap-3">
|
|
<Link
|
|
href={`/${localeKey}`}
|
|
className="inline-flex 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"
|
|
>
|
|
{copy.home}
|
|
</Link>
|
|
<Link
|
|
href={`/${localeKey}/contact`}
|
|
className="inline-flex rounded-lg border border-zinc-300 px-4 py-2.5 text-sm font-medium text-zinc-700 transition hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
|
|
>
|
|
{copy.contact}
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</MotionFade>
|
|
</div>
|
|
);
|
|
}
|