110 lines
4.1 KiB
TypeScript
110 lines
4.1 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { PageHeader } from "@/components/PageHeader";
|
|
import { Section } from "@/components/Section";
|
|
import { ImagePlaceholder } from "@/components/ImagePlaceholder";
|
|
import { RichText } from "@/components/RichText";
|
|
import { CTA } from "@/components/CTA";
|
|
import { Reveal } from "@/components/Reveal";
|
|
import { OrganicBlob } from "@/components/OrganicBlob";
|
|
import { getAboutGlobal, getSEOSettingsGlobal } from "@/lib/payload/globals";
|
|
import { mediaAlt, mediaUrl } from "@/lib/payload/media";
|
|
import { resolveSeo } from "@/lib/seo/resolve";
|
|
import { buildMetadata } from "@/lib/seo/metadata";
|
|
import { getSiteUrl } from "@/lib/seo/config";
|
|
import { excerptFromRichText } from "@/lib/seo/textExcerpt";
|
|
import { JsonLd, webPageJsonLd } from "@/lib/seo/jsonld";
|
|
import { siteConfig } from "@/lib/site";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export async function generateMetadata(): Promise<Metadata> {
|
|
const [about, seoSettings] = await Promise.all([getAboutGlobal(), getSEOSettingsGlobal()]);
|
|
const resolved = resolveSeo({
|
|
seo: about.seo,
|
|
fallbackTitle: `Über mich - ${siteConfig.name}`,
|
|
fallbackDescription: () => excerptFromRichText(about.body) || seoSettings.defaultDescription || "Mein Weg, meine Werte und was mich bewegt.",
|
|
fallbackImage: about.portrait,
|
|
defaultOgImage: seoSettings.defaultOgImage,
|
|
});
|
|
return buildMetadata({
|
|
title: resolved.title,
|
|
description: resolved.description,
|
|
path: "/ueber-mich",
|
|
ogImageUrl: resolved.ogImageUrl,
|
|
keywords: resolved.keywords,
|
|
});
|
|
}
|
|
|
|
export default async function UeberMichPage() {
|
|
const about = await getAboutGlobal();
|
|
const hasClosing = about.closingHighlight || about.closingParagraph;
|
|
const siteUrl = await getSiteUrl();
|
|
|
|
return (
|
|
<>
|
|
<JsonLd
|
|
data={webPageJsonLd({
|
|
name: about.title || "Über mich",
|
|
description: excerptFromRichText(about.body) || "Mein Weg, meine Werte und was mich bewegt.",
|
|
url: `${siteUrl}/ueber-mich`,
|
|
})}
|
|
/>
|
|
<PageHeader
|
|
eyebrow={about.eyebrow || "Über mich"}
|
|
title={about.title || "Mein Weg, meine Werte und was mich bewegt"}
|
|
crumbs={[{ title: "Über mich" }]}
|
|
/>
|
|
|
|
<Section tone="plain">
|
|
<div className="grid gap-14 lg:grid-cols-[0.85fr_1.15fr] lg:items-start">
|
|
<Reveal className="lg:sticky lg:top-28">
|
|
<div className="relative mx-auto aspect-[4/5] w-full max-w-sm lg:max-w-none">
|
|
<ImagePlaceholder
|
|
mood="dustyrose"
|
|
label="Portrait"
|
|
src={mediaUrl(about.portrait, "hero")}
|
|
alt={mediaAlt(about.portrait)}
|
|
priority
|
|
className="h-full w-full"
|
|
/>
|
|
</div>
|
|
</Reveal>
|
|
<div className="max-w-2xl">
|
|
<Reveal>
|
|
<RichText data={about.body} />
|
|
</Reveal>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
|
|
{hasClosing && (
|
|
<section className="relative overflow-hidden bg-anouma-plum py-24 text-anouma-cream-light">
|
|
<OrganicBlob tone="mauve" className="-left-24 top-0 h-96 w-96 opacity-25" />
|
|
<div className="relative mx-auto max-w-3xl px-6 text-center sm:px-8">
|
|
<Reveal>
|
|
{about.closingLead && (
|
|
<p className="text-lg text-anouma-cream-light/90">{about.closingLead}</p>
|
|
)}
|
|
{about.closingHighlight && (
|
|
<p className="mt-6 text-balance font-serif text-3xl italic leading-snug sm:text-4xl">
|
|
„{about.closingHighlight}“
|
|
</p>
|
|
)}
|
|
{about.closingParagraph && (
|
|
<p className="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-anouma-cream-light/90">
|
|
{about.closingParagraph}
|
|
</p>
|
|
)}
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<CTA
|
|
title="Lust, dich kennenzulernen"
|
|
lead="Wenn dich mein Weg anspricht, freue ich mich, dich in einem persönlichen Gespräch kennenzulernen."
|
|
/>
|
|
</>
|
|
);
|
|
}
|