100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { Mail, MapPin, Phone } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { getTranslations } from "next-intl/server";
|
|
|
|
import { Container } from "@/components/layout/container";
|
|
import { MotionFade } from "@/components/motion-fade";
|
|
import { buildLocalizedMetadata } from "@/lib/metadata";
|
|
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
|
|
import { AppCard } from "@/components/ui/app-card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
|
|
type ContactPageProps = {
|
|
params: {
|
|
locale: string;
|
|
};
|
|
};
|
|
|
|
export async function generateMetadata({
|
|
params: { locale },
|
|
}: ContactPageProps): Promise<Metadata> {
|
|
const localeKey = resolveLocale(locale);
|
|
const t = await getTranslations({ locale: localeKey, namespace: "contactPage" });
|
|
|
|
return await buildLocalizedMetadata({
|
|
locale: localeKey,
|
|
pathname: "/contact",
|
|
title: t("title"),
|
|
description: t("intro"),
|
|
});
|
|
}
|
|
|
|
export default async function ContactPage({ params: { locale } }: ContactPageProps) {
|
|
const localeKey = resolveLocale(locale);
|
|
const t = await getTranslations({ locale: localeKey, namespace: "contactPage" });
|
|
|
|
return (
|
|
<Container className="grid gap-6 py-10 lg:grid-cols-2 lg:py-14">
|
|
<MotionFade>
|
|
<AppCard level={3}>
|
|
<CardHeader>
|
|
<CardTitle className="text-3xl sm:text-4xl">{t("title")}</CardTitle>
|
|
<p className="text-base text-muted-foreground sm:text-lg">{t("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 text-brand-primary" />
|
|
+49 30 123456
|
|
</li>
|
|
<li className="inline-flex items-center gap-2">
|
|
<Mail className="h-4 w-4 text-brand-primary" />
|
|
hello@moh-sass.dev
|
|
</li>
|
|
<li className="inline-flex items-center gap-2">
|
|
<MapPin className="h-4 w-4 text-brand-primary" />
|
|
{t("city")}
|
|
</li>
|
|
</ul>
|
|
</CardContent>
|
|
</AppCard>
|
|
</MotionFade>
|
|
|
|
<MotionFade delay={0.05}>
|
|
<AppCard>
|
|
<CardContent className="pt-6">
|
|
<form className="grid gap-4">
|
|
<Label className="grid gap-2">
|
|
{t("name")}
|
|
<Input type="text" placeholder={t("name")} />
|
|
</Label>
|
|
|
|
<Label className="grid gap-2">
|
|
{t("email")}
|
|
<Input type="email" placeholder={t("email")} />
|
|
</Label>
|
|
|
|
<Label className="grid gap-2">
|
|
{t("message")}
|
|
<Textarea rows={5} placeholder={t("message")} />
|
|
</Label>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button type="button">{t("submit")}</Button>
|
|
<Button asChild variant="outline">
|
|
<Link href={getLocalizedPath(localeKey, "/success")}>{t("preview")}</Link>
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</AppCard>
|
|
</MotionFade>
|
|
</Container>
|
|
);
|
|
}
|