105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { Mail, MapPin, Phone } from "lucide-react";
|
|
import { getTranslations } from "next-intl/server";
|
|
|
|
import { Container } from "@/components/layout/container";
|
|
import { PageHero } from "@/components/layout/page-hero";
|
|
import { MotionFade } from "@/components/motion-fade";
|
|
import { ContactForm } from "@/components/site/contact-form";
|
|
import { buildLocalizedMetadata } from "@/lib/metadata";
|
|
import { getPublicContactProtectionSettings } from "@/lib/app-config";
|
|
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
|
|
import { AppCard } from "@/components/ui/app-card";
|
|
import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
|
|
import { submitContactFormAction } from "./actions";
|
|
|
|
type ContactPageProps = {
|
|
params: Promise<{
|
|
locale: string;
|
|
}>;
|
|
};
|
|
|
|
export async function generateMetadata({ params }: ContactPageProps): Promise<Metadata> {
|
|
const { locale } = await params;
|
|
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 }: ContactPageProps) {
|
|
const { locale } = await params;
|
|
const localeKey = resolveLocale(locale);
|
|
const [t, protection] = await Promise.all([
|
|
getTranslations({ locale: localeKey, namespace: "contactPage" }),
|
|
getPublicContactProtectionSettings(),
|
|
]);
|
|
|
|
return (
|
|
<>
|
|
<PageHero
|
|
locale={localeKey}
|
|
badge={t("heroBadge")}
|
|
title={t("heroTitle")}
|
|
description={t("intro")}
|
|
/>
|
|
|
|
<Container className="grid gap-6 pb-12 lg:grid-cols-2 lg:pb-16">
|
|
<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">
|
|
<ContactForm
|
|
action={submitContactFormAction}
|
|
locale={localeKey}
|
|
previewHref={getLocalizedPath(localeKey, "/success")}
|
|
protection={protection}
|
|
copy={{
|
|
name: t("name"),
|
|
email: t("email"),
|
|
phone: t("phone"),
|
|
company: t("company"),
|
|
message: t("message"),
|
|
note: t("note"),
|
|
submit: t("submit"),
|
|
preview: t("preview"),
|
|
}}
|
|
/>
|
|
</CardContent>
|
|
</AppCard>
|
|
</MotionFade>
|
|
</Container>
|
|
</>
|
|
);
|
|
}
|