121 lines
4.5 KiB
TypeScript
121 lines
4.5 KiB
TypeScript
import { Mail, MapPin, Phone } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
import { MotionFade } from "@/components/motion-fade";
|
|
import { resolveLocale } from "@/lib/site-data";
|
|
|
|
type ContactPageProps = {
|
|
params: {
|
|
locale: string;
|
|
};
|
|
};
|
|
|
|
export default function ContactPage({ params: { locale } }: ContactPageProps) {
|
|
const localeKey = resolveLocale(locale);
|
|
|
|
const copy =
|
|
localeKey === "de"
|
|
? {
|
|
title: "Kontakt",
|
|
intro: "Schreib uns kurz dein Ziel und wir melden uns zeitnah.",
|
|
name: "Name",
|
|
email: "E-Mail",
|
|
message: "Nachricht",
|
|
submit: "Senden",
|
|
preview: "Success Seite ansehen",
|
|
phone: "+49 30 123456",
|
|
mail: "hello@moh-sass.dev",
|
|
city: "Berlin, Germany",
|
|
}
|
|
: {
|
|
title: "Contact",
|
|
intro: "Share your goal and we will get back quickly.",
|
|
name: "Name",
|
|
email: "Email",
|
|
message: "Message",
|
|
submit: "Submit",
|
|
preview: "Open success page",
|
|
phone: "+49 30 123456",
|
|
mail: "hello@moh-sass.dev",
|
|
city: "Berlin, Germany",
|
|
};
|
|
|
|
return (
|
|
<div className="mx-auto grid w-full max-w-6xl gap-6 px-4 py-10 sm:px-6 lg:grid-cols-2 lg:px-8 lg:py-14">
|
|
<MotionFade>
|
|
<section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
|
|
<h1 className="text-3xl font-semibold text-zinc-900 dark:text-zinc-100 sm:text-4xl">
|
|
{copy.title}
|
|
</h1>
|
|
<p className="mt-4 text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
|
|
{copy.intro}
|
|
</p>
|
|
|
|
<ul className="mt-6 space-y-3 text-sm text-zinc-700 dark:text-zinc-200">
|
|
<li className="inline-flex items-center gap-2">
|
|
<Phone className="h-4 w-4" />
|
|
{copy.phone}
|
|
</li>
|
|
<li className="inline-flex items-center gap-2">
|
|
<Mail className="h-4 w-4" />
|
|
{copy.mail}
|
|
</li>
|
|
<li className="inline-flex items-center gap-2">
|
|
<MapPin className="h-4 w-4" />
|
|
{copy.city}
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</MotionFade>
|
|
|
|
<MotionFade delay={0.05}>
|
|
<section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
|
|
<form className="grid gap-4">
|
|
<label className="grid gap-2 text-sm text-zinc-700 dark:text-zinc-200">
|
|
{copy.name}
|
|
<input
|
|
type="text"
|
|
className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
|
|
placeholder={copy.name}
|
|
/>
|
|
</label>
|
|
|
|
<label className="grid gap-2 text-sm text-zinc-700 dark:text-zinc-200">
|
|
{copy.email}
|
|
<input
|
|
type="email"
|
|
className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
|
|
placeholder={copy.email}
|
|
/>
|
|
</label>
|
|
|
|
<label className="grid gap-2 text-sm text-zinc-700 dark:text-zinc-200">
|
|
{copy.message}
|
|
<textarea
|
|
rows={5}
|
|
className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
|
|
placeholder={copy.message}
|
|
/>
|
|
</label>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<button
|
|
type="button"
|
|
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.submit}
|
|
</button>
|
|
<Link
|
|
href={`/${localeKey}/success`}
|
|
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.preview}
|
|
</Link>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</MotionFade>
|
|
</div>
|
|
);
|
|
}
|