feat(film): assemble 8-sequence series skeleton

marketing/product-film/src/Film.tsx

@@ -1,9 +1,30 @@
-import { AbsoluteFill } from "remotion";
+import { AbsoluteFill, Series } from "remotion";
+import { DURATIONS } from "./timing";
+import { theme } from "./theme";
+import { AudioTrack } from "./components/AudioTrack";
+import { ColdOpen } from "./sequences/ColdOpen";
+import { Promise as PromiseSeq } from "./sequences/Promise";
+import { Pillar1Storms } from "./sequences/Pillar1Storms";
+import { Pillar2Dispatch } from "./sequences/Pillar2Dispatch";
+import { Pillar3Rails } from "./sequences/Pillar3Rails";
+import { Pillar4Control } from "./sequences/Pillar4Control";
+import { Pillar5Profit } from "./sequences/Pillar5Profit";
+import { CraneClose } from "./sequences/CraneClose";
 
 export const Film: React.FC = () => {
   return (
-    <AbsoluteFill style={{ backgroundColor: "#09090b", alignItems: "center", justifyContent: "center" }}>
+    <AbsoluteFill style={{ backgroundColor: theme.bg }}>
-      <h1 style={{ color: "white", fontFamily: "sans-serif" }}>LynkedUp Pro Film</h1>
+      <Series>
+        <Series.Sequence durationInFrames={DURATIONS.coldOpen}><ColdOpen /></Series.Sequence>
+        <Series.Sequence durationInFrames={DURATIONS.promise}><PromiseSeq /></Series.Sequence>
+        <Series.Sequence durationInFrames={DURATIONS.pillar1}><Pillar1Storms /></Series.Sequence>
+        <Series.Sequence durationInFrames={DURATIONS.pillar2}><Pillar2Dispatch /></Series.Sequence>
+        <Series.Sequence durationInFrames={DURATIONS.pillar3}><Pillar3Rails /></Series.Sequence>
+        <Series.Sequence durationInFrames={DURATIONS.pillar4}><Pillar4Control /></Series.Sequence>
+        <Series.Sequence durationInFrames={DURATIONS.pillar5}><Pillar5Profit /></Series.Sequence>
+        <Series.Sequence durationInFrames={DURATIONS.craneClose}><CraneClose /></Series.Sequence>
+      </Series>
+      <AudioTrack />
     </AbsoluteFill>
   );
 };

marketing/product-film/src/sequences/ColdOpen.tsx

@@ -0,0 +1,5 @@
+import { PillarTitle } from "../components/PillarTitle";
+import { DURATIONS } from "../timing";
+export const ColdOpen: React.FC = () => (
+  <PillarTitle index="" title="Cold Open" subtitle="(stub)" startFrame={0} durationInFrames={DURATIONS.coldOpen} />
+);

marketing/product-film/src/sequences/CraneClose.tsx

@@ -0,0 +1,5 @@
+import { PillarTitle } from "../components/PillarTitle";
+import { DURATIONS } from "../timing";
+export const CraneClose: React.FC = () => (
+  <PillarTitle index="" title="Crane Close" subtitle="(stub)" startFrame={0} durationInFrames={DURATIONS.craneClose} />
+);

marketing/product-film/src/sequences/Pillar1Storms.tsx

@@ -0,0 +1,5 @@
+import { PillarTitle } from "../components/PillarTitle";
+import { DURATIONS } from "../timing";
+export const Pillar1Storms: React.FC = () => (
+  <PillarTitle index="①" title="Pillar 1" subtitle="(stub)" startFrame={0} durationInFrames={DURATIONS.pillar1} />
+);

marketing/product-film/src/sequences/Pillar2Dispatch.tsx

@@ -0,0 +1,5 @@
+import { PillarTitle } from "../components/PillarTitle";
+import { DURATIONS } from "../timing";
+export const Pillar2Dispatch: React.FC = () => (
+  <PillarTitle index="②" title="Pillar 2" subtitle="(stub)" startFrame={0} durationInFrames={DURATIONS.pillar2} />
+);

marketing/product-film/src/sequences/Pillar3Rails.tsx

@@ -0,0 +1,5 @@
+import { PillarTitle } from "../components/PillarTitle";
+import { DURATIONS } from "../timing";
+export const Pillar3Rails: React.FC = () => (
+  <PillarTitle index="③" title="Pillar 3" subtitle="(stub)" startFrame={0} durationInFrames={DURATIONS.pillar3} />
+);

marketing/product-film/src/sequences/Pillar4Control.tsx

@@ -0,0 +1,5 @@
+import { PillarTitle } from "../components/PillarTitle";
+import { DURATIONS } from "../timing";
+export const Pillar4Control: React.FC = () => (
+  <PillarTitle index="④" title="Pillar 4" subtitle="(stub)" startFrame={0} durationInFrames={DURATIONS.pillar4} />
+);

marketing/product-film/src/sequences/Pillar5Profit.tsx

@@ -0,0 +1,5 @@
+import { PillarTitle } from "../components/PillarTitle";
+import { DURATIONS } from "../timing";
+export const Pillar5Profit: React.FC = () => (
+  <PillarTitle index="⑤" title="Pillar 5" subtitle="(stub)" startFrame={0} durationInFrames={DURATIONS.pillar5} />
+);

marketing/product-film/src/sequences/Promise.tsx

@@ -0,0 +1,5 @@
+import { PillarTitle } from "../components/PillarTitle";
+import { DURATIONS } from "../timing";
+export const Promise: React.FC = () => (
+  <PillarTitle index="" title="Promise" subtitle="(stub)" startFrame={0} durationInFrames={DURATIONS.promise} />
+);