feat(videos): add CloudVsLocal split-screen privacy showcase

5-act composition (540 frames, 1920x1080): split screen with cloud vs
local comparison, escalating chaos on the cloud side while local stays
calm, resolving to full-screen "Your images never leave your network."

Also updates Root.tsx to register all 10 landing page compositions,
removes ComponentTest, and resolves merge conflict markers.

apps/videos/src/Root.tsx

@@ -1,12 +1,6 @@
 import "./style.css";
 import type React from "react";
-import { AbsoluteFill, Composition } from "remotion";
-import { ClipReveal } from "./components/ClipReveal";
-import { Counter } from "./components/Counter";
-import { GradientBlob } from "./components/GradientBlob";
-import { GrainOverlay } from "./components/GrainOverlay";
-import { PhotoPlaceholder } from "./components/PhotoPlaceholder";
-import { ToolPill } from "./components/ToolPill";
+import { Composition } from "remotion";
 import { BrandGradient } from "./compositions/ambient/BrandGradient";
 import { FloatingTools } from "./compositions/ambient/FloatingTools";
 import { AiMagicReel } from "./compositions/features/AiMagicReel";
@@ -18,57 +12,13 @@ import { ToolGalaxy } from "./compositions/hero/ToolGalaxy";
 import { ProductDemo } from "./compositions/product-demo/ProductDemo";
 import { PromoTeaser } from "./compositions/promo-teaser/PromoTeaser";
 import { PromoTeaserVertical } from "./compositions/promo-teaser/PromoTeaserVertical";
+import { CloudVsLocal } from "./compositions/showcase/CloudVsLocal";
 import { The48 } from "./compositions/showcase/The48";
 import { XLaunchVideo } from "./compositions/x-launch/XLaunchVideo";
-import { TEXT } from "./lib/fonts";
-
-const ComponentTest: React.FC = () => (
-  <AbsoluteFill style={{ backgroundColor: "#0c0a09" }}>
-    <div style={{ position: "absolute", top: 40, left: 40 }}>
-      <ClipReveal startFrame={0}>
-        <span style={{ ...TEXT.heroHeadline }}>Hello SnapOtter</span>
-      </ClipReveal>
-    </div>
-    <div style={{ position: "absolute", top: 150, left: 40 }}>
-      <ToolPill name="Resize" category="essentials" />
-    </div>
-    <div style={{ position: "absolute", top: 200, left: 40 }}>
-      <Counter from={0} to={48} startFrame={0} duration={60} style={TEXT.counter} />
-    </div>
-    <PhotoPlaceholder
-      width={200}
-      height={150}
-      style={{ position: "absolute", top: 300, left: 40 }}
-    />
-    <GradientBlob
-      config={{
-        color: "#f59e0b",
-        radius: 100,
-        cx: 600,
-        cy: 300,
-        a: 2,
-        b: 3,
-        phaseX: 0,
-        phaseY: 0,
-        amplitudeX: 50,
-        amplitudeY: 40,
-      }}
-      duration={90}
-    />
-    <GrainOverlay />
-  </AbsoluteFill>
-);
 
 export const RemotionRoot: React.FC = () => (
   <>
-    <Composition
-      id="ComponentTest"
-      component={ComponentTest}
-      durationInFrames={90}
-      fps={30}
-      width={1920}
-      height={1080}
-    />
+    {/* Ambient */}
     <Composition
       id="FloatingTools"
       component={FloatingTools}
@@ -85,6 +35,8 @@ export const RemotionRoot: React.FC = () => (
       width={800}
       height={600}
     />
+
+    {/* Features */}
     <Composition
       id="FormatUniverse"
       component={FormatUniverse}
@@ -93,14 +45,6 @@ export const RemotionRoot: React.FC = () => (
       width={800}
       height={600}
     />
-    <Composition
-      id="AiMagicReel"
-      component={AiMagicReel}
-      durationInFrames={480}
-      fps={30}
-      width={800}
-      height={600}
-    />
     <Composition
       id="PipelineFlow"
       component={PipelineFlow}
@@ -109,6 +53,16 @@ export const RemotionRoot: React.FC = () => (
       width={800}
       height={600}
     />
+    <Composition
+      id="AiMagicReel"
+      component={AiMagicReel}
+      durationInFrames={480}
+      fps={30}
+      width={800}
+      height={600}
+    />
+
+    {/* Hero */}
     <Composition
       id="PrivacyPromise"
       component={PrivacyPromise}
@@ -133,6 +87,26 @@ export const RemotionRoot: React.FC = () => (
       width={1920}
       height={1080}
     />
+
+    {/* Showcase */}
+    <Composition
+      id="The48"
+      component={The48}
+      durationInFrames={840}
+      fps={30}
+      width={1920}
+      height={1080}
+    />
+    <Composition
+      id="CloudVsLocal"
+      component={CloudVsLocal}
+      durationInFrames={540}
+      fps={30}
+      width={1920}
+      height={1080}
+    />
+
+    {/* Promo / Marketing */}
     <Composition
       id="PromoTeaser"
       component={PromoTeaser}
@@ -157,14 +131,6 @@ export const RemotionRoot: React.FC = () => (
       width={1080}
       height={1080}
     />
-    <Composition
-      id="The48"
-      component={The48}
-      durationInFrames={840}
-      fps={30}
-      width={1920}
-      height={1080}
-    />
     <Composition
       id="ProductDemo"
       component={ProductDemo}