Initial commit: ANOUMA website with Payload CMS, WebRTC meetings, and booking system
- Next.js 16 App Router site with the ANOUMA design system - Payload CMS (PostgreSQL) for offers, events, posts and page content - WebRTC video-call system with custom signaling server - SMTP email reminders and booking-request notifications - Customer accounts, calendar-based availability, and booking workflow
This commit is contained in:
maro
@@ -0,0 +1,66 @@
|
||||
import type { Metadata } from "next";
|
||||
import { notFound } from "next/navigation";
|
||||
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 { getOfferBySlug } from "@/lib/payload/content";
|
||||
import { moodForOffer } from "@/lib/angebote";
|
||||
import { mediaAlt, mediaUrl } from "@/lib/payload/media";
|
||||
import { OFFER_CATEGORIES } from "@/collections/Offers";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type Args = { params: Promise<{ slug: string }> };
|
||||
|
||||
export async function generateMetadata({ params }: Args): Promise<Metadata> {
|
||||
const { slug } = await params;
|
||||
const offer = await getOfferBySlug(slug);
|
||||
if (!offer) return {};
|
||||
return {
|
||||
title: offer.title,
|
||||
description: offer.shortDescription,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function OfferDetailPage({ params }: Args) {
|
||||
const { slug } = await params;
|
||||
const offer = await getOfferBySlug(slug);
|
||||
if (!offer) notFound();
|
||||
|
||||
const categoryLabel = OFFER_CATEGORIES.find((c) => c.value === offer.category)?.label;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
eyebrow={categoryLabel}
|
||||
title={offer.title}
|
||||
lead={offer.shortDescription}
|
||||
crumbs={[{ title: "Angebote", href: "/angebote" }, { title: offer.title }]}
|
||||
/>
|
||||
<div className="mx-auto -mt-10 max-w-5xl px-6 sm:px-8 lg:px-12">
|
||||
<div className="relative aspect-[21/9] w-full">
|
||||
<ImagePlaceholder
|
||||
mood={moodForOffer(offer)}
|
||||
label={offer.title}
|
||||
src={mediaUrl(offer.image, "hero")}
|
||||
alt={mediaAlt(offer.image) ?? offer.title}
|
||||
shape="soft"
|
||||
priority
|
||||
className="h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Section tone="plain">
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<RichText data={offer.description} />
|
||||
</div>
|
||||
</Section>
|
||||
<CTA
|
||||
title="Interesse geweckt?"
|
||||
lead={`Melde dich gerne für ein unverbindliches Gespräch zu „${offer.title}“.`}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import type { Metadata } from "next";
|
||||
import { PageHeader } from "@/components/PageHeader";
|
||||
import { Section, SectionHeading } from "@/components/Section";
|
||||
import { ImagePlaceholder } from "@/components/ImagePlaceholder";
|
||||
import { AngebotCard } from "@/components/AngebotCard";
|
||||
import { Button } from "@/components/Button";
|
||||
import { CTA } from "@/components/CTA";
|
||||
import { Reveal } from "@/components/Reveal";
|
||||
import { getOffers } from "@/lib/payload/content";
|
||||
import { getAngeboteIntroGlobal } from "@/lib/payload/globals";
|
||||
import { groupOffersByCategory, moodForOffer } from "@/lib/angebote";
|
||||
import { mediaAlt, mediaUrl } from "@/lib/payload/media";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const intro = await getAngeboteIntroGlobal();
|
||||
return {
|
||||
title: intro.title || "Angebote",
|
||||
description:
|
||||
intro.lead ||
|
||||
"Prozessbegleitung, Doula-Begleitung, Kindergruppen und Singkreise — die Angebote von Anouma im Überblick.",
|
||||
};
|
||||
}
|
||||
|
||||
export default async function AngebotePage() {
|
||||
const [intro, offers] = await Promise.all([getAngeboteIntroGlobal(), getOffers()]);
|
||||
const groups = groupOffersByCategory(offers);
|
||||
|
||||
const prozessbegleitung = groups.find((g) => g.category === "prozessbegleitung")?.offers[0];
|
||||
const doula = groups.find((g) => g.category === "doula-begleitung")?.offers[0];
|
||||
const kindergruppen = groups.find((g) => g.category === "kindergruppen");
|
||||
const singkreise = groups.find((g) => g.category === "singkreise");
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title={intro.title || "Angebote"}
|
||||
lead={intro.lead}
|
||||
crumbs={[{ title: "Angebote" }]}
|
||||
/>
|
||||
|
||||
{prozessbegleitung && (
|
||||
<Section tone="plain">
|
||||
<div className="grid items-center gap-14 lg:grid-cols-2">
|
||||
<Reveal>
|
||||
<div className="relative aspect-[4/5] w-full max-w-md lg:max-w-none">
|
||||
<ImagePlaceholder
|
||||
mood={moodForOffer(prozessbegleitung)}
|
||||
label={prozessbegleitung.title}
|
||||
src={mediaUrl(prozessbegleitung.image, "hero")}
|
||||
alt={mediaAlt(prozessbegleitung.image)}
|
||||
className="h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.1}>
|
||||
<p className="mb-3 text-xs font-medium uppercase tracking-[0.22em] text-anouma-plum">
|
||||
Für Erwachsene
|
||||
</p>
|
||||
<h2 className="font-serif text-4xl font-medium leading-tight text-anouma-plum">
|
||||
{prozessbegleitung.title}
|
||||
</h2>
|
||||
<p className="mt-5 text-lg leading-relaxed text-anouma-plum">
|
||||
{prozessbegleitung.shortDescription}
|
||||
</p>
|
||||
<div className="mt-8">
|
||||
<Button href={`/angebote/${prozessbegleitung.slug}`}>
|
||||
{prozessbegleitung.title} entdecken
|
||||
</Button>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{doula && (
|
||||
<Section tone="cream">
|
||||
<div className="grid items-center gap-14 lg:grid-cols-2">
|
||||
<Reveal className="order-2 lg:order-1">
|
||||
<p className="mb-3 text-xs font-medium uppercase tracking-[0.22em] text-anouma-plum">
|
||||
Kinderwunsch · Schwangerschaft · Geburt · Wochenbett
|
||||
</p>
|
||||
<h2 className="font-serif text-4xl font-medium leading-tight text-anouma-plum">
|
||||
{doula.title}
|
||||
</h2>
|
||||
<p className="mt-5 text-lg leading-relaxed text-anouma-plum">
|
||||
{doula.shortDescription}
|
||||
</p>
|
||||
<div className="mt-8">
|
||||
<Button href={`/angebote/${doula.slug}`}>{doula.title} entdecken</Button>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.1} className="order-1 lg:order-2">
|
||||
<div className="relative aspect-[4/5] w-full max-w-md lg:max-w-none lg:ml-auto">
|
||||
<ImagePlaceholder
|
||||
mood={moodForOffer(doula)}
|
||||
label={doula.title}
|
||||
src={mediaUrl(doula.image, "hero")}
|
||||
alt={mediaAlt(doula.image)}
|
||||
className="h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{kindergruppen && kindergruppen.offers.length > 0 && (
|
||||
<Section id="kindergruppen" tone="plain">
|
||||
<SectionHeading eyebrow="Für Kinder" title="Kindergruppen" lead={kindergruppen.label} />
|
||||
<div className="mt-14 grid gap-6 sm:grid-cols-2">
|
||||
{kindergruppen.offers.map((offer, i) => (
|
||||
<Reveal key={offer.slug} delay={i * 0.08}>
|
||||
<AngebotCard
|
||||
href={`/angebote/${offer.slug}`}
|
||||
title={offer.title}
|
||||
tagline={offer.shortDescription}
|
||||
mood={moodForOffer(offer)}
|
||||
imageSrc={mediaUrl(offer.image, "card")}
|
||||
size="large"
|
||||
/>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{singkreise && singkreise.offers.length > 0 && (
|
||||
<Section tone="warm">
|
||||
<SectionHeading eyebrow="Für Herz und Seele" title="Singkreise" />
|
||||
<div className="mt-14 grid gap-6 sm:grid-cols-3">
|
||||
{singkreise.offers.map((offer, i) => (
|
||||
<Reveal key={offer.slug} delay={i * 0.08}>
|
||||
<AngebotCard
|
||||
href={`/angebote/${offer.slug}`}
|
||||
title={offer.title}
|
||||
tagline={offer.shortDescription}
|
||||
mood={moodForOffer(offer)}
|
||||
imageSrc={mediaUrl(offer.image, "card")}
|
||||
/>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
<CTA
|
||||
title="Unsicher, welcher Raum passt?"
|
||||
lead="Melde dich gerne für ein unverbindliches Kennenlerngespräch — gemeinsam schauen wir, was dein Anliegen gerade braucht."
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import type { Metadata } from "next";
|
||||
import { PageHeader } from "@/components/PageHeader";
|
||||
import { Section } from "@/components/Section";
|
||||
import { AngebotCard } from "@/components/AngebotCard";
|
||||
import { CTA } from "@/components/CTA";
|
||||
import { Reveal } from "@/components/Reveal";
|
||||
import { getOffers } from "@/lib/payload/content";
|
||||
import { moodForOffer } from "@/lib/angebote";
|
||||
import { mediaUrl } from "@/lib/payload/media";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Singkreise",
|
||||
description: "Gemeinsam singen. Verbinden. Heilen. Für Herz und Seele.",
|
||||
};
|
||||
|
||||
export default async function SingkreisePage() {
|
||||
const offers = await getOffers();
|
||||
const singkreise = offers
|
||||
.filter((offer) => offer.category === "singkreise")
|
||||
.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
eyebrow="Singkreise"
|
||||
title="Singkreise – miteinander singen, klingen und sein"
|
||||
lead="Gemeinsam singen. Verbinden. Heilen. Für Herz und Seele."
|
||||
crumbs={[{ title: "Angebote", href: "/angebote" }, { title: "Singkreise" }]}
|
||||
/>
|
||||
|
||||
<Section tone="plain">
|
||||
<div className="grid gap-6 sm:grid-cols-3">
|
||||
{singkreise.map((offer, i) => (
|
||||
<Reveal key={offer.slug} delay={i * 0.08}>
|
||||
<AngebotCard
|
||||
href={`/angebote/${offer.slug}`}
|
||||
title={offer.title}
|
||||
tagline={offer.shortDescription}
|
||||
mood={moodForOffer(offer)}
|
||||
imageSrc={mediaUrl(offer.image, "card")}
|
||||
/>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<CTA
|
||||
title="Deine Stimme erklingen lassen"
|
||||
lead="Ob offen für alle, für Schwangere oder für Mamas mit Baby — melde dich, wenn du einen Kreis besuchen möchtest."
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user