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
2026-08-25 16:40:51 +02:00
commit 45261a0461
138 changed files with 23263 additions and 0 deletions
@@ -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."
+      />
+    </>
+  );
+}