chore: clean up content phase organization

apps/videos/src/Root.tsx

@@ -0,0 +1,45 @@
+import "./index.css";
+import { Composition } from "remotion";
+import { HelloWorld } from "./HelloWorld";
+import { Logo } from "./HelloWorld/Logo";
+
+// Each <Composition> is an entry in the sidebar!
+
+export const RemotionRoot: React.FC = () => {
+  return (
+    <>
+      <Composition
+        // You can take the "id" to render a video:
+        // npx remotion render HelloWorld
+        id="HelloWorld"
+        component={HelloWorld}
+        durationInFrames={150}
+        fps={30}
+        width={1920}
+        height={1080}
+        // You can override these props for each render:
+        // https://www.remotion.dev/docs/parametrized-rendering
+        defaultProps={{
+          titleText: "Welcome to Remotion",
+          titleColor: "#000000",
+          logoColor1: "#91EAE4",
+          logoColor2: "#86A8E7",
+        }}
+      />
+
+      {/* Mount any React component to make it show up in the sidebar and work on it individually! */}
+      <Composition
+        id="OnlyLogo"
+        component={Logo}
+        durationInFrames={150}
+        fps={30}
+        width={1920}
+        height={1080}
+        defaultProps={{
+          logoColor1: "#91dAE2",
+          logoColor2: "#86A8E7",
+        }}
+      />
+    </>
+  );
+};