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,75 @@
+import type { Metadata } from "next";
+import { PageHeader } from "@/components/PageHeader";
+import { Section } from "@/components/Section";
+import { ContactForm } from "@/components/ContactForm";
+import { ImagePlaceholder } from "@/components/ImagePlaceholder";
+import { Reveal } from "@/components/Reveal";
+import { getContactGlobal } from "@/lib/payload/globals";
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const contact = await getContactGlobal();
+  return {
+    title: contact.title || "Kontakt",
+    description: contact.lead || "Ich freue mich, von dir zu hören.",
+  };
+}
+
+export default async function KontaktPage() {
+  const contact = await getContactGlobal();
+
+  return (
+    <>
+      <PageHeader
+        eyebrow={contact.eyebrow || "Kontakt"}
+        title={contact.title || "Ich freue mich, von dir zu hören"}
+        lead={contact.lead}
+        crumbs={[{ title: "Kontakt" }]}
+      />
+
+      <Section tone="plain">
+        <div className="grid gap-14 lg:grid-cols-[1fr_0.8fr]">
+          <Reveal>
+            <ContactForm toEmail={contact.email} />
+          </Reveal>
+
+          <Reveal delay={0.1} className="space-y-8">
+            <div className="relative aspect-[4/3] w-full">
+              <ImagePlaceholder mood="mauve" label="Kontakt" className="h-full w-full" />
+            </div>
+            <div className="space-y-3 text-anouma-plum">
+              <p>
+                <span className="block text-xs font-medium uppercase tracking-[0.18em] text-anouma-plum/70">
+                  E-Mail
+                </span>
+                <a
+                  href={`mailto:${contact.email}`}
+                  className="text-lg text-anouma-plum hover:text-anouma-mauve-dark"
+                >
+                  {contact.email}
+                </a>
+              </p>
+              {contact.phone && (
+                <p>
+                  <span className="block text-xs font-medium uppercase tracking-[0.18em] text-anouma-plum/70">
+                    Telefon
+                  </span>
+                  <span className="text-lg text-anouma-plum">{contact.phone}</span>
+                </p>
+              )}
+              {contact.region && (
+                <p>
+                  <span className="block text-xs font-medium uppercase tracking-[0.18em] text-anouma-plum/70">
+                    Region
+                  </span>
+                  <span className="text-lg text-anouma-plum">{contact.region}</span>
+                </p>
+              )}
+            </div>
+          </Reveal>
+        </div>
+      </Section>
+    </>
+  );
+}