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,64 @@
+import type { Metadata } from "next";
+import { PageHeader } from "@/components/PageHeader";
+import { Section, SectionHeading } from "@/components/Section";
+import { ContactForm } from "@/components/ContactForm";
+import { Reveal } from "@/components/Reveal";
+import { getBookingGlobal, getContactGlobal } from "@/lib/payload/globals";
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const booking = await getBookingGlobal();
+  return {
+    title: booking.title || "Termin buchen",
+    description: booking.lead || "Kennenlernen & Termine vereinbaren.",
+  };
+}
+
+export default async function TerminBuchenPage() {
+  const [booking, contact] = await Promise.all([getBookingGlobal(), getContactGlobal()]);
+
+  return (
+    <>
+      <PageHeader
+        eyebrow={booking.eyebrow || "Termin buchen"}
+        title={booking.title || "Kennenlernen & Termine vereinbaren"}
+        lead={booking.lead}
+        crumbs={[{ title: "Termin buchen" }]}
+      />
+
+      {booking.steps && booking.steps.length > 0 && (
+        <Section tone="cream">
+          <SectionHeading eyebrow="Ablauf" title="So findest du zu deinem Termin" />
+          <div className="mt-14 grid gap-8 sm:grid-cols-3">
+            {booking.steps.map((s, i) => (
+              <Reveal key={s.id ?? s.title} delay={i * 0.08}>
+                <p className="font-serif text-5xl font-medium text-anouma-rose">
+                  {String(i + 1).padStart(2, "0")}
+                </p>
+                <h3 className="mt-4 font-serif text-xl font-medium text-anouma-plum">{s.title}</h3>
+                <p className="mt-3 text-base leading-relaxed text-anouma-plum">{s.text}</p>
+              </Reveal>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <Section tone="plain">
+        <div className="mx-auto max-w-xl">
+          <SectionHeading title="Nachricht senden" align="left" />
+          <div className="mt-10">
+            <ContactForm
+              toEmail={contact.email}
+              subjectPrefix="Terminanfrage über anouma.org"
+              submitLabel="Terminanfrage senden"
+            />
+          </div>
+          {booking.formNote && (
+            <p className="mt-8 text-sm leading-relaxed text-anouma-plum/80">{booking.formNote}</p>
+          )}
+        </div>
+      </Section>
+    </>
+  );
+}