feat(film): crane CTA close (swinging suspended card)

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

@@ -1,5 +1,26 @@
-import { PillarTitle } from "../components/PillarTitle";
+import { AbsoluteFill } from "remotion";
-import { DURATIONS } from "../timing";
+import { BlueprintBg } from "../components/BlueprintBg";
-export const CraneClose: React.FC = () => (
+import { Crane } from "../components/Crane";
-  <PillarTitle index="" title="Crane Close" subtitle="(stub)" startFrame={0} durationInFrames={DURATIONS.craneClose} />
+import { CraneCard } from "../components/CraneCard";
-);
+import { theme } from "../theme";
+
+export const CraneClose: React.FC = () => {
+  return (
+    <AbsoluteFill>
+      <BlueprintBg opacity={0.5} />
+      {/* crane anchored top; card hangs from its hoist cable */}
+      <AbsoluteFill style={{ alignItems: "center" }}>
+        <div style={{ marginTop: -10 }}>
+          <Crane width={1180} />
+        </div>
+      </AbsoluteFill>
+      <AbsoluteFill style={{ alignItems: "center", justifyContent: "flex-start", marginTop: 470 }}>
+        <CraneCard dropStartFrame={6} />
+      </AbsoluteFill>
+      {/* end plate */}
+      <div style={{ position: "absolute", bottom: 48, width: "100%", textAlign: "center", fontFamily: theme.mono, color: theme.textDim, fontSize: 24 }}>
+        LynkedUpPro.com · 866-259-6533
+      </div>
+    </AbsoluteFill>
+  );
+};