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,53 @@
+import type { ReactNode } from "react";
+import { OrganicBlob } from "@/components/OrganicBlob";
+import { ImagePlaceholder } from "@/components/ImagePlaceholder";
+import type { ImageMood } from "@/lib/angebote";
+
+type HeroProps = {
+  eyebrow?: string;
+  title: string;
+  children?: ReactNode;
+  actions?: ReactNode;
+  mood?: ImageMood;
+  imageSrc?: string;
+  imageAlt?: string;
+};
+
+export function Hero({ eyebrow, title, children, actions, mood = "rose", imageSrc, imageAlt }: HeroProps) {
+  return (
+    <section className="relative overflow-hidden pb-20 pt-16 sm:pb-28 sm:pt-24">
+      <OrganicBlob tone="rose" className="-right-24 -top-24 h-[28rem] w-[28rem]" />
+      <OrganicBlob tone="cream" className="-left-32 bottom-0 h-96 w-96" />
+
+      <div className="relative mx-auto grid max-w-6xl gap-14 px-6 sm:px-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-center lg:px-12">
+        <div className="animate-fade-up">
+          {eyebrow && (
+            <p className="mb-5 text-xs font-medium uppercase tracking-[0.24em] text-anouma-plum">
+              {eyebrow}
+            </p>
+          )}
+          <h1 className="text-balance font-serif text-5xl font-medium leading-[1.08] text-anouma-plum sm:text-6xl lg:text-7xl">
+            {title}
+          </h1>
+          {children && (
+            <div className="mt-7 max-w-xl text-lg leading-relaxed text-anouma-plum sm:text-xl">
+              {children}
+            </div>
+          )}
+          {actions && <div className="mt-9 flex flex-wrap gap-4">{actions}</div>}
+        </div>
+
+        <div className="relative mx-auto aspect-[4/5] w-full max-w-md animate-fade-in [animation-delay:200ms] lg:max-w-none">
+          <ImagePlaceholder
+            mood={mood}
+            label="Anouma — warme, naturverbundene Begleitung"
+            src={imageSrc}
+            alt={imageAlt}
+            priority
+            className="h-full w-full"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}