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

components/Section.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from "react";
+
+type ContainerProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export function Container({ children, className = "" }: ContainerProps) {
+  return <div className={`mx-auto w-full max-w-6xl px-6 sm:px-8 lg:px-12 ${className}`}>{children}</div>;
+}
+
+type SectionProps = {
+  children: ReactNode;
+  className?: string;
+  id?: string;
+  tone?: "cream" | "warm" | "plain" | "mauve";
+};
+
+const tones: Record<NonNullable<SectionProps["tone"]>, string> = {
+  cream: "bg-anouma-cream-light",
+  warm: "bg-anouma-cream-beige",
+  plain: "bg-background",
+  mauve: "bg-anouma-plum text-anouma-cream-light",
+};
+
+export function Section({ children, className = "", id, tone = "plain" }: SectionProps) {
+  return (
+    <section id={id} className={`py-20 sm:py-28 ${tones[tone]} ${className}`}>
+      <Container>{children}</Container>
+    </section>
+  );
+}
+
+type SectionHeadingProps = {
+  eyebrow?: string;
+  title: string;
+  lead?: string;
+  align?: "left" | "center";
+  className?: string;
+};
+
+export function SectionHeading({
+  eyebrow,
+  title,
+  lead,
+  align = "left",
+  className = "",
+}: SectionHeadingProps) {
+  return (
+    <div
+      className={`max-w-2xl ${align === "center" ? "mx-auto text-center" : ""} ${className}`}
+    >
+      {eyebrow && (
+        <p className="mb-3 text-xs font-medium uppercase tracking-[0.22em] text-anouma-plum">
+          {eyebrow}
+        </p>
+      )}
+      <h2 className="text-balance font-serif text-4xl font-medium leading-tight text-anouma-plum sm:text-5xl">
+        {title}
+      </h2>
+      {lead && (
+        <p className="mt-5 text-lg leading-relaxed text-anouma-plum">{lead}</p>
+      )}
+    </div>
+  );
+}