mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-27 06:33:18 +00:00
🎬 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>
This commit is contained in:
HolgerHatGarKeineNode
@@ -3,6 +3,7 @@ import { inconsolataFont } from "./fonts/inconsolata";
|
||||
import { PortalIntroScene } from "./scenes/portal/PortalIntroScene";
|
||||
import { PortalTitleScene } from "./scenes/portal/PortalTitleScene";
|
||||
import { DashboardOverviewScene } from "./scenes/portal/DashboardOverviewScene";
|
||||
import { MeetupShowcaseScene } from "./scenes/portal/MeetupShowcaseScene";
|
||||
|
||||
/**
|
||||
* PortalPresentation - Main composition for the Einundzwanzig Portal presentation video
|
||||
@@ -154,7 +155,7 @@ export const PortalPresentation: React.FC = () => {
|
||||
durationInFrames={sceneFrames.meineMeetups.duration}
|
||||
premountFor={fps}
|
||||
>
|
||||
<PlaceholderScene name="Meine Meetups" sceneNumber={4} />
|
||||
<MeetupShowcaseScene />
|
||||
</Sequence>
|
||||
|
||||
{/* Scene 5: Top Länder (12s) */}
|
||||
|
||||
254
videos/src/scenes/portal/MeetupShowcaseScene.test.tsx
Normal file
254
videos/src/scenes/portal/MeetupShowcaseScene.test.tsx
Normal file
@@ -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);
|
||||
});
|
||||
});
|
||||
567
videos/src/scenes/portal/MeetupShowcaseScene.tsx
Normal file
567
videos/src/scenes/portal/MeetupShowcaseScene.tsx
Normal file
@@ -0,0 +1,567 @@
|
||||
import {
|
||||
AbsoluteFill,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
interpolate,
|
||||
spring,
|
||||
Img,
|
||||
staticFile,
|
||||
Sequence,
|
||||
} from "remotion";
|
||||
import { Audio } from "@remotion/media";
|
||||
import { MeetupCard } from "../../components/MeetupCard";
|
||||
|
||||
// Spring configurations
|
||||
const SNAPPY = { damping: 15, stiffness: 80 };
|
||||
const BOUNCY = { damping: 12 };
|
||||
|
||||
// Stagger delay between meetup list items
|
||||
const LIST_ITEM_STAGGER = 8;
|
||||
|
||||
// Upcoming meetup data
|
||||
const UPCOMING_MEETUPS = [
|
||||
{
|
||||
name: "EINUNDZWANZIG Kempten",
|
||||
location: "Kempten im Allgäu",
|
||||
date: "Di, 28. Jan 2025",
|
||||
time: "19:00 Uhr",
|
||||
logoPath: "logos/EinundzwanzigKempten.png",
|
||||
isFeatured: true,
|
||||
},
|
||||
{
|
||||
name: "EINUNDZWANZIG Memmingen",
|
||||
location: "Memmingen",
|
||||
date: "Mi, 29. Jan 2025",
|
||||
time: "19:30 Uhr",
|
||||
logoPath: "logos/EinundzwanzigMemmingen.png",
|
||||
isFeatured: false,
|
||||
},
|
||||
{
|
||||
name: "EINUNDZWANZIG Friedrichshafen",
|
||||
location: "Friedrichshafen",
|
||||
date: "Do, 30. Jan 2025",
|
||||
time: "20:00 Uhr",
|
||||
logoPath: "logos/EinundzwanzigFriedrichshafen.png",
|
||||
isFeatured: false,
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* MeetupShowcaseScene - Scene 4: Meine nächsten Meetup Termine (12 seconds / 360 frames @ 30fps)
|
||||
*
|
||||
* Animation sequence:
|
||||
* 1. Section header animates in with fade + translateY
|
||||
* 2. Featured meetup card (Kempten) appears with 3D perspective and shadow
|
||||
* 3. Date/time info animates below the featured card
|
||||
* 4. List of upcoming meetups (Memmingen, Friedrichshafen) fade in staggered
|
||||
* 5. Action buttons appear at the end
|
||||
* 6. Audio: slide-in.mp3, badge-appear.mp3
|
||||
*/
|
||||
export const MeetupShowcaseScene: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
// 3D Perspective entrance animation (0-60 frames)
|
||||
const perspectiveSpring = spring({
|
||||
frame,
|
||||
fps,
|
||||
config: { damping: 20, stiffness: 60 },
|
||||
});
|
||||
|
||||
const perspectiveX = interpolate(perspectiveSpring, [0, 1], [20, 0]);
|
||||
const perspectiveScale = interpolate(perspectiveSpring, [0, 1], [0.9, 1]);
|
||||
const perspectiveOpacity = interpolate(perspectiveSpring, [0, 1], [0, 1]);
|
||||
|
||||
// Header entrance animation (delayed)
|
||||
const headerDelay = Math.floor(0.3 * fps);
|
||||
const headerSpring = spring({
|
||||
frame: frame - headerDelay,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
const headerOpacity = interpolate(headerSpring, [0, 1], [0, 1]);
|
||||
const headerY = interpolate(headerSpring, [0, 1], [-40, 0]);
|
||||
|
||||
// Featured card entrance delay
|
||||
const featuredCardDelay = Math.floor(0.8 * fps);
|
||||
|
||||
// Featured card 3D shadow animation
|
||||
const featuredSpring = spring({
|
||||
frame: frame - featuredCardDelay,
|
||||
fps,
|
||||
config: { damping: 18, stiffness: 70 },
|
||||
});
|
||||
const featuredScale = interpolate(featuredSpring, [0, 1], [0.85, 1]);
|
||||
const featuredOpacity = interpolate(featuredSpring, [0, 1], [0, 1]);
|
||||
const featuredRotateX = interpolate(featuredSpring, [0, 1], [15, 0]);
|
||||
const featuredShadowY = interpolate(featuredSpring, [0, 1], [20, 40]);
|
||||
const featuredShadowBlur = interpolate(featuredSpring, [0, 1], [10, 60]);
|
||||
|
||||
// Date/time info animation (after featured card)
|
||||
const dateDelay = featuredCardDelay + Math.floor(0.4 * fps);
|
||||
const dateSpring = spring({
|
||||
frame: frame - dateDelay,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
const dateOpacity = interpolate(dateSpring, [0, 1], [0, 1]);
|
||||
const dateY = interpolate(dateSpring, [0, 1], [20, 0]);
|
||||
|
||||
// Upcoming list header delay
|
||||
const listHeaderDelay = featuredCardDelay + Math.floor(1 * fps);
|
||||
const listHeaderSpring = spring({
|
||||
frame: frame - listHeaderDelay,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
const listHeaderOpacity = interpolate(listHeaderSpring, [0, 1], [0, 1]);
|
||||
const listHeaderX = interpolate(listHeaderSpring, [0, 1], [-30, 0]);
|
||||
|
||||
// Action buttons animation
|
||||
const buttonsDelay = Math.floor(3.5 * fps);
|
||||
const buttonsSpring = spring({
|
||||
frame: frame - buttonsDelay,
|
||||
fps,
|
||||
config: BOUNCY,
|
||||
});
|
||||
const buttonsOpacity = interpolate(buttonsSpring, [0, 1], [0, 1]);
|
||||
const buttonsY = interpolate(buttonsSpring, [0, 1], [30, 0]);
|
||||
|
||||
// Subtle glow pulse
|
||||
const glowIntensity = interpolate(
|
||||
Math.sin(frame * 0.05),
|
||||
[-1, 1],
|
||||
[0.3, 0.6]
|
||||
);
|
||||
|
||||
// Featured meetup data
|
||||
const featuredMeetup = UPCOMING_MEETUPS[0];
|
||||
const upcomingMeetups = UPCOMING_MEETUPS.slice(1);
|
||||
|
||||
return (
|
||||
<AbsoluteFill className="bg-zinc-900 overflow-hidden">
|
||||
{/* Audio: slide-in for section entrance */}
|
||||
<Sequence from={headerDelay} durationInFrames={Math.floor(1 * fps)}>
|
||||
<Audio src={staticFile("sfx/slide-in.mp3")} volume={0.5} />
|
||||
</Sequence>
|
||||
|
||||
{/* Audio: card-slide for featured card */}
|
||||
<Sequence from={featuredCardDelay} durationInFrames={Math.floor(0.8 * fps)}>
|
||||
<Audio src={staticFile("sfx/card-slide.mp3")} volume={0.5} />
|
||||
</Sequence>
|
||||
|
||||
{/* Audio: badge-appear for list items */}
|
||||
<Sequence from={listHeaderDelay + LIST_ITEM_STAGGER} durationInFrames={Math.floor(0.5 * fps)}>
|
||||
<Audio src={staticFile("sfx/badge-appear.mp3")} volume={0.4} />
|
||||
</Sequence>
|
||||
|
||||
{/* Wallpaper Background */}
|
||||
<div className="absolute inset-0">
|
||||
<Img
|
||||
src={staticFile("einundzwanzig-wallpaper.png")}
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
style={{ opacity: 0.1 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dark gradient overlay */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle at 60% 40%, transparent 0%, rgba(24, 24, 27, 0.5) 40%, rgba(24, 24, 27, 0.95) 100%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 3D Perspective Container */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
transform: `perspective(1200px) rotateX(${perspectiveX}deg) scale(${perspectiveScale})`,
|
||||
transformOrigin: "center center",
|
||||
opacity: perspectiveOpacity,
|
||||
}}
|
||||
>
|
||||
{/* Main Content */}
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center px-20">
|
||||
{/* Section Header */}
|
||||
<div
|
||||
className="text-center mb-12"
|
||||
style={{
|
||||
opacity: headerOpacity,
|
||||
transform: `translateY(${headerY}px)`,
|
||||
}}
|
||||
>
|
||||
<h1 className="text-5xl font-bold text-white mb-3">
|
||||
Meine nächsten Meetup Termine
|
||||
</h1>
|
||||
<p className="text-xl text-zinc-400">
|
||||
Deine kommenden Bitcoin-Treffen in der Region
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Featured Meetup Card with 3D Shadow */}
|
||||
<div
|
||||
className="relative mb-8"
|
||||
style={{
|
||||
opacity: featuredOpacity,
|
||||
transform: `perspective(800px) rotateX(${featuredRotateX}deg) scale(${featuredScale})`,
|
||||
transformOrigin: "center bottom",
|
||||
}}
|
||||
>
|
||||
{/* 3D Shadow beneath card */}
|
||||
<div
|
||||
className="absolute left-1/2 -translate-x-1/2 rounded-full"
|
||||
style={{
|
||||
bottom: -20,
|
||||
width: "80%",
|
||||
height: 20,
|
||||
background: `radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, transparent 70%)`,
|
||||
transform: `translateY(${featuredShadowY}px)`,
|
||||
filter: `blur(${featuredShadowBlur / 3}px)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Featured Meetup Card */}
|
||||
<div
|
||||
className="rounded-3xl bg-zinc-800/90 backdrop-blur-md border border-zinc-700/50 p-8"
|
||||
style={{
|
||||
boxShadow: `0 ${featuredShadowY}px ${featuredShadowBlur}px rgba(0, 0, 0, 0.5),
|
||||
0 0 ${40 * glowIntensity}px rgba(247, 147, 26, 0.2)`,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-8">
|
||||
{/* Meetup Card Component */}
|
||||
<MeetupCard
|
||||
logoSrc={staticFile(featuredMeetup.logoPath)}
|
||||
name={featuredMeetup.name}
|
||||
location={featuredMeetup.location}
|
||||
delay={featuredCardDelay + 5}
|
||||
width={450}
|
||||
accentColor="#f7931a"
|
||||
/>
|
||||
|
||||
{/* Date/Time Info */}
|
||||
<div
|
||||
className="flex flex-col gap-3 pl-8 border-l border-zinc-600/50"
|
||||
style={{
|
||||
opacity: dateOpacity,
|
||||
transform: `translateY(${dateY}px)`,
|
||||
}}
|
||||
>
|
||||
{/* Date */}
|
||||
<div className="flex items-center gap-3">
|
||||
<CalendarIcon />
|
||||
<span className="text-2xl font-semibold text-white">
|
||||
{featuredMeetup.date}
|
||||
</span>
|
||||
</div>
|
||||
{/* Time */}
|
||||
<div className="flex items-center gap-3">
|
||||
<ClockIcon />
|
||||
<span className="text-xl text-zinc-300">
|
||||
{featuredMeetup.time}
|
||||
</span>
|
||||
</div>
|
||||
{/* Badge */}
|
||||
<div
|
||||
className="mt-2 inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold"
|
||||
style={{
|
||||
backgroundColor: "rgba(247, 147, 26, 0.2)",
|
||||
color: "#f7931a",
|
||||
border: "1px solid rgba(247, 147, 26, 0.3)",
|
||||
boxShadow: `0 0 ${20 * glowIntensity}px rgba(247, 147, 26, 0.3)`,
|
||||
}}
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
||||
Nächster Termin
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upcoming Meetups Section */}
|
||||
<div className="w-full max-w-4xl">
|
||||
{/* Section Header */}
|
||||
<h3
|
||||
className="text-lg font-semibold text-zinc-400 mb-4 uppercase tracking-wider"
|
||||
style={{
|
||||
opacity: listHeaderOpacity,
|
||||
transform: `translateX(${listHeaderX}px)`,
|
||||
}}
|
||||
>
|
||||
Weitere Termine
|
||||
</h3>
|
||||
|
||||
{/* Upcoming Meetups List */}
|
||||
<div className="flex gap-6">
|
||||
{upcomingMeetups.map((meetup, index) => (
|
||||
<UpcomingMeetupItem
|
||||
key={meetup.name}
|
||||
meetup={meetup}
|
||||
delay={listHeaderDelay + (index + 1) * LIST_ITEM_STAGGER}
|
||||
glowIntensity={glowIntensity}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div
|
||||
className="flex gap-4 mt-10"
|
||||
style={{
|
||||
opacity: buttonsOpacity,
|
||||
transform: `translateY(${buttonsY}px)`,
|
||||
}}
|
||||
>
|
||||
<ActionButton
|
||||
label="Zum Kalender hinzufügen"
|
||||
icon="calendar"
|
||||
isPrimary={true}
|
||||
delay={buttonsDelay}
|
||||
glowIntensity={glowIntensity}
|
||||
/>
|
||||
<ActionButton
|
||||
label="Alle Meetups anzeigen"
|
||||
icon="list"
|
||||
isPrimary={false}
|
||||
delay={buttonsDelay + 5}
|
||||
glowIntensity={glowIntensity}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vignette overlay */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
boxShadow: "inset 0 0 200px 50px rgba(0, 0, 0, 0.6)",
|
||||
}}
|
||||
/>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Upcoming meetup list item
|
||||
*/
|
||||
type UpcomingMeetupItemProps = {
|
||||
meetup: {
|
||||
name: string;
|
||||
location: string;
|
||||
date: string;
|
||||
time: string;
|
||||
logoPath: string;
|
||||
};
|
||||
delay: number;
|
||||
glowIntensity: number;
|
||||
};
|
||||
|
||||
const UpcomingMeetupItem: React.FC<UpcomingMeetupItemProps> = ({
|
||||
meetup,
|
||||
delay,
|
||||
glowIntensity,
|
||||
}) => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
const adjustedFrame = Math.max(0, frame - delay);
|
||||
|
||||
const itemSpring = spring({
|
||||
frame: adjustedFrame,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
|
||||
const itemOpacity = interpolate(itemSpring, [0, 1], [0, 1]);
|
||||
const itemY = interpolate(itemSpring, [0, 1], [30, 0]);
|
||||
const itemScale = interpolate(itemSpring, [0, 1], [0.9, 1]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex-1 rounded-xl bg-zinc-800/70 backdrop-blur-sm border border-zinc-700/40 p-5"
|
||||
style={{
|
||||
opacity: itemOpacity,
|
||||
transform: `translateY(${itemY}px) scale(${itemScale})`,
|
||||
boxShadow: `0 4px 20px rgba(0, 0, 0, 0.3), 0 0 ${15 * glowIntensity}px rgba(247, 147, 26, 0.1)`,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Mini Logo */}
|
||||
<div
|
||||
className="w-12 h-12 rounded-lg bg-zinc-700/50 flex items-center justify-center overflow-hidden"
|
||||
style={{
|
||||
boxShadow: `0 0 ${10 * glowIntensity}px rgba(247, 147, 26, 0.2)`,
|
||||
}}
|
||||
>
|
||||
<Img
|
||||
src={staticFile(meetup.logoPath)}
|
||||
style={{
|
||||
width: 36,
|
||||
height: 36,
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Meetup Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-semibold text-white text-base truncate">
|
||||
{meetup.name}
|
||||
</div>
|
||||
<div className="text-sm text-zinc-400 flex items-center gap-2 mt-1">
|
||||
<span>{meetup.date}</span>
|
||||
<span className="text-zinc-600">•</span>
|
||||
<span>{meetup.time}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Action button component
|
||||
*/
|
||||
type ActionButtonProps = {
|
||||
label: string;
|
||||
icon: "calendar" | "list";
|
||||
isPrimary: boolean;
|
||||
delay: number;
|
||||
glowIntensity: number;
|
||||
};
|
||||
|
||||
const ActionButton: React.FC<ActionButtonProps> = ({
|
||||
label,
|
||||
icon,
|
||||
isPrimary,
|
||||
delay,
|
||||
glowIntensity,
|
||||
}) => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
const adjustedFrame = Math.max(0, frame - delay);
|
||||
|
||||
const buttonSpring = spring({
|
||||
frame: adjustedFrame,
|
||||
fps,
|
||||
config: { damping: 12, stiffness: 100 },
|
||||
});
|
||||
|
||||
const buttonScale = interpolate(buttonSpring, [0, 1], [0.8, 1]);
|
||||
const buttonOpacity = interpolate(buttonSpring, [0, 1], [0, 1]);
|
||||
|
||||
const baseClasses = "flex items-center gap-3 px-6 py-3 rounded-xl font-semibold text-base transition-all";
|
||||
|
||||
const primaryStyles = {
|
||||
backgroundColor: "#f7931a",
|
||||
color: "#000",
|
||||
boxShadow: `0 4px 20px rgba(247, 147, 26, 0.4), 0 0 ${30 * glowIntensity}px rgba(247, 147, 26, 0.3)`,
|
||||
};
|
||||
|
||||
const secondaryStyles = {
|
||||
backgroundColor: "rgba(63, 63, 70, 0.8)",
|
||||
color: "#fff",
|
||||
border: "1px solid rgba(113, 113, 122, 0.5)",
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.3)",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={baseClasses}
|
||||
style={{
|
||||
...(isPrimary ? primaryStyles : secondaryStyles),
|
||||
transform: `scale(${buttonScale})`,
|
||||
opacity: buttonOpacity,
|
||||
}}
|
||||
>
|
||||
{icon === "calendar" ? <CalendarPlusIcon /> : <ListIcon />}
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Calendar icon SVG
|
||||
*/
|
||||
const CalendarIcon: React.FC = () => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#f7931a"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ width: 24, height: 24 }}
|
||||
>
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
/**
|
||||
* Clock icon SVG
|
||||
*/
|
||||
const ClockIcon: React.FC = () => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#a1a1aa"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ width: 22, height: 22 }}
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<polyline points="12 6 12 12 16 14" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
/**
|
||||
* Calendar Plus icon SVG for action button
|
||||
*/
|
||||
const CalendarPlusIcon: React.FC = () => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ width: 20, height: 20 }}
|
||||
>
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
<line x1="12" y1="14" x2="12" y2="18" />
|
||||
<line x1="10" y1="16" x2="14" y2="16" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
/**
|
||||
* List icon SVG for action button
|
||||
*/
|
||||
const ListIcon: React.FC = () => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ width: 20, height: 20 }}
|
||||
>
|
||||
<line x1="8" y1="6" x2="21" y2="6" />
|
||||
<line x1="8" y1="12" x2="21" y2="12" />
|
||||
<line x1="8" y1="18" x2="21" y2="18" />
|
||||
<line x1="3" y1="6" x2="3.01" y2="6" />
|
||||
<line x1="3" y1="12" x2="3.01" y2="12" />
|
||||
<line x1="3" y1="18" x2="3.01" y2="18" />
|
||||
</svg>
|
||||
);
|
||||
Reference in New Issue
Block a user