add marketing movies

feels-promo/src/Root.tsx

@@ -1,23 +1,166 @@
 import { Composition } from "remotion";
 import { FeelsPromoV1 } from "./FeelsPromo";
+import { ConceptASelfAwareness } from "./ConceptA-SelfAwareness";
+import { ConceptBNoJournalJournal } from "./ConceptB-NoJournalJournal";
+import { ConceptCYearInFeelings } from "./ConceptC-YearInFeelings";
+import { ConceptDAlwaysThere } from "./ConceptD-AlwaysThere";
+import { ConceptEMakeItYours } from "./ConceptE-MakeItYours";
+import { ConceptFPrivacyFirst } from "./ConceptF-PrivacyFirst";
+import { ConceptGStreakEffect } from "./ConceptG-StreakEffect";
+// Wild concepts
+import { ConceptHMoodHeist } from "./ConceptH-MoodHeist";
+import { ConceptIRetroArcade } from "./ConceptI-RetroArcade";
+import { ConceptJConspiracy } from "./ConceptJ-Conspiracy";
+import { ConceptKSportsCenter } from "./ConceptK-SportsCenter";
+import { ConceptLMusical } from "./ConceptL-Musical";
 
 export const RemotionRoot: React.FC = () => {
   const fps = 30;
-  const sceneDuration = 3.5 * fps; // 3.5 seconds per scene
-  const transitionDuration = Math.round(0.6 * fps); // 0.6 second transitions
-  const outroDuration = Math.round(2.5 * fps);
 
-  // Calculate total duration accounting for transition overlaps
-  // 7 scenes + outro - 7 transitions
-  const totalDuration =
+  // V1 calculations
+  const sceneDuration = 3.5 * fps;
+  const transitionDuration = Math.round(0.6 * fps);
+  const outroDuration = Math.round(2.5 * fps);
+  const v1TotalDuration =
     sceneDuration * 7 + outroDuration - transitionDuration * 7;
 
   return (
     <>
+      {/* ═══════════════════════════════════════════════════════════════
+          ORIGINAL PROMO
+          ═══════════════════════════════════════════════════════════════ */}
       <Composition
         id="FeelsPromoV1"
         component={FeelsPromoV1}
-        durationInFrames={totalDuration}
+        durationInFrames={v1TotalDuration}
+        fps={fps}
+        width={1080}
+        height={1920}
+      />
+
+      {/* ═══════════════════════════════════════════════════════════════
+          STANDARD CONCEPTS (A-G)
+          ═══════════════════════════════════════════════════════════════ */}
+
+      {/* Concept A: 30 Seconds to Self-Awareness */}
+      <Composition
+        id="ConceptA-SelfAwareness"
+        component={ConceptASelfAwareness}
+        durationInFrames={Math.round(30 * fps)}
+        fps={fps}
+        width={1080}
+        height={1920}
+      />
+
+      {/* Concept B: The No-Journal Journal (20s) */}
+      <Composition
+        id="ConceptB-NoJournalJournal"
+        component={ConceptBNoJournalJournal}
+        durationInFrames={Math.round(20 * fps)}
+        fps={fps}
+        width={1080}
+        height={1920}
+      />
+
+      {/* Concept C: Your Year in Feelings (15s) */}
+      <Composition
+        id="ConceptC-YearInFeelings"
+        component={ConceptCYearInFeelings}
+        durationInFrames={Math.round(15 * fps)}
+        fps={fps}
+        width={1080}
+        height={1920}
+      />
+
+      {/* Concept D: Always There (25s) */}
+      <Composition
+        id="ConceptD-AlwaysThere"
+        component={ConceptDAlwaysThere}
+        durationInFrames={Math.round(25 * fps)}
+        fps={fps}
+        width={1080}
+        height={1920}
+      />
+
+      {/* Concept E: Make It Yours (20s) */}
+      <Composition
+        id="ConceptE-MakeItYours"
+        component={ConceptEMakeItYours}
+        durationInFrames={Math.round(20 * fps)}
+        fps={fps}
+        width={1080}
+        height={1920}
+      />
+
+      {/* Concept F: Privacy First (15s) */}
+      <Composition
+        id="ConceptF-PrivacyFirst"
+        component={ConceptFPrivacyFirst}
+        durationInFrames={Math.round(15 * fps)}
+        fps={fps}
+        width={1080}
+        height={1920}
+      />
+
+      {/* Concept G: The Streak Effect (20s) */}
+      <Composition
+        id="ConceptG-StreakEffect"
+        component={ConceptGStreakEffect}
+        durationInFrames={Math.round(20 * fps)}
+        fps={fps}
+        width={1080}
+        height={1920}
+      />
+
+      {/* ═══════════════════════════════════════════════════════════════
+          WILD CONCEPTS (H-L) - OFF THE WALL CREATIVE
+          ═══════════════════════════════════════════════════════════════ */}
+
+      {/* Concept H: The Mood Heist (25s) - Ocean's Eleven style thriller */}
+      <Composition
+        id="ConceptH-MoodHeist"
+        component={ConceptHMoodHeist}
+        durationInFrames={Math.round(25 * fps)}
+        fps={fps}
+        width={1080}
+        height={1920}
+      />
+
+      {/* Concept I: Retro Arcade Feels (20s) - 8-bit video game */}
+      <Composition
+        id="ConceptI-RetroArcade"
+        component={ConceptIRetroArcade}
+        durationInFrames={Math.round(20 * fps)}
+        fps={fps}
+        width={1080}
+        height={1920}
+      />
+
+      {/* Concept J: The Feels Conspiracy (20s) - Dark documentary thriller */}
+      <Composition
+        id="ConceptJ-Conspiracy"
+        component={ConceptJConspiracy}
+        durationInFrames={Math.round(20 * fps)}
+        fps={fps}
+        width={1080}
+        height={1920}
+      />
+
+      {/* Concept K: Sports Center Emotions (20s) - ESPN broadcast parody */}
+      <Composition
+        id="ConceptK-SportsCenter"
+        component={ConceptKSportsCenter}
+        durationInFrames={Math.round(20 * fps)}
+        fps={fps}
+        width={1080}
+        height={1920}
+      />
+
+      {/* Concept L: Feelings The Musical (25s) - Broadway musical number */}
+      <Composition
+        id="ConceptL-Musical"
+        component={ConceptLMusical}
+        durationInFrames={Math.round(25 * fps)}
         fps={fps}
         width={1080}
         height={1920}