🎬 Integrate CountryStatsScene and fix test mocks

Replace placeholder with actual CountryStatsScene (Scene 5) in
PortalPresentation, remove unused PlaceholderScene component,
add missing mock for CountryStatsScene in tests, and fix
PortalPresentationMobile tests to mock correct mobile scene
components.

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

videos/src/PortalPresentation.test.tsx

@@ -88,6 +88,12 @@ vi.mock("./scenes/portal/MeetupShowcaseScene", () => ({
   )),
 }));
 
+vi.mock("./scenes/portal/CountryStatsScene", () => ({
+  CountryStatsScene: vi.fn(() => (
+    <div data-testid="country-stats-scene">CountryStatsScene</div>
+  )),
+}));
+
 vi.mock("./scenes/portal/TopMeetupsScene", () => ({
   TopMeetupsScene: vi.fn(() => (
     <div data-testid="top-meetups-scene">TopMeetupsScene</div>
@@ -210,6 +216,12 @@ describe("PortalPresentation", () => {
     expect(scene).toBeInTheDocument();
   });
 
+  it("renders Scene 5: CountryStatsScene", () => {
+    const { container } = render(<PortalPresentation />);
+    const scene = container.querySelector('[data-testid="country-stats-scene"]');
+    expect(scene).toBeInTheDocument();
+  });
+
   it("renders Scene 6: TopMeetupsScene", () => {
     const { container } = render(<PortalPresentation />);
     const scene = container.querySelector('[data-testid="top-meetups-scene"]');

videos/src/PortalPresentation.tsx

@@ -4,6 +4,7 @@ import { PortalIntroScene } from "./scenes/portal/PortalIntroScene";
 import { PortalTitleScene } from "./scenes/portal/PortalTitleScene";
 import { DashboardOverviewScene } from "./scenes/portal/DashboardOverviewScene";
 import { MeetupShowcaseScene } from "./scenes/portal/MeetupShowcaseScene";
+import { CountryStatsScene } from "./scenes/portal/CountryStatsScene";
 import { TopMeetupsScene } from "./scenes/portal/TopMeetupsScene";
 import { ActivityFeedScene } from "./scenes/portal/ActivityFeedScene";
 import { CallToActionScene } from "./scenes/portal/CallToActionScene";
@@ -172,7 +173,7 @@ export const PortalPresentation: React.FC = () => {
         durationInFrames={sceneFrames.topLaender.duration}
         premountFor={fps}
       >
-        <PlaceholderScene name="Top Länder" sceneNumber={5} />
+        <CountryStatsScene />
       </Sequence>
 
       {/* Scene 6: Top Meetups (10s) */}
@@ -213,24 +214,3 @@ export const PortalPresentation: React.FC = () => {
     </AbsoluteFill>
   );
 };
-
-/**
- * Placeholder component for scenes that haven't been implemented yet.
- * Displays a centered scene name with visual indicators.
- */
-const PlaceholderScene: React.FC<{ name: string; sceneNumber: number }> = ({
-  name,
-  sceneNumber,
-}) => {
-  return (
-    <AbsoluteFill className="flex items-center justify-center">
-      <div className="text-center">
-        <div className="w-24 h-24 mx-auto mb-6 rounded-full bg-orange-500/20 border-2 border-orange-500/50 flex items-center justify-center">
-          <span className="text-4xl font-bold text-orange-500">{sceneNumber}</span>
-        </div>
-        <h2 className="text-4xl font-bold text-white mb-2">{name}</h2>
-        <p className="text-lg text-neutral-400">Scene placeholder</p>
-      </div>
-    </AbsoluteFill>
-  );
-};

videos/src/PortalPresentationMobile.test.tsx

@@ -63,52 +63,58 @@ vi.mock("@remotion/media", () => ({
 }));
 /* eslint-enable @remotion/warn-native-media-tag */
 
-// Mock all scene components
-vi.mock("./scenes/portal/PortalIntroScene", () => ({
-  PortalIntroScene: vi.fn(() => (
-    <div data-testid="portal-intro-scene">PortalIntroScene</div>
+// Mock all mobile scene components
+vi.mock("./scenes/portal/mobile/PortalIntroSceneMobile", () => ({
+  PortalIntroSceneMobile: vi.fn(() => (
+    <div data-testid="portal-intro-scene">PortalIntroSceneMobile</div>
   )),
 }));
 
-vi.mock("./scenes/portal/PortalTitleScene", () => ({
-  PortalTitleScene: vi.fn(() => (
-    <div data-testid="portal-title-scene">PortalTitleScene</div>
+vi.mock("./scenes/portal/mobile/PortalTitleSceneMobile", () => ({
+  PortalTitleSceneMobile: vi.fn(() => (
+    <div data-testid="portal-title-scene">PortalTitleSceneMobile</div>
   )),
 }));
 
-vi.mock("./scenes/portal/DashboardOverviewScene", () => ({
-  DashboardOverviewScene: vi.fn(() => (
-    <div data-testid="dashboard-overview-scene">DashboardOverviewScene</div>
+vi.mock("./scenes/portal/mobile/DashboardOverviewSceneMobile", () => ({
+  DashboardOverviewSceneMobile: vi.fn(() => (
+    <div data-testid="dashboard-overview-scene">DashboardOverviewSceneMobile</div>
   )),
 }));
 
-vi.mock("./scenes/portal/MeetupShowcaseScene", () => ({
-  MeetupShowcaseScene: vi.fn(() => (
-    <div data-testid="meetup-showcase-scene">MeetupShowcaseScene</div>
+vi.mock("./scenes/portal/mobile/MeetupShowcaseSceneMobile", () => ({
+  MeetupShowcaseSceneMobile: vi.fn(() => (
+    <div data-testid="meetup-showcase-scene">MeetupShowcaseSceneMobile</div>
   )),
 }));
 
-vi.mock("./scenes/portal/TopMeetupsScene", () => ({
-  TopMeetupsScene: vi.fn(() => (
-    <div data-testid="top-meetups-scene">TopMeetupsScene</div>
+vi.mock("./scenes/portal/mobile/CountryStatsSceneMobile", () => ({
+  CountryStatsSceneMobile: vi.fn(() => (
+    <div data-testid="country-stats-scene">CountryStatsSceneMobile</div>
   )),
 }));
 
-vi.mock("./scenes/portal/ActivityFeedScene", () => ({
-  ActivityFeedScene: vi.fn(() => (
-    <div data-testid="activity-feed-scene">ActivityFeedScene</div>
+vi.mock("./scenes/portal/mobile/TopMeetupsSceneMobile", () => ({
+  TopMeetupsSceneMobile: vi.fn(() => (
+    <div data-testid="top-meetups-scene">TopMeetupsSceneMobile</div>
   )),
 }));
 
-vi.mock("./scenes/portal/CallToActionScene", () => ({
-  CallToActionScene: vi.fn(() => (
-    <div data-testid="call-to-action-scene">CallToActionScene</div>
+vi.mock("./scenes/portal/mobile/ActivityFeedSceneMobile", () => ({
+  ActivityFeedSceneMobile: vi.fn(() => (
+    <div data-testid="activity-feed-scene">ActivityFeedSceneMobile</div>
   )),
 }));
 
-vi.mock("./scenes/portal/PortalOutroScene", () => ({
-  PortalOutroScene: vi.fn(() => (
-    <div data-testid="portal-outro-scene">PortalOutroScene</div>
+vi.mock("./scenes/portal/mobile/CallToActionSceneMobile", () => ({
+  CallToActionSceneMobile: vi.fn(() => (
+    <div data-testid="call-to-action-scene">CallToActionSceneMobile</div>
+  )),
+}));
+
+vi.mock("./scenes/portal/mobile/PortalOutroSceneMobile", () => ({
+  PortalOutroSceneMobile: vi.fn(() => (
+    <div data-testid="portal-outro-scene">PortalOutroSceneMobile</div>
   )),
 }));
 
@@ -210,6 +216,12 @@ describe("PortalPresentationMobile", () => {
     expect(scene).toBeInTheDocument();
   });
 
+  it("renders Scene 5: CountryStatsScene", () => {
+    const { container } = render(<PortalPresentationMobile />);
+    const scene = container.querySelector('[data-testid="country-stats-scene"]');
+    expect(scene).toBeInTheDocument();
+  });
+
   it("renders Scene 6: TopMeetupsScene", () => {
     const { container } = render(<PortalPresentationMobile />);
     const scene = container.querySelector('[data-testid="top-meetups-scene"]');
@@ -390,6 +402,7 @@ describe("PortalPresentationMobile mobile-specific", () => {
     expect(container.querySelector('[data-testid="portal-title-scene"]')).toBeInTheDocument();
     expect(container.querySelector('[data-testid="dashboard-overview-scene"]')).toBeInTheDocument();
     expect(container.querySelector('[data-testid="meetup-showcase-scene"]')).toBeInTheDocument();
+    expect(container.querySelector('[data-testid="country-stats-scene"]')).toBeInTheDocument();
     expect(container.querySelector('[data-testid="top-meetups-scene"]')).toBeInTheDocument();
     expect(container.querySelector('[data-testid="activity-feed-scene"]')).toBeInTheDocument();
     expect(container.querySelector('[data-testid="call-to-action-scene"]')).toBeInTheDocument();