102 lines
3.8 KiB
TypeScript
102 lines
3.8 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.";
|
||
|
||
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 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>
|
||
</>
|
||
);
|
||
}
|