107 lines
3.4 KiB
TypeScript
107 lines
3.4 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";
|
|
import { Button } from "@/src/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/src/components/ui/card";
|
|
import { Input } from "@/src/components/ui/input";
|
|
import { Label } from "@/src/components/ui/label";
|
|
import { Textarea } from "@/src/components/ui/textarea";
|
|
|
|
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>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-3xl sm:text-4xl">{copy.title}</CardTitle>
|
|
<p className="text-base text-muted-foreground sm:text-lg">{copy.intro}</p>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ul className="space-y-3 text-sm text-foreground/85">
|
|
<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>
|
|
</CardContent>
|
|
</Card>
|
|
</MotionFade>
|
|
|
|
<MotionFade delay={0.05}>
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<form className="grid gap-4">
|
|
<Label className="grid gap-2">
|
|
{copy.name}
|
|
<Input type="text" placeholder={copy.name} />
|
|
</Label>
|
|
|
|
<Label className="grid gap-2">
|
|
{copy.email}
|
|
<Input type="email" placeholder={copy.email} />
|
|
</Label>
|
|
|
|
<Label className="grid gap-2">
|
|
{copy.message}
|
|
<Textarea rows={5} placeholder={copy.message} />
|
|
</Label>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button type="button">{copy.submit}</Button>
|
|
<Button asChild variant="outline">
|
|
<Link href={`/${localeKey}/success`}>{copy.preview}</Link>
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</MotionFade>
|
|
</div>
|
|
);
|
|
}
|