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,48 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { JoinForm } from "@/components/meeting/JoinForm";
+import { OrganicBlob } from "@/components/OrganicBlob";
+import { getEventForJoin } from "@/lib/payload/content";
+import { combineDateAndTime } from "@/lib/meeting/status";
+
+export const dynamic = "force-dynamic";
+
+export const metadata: Metadata = {
+  title: "Meeting beitreten",
+};
+
+type Args = { params: Promise<{ slug: string }> };
+
+export default async function BeitretenPage({ params }: Args) {
+  const { slug } = await params;
+  const event = await getEventForJoin(slug);
+  if (!event || !event.isOnline) notFound();
+
+  const start = combineDateAndTime(event.date, event.startTime);
+  const dateLabel = start.toLocaleDateString("de-DE", { day: "2-digit", month: "long" });
+  const timeLabel = start.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" });
+
+  return (
+    <section className="relative flex min-h-[80vh] items-center overflow-hidden py-20">
+      <OrganicBlob tone="rose" className="-right-24 -top-24 h-96 w-96" />
+      <OrganicBlob tone="cream" className="-left-32 bottom-0 h-96 w-96" />
+      <div className="relative mx-auto w-full max-w-md px-6 text-center">
+        <Link href="/" className="font-serif text-2xl font-semibold tracking-[0.12em] text-anouma-mauve-dark">
+          ANOUMA
+        </Link>
+        <p className="mt-8 text-sm font-medium uppercase tracking-[0.18em] text-anouma-plum/70">
+          Dein Termin beginnt bald
+        </p>
+        <h1 className="mt-3 font-serif text-3xl font-medium text-anouma-plum">{event.title}</h1>
+        <p className="mt-2 text-base text-anouma-plum/80">
+          {dateLabel} · {timeLabel} Uhr
+        </p>
+
+        <div className="mt-10 rounded-[2rem] bg-white/70 p-8 text-left shadow-sm backdrop-blur">
+          <JoinForm slug={slug} />
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,149 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { headers } from "next/headers";
+import { getPayload } from "payload";
+import config from "@payload-config";
+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 { RegisterForm } from "@/components/meeting/RegisterForm";
+import { getEventBySlug } from "@/lib/payload/content";
+import { mediaAlt, mediaUrl } from "@/lib/payload/media";
+import { formatFullDate, formatTimeRange } from "@/lib/format";
+import { EVENT_CATEGORIES } from "@/collections/Events";
+import { canJoinMeeting, combineDateAndTime, getMeetingStatus, statusLabel } from "@/lib/meeting/status";
+
+export const dynamic = "force-dynamic";
+
+type Args = { params: Promise<{ slug: string }> };
+
+export async function generateMetadata({ params }: Args): Promise<Metadata> {
+  const { slug } = await params;
+  const event = await getEventBySlug(slug);
+  if (!event) return {};
+  return { title: event.title };
+}
+
+export default async function EventDetailPage({ params }: Args) {
+  const { slug } = await params;
+  const event = await getEventBySlug(slug);
+  if (!event) notFound();
+
+  const categoryLabel = EVENT_CATEGORIES.find((c) => c.value === event.category)?.label;
+  const time = formatTimeRange(event.startTime, event.endTime);
+
+  let meetingCard = null;
+  if (event.isOnline) {
+    const payload = await getPayload({ config });
+    const { user } = await payload.auth({ headers: await headers() });
+    const isHost = Boolean(user);
+    const settings = await payload.findGlobal({ slug: "meeting-settings" });
+    const start = combineDateAndTime(event.date, event.startTime);
+    const end = event.endTime
+      ? combineDateAndTime(event.date, event.endTime)
+      : new Date(start.getTime() + 60 * 60_000);
+    const status = getMeetingStatus({
+      start,
+      end,
+      joinWindowMinutes: isHost ? settings.hostJoinWindowMinutes : settings.participantJoinWindowMinutes,
+      closeAfterMinutes: settings.meetingCloseAfterMinutes,
+    });
+    const joinable = canJoinMeeting(status);
+
+    meetingCard = (
+      <div className="rounded-3xl bg-anouma-plum p-6 text-center text-anouma-cream-light">
+        <p className="text-xs font-medium uppercase tracking-[0.18em] text-anouma-cream-light/80">
+          Online-Termin
+        </p>
+        {joinable ? (
+          <Link
+            href={`/termine/${slug}/beitreten`}
+            className="mt-4 inline-flex w-full items-center justify-center rounded-full bg-white px-6 py-3 text-sm font-medium text-anouma-plum hover:bg-anouma-cream-light"
+          >
+            {statusLabel[status]}
+          </Link>
+        ) : (
+          <p className="mt-4 text-base">{statusLabel[status]}</p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <PageHeader
+        eyebrow={categoryLabel}
+        title={event.title}
+        crumbs={[{ title: "Termine", href: "/termine" }, { title: event.title }]}
+      />
+      <Section tone="plain">
+        <div className="grid gap-14 lg:grid-cols-[1fr_0.8fr]">
+          <div className="order-2 lg:order-1 space-y-10">
+            {event.description && <RichText data={event.description} />}
+            {event.registrationRequired && (
+              <div>
+                <h2 className="font-serif text-2xl font-medium text-anouma-plum">Anmeldung</h2>
+                <div className="mt-4 max-w-sm">
+                  <RegisterForm slug={slug} />
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="order-1 space-y-6 lg:order-2">
+            {meetingCard}
+            <div className="relative aspect-[4/3] w-full">
+              <ImagePlaceholder
+                mood="rose"
+                label={event.title}
+                src={mediaUrl(event.image, "card")}
+                alt={mediaAlt(event.image) ?? event.title}
+                className="h-full w-full"
+              />
+            </div>
+            <dl className="space-y-3 rounded-3xl bg-anouma-cream-light p-6 text-sm">
+              <div>
+                <dt className="font-medium uppercase tracking-wide text-anouma-plum/70">Datum</dt>
+                <dd className="text-base text-anouma-plum">{formatFullDate(event.date)}</dd>
+              </div>
+              {time && (
+                <div>
+                  <dt className="font-medium uppercase tracking-wide text-anouma-plum/70">Uhrzeit</dt>
+                  <dd className="text-base text-anouma-plum">{time}</dd>
+                </div>
+              )}
+              {event.location && (
+                <div>
+                  <dt className="font-medium uppercase tracking-wide text-anouma-plum/70">Ort</dt>
+                  <dd className="text-base text-anouma-plum">{event.location}</dd>
+                </div>
+              )}
+              {event.maxParticipants && (
+                <div>
+                  <dt className="font-medium uppercase tracking-wide text-anouma-plum/70">
+                    Teilnehmerzahl
+                  </dt>
+                  <dd className="text-base text-anouma-plum">max. {event.maxParticipants}</dd>
+                </div>
+              )}
+              {event.registrationRequired && event.registrationInfo && (
+                <div>
+                  <dt className="font-medium uppercase tracking-wide text-anouma-plum/70">
+                    Anmeldung
+                  </dt>
+                  <dd className="text-base text-anouma-plum">{event.registrationInfo}</dd>
+                </div>
+              )}
+            </dl>
+          </div>
+        </div>
+      </Section>
+      <CTA
+        title="Dabei sein?"
+        lead={`Melde dich gerne für „${event.title}“ an oder frag nach freien Plätzen.`}
+      />
+    </>
+  );
+}
@@ -0,0 +1,62 @@
+import type { Metadata } from "next";
+import { PageHeader } from "@/components/PageHeader";
+import { Section } from "@/components/Section";
+import { Reveal } from "@/components/Reveal";
+import { EventTeaserCard } from "@/components/EventTeaserCard";
+import { getAllEvents } from "@/lib/payload/content";
+
+export const dynamic = "force-dynamic";
+
+export const metadata: Metadata = {
+  title: "Termine",
+  description: "Aktuelle Termine und Veranstaltungen von Anouma.",
+};
+
+export default async function TerminePage() {
+  const events = await getAllEvents();
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const upcoming = events.filter((e) => new Date(e.date) >= today).reverse();
+  const past = events.filter((e) => new Date(e.date) < today);
+
+  return (
+    <>
+      <PageHeader
+        eyebrow="Termine"
+        title="Aktuelle Termine"
+        lead="Ein Überblick über anstehende Kreise, Begleitungen und Veranstaltungen."
+        crumbs={[{ title: "Termine" }]}
+      />
+
+      <Section tone="plain">
+        {upcoming.length === 0 ? (
+          <p className="text-lg text-anouma-plum">
+            Aktuell sind keine Termine geplant — schau gerne bald wieder vorbei oder melde dich
+            direkt über die <a href="/kontakt" className="underline underline-offset-4">Kontaktseite</a>.
+          </p>
+        ) : (
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {upcoming.map((event, i) => (
+              <Reveal key={event.slug} delay={Math.min(i * 0.06, 0.3)}>
+                <EventTeaserCard event={event} />
+              </Reveal>
+            ))}
+          </div>
+        )}
+      </Section>
+
+      {past.length > 0 && (
+        <Section tone="warm">
+          <h2 className="font-serif text-2xl font-medium text-anouma-plum">Vergangene Termine</h2>
+          <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {past.map((event) => (
+              <div key={event.slug} className="opacity-70">
+                <EventTeaserCard event={event} />
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  );
+}