🎬 Add MeetupShowcaseScene component for Meine Meetups (Scene 4)

Implements the meetup showcase scene with:
- Featured meetup card with 3D perspective and shadow effects
- Date/time display with calendar and clock icons
- Upcoming meetups list (Memmingen, Friedrichshafen)
- Action buttons for calendar integration
- Staggered animations with spring physics
- Audio cues for slide-in and badge appearances

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

videos/src/scenes/portal/MeetupShowcaseScene.test.tsx

@@ -0,0 +1,254 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { MeetupShowcaseScene } from "./MeetupShowcaseScene";
+
+/* eslint-disable @remotion/warn-native-media-tag */
+// Mock Remotion hooks
+vi.mock("remotion", () => ({
+  useCurrentFrame: vi.fn(() => 60),
+  useVideoConfig: vi.fn(() => ({ fps: 30, width: 1920, height: 1080 })),
+  interpolate: vi.fn((value, inputRange, outputRange, options) => {
+    const [inMin, inMax] = inputRange;
+    const [outMin, outMax] = outputRange;
+    let progress = (value - inMin) / (inMax - inMin);
+    if (options?.extrapolateLeft === "clamp") {
+      progress = Math.max(0, progress);
+    }
+    if (options?.extrapolateRight === "clamp") {
+      progress = Math.min(1, progress);
+    }
+    return outMin + progress * (outMax - outMin);
+  }),
+  spring: vi.fn(() => 1),
+  AbsoluteFill: vi.fn(({ children, className, style }) => (
+    <div data-testid="absolute-fill" className={className} style={style}>
+      {children}
+    </div>
+  )),
+  Img: vi.fn(({ src, className, style }) => (
+    <img data-testid="remotion-img" src={src} className={className} style={style} />
+  )),
+  staticFile: vi.fn((path: string) => `/static/${path}`),
+  Sequence: vi.fn(({ children, from, durationInFrames }) => (
+    <div data-testid="sequence" data-from={from} data-duration={durationInFrames}>
+      {children}
+    </div>
+  )),
+  Easing: {
+    out: vi.fn((fn) => fn),
+    cubic: vi.fn((t: number) => t),
+  },
+}));
+
+// Mock @remotion/media
+vi.mock("@remotion/media", () => ({
+  Audio: vi.fn(({ src, volume }) => (
+    <audio data-testid="audio" src={src} data-volume={volume} />
+  )),
+}));
+/* eslint-enable @remotion/warn-native-media-tag */
+
+// Mock MeetupCard component
+vi.mock("../../components/MeetupCard", () => ({
+  MeetupCard: vi.fn(({ logoSrc, name, location, delay, width, accentColor }) => (
+    <div
+      data-testid="meetup-card"
+      data-logo-src={logoSrc}
+      data-name={name}
+      data-location={location}
+      data-delay={delay}
+      data-width={width}
+      data-accent-color={accentColor}
+    >
+      {name}
+    </div>
+  )),
+}));
+
+describe("MeetupShowcaseScene", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders without errors", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders the AbsoluteFill container with correct classes", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
+    expect(absoluteFill).toBeInTheDocument();
+    expect(absoluteFill).toHaveClass("bg-zinc-900");
+    expect(absoluteFill).toHaveClass("overflow-hidden");
+  });
+
+  it("renders the wallpaper background image", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const wallpaper = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-wallpaper.png")
+    );
+    expect(wallpaper).toBeInTheDocument();
+  });
+
+  it("renders the section header with correct text", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    const header = container.querySelector("h1");
+    expect(header).toBeInTheDocument();
+    expect(header).toHaveTextContent("Meine nächsten Meetup Termine");
+    expect(header).toHaveClass("text-5xl");
+    expect(header).toHaveClass("font-bold");
+    expect(header).toHaveClass("text-white");
+  });
+
+  it("renders the subtitle text", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    expect(container.textContent).toContain("Deine kommenden Bitcoin-Treffen in der Region");
+  });
+
+  it("renders the featured MeetupCard for Kempten", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    const meetupCard = container.querySelector('[data-testid="meetup-card"]');
+    expect(meetupCard).toBeInTheDocument();
+    expect(meetupCard).toHaveAttribute("data-name", "EINUNDZWANZIG Kempten");
+    expect(meetupCard).toHaveAttribute("data-location", "Kempten im Allgäu");
+    expect(meetupCard?.getAttribute("data-logo-src")).toContain("EinundzwanzigKempten.png");
+  });
+
+  it("renders the MeetupCard with correct width for featured display", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    const meetupCard = container.querySelector('[data-testid="meetup-card"]');
+    expect(meetupCard).toHaveAttribute("data-width", "450");
+  });
+
+  it("renders the date and time for the featured meetup", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    expect(container.textContent).toContain("Di, 28. Jan 2025");
+    expect(container.textContent).toContain("19:00 Uhr");
+  });
+
+  it('renders the "Nächster Termin" badge', () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    expect(container.textContent).toContain("Nächster Termin");
+  });
+
+  it('renders the "Weitere Termine" section header', () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    const sectionHeaders = container.querySelectorAll("h3");
+    const furtherHeader = Array.from(sectionHeaders).find(
+      (h3) => h3.textContent === "Weitere Termine"
+    );
+    expect(furtherHeader).toBeInTheDocument();
+    expect(furtherHeader).toHaveClass("uppercase");
+    expect(furtherHeader).toHaveClass("tracking-wider");
+  });
+
+  it("renders upcoming meetups for Memmingen", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    expect(container.textContent).toContain("EINUNDZWANZIG Memmingen");
+    expect(container.textContent).toContain("Mi, 29. Jan 2025");
+    expect(container.textContent).toContain("19:30 Uhr");
+  });
+
+  it("renders upcoming meetups for Friedrichshafen", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    expect(container.textContent).toContain("EINUNDZWANZIG Friedrichshafen");
+    expect(container.textContent).toContain("Do, 30. Jan 2025");
+    expect(container.textContent).toContain("20:00 Uhr");
+  });
+
+  it("renders logos for upcoming meetups", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const memmingenLogo = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("EinundzwanzigMemmingen.png")
+    );
+    const friedrichshafenLogo = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("EinundzwanzigFriedrichshafen.png")
+    );
+    expect(memmingenLogo).toBeInTheDocument();
+    expect(friedrichshafenLogo).toBeInTheDocument();
+  });
+
+  it('renders the "Zum Kalender hinzufügen" action button', () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    expect(container.textContent).toContain("Zum Kalender hinzufügen");
+  });
+
+  it('renders the "Alle Meetups anzeigen" action button', () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    expect(container.textContent).toContain("Alle Meetups anzeigen");
+  });
+
+  it("renders audio sequences for sound effects", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    const sequences = container.querySelectorAll('[data-testid="sequence"]');
+    expect(sequences.length).toBeGreaterThanOrEqual(3);
+  });
+
+  it("includes slide-in audio", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const slideInAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("slide-in.mp3")
+    );
+    expect(slideInAudio).toBeInTheDocument();
+  });
+
+  it("includes card-slide audio", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const cardSlideAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("card-slide.mp3")
+    );
+    expect(cardSlideAudio).toBeInTheDocument();
+  });
+
+  it("includes badge-appear audio", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const badgeAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("badge-appear.mp3")
+    );
+    expect(badgeAudio).toBeInTheDocument();
+  });
+
+  it("renders vignette overlay with pointer-events-none", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    const vignettes = container.querySelectorAll(".pointer-events-none");
+    expect(vignettes.length).toBeGreaterThan(0);
+  });
+
+  it("applies 3D perspective transform styles", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    const elements = container.querySelectorAll('[style*="perspective"]');
+    expect(elements.length).toBeGreaterThan(0);
+  });
+
+  it("renders SVG icons for calendar and clock", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    const svgElements = container.querySelectorAll("svg");
+    // Should have calendar icon, clock icon, calendar-plus icon, and list icon (at least 4)
+    expect(svgElements.length).toBeGreaterThanOrEqual(4);
+  });
+
+  it("renders the primary action button with Bitcoin orange styling", () => {
+    const { container } = render(<MeetupShowcaseScene />);
+    // Look for element containing "Zum Kalender hinzufügen" which should be the primary button
+    const buttons = Array.from(container.querySelectorAll("div")).filter(
+      (el) => el.textContent?.includes("Zum Kalender hinzufügen")
+    );
+    expect(buttons.length).toBeGreaterThan(0);
+    // Verify at least one element has the orange background color
+    const hasOrangeButton = buttons.some((el) =>
+      el.getAttribute("style")?.includes("rgb(247, 147, 26)")
+    );
+    expect(hasOrangeButton).toBe(true);
+  });
+});