103 lines
3.9 KiB
TypeScript
103 lines
3.9 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { PageHeader } from "@/components/PageHeader";
|
|
import { Section } from "@/components/Section";
|
|
import { ContactForm } from "@/components/ContactForm";
|
|
import { ImagePlaceholder } from "@/components/ImagePlaceholder";
|
|
import { Reveal } from "@/components/Reveal";
|
|
import { getContactGlobal, getSEOSettingsGlobal } from "@/lib/payload/globals";
|
|
import { resolveSeo } from "@/lib/seo/resolve";
|
|
import { buildMetadata } from "@/lib/seo/metadata";
|
|
import { getSiteUrl } from "@/lib/seo/config";
|
|
import { JsonLd, webPageJsonLd } from "@/lib/seo/jsonld";
|
|
import { siteConfig } from "@/lib/site";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
const FALLBACK_DESCRIPTION = "Ich freue mich, von dir zu hören.";
|
|
const turnstileSiteKey = process.env.TURNSTILE_SITE_KEY ?? "";
|
|
|
|
export async function generateMetadata(): Promise<Metadata> {
|
|
const [contact, seoSettings] = await Promise.all([getContactGlobal(), getSEOSettingsGlobal()]);
|
|
const resolved = resolveSeo({
|
|
seo: contact.seo,
|
|
fallbackTitle: `Kontakt - ${siteConfig.name}`,
|
|
fallbackDescription: () => contact.lead || seoSettings.defaultDescription || FALLBACK_DESCRIPTION,
|
|
defaultOgImage: seoSettings.defaultOgImage,
|
|
});
|
|
return buildMetadata({
|
|
title: resolved.title,
|
|
description: resolved.description,
|
|
path: "/kontakt",
|
|
ogImageUrl: resolved.ogImageUrl,
|
|
keywords: resolved.keywords,
|
|
});
|
|
}
|
|
|
|
export default async function KontaktPage({ searchParams }: { searchParams: Promise<{ subject?: string }> }) {
|
|
const contact = await getContactGlobal();
|
|
const siteUrl = await getSiteUrl();
|
|
const params = await searchParams;
|
|
const isAppointment = params.subject === "Terminanfrage";
|
|
|
|
return (
|
|
<>
|
|
<JsonLd
|
|
data={webPageJsonLd({
|
|
name: contact.title || "Kontakt",
|
|
description: contact.lead || FALLBACK_DESCRIPTION,
|
|
url: `${siteUrl}/kontakt`,
|
|
})}
|
|
/>
|
|
<PageHeader
|
|
eyebrow={contact.eyebrow || "Kontakt"}
|
|
title={contact.title || "Ich freue mich, von dir zu hören"}
|
|
lead={contact.lead}
|
|
crumbs={[{ title: "Kontakt" }]}
|
|
blobTone="sage"
|
|
blobPosition="top-left"
|
|
compact
|
|
/>
|
|
|
|
<Section tone="plain">
|
|
<div className="grid gap-14 lg:grid-cols-[1fr_0.8fr]">
|
|
<Reveal>
|
|
<ContactForm siteKey={turnstileSiteKey} subjectPrefix={isAppointment ? "Terminanfrage" : "Allgemeine Anfrage"} type={isAppointment ? "appointment" : "contact"} submitLabel={isAppointment ? "Terminanfrage senden" : "Nachricht senden"} />
|
|
</Reveal>
|
|
|
|
<Reveal delay={0.1} className="space-y-8">
|
|
<div className="relative aspect-[4/3] w-full">
|
|
<ImagePlaceholder mood="mauve" label="Kontakt" className="h-full w-full" />
|
|
</div>
|
|
<div className="space-y-3 text-anouma-plum">
|
|
<p>
|
|
<span className="block text-xs font-medium uppercase tracking-[0.18em] text-anouma-plum/70">
|
|
E-Mail
|
|
</span>
|
|
<span className="text-lg text-anouma-plum">
|
|
{contact.email}
|
|
</span>
|
|
</p>
|
|
{contact.phone && (
|
|
<p>
|
|
<span className="block text-xs font-medium uppercase tracking-[0.18em] text-anouma-plum/70">
|
|
Telefon
|
|
</span>
|
|
<span className="text-lg text-anouma-plum">{contact.phone}</span>
|
|
</p>
|
|
)}
|
|
{contact.region && (
|
|
<p>
|
|
<span className="block text-xs font-medium uppercase tracking-[0.18em] text-anouma-plum/70">
|
|
Adresse
|
|
</span>
|
|
<span className="text-lg text-anouma-plum">{contact.region}</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
</Section>
|
|
</>
|
|
);
|
|
}
|