@remotion/promo-pages 4.0.470 → 4.0.471

package/dist/Homepage.js

@@ -1089,19 +1089,15 @@ import {
   useCallback as useCallback16,
   useContext as useContext32,
   useEffect as useEffect17,
+  useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo31,
+  useRef as useRef23,
   useState as useState16
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import { forwardRef as forwardRef11, useCallback as useCallback17, useState as useState17 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
-import {
-  useCallback as useCallback18,
-  useContext as useContext33,
-  useImperativeHandle as useImperativeHandle7,
-  useLayoutEffect as useLayoutEffect10,
-  useRef as useRef23
-} from "react";
+import { useCallback as useCallback18, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
 import React28 from "react";
@@ -1109,7 +1105,7 @@ import {
   useCallback as useCallback19,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo32,
-  useRef as useRef24,
+  useRef as useRef25,
   useState as useState18
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
@@ -1136,7 +1132,7 @@ import React34, {
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
-  useRef as useRef25,
+  useRef as useRef26,
   useState as useState20,
   useCallback as useCallback21
 } from "react";
@@ -1159,7 +1155,7 @@ import {
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo39,
-  useRef as useRef26
+  useRef as useRef27
 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 import { jsx as jsx38 } from "react/jsx-runtime";
@@ -2285,7 +2281,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.470";
+var VERSION = "4.0.471";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -4888,13 +4884,14 @@ var getActualTime = ({
 var decodeImage = async ({
   resolvedSrc,
   signal,
+  requestInit,
   currentTime,
   initialLoopBehavior
 }) => {
   if (typeof ImageDecoder === "undefined") {
     throw new Error("Your browser does not support the WebCodecs ImageDecoder API.");
   }
-  const res = await fetch(resolvedSrc, { signal });
+  const res = await fetch(resolvedSrc, { ...requestInit, signal });
   const { body } = res;
   if (!body) {
     throw new Error("Got no body");
@@ -5017,6 +5014,18 @@ var decodeImage = async ({
     frameCount: selectedTrack.frameCount
   };
 };
+var serializeRequestInit = (requestInit) => {
+  if (!requestInit) {
+    return null;
+  }
+  const requestInitWithoutSignal = { ...requestInit };
+  delete requestInitWithoutSignal.signal;
+  const { headers, ...rest } = requestInitWithoutSignal;
+  return JSON.stringify({
+    ...rest,
+    headers: headers ? Array.from(new Headers(headers).entries()) : null
+  });
+};
 var resolveAnimatedImageSource = (src) => {
   if (typeof window === "undefined") {
     return src;
@@ -5043,6 +5052,7 @@ var AnimatedImageContent = forwardRef4(({
   loopBehavior = "loop",
   playbackRate = 1,
   fit = "fill",
+  requestInit,
   effects,
   controls,
   ...props
@@ -5056,6 +5066,9 @@ var AnimatedImageContent = forwardRef4(({
   const currentTime = frame / playbackRate / fps;
   const currentTimeRef = useRef9(currentTime);
   currentTimeRef.current = currentTime;
+  const requestInitKey = serializeRequestInit(requestInit);
+  const requestInitRef = useRef9(requestInit);
+  requestInitRef.current = requestInit;
   const ref = useRef9(null);
   const memoizedEffects = useMemoizedEffects({
     effects,
@@ -5074,6 +5087,7 @@ var AnimatedImageContent = forwardRef4(({
     decodeImage({
       resolvedSrc,
       signal: controller.signal,
+      requestInit: requestInitRef.current,
       currentTime: currentTimeRef.current,
       initialLoopBehavior
     }).then((d) => {
@@ -5098,6 +5112,7 @@ var AnimatedImageContent = forwardRef4(({
     resolvedSrc,
     decodeHandle,
     onError,
+    requestInitKey,
     initialLoopBehavior,
     continueRender2
   ]);
@@ -5170,6 +5185,7 @@ var AnimatedImageInner = ({
   className,
   style,
   durationInFrames,
+  requestInit,
   effects = [],
   _experimentalControls: controls,
   ref,
@@ -5177,7 +5193,11 @@ var AnimatedImageInner = ({
 }) => {
   const { durationInFrames: videoDuration } = useVideoConfig();
   const resolvedDuration = durationInFrames ?? videoDuration;
+  const actualRef = useRef9(null);
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+  useImperativeHandle2(ref, () => {
+    return actualRef.current;
+  }, []);
   const animatedImageProps = {
     src,
     width,
@@ -5188,7 +5208,8 @@ var AnimatedImageInner = ({
     loopBehavior,
     id,
     className,
-    style
+    style,
+    requestInit
   };
   return /* @__PURE__ */ jsx13(Sequence, {
     layout: "none",
@@ -5198,9 +5219,10 @@ var AnimatedImageInner = ({
     _experimentalControls: controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     ...sequenceProps,
+    _remotionInternalRefForOutline: actualRef,
     children: /* @__PURE__ */ jsx13(AnimatedImageContent, {
       ...animatedImageProps,
-      ref,
+      ref: actualRef,
       effects,
       controls
     })
@@ -8524,16 +8546,26 @@ var HtmlInCanvasInner = forwardRef9(({
   const { durationInFrames: videoDuration } = useVideoConfig();
   const resolvedDuration = durationInFrames ?? videoDuration;
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+  const actualRef = useRef22(null);
+  const setCanvasRef = useCallback15((node) => {
+    actualRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
   return /* @__PURE__ */ jsx24(Sequence, {
     durationInFrames: resolvedDuration,
     name: name ?? "<HtmlInCanvas>",
     _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/remotion/html-in-canvas" : undefined,
     _experimentalControls: controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
+    _remotionInternalRefForOutline: actualRef,
     layout: "none",
     ...sequenceProps,
     children: /* @__PURE__ */ jsx24(HtmlInCanvasContent, {
-      ref,
+      ref: setCanvasRef,
       width,
       height,
       effects,
@@ -8649,6 +8681,7 @@ var CanvasImageContent = forwardRef10(({
   maxRetries = 2,
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
+  refForOutline,
   ...canvasProps
 }, ref) => {
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
@@ -8669,12 +8702,15 @@ var CanvasImageContent = forwardRef10(({
   }, []);
   const canvasRef = useCallback16((canvas) => {
     setOutputCanvas(canvas);
+    if (refForOutline) {
+      refForOutline.current = canvas;
+    }
     if (typeof ref === "function") {
       ref(canvas);
     } else if (ref) {
       ref.current = canvas;
     }
-  }, [ref]);
+  }, [ref, refForOutline]);
   useEffect17(() => {
     if (!outputCanvas || !sourceCanvas) {
       return;
@@ -8817,12 +8853,17 @@ var CanvasImageInner = forwardRef10(({
   stack,
   _experimentalControls: controls,
   _remotionInternalDocumentationLink,
+  _remotionInternalRefForOutline,
   ...canvasProps
 }, ref) => {
   if (!src) {
     throw new Error('No "src" prop was passed to <CanvasImage>.');
   }
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+  const actualRef = useRef23(null);
+  useImperativeHandle7(ref, () => {
+    return actualRef.current;
+  }, []);
   return /* @__PURE__ */ jsx25(Sequence, {
     layout: "none",
     from: from ?? 0,
@@ -8835,8 +8876,9 @@ var CanvasImageInner = forwardRef10(({
     _remotionInternalEffects: memoizedEffectDefinitions,
     _remotionInternalIsMedia: { type: "image", src },
     _remotionInternalStack: stack,
+    _remotionInternalRefForOutline: _remotionInternalRefForOutline ?? actualRef,
     children: /* @__PURE__ */ jsx25(CanvasImageContent, {
-      ref,
+      ref: actualRef,
       src,
       width,
       height,
@@ -8851,6 +8893,7 @@ var CanvasImageInner = forwardRef10(({
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
+      refForOutline: _remotionInternalRefForOutline ?? null,
       ...canvasProps
     })
   });
@@ -8905,19 +8948,26 @@ var ImgContent = ({
   crossOrigin,
   decoding,
   ref,
+  refForOutline,
   ...props2
 }) => {
-  const imageRef = useRef23(null);
-  const errors = useRef23({});
+  const imageRef = useRef24(null);
+  const errors = useRef24({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext33(SequenceContext);
   const _propsValid = true;
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  useImperativeHandle7(ref, () => {
-    return imageRef.current;
-  }, []);
+  const imageCallbackRef = useCallback18((img) => {
+    imageRef.current = img;
+    refForOutline.current = img;
+    if (typeof ref === "function") {
+      ref(img);
+    } else if (ref) {
+      ref.current = img;
+    }
+  }, [ref, refForOutline]);
   const actualSrc = usePreload(src);
   const retryIn = useCallback18((timeout) => {
     if (!imageRef.current) {
@@ -9033,7 +9083,7 @@ var ImgContent = ({
   });
   return /* @__PURE__ */ jsx27("img", {
     ...props2,
-    ref: imageRef,
+    ref: imageCallbackRef,
     crossOrigin: crossOriginValue,
     onError: didGetError,
     decoding: isRendering ? "sync" : decoding
@@ -9048,6 +9098,7 @@ var NativeImgInner = ({
   from,
   durationInFrames,
   _experimentalControls: controls,
+  _remotionInternalRefForOutline: refForOutline,
   ...props2
 }) => {
   if (!src) {
@@ -9064,8 +9115,10 @@ var NativeImgInner = ({
     _experimentalControls: controls,
     showInTimeline: showInTimeline ?? true,
     hidden,
+    _remotionInternalRefForOutline: refForOutline,
     children: /* @__PURE__ */ jsx27(ImgContent, {
       src,
+      refForOutline,
       ...props2
     })
   });
@@ -9139,6 +9192,7 @@ var ImgInner = ({
   delayRenderTimeoutInMilliseconds,
   ...props2
 }) => {
+  const refForOutline = useRef24(null);
   if (effects.length === 0) {
     return /* @__PURE__ */ jsx27(NativeImgInner, {
       ...props2,
@@ -9159,7 +9213,8 @@ var ImgInner = ({
       pauseWhenLoading,
       maxRetries,
       delayRenderRetries,
-      delayRenderTimeoutInMilliseconds
+      delayRenderTimeoutInMilliseconds,
+      _remotionInternalRefForOutline: refForOutline
     });
   }
   if (!src) {
@@ -9196,6 +9251,7 @@ var ImgInner = ({
     stack,
     _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/img" : undefined,
     _experimentalControls: controls,
+    _remotionInternalRefForOutline: refForOutline,
     ...canvasProps
   });
 };
@@ -9212,7 +9268,7 @@ var CompositionManagerProvider = ({
   const [folders, setFolders] = useState18([]);
   const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
   const [compositions, setCompositions] = useState18(initialCompositions);
-  const currentcompositionsRef = useRef24(compositions);
+  const currentcompositionsRef = useRef25(compositions);
   const updateCompositions = useCallback19((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
@@ -9952,7 +10008,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
-  const videoRef = useRef25(null);
+  const videoRef = useRef26(null);
   const sharedSource = useMemo36(() => {
     if (!context.audioContext) {
       return null;
@@ -10125,7 +10181,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("error", errorHandler);
     };
   }, [onError, src]);
-  const currentOnDurationCallback = useRef25(onDuration);
+  const currentOnDurationCallback = useRef26(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
   useEffect20(() => {
@@ -11147,7 +11203,7 @@ var VideoForRenderingForwardFunction = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
-  const videoRef = useRef26(null);
+  const videoRef = useRef27(null);
   const sequenceContext = useContext37(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
@@ -11919,7 +11975,7 @@ var ExpertsPageContent = ({ Link }) => {
 import * as React22 from "react";
 import * as React8 from "react";
 import { Fragment as Fragment22, jsx as jsx45 } from "react/jsx-runtime";
-import React52, { useCallback as useCallback25, useRef as useRef27, useState as useState22 } from "react";
+import React52, { useCallback as useCallback25, useRef as useRef28, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -17601,7 +17657,7 @@ var extrudeAndTransformElement = (options) => {
 // ../design/dist/esm/index.mjs
 import { jsx as jsx212, Fragment as Fragment3 } from "react/jsx-runtime";
 import { jsx as jsx312, jsxs as jsxs6 } from "react/jsx-runtime";
-import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef28 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef29 } from "react";
 import { jsx as jsx46 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
 import React62 from "react";
@@ -18123,7 +18179,7 @@ var Spinner = ({ size, duration }) => {
       height: size
     };
   }, [size]);
-  const pathsRef = useRef28([]);
+  const pathsRef = useRef29([]);
   useEffect23(() => {
     const animate = () => {
       const now = performance.now();
@@ -18169,7 +18225,7 @@ var Button = ({
   ...rest
 }) => {
   const [dimensions, setDimensions] = useState22(null);
-  const ref = useRef27(null);
+  const ref = useRef28(null);
   const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
   const onPointerEnter = useCallback25((e) => {
     if (e.pointerType !== "mouse") {
@@ -26238,9 +26294,358 @@ var Pricing = () => {
   });
 };
 
+// src/components/homepage/VideoAppsTitle.tsx
+import { jsx as jsx50 } from "react/jsx-runtime";
+var SectionTitle = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx50("div", {
+    className: "text-center",
+    children: /* @__PURE__ */ jsx50("h2", {
+      className: "fontbrand text-4xl",
+      children
+    })
+  });
+};
+
+// src/components/homepage/AutomationsSection.tsx
+import { jsx as jsx51, jsxs as jsxs10, Fragment as Fragment11 } from "react/jsx-runtime";
+var appPipeline = [
+  {
+    step: "01",
+    title: "Design a template",
+    description: "Start in Remotion Studio and build a reusable composition for your video workflow.",
+    link: "/docs/studio",
+    buttonText: "Remotion Studio",
+    illustration: "studio"
+  },
+  {
+    step: "02",
+    title: "Build an app around it",
+    description: "Expose props for text, images, colors, timing, and layouts to power editors, generators, and automations.",
+    link: "/docs/parameterized-rendering",
+    buttonText: "Parameterized rendering",
+    illustration: "preview"
+  },
+  {
+    step: "03",
+    title: "Preview and render",
+    description: /* @__PURE__ */ jsxs10(Fragment11, {
+      children: [
+        "Use the",
+        " ",
+        /* @__PURE__ */ jsx51("a", {
+          href: "/player",
+          className: "font-semibold text-text no-underline",
+          children: "Player"
+        }),
+        " ",
+        "for interactive previews, then render locally, on servers, serverlessly, or in-browser."
+      ]
+    }),
+    link: "/docs/render",
+    buttonText: "Rendering options",
+    illustration: "render"
+  }
+];
+var launchOptions = [
+  {
+    title: "Start from a template",
+    description: "Use starter projects for SaaS workflows, social videos, slideshows, captions, and repeatable video products.",
+    link: "/templates",
+    buttonText: "Browse templates"
+  },
+  {
+    title: "Build a video editor",
+    description: "Editor Starter is an official paid template for a timeline, canvas, asset uploads, and rendering.",
+    link: "/docs/editor-starter",
+    buttonText: "Editor Starter"
+  },
+  {
+    title: "See what teams ship",
+    description: "Audiograms, captioning tools, year-in-review generators, creative editors, and other products built with Remotion.",
+    link: "/showcase",
+    buttonText: "Showcase"
+  }
+];
+var icon2 = {
+  height: 16,
+  marginLeft: 10
+};
+var Arrow3 = () => /* @__PURE__ */ jsx51("svg", {
+  style: icon2,
+  viewBox: "0 0 448 512",
+  children: /* @__PURE__ */ jsx51("path", {
+    fill: "currentColor",
+    d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"
+  })
+});
+var InlineLink = ({ href, children }) => {
+  return /* @__PURE__ */ jsxs10("a", {
+    href,
+    className: "mt-3 inline-flex flex-row items-center font-brand text-base font-semibold text-text no-underline sm:text-sm",
+    children: [
+      children,
+      /* @__PURE__ */ jsx51(Arrow3, {})
+    ]
+  });
+};
+var illustrationFrame = "relative mb-5 flex h-40 w-full items-center justify-center px-3";
+var StudioIllustration = () => {
+  return /* @__PURE__ */ jsx51("div", {
+    className: illustrationFrame,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxs10("div", {
+      className: "relative w-full max-w-[220px] rounded-md bg-pane px-4 py-6 fontbrand",
+      children: [
+        /* @__PURE__ */ jsxs10("div", {
+          className: "absolute bottom-5 left-1/2 top-3 flex -translate-x-1/2 flex-col items-center",
+          children: [
+            /* @__PURE__ */ jsx51("div", {
+              className: "h-2 w-1 rounded-full bg-brand"
+            }),
+            /* @__PURE__ */ jsx51("div", {
+              className: "w-px flex-1 bg-brand/50"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs10("div", {
+          className: "space-y-4",
+          children: [
+            /* @__PURE__ */ jsxs10("div", {
+              className: "grid grid-cols-[28px_1fr] items-center gap-3",
+              children: [
+                /* @__PURE__ */ jsx51("div", {
+                  className: "h-2 rounded-full bg-muted"
+                }),
+                /* @__PURE__ */ jsx51("div", {
+                  className: "h-3 rounded-full bg-brand"
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs10("div", {
+              className: "grid grid-cols-[28px_1fr] items-center gap-3",
+              children: [
+                /* @__PURE__ */ jsx51("div", {
+                  className: "h-2 rounded-full bg-muted"
+                }),
+                /* @__PURE__ */ jsx51("div", {
+                  className: "ml-8 h-3 rounded-full bg-muted"
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs10("div", {
+              className: "grid grid-cols-[28px_1fr] items-center gap-3",
+              children: [
+                /* @__PURE__ */ jsx51("div", {
+                  className: "h-2 rounded-full bg-muted"
+                }),
+                /* @__PURE__ */ jsx51("div", {
+                  className: "mr-10 h-3 rounded-full bg-muted"
+                })
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+};
+var PropsIllustration = () => {
+  return /* @__PURE__ */ jsx51("div", {
+    className: illustrationFrame,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxs10("div", {
+      className: "flex h-[124px] w-full max-w-[240px] flex-col justify-center whitespace-nowrap rounded-md bg-pane p-4 text-left font-mono text-base leading-6 text-text sm:text-sm sm:leading-5",
+      children: [
+        /* @__PURE__ */ jsx51("div", {
+          className: "text-brand",
+          children: "{"
+        }),
+        /* @__PURE__ */ jsx51("div", {
+          className: "pl-4",
+          children: "title: 'Sale',"
+        }),
+        /* @__PURE__ */ jsx51("div", {
+          className: "pl-4",
+          children: "color: '#0B84F3',"
+        }),
+        /* @__PURE__ */ jsx51("div", {
+          className: "pl-4",
+          children: "items: 42"
+        }),
+        /* @__PURE__ */ jsx51("div", {
+          className: "text-brand",
+          children: "}"
+        })
+      ]
+    })
+  });
+};
+var PreviewIllustration = () => {
+  return /* @__PURE__ */ jsx51("div", {
+    className: illustrationFrame,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxs10("div", {
+      className: "w-full max-w-[240px] rounded-md border border-solid border-muted bg-card-bg p-2 fontbrand",
+      children: [
+        /* @__PURE__ */ jsx51("div", {
+          className: "relative flex h-[92px] items-center justify-center rounded-sm border border-solid border-muted bg-pane text-brand",
+          children: /* @__PURE__ */ jsxs10("svg", {
+            className: "h-14 w-14 text-brand",
+            viewBox: "-11.5 -10.23174 23 20.46348",
+            fill: "none",
+            children: [
+              /* @__PURE__ */ jsx51("circle", {
+                cx: "0",
+                cy: "0",
+                r: "2.05",
+                fill: "currentColor"
+              }),
+              /* @__PURE__ */ jsx51("ellipse", {
+                cx: "0",
+                cy: "0",
+                rx: "11",
+                ry: "4.2",
+                stroke: "currentColor",
+                strokeWidth: "1"
+              }),
+              /* @__PURE__ */ jsx51("ellipse", {
+                cx: "0",
+                cy: "0",
+                rx: "11",
+                ry: "4.2",
+                stroke: "currentColor",
+                strokeWidth: "1",
+                transform: "rotate(60)"
+              }),
+              /* @__PURE__ */ jsx51("ellipse", {
+                cx: "0",
+                cy: "0",
+                rx: "11",
+                ry: "4.2",
+                stroke: "currentColor",
+                strokeWidth: "1",
+                transform: "rotate(120)"
+              })
+            ]
+          })
+        }),
+        /* @__PURE__ */ jsxs10("div", {
+          className: "mt-2 flex items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsx51("div", {
+              className: "fontbrand text-xs font-semibold text-text",
+              children: "0:12"
+            }),
+            /* @__PURE__ */ jsx51("div", {
+              className: "h-1.5 flex-1 rounded-full bg-muted",
+              children: /* @__PURE__ */ jsx51("div", {
+                className: "h-full w-2/5 rounded-full bg-brand"
+              })
+            }),
+            /* @__PURE__ */ jsx51("div", {
+              className: "fontbrand text-xs font-semibold text-text",
+              children: "0:30"
+            })
+          ]
+        })
+      ]
+    })
+  });
+};
+var RenderIllustration = () => {
+  return /* @__PURE__ */ jsx51("div", {
+    className: illustrationFrame,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx51("div", {
+      className: "grid w-full max-w-[240px] grid-cols-2 gap-2 fontbrand text-base font-semibold",
+      children: [".mp4", ".webm", ".gif", ".png"].map((format) => /* @__PURE__ */ jsx51("div", {
+        className: "rounded-md bg-pane px-4 py-3 text-center text-brand",
+        children: format
+      }, format))
+    })
+  });
+};
+var PipelineIllustration = ({ kind }) => {
+  if (kind === "studio") {
+    return /* @__PURE__ */ jsx51(StudioIllustration, {});
+  }
+  if (kind === "props") {
+    return /* @__PURE__ */ jsx51(PropsIllustration, {});
+  }
+  if (kind === "preview") {
+    return /* @__PURE__ */ jsx51(PreviewIllustration, {});
+  }
+  return /* @__PURE__ */ jsx51(RenderIllustration, {});
+};
+var AutomationsSection = () => {
+  return /* @__PURE__ */ jsxs10("div", {
+    children: [
+      /* @__PURE__ */ jsx51(SectionTitle, {
+        children: "Create video apps and automations"
+      }),
+      /* @__PURE__ */ jsx51("div", {
+        className: "mx-auto mb-8 mt-3 max-w-[70ch] text-center fontbrand text-base leading-relaxed text-muted text-pretty",
+        children: "Design a reusable video template in Remotion, expose props for app UIs and automations, then preview and render it wherever your workflow runs."
+      }),
+      /* @__PURE__ */ jsx51("div", {
+        className: "py-4",
+        children: /* @__PURE__ */ jsx51("dl", {
+          className: "grid grid-cols-1 justify-items-stretch gap-5 lg:grid-cols-3 lg:justify-items-center lg:gap-0",
+          children: appPipeline.map((item) => /* @__PURE__ */ jsxs10("div", {
+            className: "flex w-full flex-col rounded-lg border border-solid border-text/10 bg-card-bg px-4 py-5 text-left sm:px-5 lg:max-w-[300px] lg:rounded-none lg:border-y-0 lg:border-r-0 lg:border-l lg:bg-transparent lg:px-6 lg:py-0 lg:first:border-l-0",
+            children: [
+              /* @__PURE__ */ jsx51(PipelineIllustration, {
+                kind: item.illustration
+              }),
+              /* @__PURE__ */ jsxs10("div", {
+                className: "mb-2 flex items-center gap-2.5",
+                children: [
+                  /* @__PURE__ */ jsx51("div", {
+                    className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-pane fontbrand text-xs font-semibold text-brand",
+                    children: item.step
+                  }),
+                  /* @__PURE__ */ jsx51("dt", {
+                    className: "fontbrand text-xl font-semibold tracking-tight text-text text-balance",
+                    children: item.title
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx51("dd", {
+                className: "m-0 mt-1 flex-1 fontbrand text-base leading-relaxed text-muted text-pretty sm:text-sm",
+                children: item.description
+              }),
+              /* @__PURE__ */ jsx51(InlineLink, {
+                href: item.link,
+                children: item.buttonText
+              })
+            ]
+          }, item.step))
+        })
+      }),
+      /* @__PURE__ */ jsxs10("div", {
+        className: "mt-8 flex flex-wrap justify-center gap-x-5 gap-y-2 fontbrand text-base text-muted sm:text-sm",
+        children: [
+          /* @__PURE__ */ jsx51("span", {
+            children: "Explore:"
+          }),
+          launchOptions.map((item) => /* @__PURE__ */ jsx51("a", {
+            href: item.link,
+            className: "font-semibold text-text no-underline",
+            title: item.description,
+            children: item.buttonText
+          }, item.link))
+        ]
+      })
+    ]
+  });
+};
+var AutomationsSection_default = AutomationsSection;
+
 // src/components/homepage/BackgroundAnimation.tsx
 import { useEffect as useEffect41 } from "react";
-import { jsx as jsx50, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs11 } from "react/jsx-runtime";
 "use client";
 var rx = 0.2;
 var ry = 0.45;
@@ -26270,9 +26675,9 @@ var BackgroundAnimation = () => {
     _style.innerHTML = css;
     document.head.appendChild(_style);
   }, [css]);
-  return /* @__PURE__ */ jsx50("div", {
+  return /* @__PURE__ */ jsx54("div", {
     className: " w-full h-full min-w-0 m-auto lg:relative lg:min-w-[700px] lg:max-w-[1200px] lg:ml-auto lg:left-auto pointer-events-none",
-    children: /* @__PURE__ */ jsxs10("svg", {
+    children: /* @__PURE__ */ jsxs11("svg", {
       className: "translate-y-[-30%] lg:translate-y-[-50%]",
       viewBox: "0 0 1 1",
       style: {
@@ -26280,7 +26685,7 @@ var BackgroundAnimation = () => {
         position: "absolute"
       },
       children: [
-        /* @__PURE__ */ jsx50("path", {
+        /* @__PURE__ */ jsx54("path", {
           d: d2,
           fill: "none",
           stroke: "var(--ifm-color-primary)",
@@ -26293,7 +26698,7 @@ var BackgroundAnimation = () => {
             strokeDasharray: `${length2 * 0.2} ${length2 * 0.8}`
           }
         }),
-        /* @__PURE__ */ jsx50("path", {
+        /* @__PURE__ */ jsx54("path", {
           d: d2,
           fill: "none",
           stroke: "var(--ifm-color-primary)",
@@ -26307,7 +26712,7 @@ var BackgroundAnimation = () => {
             strokeDasharray: `${length2 * 0.2} ${length2 * 0.8}`
           }
         }),
-        /* @__PURE__ */ jsx50("path", {
+        /* @__PURE__ */ jsx54("path", {
           d: d2,
           fill: "none",
           stroke: "var(--ifm-color-primary)",
@@ -26327,7 +26732,7 @@ var BackgroundAnimation = () => {
 };
 
 // src/components/homepage/CommunityStatsItems.tsx
-import { jsx as jsx51, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs12 } from "react/jsx-runtime";
 var StatItemContent = ({
   content,
   width,
@@ -26336,7 +26741,7 @@ var StatItemContent = ({
   height = "auto",
   fontSize,
   fontWeight
-}) => /* @__PURE__ */ jsx51("div", {
+}) => /* @__PURE__ */ jsx56("div", {
   style: {
     width,
     minWidth,
@@ -26354,36 +26759,36 @@ var StatItemContent = ({
   children: content
 });
 var Pill = ({ children, className }) => {
-  return /* @__PURE__ */ jsx51("div", {
+  return /* @__PURE__ */ jsx56("div", {
     className: cn2(className, "card leading-none flex flex-wrap justify-center items-center min-w-[200px] min-h-[80px] max-h-[110px] flex-1 p-0"),
     children
   });
 };
 var InstallsPerMonth = () => {
-  return /* @__PURE__ */ jsxs11(Pill, {
+  return /* @__PURE__ */ jsxs12(Pill, {
     className: "w-[30%] flex-col",
     children: [
-      /* @__PURE__ */ jsxs11("div", {
+      /* @__PURE__ */ jsxs12("div", {
         style: {
           display: "flex",
           alignItems: "center",
           justifyContent: "center"
         },
         children: [
-          /* @__PURE__ */ jsx51(StatItemContent, {
+          /* @__PURE__ */ jsx56(StatItemContent, {
             content: "3M",
             width: "100px",
             fontSize: "2.5rem",
             fontWeight: "bold"
           }),
-          /* @__PURE__ */ jsx51(StatItemContent, {
-            content: /* @__PURE__ */ jsx51("svg", {
+          /* @__PURE__ */ jsx56(StatItemContent, {
+            content: /* @__PURE__ */ jsx56("svg", {
               width: "40",
               height: "40",
               viewBox: "0 0 25 25",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              children: /* @__PURE__ */ jsx51("path", {
+              children: /* @__PURE__ */ jsx56("path", {
                 d: "M12.6367 2.47534C12.5488 2.44116 12.4512 2.44116 12.3584 2.47534L3.10547 5.98608L12.5 9.67749L21.8945 5.98608L12.6367 2.47534ZM2.34375 18.4519C2.34375 18.613 2.44629 18.7595 2.59766 18.8181L11.3281 22.1287V11.738L2.34375 8.20776V18.4519ZM13.6719 22.1287L22.4023 18.8181C22.5537 18.7595 22.6562 18.613 22.6562 18.4519V8.20776L13.6719 11.738V22.1287ZM11.5283 0.287842C12.1533 0.048584 12.8418 0.048584 13.4668 0.287842L23.2324 3.9939C24.2969 4.39429 25 5.40991 25 6.54761V18.4519C25 19.5896 24.2969 20.6052 23.2373 21.0105L13.4717 24.7166C12.8467 24.9558 12.1582 24.9558 11.5332 24.7166L1.76758 21.0105C0.703125 20.6052 0 19.5896 0 18.4519V6.54761C0 5.40991 0.703125 4.39429 1.7627 3.98901L11.5283 0.282959V0.287842Z",
                 fill: "var(--text-color)"
               })
@@ -26392,7 +26797,7 @@ var InstallsPerMonth = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsx51(StatItemContent, {
+      /* @__PURE__ */ jsx56(StatItemContent, {
         content: "installs",
         width: "75%",
         fontSize: "1.0rem",
@@ -26402,27 +26807,27 @@ var InstallsPerMonth = () => {
   });
 };
 var PagesOfDocs = () => {
-  return /* @__PURE__ */ jsxs11(Pill, {
+  return /* @__PURE__ */ jsxs12(Pill, {
     className: "flex-col",
     children: [
-      /* @__PURE__ */ jsxs11("div", {
+      /* @__PURE__ */ jsxs12("div", {
         style: { display: "flex", alignItems: "center" },
         children: [
-          /* @__PURE__ */ jsx51(StatItemContent, {
-            content: /* @__PURE__ */ jsx51("svg", {
+          /* @__PURE__ */ jsx56(StatItemContent, {
+            content: /* @__PURE__ */ jsx56("svg", {
               width: "28",
               height: "40",
               viewBox: "0 0 18 21",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              children: /* @__PURE__ */ jsx51("path", {
+              children: /* @__PURE__ */ jsx56("path", {
                 d: "M0 3.60938C0 1.61602 1.58304 0 3.53571 0H17.0357H18V0.984375V15.4219V16.4062H17.0357H16.7143V19.0312H17.0357H18V21H17.0357H3.21429C1.43839 21 0 19.5316 0 17.7188C0 17.608 0.00401786 17.4973 0.0160714 17.3906H0V3.60938ZM3.21429 16.4062C2.50312 16.4062 1.92857 16.9928 1.92857 17.7188C1.92857 18.4447 2.50312 19.0312 3.21429 19.0312H14.7857V16.4062H3.21429ZM1.92857 14.7123C2.32232 14.5359 2.75625 14.4375 3.21429 14.4375H16.0714V1.96875H3.53571C2.64777 1.96875 1.92857 2.70293 1.92857 3.60938V14.7123ZM6.10714 4.59375H13.1786H14.1429V6.5625H13.1786H6.10714H5.14286V4.59375H6.10714ZM6.10714 7.875H13.1786H14.1429V9.84375H13.1786H6.10714H5.14286V7.875H6.10714Z",
                 fill: "var(--text-color)"
               })
             }),
             width: "40px"
           }),
-          /* @__PURE__ */ jsx51(StatItemContent, {
+          /* @__PURE__ */ jsx56(StatItemContent, {
             content: "800",
             width: "85px",
             maxWidth: "100px",
@@ -26431,7 +26836,7 @@ var PagesOfDocs = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsx51(StatItemContent, {
+      /* @__PURE__ */ jsx56(StatItemContent, {
         content: "pages of docs",
         width: "125px",
         fontSize: "1.0rem",
@@ -26440,16 +26845,16 @@ var PagesOfDocs = () => {
     ]
   });
 };
-var TemplatesAndExamples = () => /* @__PURE__ */ jsxs11(Pill, {
+var TemplatesAndExamples = () => /* @__PURE__ */ jsxs12(Pill, {
   className: "w-[30%] flex items-center flex-row",
   children: [
-    /* @__PURE__ */ jsx51(StatItemContent, {
+    /* @__PURE__ */ jsx56(StatItemContent, {
       content: "35",
       width: "60px",
       fontSize: "2.7rem",
       fontWeight: "bold"
     }),
-    /* @__PURE__ */ jsx51(StatItemContent, {
+    /* @__PURE__ */ jsx56(StatItemContent, {
       content: "templates & examples",
       width: "135px",
       fontSize: "1.35rem",
@@ -26458,27 +26863,27 @@ var TemplatesAndExamples = () => /* @__PURE__ */ jsxs11(Pill, {
   ]
 });
 var GitHubStars = () => {
-  return /* @__PURE__ */ jsxs11(Pill, {
+  return /* @__PURE__ */ jsxs12(Pill, {
     className: "w-[30%] flex-col",
     children: [
-      /* @__PURE__ */ jsxs11("div", {
+      /* @__PURE__ */ jsxs12("div", {
         style: { display: "flex", alignItems: "center" },
         children: [
-          /* @__PURE__ */ jsx51(StatItemContent, {
-            content: /* @__PURE__ */ jsx51("svg", {
+          /* @__PURE__ */ jsx56(StatItemContent, {
+            content: /* @__PURE__ */ jsx56("svg", {
               width: "40",
               height: "40",
               viewBox: "0 0 26 24",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              children: /* @__PURE__ */ jsx51("path", {
+              children: /* @__PURE__ */ jsx56("path", {
                 d: "M12.9951 0C13.4424 0 13.8507 0.24375 14.0451 0.632812L17.3799 7.25625L24.8271 8.31562C25.2646 8.37656 25.6292 8.67188 25.7653 9.07969C25.9014 9.4875 25.7896 9.92812 25.4785 10.2281L20.0778 15.3937L21.3514 22.6875C21.4243 23.1094 21.2444 23.5359 20.8799 23.7891C20.5153 24.0422 20.0389 24.0703 19.65 23.8688L12.9903 20.4375L6.34027 23.8641C5.94652 24.0656 5.47014 24.0375 5.11041 23.7844C4.75069 23.5312 4.56597 23.1047 4.63889 22.6828L5.9125 15.3891L0.511803 10.2281C0.195831 9.92812 0.0888863 9.48281 0.224997 9.07969C0.361108 8.67656 0.725692 8.38125 1.16319 8.31562L8.61041 7.25625L11.9451 0.632812C12.1444 0.24375 12.5479 0 12.9951 0ZM12.9951 3.70312L10.4431 8.775C10.2729 9.10781 9.94722 9.34219 9.56319 9.39844L3.8125 10.2141L7.98819 14.2031C8.25555 14.4609 8.38194 14.8266 8.31875 15.1875L7.33194 20.7984L12.4458 18.1641C12.791 17.9859 13.2042 17.9859 13.5444 18.1641L18.6583 20.7984L17.6764 15.1922C17.6132 14.8313 17.7347 14.4656 18.0069 14.2078L22.1826 10.2188L16.4319 9.39844C16.0528 9.34219 15.7222 9.1125 15.5521 8.775L12.9951 3.70312Z",
                 fill: "var(--text-color)"
               })
             }),
             width: "45px"
           }),
-          /* @__PURE__ */ jsx51(StatItemContent, {
+          /* @__PURE__ */ jsx56(StatItemContent, {
             content: "48k",
             width: "80px",
             fontSize: "2.5rem",
@@ -26486,7 +26891,7 @@ var GitHubStars = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsx51(StatItemContent, {
+      /* @__PURE__ */ jsx56(StatItemContent, {
         content: "GitHub stars",
         width: "125px",
         fontSize: "1.0rem",
@@ -26496,9 +26901,9 @@ var GitHubStars = () => {
   });
 };
 var DiscordMembers = () => {
-  return /* @__PURE__ */ jsx51(Pill, {
+  return /* @__PURE__ */ jsx56(Pill, {
     className: "w-[30%]",
-    children: /* @__PURE__ */ jsxs11("div", {
+    children: /* @__PURE__ */ jsxs12("div", {
       style: {
         width: "80%",
         display: "flex",
@@ -26506,7 +26911,7 @@ var DiscordMembers = () => {
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ jsxs11("div", {
+        /* @__PURE__ */ jsxs12("div", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -26514,13 +26919,13 @@ var DiscordMembers = () => {
             justifyContent: "center"
           },
           children: [
-            /* @__PURE__ */ jsx51(StatItemContent, {
+            /* @__PURE__ */ jsx56(StatItemContent, {
               content: "8000+",
               width: "142px",
               fontSize: "2.5rem",
               fontWeight: "bold"
             }),
-            /* @__PURE__ */ jsx51(StatItemContent, {
+            /* @__PURE__ */ jsx56(StatItemContent, {
               content: "Discord members",
               width: "142px",
               fontSize: "1rem",
@@ -26528,19 +26933,19 @@ var DiscordMembers = () => {
             })
           ]
         }),
-        /* @__PURE__ */ jsx51("div", {
+        /* @__PURE__ */ jsx56("div", {
           style: {
             display: "flex",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ jsx51(StatItemContent, {
-            content: /* @__PURE__ */ jsx51("svg", {
+          children: /* @__PURE__ */ jsx56(StatItemContent, {
+            content: /* @__PURE__ */ jsx56("svg", {
               width: "61",
               height: "47",
               viewBox: "0 0 46 35",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              children: /* @__PURE__ */ jsx51("path", {
+              children: /* @__PURE__ */ jsx56("path", {
                 d: "M38.9978 2.95533C38.9843 2.93009 38.962 2.91064 38.9352 2.90065C35.955 1.53492 32.8101 0.560692 29.5791 0.00230404C29.55 -0.00300893 29.5201 0.00092017 29.4934 0.0135365C29.4667 0.0261528 29.4447 0.0468187 29.4304 0.0726144C29.0019 0.84938 28.6129 1.64724 28.2648 2.46316C24.7802 1.93495 21.2356 1.93495 17.7509 2.46316C17.4015 1.64523 17.0072 0.847165 16.5697 0.0726144C16.5546 0.0475873 16.5324 0.0275657 16.506 0.0150584C16.4795 0.00255114 16.45 -0.00188563 16.421 0.00230404C13.1844 0.558177 10.034 1.53248 7.04927 2.90065C7.0231 2.91173 7.00116 2.93089 6.98669 2.95533C1.02568 11.8535 -0.609293 20.5251 0.188637 29.0951C0.190896 29.1167 0.197628 29.1376 0.208402 29.1564C0.219177 29.1752 0.233759 29.1916 0.25122 29.2045C3.7235 31.7693 7.60667 33.7268 11.7352 34.9934C11.7648 35.0025 11.7966 35.0022 11.8261 34.9924C11.8556 34.9826 11.8812 34.9638 11.8994 34.9387C12.7852 33.7344 13.5702 32.4593 14.2463 31.1263C14.2553 31.108 14.2604 31.088 14.2613 31.0676C14.2622 31.0471 14.2589 31.0268 14.2516 31.0077C14.2442 30.9886 14.233 30.9713 14.2186 30.9567C14.2043 30.9422 14.1871 30.9308 14.1681 30.9232C12.9278 30.4486 11.7271 29.8765 10.5774 29.2123C10.5571 29.1999 10.54 29.1828 10.5277 29.1624C10.5154 29.142 10.5082 29.119 10.5067 29.0953C10.5051 29.0715 10.5093 29.0478 10.5189 29.026C10.5285 29.0042 10.5432 28.985 10.5617 28.9701C10.8042 28.7904 11.0468 28.6029 11.2736 28.4155C11.2936 28.3979 11.3182 28.3864 11.3445 28.3822C11.3708 28.3781 11.3978 28.3815 11.4222 28.392C18.9478 31.8216 27.0992 31.8216 34.5388 28.392C34.5625 28.3804 34.589 28.3757 34.6153 28.3785C34.6416 28.3813 34.6666 28.3914 34.6874 28.4076C34.9143 28.5951 35.1568 28.7904 35.3993 28.9701C35.4178 28.985 35.4325 29.0042 35.4421 29.026C35.4517 29.0478 35.4559 29.0715 35.4543 29.0953C35.4528 29.119 35.4456 29.142 35.4333 29.1624C35.421 29.1828 35.4039 29.1999 35.3836 29.2123C34.2369 29.8799 33.0357 30.4496 31.7929 30.9154C31.7739 30.923 31.7567 30.9344 31.7424 30.9489C31.728 30.9635 31.7168 30.9808 31.7095 30.9999C31.7021 31.019 31.6988 31.0393 31.6997 31.0597C31.7006 31.0801 31.7057 31.1001 31.7147 31.1185C32.4026 32.4449 33.187 33.7191 34.0616 34.9309C34.0798 34.956 34.1054 34.9748 34.1349 34.9846C34.1644 34.9944 34.1962 34.9947 34.2258 34.9856C38.3663 33.7246 42.2606 31.7669 45.7411 29.1967C45.7589 29.1841 45.7737 29.1679 45.7846 29.149C45.7954 29.1301 45.8019 29.109 45.8037 29.0873C46.758 19.1892 44.1922 10.5879 38.9978 2.95533ZM15.3728 23.8765C13.1042 23.8765 11.2423 21.7985 11.2423 19.2517C11.2423 16.7049 13.0729 14.619 15.3728 14.619C17.6962 14.619 19.5424 16.7127 19.5032 19.2439C19.5032 21.7985 17.6727 23.8765 15.3728 23.8765ZM30.6586 23.8765C28.39 23.8765 26.5282 21.7985 26.5282 19.2517C26.5282 16.7049 28.3509 14.619 30.6586 14.619C32.982 14.619 34.8282 16.7127 34.7891 19.2439C34.7891 21.7985 32.9742 23.8765 30.6586 23.8765Z",
                 fill: "var(--text-color)"
               })
@@ -26553,21 +26958,21 @@ var DiscordMembers = () => {
   });
 };
 var Contributors = () => {
-  return /* @__PURE__ */ jsx51(Pill, {
+  return /* @__PURE__ */ jsx56(Pill, {
     className: "w-[30%]",
-    children: /* @__PURE__ */ jsxs11("div", {
+    children: /* @__PURE__ */ jsxs12("div", {
       style: { display: "flex", justifyContent: "center" },
       children: [
-        /* @__PURE__ */ jsx51("div", {
+        /* @__PURE__ */ jsx56("div", {
           style: { display: "flex", justifyContent: "center" },
-          children: /* @__PURE__ */ jsx51(StatItemContent, {
-            content: /* @__PURE__ */ jsx51("svg", {
+          children: /* @__PURE__ */ jsx56(StatItemContent, {
+            content: /* @__PURE__ */ jsx56("svg", {
               width: "60",
               height: "50",
               viewBox: "0 0 63 40",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              children: /* @__PURE__ */ jsx51("path", {
+              children: /* @__PURE__ */ jsx56("path", {
                 d: "M6.975 5.375C6.975 3.94946 7.54656 2.58231 8.56395 1.5743C9.58133 0.566293 10.9612 0 12.4 0C13.8388 0 15.2187 0.566293 16.2361 1.5743C17.2534 2.58231 17.825 3.94946 17.825 5.375C17.825 6.80054 17.2534 8.16769 16.2361 9.1757C15.2187 10.1837 13.8388 10.75 12.4 10.75C10.9612 10.75 9.58133 10.1837 8.56395 9.1757C7.54656 8.16769 6.975 6.80054 6.975 5.375ZM6.2 20.5114C5.23125 21.5864 4.65 23.0165 4.65 24.5714C4.65 26.1263 5.23125 27.5565 6.2 28.6315V20.5114ZM20.1887 15.7795C17.3116 18.3038 15.5 21.9991 15.5 26.1071C15.5 29.3993 16.6625 32.4228 18.6 34.7935V36.8571C18.6 38.556 17.2147 39.9286 15.5 39.9286H9.3C7.58531 39.9286 6.2 38.556 6.2 36.8571V34.2848C2.53813 32.5571 0 28.8618 0 24.5714C0 18.6301 4.85344 13.8214 10.85 13.8214H13.95C16.275 13.8214 18.4256 14.5413 20.1887 15.7699V15.7795ZM43.4 36.8571V34.7935C45.3375 32.4228 46.5 29.3993 46.5 26.1071C46.5 21.9991 44.6884 18.3038 41.8112 15.7699C43.5744 14.5413 45.725 13.8214 48.05 13.8214H51.15C57.1466 13.8214 62 18.6301 62 24.5714C62 28.8618 59.4619 32.5571 55.8 34.2848V36.8571C55.8 38.556 54.4147 39.9286 52.7 39.9286H46.5C44.7853 39.9286 43.4 38.556 43.4 36.8571ZM44.175 5.375C44.175 3.94946 44.7466 2.58231 45.7639 1.5743C46.7813 0.566293 48.1612 0 49.6 0C51.0388 0 52.4187 0.566293 53.4361 1.5743C54.4534 2.58231 55.025 3.94946 55.025 5.375C55.025 6.80054 54.4534 8.16769 53.4361 9.1757C52.4187 10.1837 51.0388 10.75 49.6 10.75C48.1612 10.75 46.7813 10.1837 45.7639 9.1757C44.7466 8.16769 44.175 6.80054 44.175 5.375ZM55.8 20.5114V28.6411C56.7687 27.5565 57.35 26.1359 57.35 24.581C57.35 23.0261 56.7687 21.596 55.8 20.521V20.5114ZM31 0C32.6443 0 34.2213 0.647192 35.3841 1.7992C36.5468 2.95121 37.2 4.51367 37.2 6.14286C37.2 7.77204 36.5468 9.3345 35.3841 10.4865C34.2213 11.6385 32.6443 12.2857 31 12.2857C29.3557 12.2857 27.7787 11.6385 26.6159 10.4865C25.4532 9.3345 24.8 7.77204 24.8 6.14286C24.8 4.51367 25.4532 2.95121 26.6159 1.7992C27.7787 0.647192 29.3557 0 31 0ZM23.25 26.1071C23.25 27.6621 23.8312 29.0826 24.8 30.1672V22.0471C23.8312 23.1317 23.25 24.5522 23.25 26.1071ZM37.2 22.0471V30.1768C38.1687 29.0922 38.75 27.6717 38.75 26.1167C38.75 24.5618 38.1687 23.1317 37.2 22.0567V22.0471ZM43.4 26.1071C43.4 30.3975 40.8619 34.0929 37.2 35.8205V39.9286C37.2 41.6275 35.8147 43 34.1 43H27.9C26.1853 43 24.8 41.6275 24.8 39.9286V35.8205C21.1381 34.0929 18.6 30.3975 18.6 26.1071C18.6 20.1658 23.4534 15.3571 29.45 15.3571H32.55C38.5466 15.3571 43.4 20.1658 43.4 26.1071Z",
                 fill: "var(--text-color)"
               })
@@ -26575,7 +26980,7 @@ var Contributors = () => {
             width: "65px"
           })
         }),
-        /* @__PURE__ */ jsxs11("div", {
+        /* @__PURE__ */ jsxs12("div", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -26583,13 +26988,13 @@ var Contributors = () => {
             justifyContent: "center"
           },
           children: [
-            /* @__PURE__ */ jsx51(StatItemContent, {
+            /* @__PURE__ */ jsx56(StatItemContent, {
               content: "300+",
               width: "100px",
               fontSize: "2.5rem",
               fontWeight: "bold"
             }),
-            /* @__PURE__ */ jsx51(StatItemContent, {
+            /* @__PURE__ */ jsx56(StatItemContent, {
               content: "contributors",
               width: "100px",
               fontSize: "1.0rem",
@@ -26602,64 +27007,50 @@ var Contributors = () => {
   });
 };
 
-// src/components/homepage/VideoAppsTitle.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
-var SectionTitle = ({
-  children
-}) => {
-  return /* @__PURE__ */ jsx54("div", {
-    className: "text-center",
-    children: /* @__PURE__ */ jsx54("h2", {
-      className: "fontbrand text-4xl",
-      children
-    })
-  });
-};
-
 // src/components/homepage/CommunityStats.tsx
-import { jsx as jsx56, jsxs as jsxs12 } from "react/jsx-runtime";
-var SectionLink = ({ href, children }) => /* @__PURE__ */ jsx56("a", {
+import { jsx as jsx57, jsxs as jsxs13 } from "react/jsx-runtime";
+var SectionLink = ({ href, children }) => /* @__PURE__ */ jsx57("a", {
   target: "_blank",
   href,
   className: "no-underline text-inherit contents",
   children
 });
-var CommunityStats = () => /* @__PURE__ */ jsxs12("div", {
+var CommunityStats = () => /* @__PURE__ */ jsxs13("div", {
   className: "m-auto max-w-[700px] text-center",
   children: [
-    /* @__PURE__ */ jsx56(SectionTitle, {
+    /* @__PURE__ */ jsx57(SectionTitle, {
       children: "Never build alone"
     }),
-    /* @__PURE__ */ jsx56("div", {
+    /* @__PURE__ */ jsx57("div", {
       className: "fontbrand text-center mb-10 -mt-4",
       children: "Join a thriving community of developers."
     }),
-    /* @__PURE__ */ jsxs12("div", {
+    /* @__PURE__ */ jsxs13("div", {
       className: "flex flex-wrap justify-between gap-4 w-full items-center",
       children: [
-        /* @__PURE__ */ jsx56(SectionLink, {
+        /* @__PURE__ */ jsx57(SectionLink, {
           href: "https://www.npmjs.com/package/remotion",
-          children: /* @__PURE__ */ jsx56(InstallsPerMonth, {})
+          children: /* @__PURE__ */ jsx57(InstallsPerMonth, {})
         }),
-        /* @__PURE__ */ jsx56(SectionLink, {
+        /* @__PURE__ */ jsx57(SectionLink, {
           href: "https://www.remotion.dev/docs/",
-          children: /* @__PURE__ */ jsx56(PagesOfDocs, {})
+          children: /* @__PURE__ */ jsx57(PagesOfDocs, {})
         }),
-        /* @__PURE__ */ jsx56(SectionLink, {
+        /* @__PURE__ */ jsx57(SectionLink, {
           href: "https://www.remotion.dev/templates",
-          children: /* @__PURE__ */ jsx56(TemplatesAndExamples, {})
+          children: /* @__PURE__ */ jsx57(TemplatesAndExamples, {})
         }),
-        /* @__PURE__ */ jsx56(SectionLink, {
+        /* @__PURE__ */ jsx57(SectionLink, {
           href: "https://github.com/remotion-dev/remotion",
-          children: /* @__PURE__ */ jsx56(GitHubStars, {})
+          children: /* @__PURE__ */ jsx57(GitHubStars, {})
         }),
-        /* @__PURE__ */ jsx56(SectionLink, {
+        /* @__PURE__ */ jsx57(SectionLink, {
           href: "https://remotion.dev/discord",
-          children: /* @__PURE__ */ jsx56(DiscordMembers, {})
+          children: /* @__PURE__ */ jsx57(DiscordMembers, {})
         }),
-        /* @__PURE__ */ jsx56(SectionLink, {
+        /* @__PURE__ */ jsx57(SectionLink, {
           href: "https://github.com/remotion-dev/remotion/graphs/contributors",
-          children: /* @__PURE__ */ jsx56(Contributors, {})
+          children: /* @__PURE__ */ jsx57(Contributors, {})
         })
       ]
     })
@@ -26669,17 +27060,17 @@ var CommunityStats_default = CommunityStats;
 
 // ../player/dist/esm/index.mjs
 import { createContext as createContext32 } from "react";
-import { jsx as jsx57, jsxs as jsxs13 } from "react/jsx-runtime";
-import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment11 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment12 } from "react/jsx-runtime";
 import React56 from "react";
 import { useContext as useContext210, useEffect as useEffect42, useState as useState38 } from "react";
 import { useContext as useContext45, useLayoutEffect as useLayoutEffect17 } from "react";
 import { jsx as jsx314 } from "react/jsx-runtime";
 import { useEffect as useEffect210, useState as useState210 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
-import { useContext as useContext46, useEffect as useEffect52, useRef as useRef45 } from "react";
-import { useEffect as useEffect310, useRef as useRef29 } from "react";
-import { useCallback as useCallback36, useContext as useContext310, useMemo as useMemo53, useRef as useRef46, useState as useState39 } from "react";
+import { useContext as useContext46, useEffect as useEffect52, useRef as useRef46 } from "react";
+import { useEffect as useEffect310, useRef as useRef210 } from "react";
+import { useCallback as useCallback36, useContext as useContext310, useMemo as useMemo53, useRef as useRef47, useState as useState39 } from "react";
 import { useEffect as useEffect43, useRef as useRef310 } from "react";
 import { useCallback as useCallback210, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
@@ -27700,12 +28091,12 @@ if (typeof createContext32 !== "function") {
 var ICON_SIZE2 = 25;
 var fullscreenIconSize = 16;
 var PlayIcon = () => {
-  return /* @__PURE__ */ jsx57("svg", {
+  return /* @__PURE__ */ jsx58("svg", {
     width: ICON_SIZE2,
     height: ICON_SIZE2,
     viewBox: "0 0 25 25",
     fill: "none",
-    children: /* @__PURE__ */ jsx57("path", {
+    children: /* @__PURE__ */ jsx58("path", {
       d: "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z",
       fill: "white",
       stroke: "white",
@@ -27715,12 +28106,12 @@ var PlayIcon = () => {
   });
 };
 var PauseIcon = () => {
-  return /* @__PURE__ */ jsxs13("svg", {
+  return /* @__PURE__ */ jsxs14("svg", {
     viewBox: "0 0 100 100",
     width: ICON_SIZE2,
     height: ICON_SIZE2,
     children: [
-      /* @__PURE__ */ jsx57("rect", {
+      /* @__PURE__ */ jsx58("rect", {
         x: "25",
         y: "20",
         width: "20",
@@ -27729,7 +28120,7 @@ var PauseIcon = () => {
         ry: "5",
         rx: "5"
       }),
-      /* @__PURE__ */ jsx57("rect", {
+      /* @__PURE__ */ jsx58("rect", {
         x: "55",
         y: "20",
         width: "20",
@@ -27749,12 +28140,12 @@ var FullscreenIcon = ({
   const out = isFullscreen ? 0 : strokeWidth2 / 2;
   const middleInset = isFullscreen ? strokeWidth2 * 1.6 : strokeWidth2 / 2;
   const inset = isFullscreen ? strokeWidth2 * 1.6 : strokeWidth2 * 2;
-  return /* @__PURE__ */ jsxs13("svg", {
+  return /* @__PURE__ */ jsxs14("svg", {
     viewBox: `0 0 ${viewSize} ${viewSize}`,
     height: fullscreenIconSize,
     width: fullscreenIconSize,
     children: [
-      /* @__PURE__ */ jsx57("path", {
+      /* @__PURE__ */ jsx58("path", {
         d: `
 				M ${out} ${inset}
 				L ${middleInset} ${middleInset}
@@ -27764,7 +28155,7 @@ var FullscreenIcon = ({
         strokeWidth: strokeWidth2,
         fill: "none"
       }),
-      /* @__PURE__ */ jsx57("path", {
+      /* @__PURE__ */ jsx58("path", {
         d: `
 				M ${viewSize - out} ${inset}
 				L ${viewSize - middleInset} ${middleInset}
@@ -27774,7 +28165,7 @@ var FullscreenIcon = ({
         strokeWidth: strokeWidth2,
         fill: "none"
       }),
-      /* @__PURE__ */ jsx57("path", {
+      /* @__PURE__ */ jsx58("path", {
         d: `
 				M ${out} ${viewSize - inset}
 				L ${middleInset} ${viewSize - middleInset}
@@ -27784,7 +28175,7 @@ var FullscreenIcon = ({
         strokeWidth: strokeWidth2,
         fill: "none"
       }),
-      /* @__PURE__ */ jsx57("path", {
+      /* @__PURE__ */ jsx58("path", {
         d: `
 				M ${viewSize - out} ${viewSize - inset}
 				L ${viewSize - middleInset} ${viewSize - middleInset}
@@ -27798,22 +28189,22 @@ var FullscreenIcon = ({
   });
 };
 var VolumeOffIcon = () => {
-  return /* @__PURE__ */ jsx57("svg", {
+  return /* @__PURE__ */ jsx58("svg", {
     width: ICON_SIZE2,
     height: ICON_SIZE2,
     viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx57("path", {
+    children: /* @__PURE__ */ jsx58("path", {
       d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z",
       fill: "#fff"
     })
   });
 };
 var VolumeOnIcon = () => {
-  return /* @__PURE__ */ jsx57("svg", {
+  return /* @__PURE__ */ jsx58("svg", {
     width: ICON_SIZE2,
     height: ICON_SIZE2,
     viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx57("path", {
+    children: /* @__PURE__ */ jsx58("path", {
       d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z",
       fill: "#fff"
     })
@@ -27837,7 +28228,7 @@ var studioStyle = {
 };
 var BufferingIndicator = ({ type }) => {
   const style = type === "player" ? playerStyle : studioStyle;
-  return /* @__PURE__ */ jsxs24(Fragment11, {
+  return /* @__PURE__ */ jsxs24(Fragment12, {
     children: [
       /* @__PURE__ */ jsx214("style", {
         type: "text/css",
@@ -28209,13 +28600,13 @@ var usePlayer = () => {
   const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();
   const [hasPlayed, setHasPlayed] = useState39(false);
   const frame = Internals.Timeline.useTimelinePosition();
-  const playStart = useRef46(frame);
+  const playStart = useRef47(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
   const audioContext = useContext310(Internals.SharedAudioContext);
   const audioTagsContext = useContext310(Internals.SharedAudioTagsContext);
   const { audioAndVideoTags } = Internals.useTimelineContext();
-  const frameRef = useRef46(frame);
+  const frameRef = useRef47(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
@@ -28385,7 +28776,7 @@ var useBrowserMediaSession = ({
   playbackRate
 }) => {
   const { playing, pause, play, emitter, getCurrentFrame, seek: seek2 } = usePlayer();
-  const hasEverPlayed = useRef29(false);
+  const hasEverPlayed = useRef210(false);
   useEffect310(() => {
     if (playing) {
       hasEverPlayed.current = true;
@@ -28589,7 +28980,7 @@ var usePlayback = ({
   const sharedAudioContext = useContext46(Internals.SharedAudioContext);
   const logLevel = Internals.useLogLevel();
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateTimestamp = useRef45(0);
+  const lastTimeUpdateTimestamp = useRef46(0);
   const context = useContext46(Internals.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
@@ -31264,10 +31655,10 @@ var Thumbnail = forward2(ThumbnailFn);
 
 // src/components/homepage/Demo/index.tsx
 import {
-  useCallback as useCallback51,
+  useCallback as useCallback53,
   useEffect as useEffect58,
   useMemo as useMemo67,
-  useRef as useRef57,
+  useRef as useRef58,
   useState as useState56
 } from "react";
 
@@ -32018,7 +32409,7 @@ var BLUE_TEXT = curriedDarken$1(0.3, "#42e9f5");
 
 // src/components/homepage/layout/use-color-mode.tsx
 import React57, { useContext as useContext47, useMemo as useMemo55 } from "react";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var Context = React57.createContext(undefined);
 var ColorModeProvider = ({
   children,
@@ -32028,7 +32419,7 @@ var ColorModeProvider = ({
   const value = useMemo55(() => {
     return { colorMode, setColorMode };
   }, [colorMode, setColorMode]);
-  return /* @__PURE__ */ jsx58(Context.Provider, {
+  return /* @__PURE__ */ jsx59(Context.Provider, {
     value,
     children
   });
@@ -32044,12 +32435,12 @@ function useColorMode() {
 // ../media/dist/esm/index.mjs
 import { useState as useState311 } from "react";
 import { useMemo as useMemo312 } from "react";
-import { useContext as useContext212, useEffect as useEffect44, useMemo as useMemo57, useRef as useRef48, useState as useState40 } from "react";
+import { useContext as useContext212, useEffect as useEffect44, useMemo as useMemo57, useRef as useRef49, useState as useState40 } from "react";
 import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import { AudioBufferSink, InputDisposedError } from "mediabunny";
 import { CanvasSink } from "mediabunny";
 import { useContext as useContext49, useLayoutEffect as useLayoutEffect18 } from "react";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 import { useContext as useContext312, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState212 } from "react";
 import React211 from "react";
 import {
@@ -32064,13 +32455,14 @@ import {
 } from "mediabunny";
 import { jsx as jsx216 } from "react/jsx-runtime";
 import { jsx as jsx316 } from "react/jsx-runtime";
-import { useMemo as useMemo63, useState as useState63 } from "react";
+import React58, { useMemo as useMemo63, useState as useState63 } from "react";
 import {
+  useCallback as useCallback38,
   useContext as useContext48,
   useEffect as useEffect212,
   useLayoutEffect as useLayoutEffect34,
   useMemo as useMemo412,
-  useRef as useRef210,
+  useRef as useRef211,
   useState as useState43
 } from "react";
 import { jsx as jsx412 } from "react/jsx-runtime";
@@ -34140,9 +34532,9 @@ var AudioForPreviewAssertedShowing = ({
 }) => {
   const videoConfig = useUnsafeVideoConfig2();
   const frame = useCurrentFrame();
-  const mediaPlayerRef = useRef48(null);
-  const initialTrimBeforeRef = useRef48(trimBefore);
-  const initialTrimAfterRef = useRef48(trimAfter);
+  const mediaPlayerRef = useRef49(null);
+  const initialTrimBeforeRef = useRef49(trimBefore);
+  const initialTrimAfterRef = useRef49(trimAfter);
   const [initialRequestInit] = useState40(requestInit);
   const [mediaPlayerReady, setMediaPlayerReady] = useState40(false);
   const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState40(false);
@@ -34166,7 +34558,7 @@ var AudioForPreviewAssertedShowing = ({
     throw new TypeError("No `src` was passed to <NewAudioForPreview>.");
   }
   const currentTime = frame / videoConfig.fps;
-  const currentTimeRef = useRef48(currentTime);
+  const currentTimeRef = useRef49(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload2(src);
   const parentSequence = useContext212(SequenceContext2);
@@ -34179,14 +34571,14 @@ var AudioForPreviewAssertedShowing = ({
   }
   const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
   const isPlayerBuffering = Internals.useIsPlayerBuffering(bufferingContext);
-  const initialPlaying = useRef48(playing && !isPlayerBuffering);
-  const initialIsPremounting = useRef48(isPremounting);
-  const initialIsPostmounting = useRef48(isPostmounting);
-  const initialGlobalPlaybackRate = useRef48(globalPlaybackRate);
-  const initialPlaybackRate = useRef48(playbackRate);
-  const initialMuted = useRef48(effectiveMuted);
-  const initialDurationInFrames = useRef48(videoConfig.durationInFrames);
-  const initialSequenceOffset = useRef48(sequenceOffset);
+  const initialPlaying = useRef49(playing && !isPlayerBuffering);
+  const initialIsPremounting = useRef49(isPremounting);
+  const initialIsPostmounting = useRef49(isPostmounting);
+  const initialGlobalPlaybackRate = useRef49(globalPlaybackRate);
+  const initialPlaybackRate = useRef49(playbackRate);
+  const initialMuted = useRef49(effectiveMuted);
+  const initialDurationInFrames = useRef49(videoConfig.durationInFrames);
+  const initialSequenceOffset = useRef49(sequenceOffset);
   useCommonEffects({
     mediaPlayerRef,
     mediaPlayerReady,
@@ -34352,7 +34744,7 @@ var AudioForPreviewAssertedShowing = ({
     setMediaDurationInSeconds
   ]);
   if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
-    return /* @__PURE__ */ jsx59(Audio, {
+    return /* @__PURE__ */ jsx60(Audio, {
       src,
       muted,
       volume,
@@ -34427,7 +34819,7 @@ var AudioForPreview2 = ({
   if (!setMediaDurationInSeconds) {
     throw new Error("setMediaDurationInSeconds is required");
   }
-  return /* @__PURE__ */ jsx59(AudioForPreviewAssertedShowing, {
+  return /* @__PURE__ */ jsx60(AudioForPreviewAssertedShowing, {
     audioStreamIndex,
     src: preloadedSrc,
     playbackRate,
@@ -36649,16 +37041,17 @@ var VideoForPreviewAssertedShowing = ({
   objectFit: objectFitProp,
   _experimentalInitiallyDrawCachedFrame,
   effects,
-  setMediaDurationInSeconds
+  setMediaDurationInSeconds,
+  refForOutline
 }) => {
   const src = usePreload22(unpreloadedSrc);
-  const canvasRef = useRef210(null);
+  const canvasRef = useRef211(null);
   const videoConfig = useUnsafeVideoConfig22();
   const frame = useCurrentFrame();
-  const mediaPlayerRef = useRef210(null);
-  const initialTrimBeforeRef = useRef210(trimBefore);
-  const initialTrimAfterRef = useRef210(trimAfter);
-  const initialOnVideoFrameRef = useRef210(onVideoFrame);
+  const mediaPlayerRef = useRef211(null);
+  const initialTrimBeforeRef = useRef211(trimBefore);
+  const initialTrimAfterRef = useRef211(trimAfter);
+  const initialOnVideoFrameRef = useRef211(onVideoFrame);
   const [initialRequestInit] = useState43(requestInit);
   const [mediaPlayerReady, setMediaPlayerReady] = useState43(false);
   const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState43(false);
@@ -36666,6 +37059,13 @@ var VideoForPreviewAssertedShowing = ({
   const { playbackRate: globalPlaybackRate } = Internals.usePlaybackRate();
   const sharedAudioContext = useContext48(SharedAudioContext22);
   const buffer = useBufferState();
+  const canvasRefCallback = useCallback38((canvas) => {
+    canvasRef.current = canvas;
+    refForOutline.current = canvas;
+  }, [refForOutline]);
+  const fallbackVideoRef = useCallback38((video) => {
+    refForOutline.current = video;
+  }, [refForOutline]);
   const [mediaMuted] = useMediaMutedState22();
   const [mediaVolume] = useMediaVolumeState22();
   const volumePropFrame = useFrameForVolumeProp22(loopVolumeCurveBehavior);
@@ -36679,16 +37079,16 @@ var VideoForPreviewAssertedShowing = ({
   }
   warnAboutTooHighVolume22(userPreferredVolume);
   const effectChainState = useEffectChainState2();
-  const effectsRef = useRef210(effects);
+  const effectsRef = useRef211(effects);
   effectsRef.current = effects;
-  const effectChainStateRef = useRef210(effectChainState);
+  const effectChainStateRef = useRef211(effectChainState);
   effectChainStateRef.current = effectChainState;
   const parentSequence = useContext48(SequenceContext22);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
   const sequenceOffset = ((parentSequence?.cumulatedFrom ?? 0) + (parentSequence?.relativeFrom ?? 0)) / videoConfig.fps;
   const currentTime = frame / videoConfig.fps;
-  const currentTimeRef = useRef210(currentTime);
+  const currentTimeRef = useRef211(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload22(src);
   const buffering = useContext48(Internals.BufferingContextReact);
@@ -36697,16 +37097,16 @@ var VideoForPreviewAssertedShowing = ({
   }
   const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
   const isPlayerBuffering = Internals.useIsPlayerBuffering(buffering);
-  const initialPlaying = useRef210(playing && !isPlayerBuffering);
-  const initialIsPremounting = useRef210(isPremounting);
-  const initialIsPostmounting = useRef210(isPostmounting);
-  const initialGlobalPlaybackRate = useRef210(globalPlaybackRate);
-  const initialPlaybackRate = useRef210(playbackRate);
-  const initialMuted = useRef210(effectiveMuted);
-  const initialSequenceDuration = useRef210(videoConfig.durationInFrames);
-  const initialSequenceOffset = useRef210(sequenceOffset);
-  const hasDrawnRealFrameRef = useRef210(false);
-  const isPremountingRef = useRef210(isPremounting);
+  const initialPlaying = useRef211(playing && !isPlayerBuffering);
+  const initialIsPremounting = useRef211(isPremounting);
+  const initialIsPostmounting = useRef211(isPostmounting);
+  const initialGlobalPlaybackRate = useRef211(globalPlaybackRate);
+  const initialPlaybackRate = useRef211(playbackRate);
+  const initialMuted = useRef211(effectiveMuted);
+  const initialSequenceDuration = useRef211(videoConfig.durationInFrames);
+  const initialSequenceOffset = useRef211(sequenceOffset);
+  const hasDrawnRealFrameRef = useRef211(false);
+  const isPremountingRef = useRef211(isPremounting);
   isPremountingRef.current = isPremounting;
   useLayoutEffect34(() => {
     if (!_experimentalInitiallyDrawCachedFrame) {
@@ -36940,6 +37340,7 @@ var VideoForPreviewAssertedShowing = ({
   }, [objectFitProp, style2]);
   if (shouldFallbackToNativeVideo && !disallowFallbackToOffthreadVideo) {
     return /* @__PURE__ */ jsx412(Html5Video, {
+      ref: fallbackVideoRef,
       src,
       style: actualStyle,
       className: className2,
@@ -36960,7 +37361,7 @@ var VideoForPreviewAssertedShowing = ({
     return null;
   }
   return /* @__PURE__ */ jsx412("canvas", {
-    ref: canvasRef,
+    ref: canvasRefCallback,
     style: actualStyle,
     className: classNameValue
   });
@@ -37372,7 +37773,8 @@ var InnerVideo = ({
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
   effects,
-  setMediaDurationInSeconds
+  setMediaDurationInSeconds,
+  refForOutline
 }) => {
   const environment = useRemotionEnvironment();
   if (typeof src !== "string") {
@@ -37447,7 +37849,8 @@ var InnerVideo = ({
     controls,
     objectFit,
     effects,
-    _experimentalInitiallyDrawCachedFrame
+    _experimentalInitiallyDrawCachedFrame,
+    refForOutline
   });
 };
 var VideoInner = ({
@@ -37530,6 +37933,7 @@ var VideoInner = ({
     overrideId: controls?.overrideId ?? null
   });
   const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(effects ?? []);
+  const refForOutline = React58.useRef(null);
   if (sequenceDurationInFrames === 0) {
     return null;
   }
@@ -37544,6 +37948,7 @@ var VideoInner = ({
     _experimentalControls: controls,
     _remotionInternalLoopDisplay: loopDisplay,
     _remotionInternalEffects: memoizedEffectDefinitions,
+    _remotionInternalRefForOutline: refForOutline,
     showInTimeline: showInTimeline ?? true,
     hidden,
     children: /* @__PURE__ */ jsx65(InnerVideo, {
@@ -37576,7 +37981,8 @@ var VideoInner = ({
       objectFit: objectFit ?? "contain",
       _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false,
       effects: memoizedEffects,
-      setMediaDurationInSeconds
+      setMediaDurationInSeconds,
+      refForOutline
     })
   });
 };
@@ -37584,19 +37990,19 @@ var Video = Internals.wrapInSchema(VideoInner, videoSchema);
 Internals.addSequenceStackTraces(Video);
 
 // src/components/homepage/Demo/Comp.tsx
-import { useCallback as useCallback45, useEffect as useEffect50, useMemo as useMemo60, useState as useState48 } from "react";
+import { useCallback as useCallback46, useEffect as useEffect50, useMemo as useMemo60, useState as useState48 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 import {
   createRef as createRef4,
-  useCallback as useCallback43,
+  useCallback as useCallback45,
   useEffect as useEffect49,
-  useRef as useRef53,
+  useRef as useRef55,
   useState as useState47
 } from "react";
 
 // src/components/homepage/Demo/Card.tsx
-import { useCallback as useCallback40, useRef as useRef49 } from "react";
+import { useCallback as useCallback41, useRef as useRef50 } from "react";
 
 // src/components/homepage/Demo/math.ts
 var paddingAndMargin = 20;
@@ -37630,15 +38036,15 @@ var getIndexFromPosition = (clientX, clientY) => {
 };
 
 // src/components/homepage/Demo/Switcher.tsx
-import { useCallback as useCallback38 } from "react";
-import { jsx as jsx60, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useCallback as useCallback40 } from "react";
+import { jsx as jsx61, jsxs as jsxs15 } from "react/jsx-runtime";
 var Switcher = ({ type, theme, onTap }) => {
-  const onPointerDown = useCallback38((e) => {
+  const onPointerDown = useCallback40((e) => {
     e.stopPropagation();
     onTap();
   }, [onTap]);
   const switcherSize = 40;
-  return /* @__PURE__ */ jsx60("div", {
+  return /* @__PURE__ */ jsx61("div", {
     onPointerDown,
     style: {
       height: switcherSize,
@@ -37656,15 +38062,15 @@ var Switcher = ({ type, theme, onTap }) => {
       alignItems: "center",
       display: "flex"
     },
-    children: /* @__PURE__ */ jsxs14("svg", {
+    children: /* @__PURE__ */ jsxs15("svg", {
       style: { height: switcherSize / 2 },
       viewBox: "0 0 320 512",
       children: [
-        type === "left" ? /* @__PURE__ */ jsx60("path", {
+        type === "left" ? /* @__PURE__ */ jsx61("path", {
           fill: "currentcolor",
           d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
         }) : null,
-        type === "right" ? /* @__PURE__ */ jsx60("path", {
+        type === "right" ? /* @__PURE__ */ jsx61("path", {
           fill: "currentcolor",
           d: "M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
         }) : null
@@ -37674,7 +38080,7 @@ var Switcher = ({ type, theme, onTap }) => {
 };
 
 // src/components/homepage/Demo/Card.tsx
-import { jsx as jsx61, jsxs as jsxs15, Fragment as Fragment12 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs16, Fragment as Fragment13 } from "react/jsx-runtime";
 var arePositionsEqual = (a2, b2) => {
   return a2.every((pos, i) => {
     return pos.x === b2[i].x && pos.y === b2[i].y;
@@ -37694,9 +38100,9 @@ var Card2 = ({
   onClickRight
 }) => {
   const refToUse = refsToUse[index2];
-  const stopPrevious = useRef49([]);
+  const stopPrevious = useRef50([]);
   let newIndices = [...indices];
-  const applyPositions = useCallback40((except) => {
+  const applyPositions = useCallback41((except) => {
     let stopped = false;
     stopPrevious.current.forEach((s) => {
       s();
@@ -37769,7 +38175,7 @@ var Card2 = ({
       update();
     });
   }, [newIndices, onUpdate, positions, refsToUse, shouldBePositions]);
-  const onPointerDown = useCallback40((e) => {
+  const onPointerDown = useCallback41((e) => {
     e.currentTarget.setPointerCapture(e.pointerId);
     const cardLeft = refToUse.current.offsetLeft;
     const cardTop = refToUse.current.offsetTop;
@@ -37830,12 +38236,12 @@ var Card2 = ({
     }, { once: true });
     refToUse.current.addEventListener("pointermove", onMove);
   }, [applyPositions, index2, positions, refToUse, shouldBePositions]);
-  const onPointerUp = useCallback40((e) => {
+  const onPointerUp = useCallback41((e) => {
     e.currentTarget.releasePointerCapture(e.pointerId);
   }, []);
   const { x, y } = getPositionForIndex(index2);
   const color = theme === "light" ? " #EAEAEA" : "#333";
-  return /* @__PURE__ */ jsx61("div", {
+  return /* @__PURE__ */ jsx66("div", {
     ref: refToUse,
     className: "transition-opacity duration-200",
     onPointerDown,
@@ -37851,7 +38257,7 @@ var Card2 = ({
       borderRadius: 13,
       cursor: "grab"
     },
-    children: /* @__PURE__ */ jsxs15(AbsoluteFill, {
+    children: /* @__PURE__ */ jsxs16(AbsoluteFill, {
       style: {
         backgroundColor: color,
         borderRadius: 12
@@ -37859,14 +38265,14 @@ var Card2 = ({
       className: "transition-opacity duration-200",
       children: [
         content,
-        withSwitcher ? /* @__PURE__ */ jsxs15(Fragment12, {
+        withSwitcher ? /* @__PURE__ */ jsxs16(Fragment13, {
           children: [
-            /* @__PURE__ */ jsx61(Switcher, {
+            /* @__PURE__ */ jsx66(Switcher, {
               onTap: onClickLeft,
               type: "left",
               theme
             }),
-            /* @__PURE__ */ jsx61(Switcher, {
+            /* @__PURE__ */ jsx66(Switcher, {
               onTap: onClickRight,
               type: "right",
               theme
@@ -37879,7 +38285,7 @@ var Card2 = ({
 };
 
 // src/components/homepage/Demo/CurrentCountry.tsx
-import { jsx as jsx66, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs17 } from "react/jsx-runtime";
 var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
   const { fps } = useVideoConfig();
   const frame = useCurrentFrame();
@@ -37894,31 +38300,31 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
     frame,
     delay: 10
   });
-  return /* @__PURE__ */ jsxs16(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs17(AbsoluteFill, {
     style: { overflow: "hidden" },
     children: [
-      /* @__PURE__ */ jsx66(AbsoluteFill, {
+      /* @__PURE__ */ jsx68(AbsoluteFill, {
         style: {
           transform: `scale(${progress})`
         },
-        children: /* @__PURE__ */ jsx66("svg", {
+        children: /* @__PURE__ */ jsx68("svg", {
           viewBox: boundingBox.viewBox,
           style: {
             scale: "0.8"
           },
-          children: /* @__PURE__ */ jsx66("path", {
+          children: /* @__PURE__ */ jsx68("path", {
             fill: theme === "light" ? "#bbb" : "#222",
             d: reset
           })
         })
       }),
-      /* @__PURE__ */ jsxs16(AbsoluteFill, {
+      /* @__PURE__ */ jsxs17(AbsoluteFill, {
         style: {
           alignItems: "center",
           justifyContent: "center"
         },
         children: [
-          /* @__PURE__ */ jsx66("div", {
+          /* @__PURE__ */ jsx68("div", {
             style: {
               color: "#0b84f3",
               fontFamily: "GTPlanar",
@@ -37933,7 +38339,7 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
             },
             children: "Your country"
           }),
-          /* @__PURE__ */ jsx66("div", {
+          /* @__PURE__ */ jsx68("div", {
             style: {
               lineHeight: 1.1,
               fontFamily: "GTPlanar",
@@ -37957,16 +38363,16 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
 // src/components/homepage/Demo/EmojiCard.tsx
 import {
   forwardRef as forwardRef37,
-  useCallback as useCallback41,
+  useCallback as useCallback43,
   useEffect as useEffect48,
   useImperativeHandle as useImperativeHandle13,
-  useRef as useRef51
+  useRef as useRef53
 } from "react";
 
 // ../lottie/dist/esm/index.mjs
 import lottie from "lottie-web";
-import { useEffect as useEffect46, useRef as useRef50, useState as useState44 } from "react";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { useEffect as useEffect46, useRef as useRef51, useState as useState44 } from "react";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
   const height2 = animationData.h;
@@ -38034,10 +38440,10 @@ var Lottie = ({
   }
   validatePlaybackRate2(playbackRate);
   validateLoop(loop);
-  const animationRef = useRef50(null);
-  const currentFrameRef = useRef50(null);
-  const containerRef = useRef50(null);
-  const onAnimationLoadedRef = useRef50(onAnimationLoaded);
+  const animationRef = useRef51(null);
+  const currentFrameRef = useRef51(null);
+  const containerRef = useRef51(null);
+  const onAnimationLoadedRef = useRef51(onAnimationLoaded);
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
   const [handle] = useState44(() => delayRender2("Waiting for Lottie animation to load"));
@@ -38128,7 +38534,7 @@ var Lottie = ({
       img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", img.href.baseVal);
     });
   }, [direction, frame, loop, playbackRate, delayRender2, continueRender]);
-  return /* @__PURE__ */ jsx68("div", {
+  return /* @__PURE__ */ jsx69("div", {
     ref: containerRef,
     className: className2,
     style: style2
@@ -38137,7 +38543,7 @@ var Lottie = ({
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
 import { useEffect as useEffect47, useMemo as useMemo58, useState as useState46 } from "react";
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var DisplayedEmoji = ({ emoji }) => {
   const [data, setData] = useState46(null);
   const { durationInFrames, fps } = useVideoConfig();
@@ -38182,7 +38588,7 @@ var DisplayedEmoji = ({ emoji }) => {
   const ratio = durationInFrames / fps / animDurtion;
   const closestInteger = ratio;
   const closestRatio = closestInteger / ratio;
-  return /* @__PURE__ */ jsx69(Lottie, {
+  return /* @__PURE__ */ jsx70(Lottie, {
     style: {
       height: 100,
       width: "100%",
@@ -38196,7 +38602,7 @@ var DisplayedEmoji = ({ emoji }) => {
 };
 
 // src/components/homepage/Demo/EmojiCard.tsx
-import { jsx as jsx70, jsxs as jsxs17, Fragment as Fragment13 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs18, Fragment as Fragment14 } from "react/jsx-runtime";
 var applyTransforms = ({ ref1, ref2, ref3, transforms }) => {
   ref1.style.transform = `translateX(${transforms[0]}%)`;
   ref2.style.transform = `translateX(${transforms[1]}%)`;
@@ -38237,11 +38643,11 @@ var emojiStyle = {
   top: "calc(50% - 50px)"
 };
 var EmojiCardRefFn = ({ emojiIndex }, ref) => {
-  const ref1 = useRef51(null);
-  const ref2 = useRef51(null);
-  const ref3 = useRef51(null);
-  const transforms = useRef51([-100, 0, 100]);
-  const onLeft = useCallback41(() => {
+  const ref1 = useRef53(null);
+  const ref2 = useRef53(null);
+  const ref3 = useRef53(null);
+  const transforms = useRef53([-100, 0, 100]);
+  const onLeft = useCallback43(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -38252,7 +38658,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  const onRight = useCallback41(() => {
+  const onRight = useCallback43(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -38292,14 +38698,14 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
     });
   }, []);
   const env = useRemotionEnvironment();
-  return /* @__PURE__ */ jsxs17(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs18(AbsoluteFill, {
     style: {
       justifyContent: "center",
       alignItems: "center",
       overflow: "hidden"
     },
     children: [
-      /* @__PURE__ */ jsx70("div", {
+      /* @__PURE__ */ jsx71("div", {
         style: {
           color: "#0b84f3",
           fontFamily: "GTPlanar",
@@ -38311,7 +38717,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
         },
         children: "Choose an emoji"
       }),
-      /* @__PURE__ */ jsx70("div", {
+      /* @__PURE__ */ jsx71("div", {
         style: {
           position: "absolute",
           width: "100%",
@@ -38319,31 +38725,31 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
           whiteSpace: "nowrap",
           height: "100%"
         },
-        children: env.isRendering ? /* @__PURE__ */ jsx70("div", {
+        children: env.isRendering ? /* @__PURE__ */ jsx71("div", {
           style: emojiStyle,
-          children: /* @__PURE__ */ jsx70(DisplayedEmoji, {
+          children: /* @__PURE__ */ jsx71(DisplayedEmoji, {
             emoji: emojiIndex
           })
-        }) : /* @__PURE__ */ jsxs17(Fragment13, {
+        }) : /* @__PURE__ */ jsxs18(Fragment14, {
           children: [
-            /* @__PURE__ */ jsx70("div", {
+            /* @__PURE__ */ jsx71("div", {
               ref: ref1,
               style: emojiStyle,
-              children: /* @__PURE__ */ jsx70(DisplayedEmoji, {
+              children: /* @__PURE__ */ jsx71(DisplayedEmoji, {
                 emoji: "melting"
               })
             }),
-            /* @__PURE__ */ jsx70("div", {
+            /* @__PURE__ */ jsx71("div", {
               ref: ref2,
               style: emojiStyle,
-              children: /* @__PURE__ */ jsx70(DisplayedEmoji, {
+              children: /* @__PURE__ */ jsx71(DisplayedEmoji, {
                 emoji: "partying-face"
               })
             }),
-            /* @__PURE__ */ jsx70("div", {
+            /* @__PURE__ */ jsx71("div", {
               ref: ref3,
               style: emojiStyle,
-              children: /* @__PURE__ */ jsx70(DisplayedEmoji, {
+              children: /* @__PURE__ */ jsx71(DisplayedEmoji, {
                 emoji: "fire"
               })
             })
@@ -38356,9 +38762,9 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
 var EmojiCard = forwardRef37(EmojiCardRefFn);
 
 // src/components/homepage/Demo/Minus.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var Minus = ({ leftOffset, minusSignOpacity }) => {
-  return /* @__PURE__ */ jsx71("div", {
+  return /* @__PURE__ */ jsx75("div", {
     style: {
       position: "relative",
       marginLeft: -40 - leftOffset,
@@ -38372,7 +38778,7 @@ var Minus = ({ leftOffset, minusSignOpacity }) => {
 };
 
 // src/components/homepage/Demo/DigitWheel.tsx
-import { jsx as jsx75, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs19 } from "react/jsx-runtime";
 var DURATION = 25;
 var items = 10;
 var NUM_WIDTH = 36;
@@ -38416,7 +38822,7 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
   const rotation = progresses.map((p, i) => {
     return p * offsets[i];
   }).reduce((a2, b2) => a2 + b2, 0) + rotations[0];
-  return /* @__PURE__ */ jsxs18("div", {
+  return /* @__PURE__ */ jsxs19("div", {
     style: {
       position: "relative",
       width: NUM_WIDTH,
@@ -38425,11 +38831,11 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
       marginLeft: shiftLeft
     },
     children: [
-      isLeadingDigit ? /* @__PURE__ */ jsx75(Minus, {
+      isLeadingDigit ? /* @__PURE__ */ jsx77(Minus, {
         minusSignOpacity,
         leftOffset: shiftLeft + minusSignMarginLeft
       }) : null,
-      /* @__PURE__ */ jsx75(AbsoluteFill, {
+      /* @__PURE__ */ jsx77(AbsoluteFill, {
         style: {
           perspective: 5000,
           maskImage: `linear-gradient(to bottom, transparent 0%, #000 28%, #000 80%, transparent 100%)`,
@@ -38440,7 +38846,7 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
           const z = Math.cos(index2 * -Math.PI * 2) * 120;
           const y = Math.sin(index2 * Math.PI * 2) * -120;
           const r2 = interpolate(index2, [0, 1], [0, Math.PI * 2]);
-          return /* @__PURE__ */ jsx75(AbsoluteFill, {
+          return /* @__PURE__ */ jsx77(AbsoluteFill, {
             style: {
               justifyContent: "center",
               alignItems: "center",
@@ -38450,7 +38856,7 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
               backfaceVisibility: "hidden",
               perspective: 1000
             },
-            children: /* @__PURE__ */ jsx75("div", {
+            children: /* @__PURE__ */ jsx77("div", {
               style: {
                 transform: `rotateX(-${r2}rad)`,
                 backfaceVisibility: "hidden",
@@ -38460,7 +38866,7 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
                 justifyContent: "center",
                 opacity: opacity2
               },
-              children: /* @__PURE__ */ jsx75("div", {
+              children: /* @__PURE__ */ jsx77("div", {
                 style: {
                   lineHeight: 1,
                   display: "inline",
@@ -38477,14 +38883,14 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
 };
 
 // src/components/homepage/Demo/TemperatureNumber.tsx
-import { jsx as jsx77, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs20 } from "react/jsx-runtime";
 var TemperatureNumber = ({ theme, temperatureInCelsius }) => {
   const temperatureInFahrenheit = temperatureInCelsius * 9 / 5 + 32;
   const celsiusDegree = Math.abs(temperatureInCelsius);
   const fahrenheitDegree = Math.abs(temperatureInFahrenheit);
   const paddedCelsiusDegree = String(celsiusDegree).padStart(fahrenheitDegree.toFixed(0).length, "0").split("");
   const paddedFahrenheitDegree = fahrenheitDegree.toFixed(0).padStart(paddedCelsiusDegree.length, "0").split("");
-  return /* @__PURE__ */ jsxs19("div", {
+  return /* @__PURE__ */ jsxs20("div", {
     style: {
       lineHeight: 1.1,
       fontFamily: "GTPlanar",
@@ -38498,7 +38904,7 @@ var TemperatureNumber = ({ theme, temperatureInCelsius }) => {
       alignItems: "center"
     },
     children: [
-      paddedCelsiusDegree.map((digit, i) => /* @__PURE__ */ jsx77(Wheel, {
+      paddedCelsiusDegree.map((digit, i) => /* @__PURE__ */ jsx78(Wheel, {
         delay: i * 4,
         renderDigit: (_i) => 9 - _i,
         digits: [
@@ -38513,14 +38919,14 @@ var TemperatureNumber = ({ theme, temperatureInCelsius }) => {
         ],
         isLeadingDigit: i === 0
       }, i)),
-      /* @__PURE__ */ jsx77("div", {
+      /* @__PURE__ */ jsx78("div", {
         style: { width: 8 }
       }),
       "°",
-      /* @__PURE__ */ jsx77(Wheel, {
+      /* @__PURE__ */ jsx78(Wheel, {
         delay: paddedCelsiusDegree.length * 4 - 2,
         digits: [0, 1, 0],
-        renderDigit: (_i) => _i % 2 === 0 ? "C" : /* @__PURE__ */ jsx77("span", {
+        renderDigit: (_i) => _i % 2 === 0 ? "C" : /* @__PURE__ */ jsx78("span", {
           style: { marginLeft: -5 },
           children: "F"
         }),
@@ -38532,13 +38938,13 @@ var TemperatureNumber = ({ theme, temperatureInCelsius }) => {
 };
 
 // src/components/homepage/Demo/Temperature.tsx
-import { jsx as jsx78, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs21 } from "react/jsx-runtime";
 var Temperature = ({ theme, city, temperatureInCelsius }) => {
   if (temperatureInCelsius === null) {
     return null;
   }
-  return /* @__PURE__ */ jsx78(AbsoluteFill, {
-    children: /* @__PURE__ */ jsxs20(AbsoluteFill, {
+  return /* @__PURE__ */ jsx79(AbsoluteFill, {
+    children: /* @__PURE__ */ jsxs21(AbsoluteFill, {
       style: {
         alignItems: "center",
         justifyContent: "center",
@@ -38546,7 +38952,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
         paddingRight: 20
       },
       children: [
-        /* @__PURE__ */ jsxs20("div", {
+        /* @__PURE__ */ jsxs21("div", {
           style: {
             color: "#0b84f3",
             fontFamily: "GTPlanar",
@@ -38560,7 +38966,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
             city
           ]
         }),
-        /* @__PURE__ */ jsx78(TemperatureNumber, {
+        /* @__PURE__ */ jsx79(TemperatureNumber, {
           theme,
           temperatureInCelsius
         })
@@ -38571,7 +38977,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
 
 // src/components/homepage/Demo/TrendingRepos.tsx
 import { useMemo as useMemo59 } from "react";
-import { jsx as jsx79, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs25 } from "react/jsx-runtime";
 var TrendingRepoItem = ({ repo, theme, number }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
@@ -38593,7 +38999,7 @@ var TrendingRepoItem = ({ repo, theme, number }) => {
       opacity: progress
     };
   }, [progress, theme]);
-  return /* @__PURE__ */ jsxs21("div", {
+  return /* @__PURE__ */ jsxs25("div", {
     style: item,
     children: [
       number,
@@ -38617,16 +39023,16 @@ var TrendingRepos = ({ theme, trending }) => {
   if (trending === null) {
     return null;
   }
-  return /* @__PURE__ */ jsx79(AbsoluteFill, {
-    children: /* @__PURE__ */ jsx79(AbsoluteFill, {
+  return /* @__PURE__ */ jsx80(AbsoluteFill, {
+    children: /* @__PURE__ */ jsx80(AbsoluteFill, {
       style: {
         justifyContent: "center",
         paddingLeft: 20,
         paddingRight: 20
       },
-      children: /* @__PURE__ */ jsxs21("div", {
+      children: /* @__PURE__ */ jsxs25("div", {
         children: [
-          /* @__PURE__ */ jsx79("div", {
+          /* @__PURE__ */ jsx80("div", {
             style: {
               color: fill,
               fontFamily: "GTPlanar",
@@ -38640,7 +39046,7 @@ var TrendingRepos = ({ theme, trending }) => {
               day: "numeric"
             }).format(new Date(trending.date))
           }),
-          /* @__PURE__ */ jsx79("div", {
+          /* @__PURE__ */ jsx80("div", {
             style: {
               color: "#0b84f3",
               fontFamily: "GTPlanar",
@@ -38652,17 +39058,17 @@ var TrendingRepos = ({ theme, trending }) => {
             },
             children: "Trending repositories"
           }),
-          /* @__PURE__ */ jsx79(TrendingRepoItem, {
+          /* @__PURE__ */ jsx80(TrendingRepoItem, {
             number: 1,
             repo: trending.repos[0],
             theme
           }),
-          /* @__PURE__ */ jsx79(TrendingRepoItem, {
+          /* @__PURE__ */ jsx80(TrendingRepoItem, {
             number: 2,
             repo: trending.repos[1],
             theme
           }),
-          /* @__PURE__ */ jsx79(TrendingRepoItem, {
+          /* @__PURE__ */ jsx80(TrendingRepoItem, {
             number: 3,
             repo: trending.repos[2],
             theme
@@ -38674,7 +39080,7 @@ var TrendingRepos = ({ theme, trending }) => {
 };
 
 // src/components/homepage/Demo/Cards.tsx
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var Cards = ({
   onUpdate,
   indices,
@@ -38686,14 +39092,14 @@ var Cards = ({
   location,
   trending
 }) => {
-  const container4 = useRef53(null);
+  const container4 = useRef55(null);
   const [refs] = useState47(() => {
     return new Array(4).fill(true).map(() => {
       return createRef4();
     });
   });
-  const positions = useRef53(getInitialPositions());
-  const shouldBePositions = useRef53(getInitialPositions());
+  const positions = useRef55(getInitialPositions());
+  const shouldBePositions = useRef55(getInitialPositions());
   const { isRendering } = useRemotionEnvironment();
   useEffect49(() => {
     const { current } = container4;
@@ -38711,35 +39117,35 @@ var Cards = ({
       current.removeEventListener("click", onClick);
     };
   }, [onToggle]);
-  const ref = useRef53(null);
-  const onLeft = useCallback43(() => {
+  const ref = useRef55(null);
+  const onLeft = useCallback45(() => {
     ref.current?.onRight();
     onRightPress();
   }, [onRightPress]);
-  const onRight = useCallback43(() => {
+  const onRight = useCallback45(() => {
     ref.current?.onLeft();
     onLeftPress();
   }, [onLeftPress]);
-  return /* @__PURE__ */ jsx80(AbsoluteFill, {
+  return /* @__PURE__ */ jsx81(AbsoluteFill, {
     ref: container4,
     children: new Array(4).fill(true).map((_, i) => {
       const index2 = indices[i];
-      const content = index2 === 0 ? /* @__PURE__ */ jsx80(TrendingRepos, {
+      const content = index2 === 0 ? /* @__PURE__ */ jsx81(TrendingRepos, {
         trending,
         theme
-      }) : index2 === 1 ? /* @__PURE__ */ jsx80(Temperature, {
+      }) : index2 === 1 ? /* @__PURE__ */ jsx81(Temperature, {
         city: location?.city ? decodeURIComponent(location?.city) : null,
         theme,
         temperatureInCelsius: trending?.temperatureInCelsius ?? null
-      }) : index2 === 2 ? /* @__PURE__ */ jsx80(CurrentCountry, {
+      }) : index2 === 2 ? /* @__PURE__ */ jsx81(CurrentCountry, {
         countryPaths: trending?.countryPaths ?? null,
         countryLabel: trending?.countryLabel ?? null,
         theme
-      }) : /* @__PURE__ */ jsx80(EmojiCard, {
+      }) : /* @__PURE__ */ jsx81(EmojiCard, {
         ref,
         emojiIndex: emojiName
       });
-      return /* @__PURE__ */ jsx80(Card2, {
+      return /* @__PURE__ */ jsx81(Card2, {
         onUpdate,
         refsToUse: refs,
         index: i,
@@ -38757,9 +39163,9 @@ var Cards = ({
 };
 
 // src/components/homepage/Demo/Comp.tsx
-import { jsx as jsx81, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs27 } from "react/jsx-runtime";
 var getDataAndProps = async () => {
-  const location = await fetch("https://bugs-five.vercel.app/api/location").then((res) => res.json());
+  const location = await fetch("https://utils.remotion.dev/location").then((res) => res.json());
   const trending = await fetch(`https://bugs.remotion.dev/trending?lat=${location.latitude}&lng=${location.longitude}&country=${location.country}`).then((res) => res.json()).then((data) => {
     return {
       repos: data.trending.repos.slice(0, 3),
@@ -38786,7 +39192,7 @@ var HomepageVideoComp = ({
   onClickRight
 }) => {
   const [rerenders, setRerenders] = useState48(0);
-  const onUpdate = useCallback45((newIndices) => {
+  const onUpdate = useCallback46((newIndices) => {
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
   }, [rerenders, updateCardOrder]);
@@ -38818,12 +39224,12 @@ var HomepageVideoComp = ({
       c2.free();
     };
   }, []);
-  return /* @__PURE__ */ jsxs25(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs27(AbsoluteFill, {
     style: {
       backgroundColor: theme === "dark" ? "#222" : "#fafafa"
     },
     children: [
-      /* @__PURE__ */ jsx81(Cards, {
+      /* @__PURE__ */ jsx85(Cards, {
         onUpdate,
         indices: cardOrder,
         theme,
@@ -38834,7 +39240,7 @@ var HomepageVideoComp = ({
         onRight: onClickRight,
         emojiName: emoji
       }, rerenders),
-      audioSrc ? /* @__PURE__ */ jsx81(Audio2, {
+      audioSrc ? /* @__PURE__ */ jsx85(Audio2, {
         src: audioSrc
       }) : null
     ]
@@ -38842,9 +39248,9 @@ var HomepageVideoComp = ({
 };
 
 // src/components/homepage/Demo/DemoError.tsx
-import { jsx as jsx85 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
 var DemoError = () => {
-  return /* @__PURE__ */ jsx85("div", {
+  return /* @__PURE__ */ jsx87("div", {
     style: {
       color: RED,
       fontFamily: FONTS.GTPLANAR,
@@ -38884,7 +39290,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.470";
+var VERSION2 = "4.0.471";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -38894,7 +39300,7 @@ import { flushSync as flushSync22 } from "react-dom";
 import ReactDOM6 from "react-dom/client";
 import { useImperativeHandle as useImperativeHandle14, useState as useState49 } from "react";
 import { flushSync as flushSync3 } from "react-dom";
-import { jsx as jsx87 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
 import { jsx as jsx217 } from "react/jsx-runtime";
 import { Output, VideoSampleSource } from "mediabunny";
 var __dispose2 = Symbol.dispose || /* @__PURE__ */ Symbol.for("Symbol.dispose");
@@ -39531,7 +39937,7 @@ var UpdateTime = ({
       });
     }
   }));
-  return /* @__PURE__ */ jsx87(Internals.RemotionRootContexts, {
+  return /* @__PURE__ */ jsx88(Internals.RemotionRootContexts, {
     audioEnabled,
     videoEnabled,
     logLevel,
@@ -43514,13 +43920,13 @@ var renderMediaOnWeb = (options2) => {
 };
 
 // src/components/homepage/Demo/DemoRender.tsx
-import React68, { useCallback as useCallback46 } from "react";
+import React70, { useCallback as useCallback47 } from "react";
 import { z } from "zod";
 
 // src/components/homepage/Demo/DemoErrorIcon.tsx
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var DemoErrorIcon = () => {
-  return /* @__PURE__ */ jsx88("div", {
+  return /* @__PURE__ */ jsx89("div", {
     style: {
       height: 26,
       width: 26,
@@ -43530,14 +43936,14 @@ var DemoErrorIcon = () => {
       justifyContent: "center",
       animation: "jump 0.2s ease-out"
     },
-    children: /* @__PURE__ */ jsx88("svg", {
+    children: /* @__PURE__ */ jsx89("svg", {
       style: {
         flexShrink: 0,
         width: 26
       },
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 512 512",
-      children: /* @__PURE__ */ jsx88("path", {
+      children: /* @__PURE__ */ jsx89("path", {
         fill: RED,
         d: "M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36l176.6 0c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36l-176.6 0c-25.7 0-49.5-13.7-62.4-36L17.1 292zM256 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
       })
@@ -43546,9 +43952,9 @@ var DemoErrorIcon = () => {
 };
 
 // src/components/homepage/Demo/DoneCheckmark.tsx
-import { jsx as jsx89, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs28 } from "react/jsx-runtime";
 var DoneCheckmark = () => {
-  return /* @__PURE__ */ jsx89("div", {
+  return /* @__PURE__ */ jsx90("div", {
     style: {
       backgroundColor: PALETTE.BRAND,
       height: 26,
@@ -43559,7 +43965,7 @@ var DoneCheckmark = () => {
       justifyContent: "center",
       animation: "jump 0.2s ease-out"
     },
-    children: /* @__PURE__ */ jsxs27("svg", {
+    children: /* @__PURE__ */ jsxs28("svg", {
       viewBox: "0 0 20 20",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
@@ -43568,13 +43974,13 @@ var DoneCheckmark = () => {
         width: 26
       },
       children: [
-        /* @__PURE__ */ jsx89("circle", {
+        /* @__PURE__ */ jsx90("circle", {
           cx: "10",
           cy: "10",
           r: "10",
           fill: "#0B84F3"
         }),
-        /* @__PURE__ */ jsx89("path", {
+        /* @__PURE__ */ jsx90("path", {
           d: "M14.7908 7.20505C15.0697 7.47844 15.0697 7.92243 14.7908 8.19583L9.07711 13.795C8.79813 14.0683 8.34505 14.0683 8.06606 13.795L5.20924 10.9954C4.93025 10.722 4.93025 10.278 5.20924 10.0046C5.48823 9.73121 5.9413 9.73121 6.22029 10.0046L8.5727 12.3077L13.7819 7.20505C14.0609 6.93165 14.514 6.93165 14.793 7.20505H14.7908Z",
           fill: "white",
           style: {
@@ -43588,7 +43994,7 @@ var DoneCheckmark = () => {
 };
 
 // src/components/homepage/Demo/Progress.tsx
-import { jsx as jsx90, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs29 } from "react/jsx-runtime";
 var Progress = ({ progress }) => {
   const inner2 = makeCircle({
     radius: 10
@@ -43598,17 +44004,17 @@ var Progress = ({ progress }) => {
     closePath: false,
     radius: 10
   });
-  return /* @__PURE__ */ jsxs28("svg", {
+  return /* @__PURE__ */ jsxs29("svg", {
     viewBox: `0 0 ${inner2.width} ${inner2.height}`,
     style: { overflow: "visible", height: 22 },
     children: [
-      /* @__PURE__ */ jsx90("path", {
+      /* @__PURE__ */ jsx91("path", {
         d: inner2.path,
         stroke: PALETTE.BORDER_COLOR,
         strokeWidth: 4,
         fill: "transparent"
       }),
-      /* @__PURE__ */ jsx90("path", {
+      /* @__PURE__ */ jsx91("path", {
         d: outer.path,
         stroke: PALETTE.BRAND,
         strokeWidth: 4,
@@ -43621,7 +44027,7 @@ var Progress = ({ progress }) => {
 
 // src/components/homepage/Demo/Spinner.tsx
 import { useMemo as useMemo61 } from "react";
-import { jsx as jsx91, jsxs as jsxs29, Fragment as Fragment14 } from "react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs30, Fragment as Fragment15 } from "react/jsx-runtime";
 var viewBox2 = 100;
 var lines2 = 8;
 var className2 = "__remotion_spinner_line";
@@ -43634,9 +44040,9 @@ var Spinner2 = ({ size: size4, duration }) => {
       height: size4
     };
   }, [size4]);
-  return /* @__PURE__ */ jsxs29(Fragment14, {
+  return /* @__PURE__ */ jsxs30(Fragment15, {
     children: [
-      /* @__PURE__ */ jsx91("style", {
+      /* @__PURE__ */ jsx95("style", {
         type: "text/css",
         children: `
 				@keyframes ${remotionSpinnerAnimation} {
@@ -43653,11 +44059,11 @@ var Spinner2 = ({ size: size4, duration }) => {
         }        
 			`
       }),
-      /* @__PURE__ */ jsx91("svg", {
+      /* @__PURE__ */ jsx95("svg", {
         style: style2,
         viewBox: `0 0 ${viewBox2} ${viewBox2}`,
         children: new Array(lines2).fill(true).map((_, index2) => {
-          return /* @__PURE__ */ jsx91("path", {
+          return /* @__PURE__ */ jsx95("path", {
             className: className2,
             style: {
               rotate: `${index2 * Math.PI * 2 / lines2}rad`,
@@ -43674,7 +44080,7 @@ var Spinner2 = ({ size: size4, duration }) => {
 };
 
 // src/components/homepage/Demo/DemoRender.tsx
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 var countryPath = z.object({
   d: z.string(),
   class: z.string()
@@ -43712,10 +44118,10 @@ var style2 = {
   justifyContent: "center"
 };
 var RenderButton = ({ renderData, onError, playerRef }) => {
-  const [state, setState] = React68.useState({
+  const [state, setState] = React70.useState({
     type: "idle"
   });
-  const triggerRender = useCallback46(async () => {
+  const triggerRender = useCallback47(async () => {
     if (renderData === null) {
       return;
     }
@@ -43764,24 +44170,24 @@ var RenderButton = ({ renderData, onError, playerRef }) => {
       onError();
     }
   }, [onError, renderData, playerRef]);
-  return /* @__PURE__ */ jsx95("button", {
+  return /* @__PURE__ */ jsx97("button", {
     type: "button",
     onClick: triggerRender,
     style: style2,
     disabled: !renderData || state.type !== "idle",
-    children: state.type === "error" ? /* @__PURE__ */ jsx95(DemoErrorIcon, {}) : state.type === "done" ? /* @__PURE__ */ jsx95(DoneCheckmark, {}) : state.type === "progress" ? /* @__PURE__ */ jsx95(Progress, {
+    children: state.type === "error" ? /* @__PURE__ */ jsx97(DemoErrorIcon, {}) : state.type === "done" ? /* @__PURE__ */ jsx97(DoneCheckmark, {}) : state.type === "progress" ? /* @__PURE__ */ jsx97(Progress, {
       progress: state.progress
-    }) : state.type === "invoking" ? /* @__PURE__ */ jsx95(Spinner2, {
+    }) : state.type === "invoking" ? /* @__PURE__ */ jsx97(Spinner2, {
       size: 20,
       duration: 1
-    }) : /* @__PURE__ */ jsx95("svg", {
+    }) : /* @__PURE__ */ jsx97("svg", {
       style: {
         width: 18,
         opacity: renderData ? 1 : 0.5
       },
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 384 512",
-      children: /* @__PURE__ */ jsx95("path", {
+      children: /* @__PURE__ */ jsx97("path", {
         fill: PALETTE.TEXT_COLOR,
         d: "M214.6 342.6L192 365.3l-22.6-22.6-128-128L18.7 192 64 146.7l22.6 22.6L160 242.7 160 64l0-32 64 0 0 32 0 178.7 73.4-73.4L320 146.7 365.3 192l-22.6 22.6-128 128zM32 416l320 0 32 0 0 64-32 0L32 480 0 480l0-64 32 0z"
       })
@@ -43790,18 +44196,18 @@ var RenderButton = ({ renderData, onError, playerRef }) => {
 };
 
 // src/components/homepage/Demo/DownloadNudge.tsx
-import { jsx as jsx97, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs31 } from "react/jsx-runtime";
 var origWidth = 77;
 var scale = 0.4;
 var Icon3 = () => {
-  return /* @__PURE__ */ jsx97("svg", {
+  return /* @__PURE__ */ jsx98("svg", {
     style: {
       width: origWidth * scale
     },
     viewBox: "0 0 77 160",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx97("path", {
+    children: /* @__PURE__ */ jsx98("path", {
       d: "M5 154.5C51 121 79 81 69 5",
       stroke: "currentColor",
       strokeWidth: "8",
@@ -43810,20 +44216,20 @@ var Icon3 = () => {
   });
 };
 var DownloadNudge = () => {
-  return /* @__PURE__ */ jsx97("div", {
+  return /* @__PURE__ */ jsx98("div", {
     style: {
       position: "relative",
       flexDirection: "row",
       display: "flex",
       justifyContent: "flex-end",
       textAlign: "right",
-      paddingRight: 22,
-      paddingTop: 20
+      paddingRight: 24,
+      paddingTop: 18
     },
-    children: /* @__PURE__ */ jsxs30("div", {
+    children: /* @__PURE__ */ jsxs31("div", {
       children: [
-        /* @__PURE__ */ jsx97(Icon3, {}),
-        /* @__PURE__ */ jsx97("div", {
+        /* @__PURE__ */ jsx98(Icon3, {}),
+        /* @__PURE__ */ jsx98("div", {
           style: {
             fontFamily: FONTS.GTPLANAR,
             fontSize: 15,
@@ -43840,18 +44246,18 @@ var DownloadNudge = () => {
 };
 
 // src/components/homepage/Demo/DragAndDropNudge.tsx
-import { jsx as jsx98, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs34 } from "react/jsx-runtime";
 var origWidth2 = 37;
 var scale2 = 0.4;
 var Icon5 = () => {
-  return /* @__PURE__ */ jsx98("svg", {
+  return /* @__PURE__ */ jsx99("svg", {
     style: {
       width: origWidth2 * scale2,
       overflow: "visible"
     },
     viewBox: "0 0 37 59",
     fill: "none",
-    children: /* @__PURE__ */ jsx98("path", {
+    children: /* @__PURE__ */ jsx99("path", {
       d: "M5.00003 5C5.00002 36.5 16 44 32.0002 54",
       stroke: PALETTE.TEXT_COLOR,
       strokeWidth: "8",
@@ -43860,19 +44266,19 @@ var Icon5 = () => {
   });
 };
 var DragAndDropNudge = () => {
-  return /* @__PURE__ */ jsx98("div", {
+  return /* @__PURE__ */ jsx99("div", {
     style: {
       position: "absolute",
       flexDirection: "row",
       display: "flex",
       justifyContent: "flex-start",
       paddingBottom: 5,
-      marginTop: 50
+      marginTop: 18
     },
     className: "ml-4 lg:-ml-5",
-    children: /* @__PURE__ */ jsxs31("div", {
+    children: /* @__PURE__ */ jsxs34("div", {
       children: [
-        /* @__PURE__ */ jsx98("div", {
+        /* @__PURE__ */ jsx99("div", {
           style: {
             fontFamily: FONTS.GTPLANAR,
             fontSize: 15,
@@ -43883,17 +44289,17 @@ var DragAndDropNudge = () => {
           className: "-ml-3 lg:-ml-5",
           children: "Drag and drop the cards to reorder them."
         }),
-        /* @__PURE__ */ jsx98(Icon5, {})
+        /* @__PURE__ */ jsx99(Icon5, {})
       ]
     })
   });
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback48, useEffect as useEffect53, useMemo as useMemo66, useRef as useRef55, useState as useState51 } from "react";
+import { useCallback as useCallback49, useEffect as useEffect53, useMemo as useMemo66, useRef as useRef56, useState as useState51 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback47, useEffect as useEffect51, useMemo as useMemo64, useState as useState50 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect51, useMemo as useMemo64, useState as useState50 } from "react";
 var useElementSize2 = (ref) => {
   const [size4, setSize] = useState50(null);
   const observer = useMemo64(() => {
@@ -43907,7 +44313,7 @@ var useElementSize2 = (ref) => {
       });
     });
   }, []);
-  const updateSize = useCallback47(() => {
+  const updateSize = useCallback48(() => {
     if (ref === null) {
       return;
     }
@@ -43935,7 +44341,7 @@ var useElementSize2 = (ref) => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { jsx as jsx99, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs36 } from "react/jsx-runtime";
 var getFrameFromX2 = (clientX, durationInFrames, width2) => {
   const pos = clientX;
   const frame = Math.round(interpolate(pos, [0, width2], [0, durationInFrames - 1], {
@@ -44019,7 +44425,7 @@ var PlayerSeekBar2 = ({
   outFrame,
   playerRef
 }) => {
-  const containerRef = useRef55(null);
+  const containerRef = useRef56(null);
   const barHovered = useHoverState2(containerRef, false);
   const size4 = useElementSize2(containerRef.current);
   const [playing, setPlaying] = useState51(false);
@@ -44059,7 +44465,7 @@ var PlayerSeekBar2 = ({
     dragging: false
   });
   const width2 = size4?.width ?? 0;
-  const onPointerDown = useCallback48((e) => {
+  const onPointerDown = useCallback49((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -44073,7 +44479,7 @@ var PlayerSeekBar2 = ({
     });
     onSeekStart();
   }, [durationInFrames, width2, playerRef, playing, onSeekStart]);
-  const onPointerMove = useCallback48((e) => {
+  const onPointerMove = useCallback49((e) => {
     if (!size4) {
       throw new Error("Player has no size");
     }
@@ -44084,7 +44490,7 @@ var PlayerSeekBar2 = ({
     const _frame = getFrameFromX2(e.clientX - posLeft, durationInFrames, size4.width);
     playerRef.current.seekTo(_frame);
   }, [dragging.dragging, durationInFrames, playerRef, size4]);
-  const onPointerUp = useCallback48(() => {
+  const onPointerUp = useCallback49(() => {
     setDragging({
       dragging: false
     });
@@ -44144,23 +44550,23 @@ var PlayerSeekBar2 = ({
       position: "absolute"
     };
   }, [durationInFrames, inFrame, outFrame]);
-  return /* @__PURE__ */ jsxs34("div", {
+  return /* @__PURE__ */ jsxs36("div", {
     ref: containerRef,
     onPointerDown,
     style: containerStyle3,
     children: [
-      /* @__PURE__ */ jsxs34("div", {
+      /* @__PURE__ */ jsxs36("div", {
         style: barBackground2,
         children: [
-          /* @__PURE__ */ jsx99("div", {
+          /* @__PURE__ */ jsx100("div", {
             style: active
           }),
-          /* @__PURE__ */ jsx99("div", {
+          /* @__PURE__ */ jsx100("div", {
             style: fillStyle
           })
         ]
       }),
-      /* @__PURE__ */ jsx99("div", {
+      /* @__PURE__ */ jsx100("div", {
         style: knobStyle
       })
     ]
@@ -44168,12 +44574,12 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback49, useEffect as useEffect55, useRef as useRef56, useState as useState54 } from "react";
+import { useCallback as useCallback50, useEffect as useEffect55, useRef as useRef57, useState as useState54 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
-import { jsx as jsx100 } from "react/jsx-runtime";
+import { jsx as jsx101 } from "react/jsx-runtime";
 var PausedIcon = (props) => {
-  return /* @__PURE__ */ jsx100("svg", {
+  return /* @__PURE__ */ jsx101("svg", {
     "aria-hidden": "true",
     focusable: "false",
     "data-prefix": "fas",
@@ -44183,52 +44589,52 @@ var PausedIcon = (props) => {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 480 512",
     ...props,
-    children: /* @__PURE__ */ jsx100("path", {
+    children: /* @__PURE__ */ jsx101("path", {
       fill: "currentColor",
       d: "M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"
     })
   });
 };
 var PlayingIcon = (props) => {
-  return /* @__PURE__ */ jsx100("svg", {
+  return /* @__PURE__ */ jsx101("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 400 512",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ jsx100("path", {
+    children: /* @__PURE__ */ jsx101("path", {
       d: "M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z"
     })
   });
 };
 var NotMutedIcon = (props) => {
-  return /* @__PURE__ */ jsx100("svg", {
+  return /* @__PURE__ */ jsx101("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     viewBox: "0 0 640 512",
     fill: "currentColor",
-    children: /* @__PURE__ */ jsx100("path", {
+    children: /* @__PURE__ */ jsx101("path", {
       d: "M32 160l0 192 128 0L304 480l48 0 0-448-48 0L160 160 32 160zM441.6 332.8C464.9 315.3 480 287.4 480 256s-15.1-59.3-38.4-76.8l-28.8 38.4c11.7 8.8 19.2 22.7 19.2 38.4s-7.5 29.6-19.2 38.4l28.8 38.4zm57.6 76.8c46.6-35 76.8-90.8 76.8-153.6s-30.2-118.6-76.8-153.6l-28.8 38.4c35 26.3 57.6 68.1 57.6 115.2s-22.6 88.9-57.6 115.2l28.8 38.4z"
     })
   });
 };
 var IsMutedIcon = (props) => {
-  return /* @__PURE__ */ jsx100("svg", {
+  return /* @__PURE__ */ jsx101("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     viewBox: "0 0 640 512",
     fill: RED,
-    children: /* @__PURE__ */ jsx100("path", {
+    children: /* @__PURE__ */ jsx101("path", {
       d: "M48.4 14.8L29.4 .1 0 38l19 14.7L591.5 497.2l19 14.7L639.9 474l-19-14.7-95.1-73.8C557 351.3 576 305.9 576 256c0-62.8-30.2-118.6-76.8-153.6l-28.8 38.4c35 26.3 57.6 68.1 57.6 115.2c0 38.8-15.3 74-40.3 99.9l-38.2-29.7C468.3 308.7 480 283.7 480 256c0-31.4-15.1-59.3-38.4-76.8l-28.8 38.4c11.7 8.8 19.2 22.7 19.2 38.4s-7.5 29.6-19.2 38.4l5.9 7.9L352 250.5 352 32l-48 0L195.2 128.7 48.4 14.8zM352 373.3L81.2 160 32 160l0 192 128 0L304 480l48 0 0-106.7z"
     })
   });
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { jsx as jsx101 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
 var PlayerVolume = ({ playerRef }) => {
   const [muted, setIsMuted] = useState54(() => playerRef.current?.isMuted() ?? true);
   const [isHovered, setIsHovered] = useState54(false);
-  const timerRef = useRef56(null);
+  const timerRef = useRef57(null);
   useEffect55(() => {
     const { current } = playerRef;
     if (!current) {
@@ -44249,7 +44655,7 @@ var PlayerVolume = ({ playerRef }) => {
       document.body.style.userSelect = "auto";
     }
   }, [isHovered]);
-  const onClick = useCallback49(() => {
+  const onClick = useCallback50(() => {
     if (timerRef.current !== null) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
@@ -44260,10 +44666,10 @@ var PlayerVolume = ({ playerRef }) => {
       playerRef.current.mute();
     }
   }, [playerRef]);
-  return /* @__PURE__ */ jsx101("div", {
+  return /* @__PURE__ */ jsx105("div", {
     className: "relative cursor-pointer block pl-4 pr-4 h-full",
     onPointerEnter: () => setIsHovered(true),
-    children: /* @__PURE__ */ jsx101("button", {
+    children: /* @__PURE__ */ jsx105("button", {
       type: "button",
       onClick,
       style: {
@@ -44277,9 +44683,9 @@ var PlayerVolume = ({ playerRef }) => {
         alignItems: "center",
         color: PALETTE.TEXT_COLOR
       },
-      children: muted ? /* @__PURE__ */ jsx101(IsMutedIcon, {
+      children: muted ? /* @__PURE__ */ jsx105(IsMutedIcon, {
         style: { height: 20 }
-      }) : /* @__PURE__ */ jsx101(NotMutedIcon, {
+      }) : /* @__PURE__ */ jsx105(NotMutedIcon, {
         style: { height: 20 }
       })
     })
@@ -44287,8 +44693,8 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React71, { useCallback as useCallback50, useEffect as useEffect56 } from "react";
-import { jsx as jsx105 } from "react/jsx-runtime";
+import React75, { useCallback as useCallback51, useEffect as useEffect56 } from "react";
+import { jsx as jsx107 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
   border: "none",
@@ -44304,7 +44710,7 @@ var playerButtonStyle2 = {
   color: PALETTE.TEXT_COLOR
 };
 var PlayPauseButton = ({ playerRef }) => {
-  const [playing, setPlaying] = React71.useState(true);
+  const [playing, setPlaying] = React75.useState(true);
   useEffect56(() => {
     const { current } = playerRef;
     if (!current) {
@@ -44323,34 +44729,34 @@ var PlayPauseButton = ({ playerRef }) => {
       current.removeEventListener("pause", onPause);
     };
   }, [playerRef]);
-  const onToggle = useCallback50(() => {
+  const onToggle = useCallback51(() => {
     playerRef.current?.toggle();
   }, [playerRef]);
   const playPauseIconStyle = {
     width: 15
   };
-  return /* @__PURE__ */ jsx105("button", {
+  return /* @__PURE__ */ jsx107("button", {
     type: "button",
     style: playerButtonStyle2,
     onClick: onToggle,
-    children: playing ? /* @__PURE__ */ jsx105(PlayingIcon, {
+    children: playing ? /* @__PURE__ */ jsx107(PlayingIcon, {
       style: playPauseIconStyle
-    }) : /* @__PURE__ */ jsx105(PausedIcon, {
+    }) : /* @__PURE__ */ jsx107(PausedIcon, {
       style: playPauseIconStyle
     })
   });
 };
 
 // src/components/homepage/Demo/TimeDisplay.tsx
-import React73, { useEffect as useEffect57 } from "react";
-import { jsx as jsx107 } from "react/jsx-runtime";
+import React76, { useEffect as useEffect57 } from "react";
+import { jsx as jsx108 } from "react/jsx-runtime";
 var formatTime2 = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60);
   const seconds = Math.floor(timeInSeconds - minutes * 60);
   return `${String(minutes)}:${String(seconds).padStart(2, "0")}`;
 };
 var TimeDisplay = ({ fps, playerRef }) => {
-  const [time, setTime] = React73.useState(0);
+  const [time, setTime] = React76.useState(0);
   useEffect57(() => {
     const { current } = playerRef;
     if (!current) {
@@ -44364,21 +44770,21 @@ var TimeDisplay = ({ fps, playerRef }) => {
       current.removeEventListener("frameupdate", onTimeUpdate);
     };
   }, [playerRef]);
-  return /* @__PURE__ */ jsx107("div", {
+  return /* @__PURE__ */ jsx108("div", {
     style: {
       fontSize: 16,
       fontVariantNumeric: "tabular-nums"
     },
-    children: /* @__PURE__ */ jsx107("span", {
+    children: /* @__PURE__ */ jsx108("span", {
       children: formatTime2(time / fps)
     })
   });
 };
 
 // src/components/homepage/Demo/PlayerControls.tsx
-import { jsx as jsx108, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs37 } from "react/jsx-runtime";
 var Separator2 = () => {
-  return /* @__PURE__ */ jsx108("div", {
+  return /* @__PURE__ */ jsx109("div", {
     style: {
       borderRight: `2px solid ${PALETTE.BOX_STROKE}`,
       height: 50
@@ -44386,28 +44792,28 @@ var Separator2 = () => {
   });
 };
 var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
-  return /* @__PURE__ */ jsxs36("div", {
+  return /* @__PURE__ */ jsxs37("div", {
     className: "flex flex-row items-center bg-pane",
     children: [
-      /* @__PURE__ */ jsx108(PlayPauseButton, {
+      /* @__PURE__ */ jsx109(PlayPauseButton, {
         playerRef
       }),
-      /* @__PURE__ */ jsx108(Separator2, {}),
-      /* @__PURE__ */ jsx108(PlayerVolume, {
+      /* @__PURE__ */ jsx109(Separator2, {}),
+      /* @__PURE__ */ jsx109(PlayerVolume, {
         playerRef
       }),
-      /* @__PURE__ */ jsx108(Separator2, {}),
-      /* @__PURE__ */ jsx108("div", {
+      /* @__PURE__ */ jsx109(Separator2, {}),
+      /* @__PURE__ */ jsx109("div", {
         style: { width: 15 }
       }),
-      /* @__PURE__ */ jsx108(TimeDisplay, {
+      /* @__PURE__ */ jsx109(TimeDisplay, {
         playerRef,
         fps
       }),
-      /* @__PURE__ */ jsx108("div", {
+      /* @__PURE__ */ jsx109("div", {
         style: { width: 15 }
       }),
-      /* @__PURE__ */ jsx108(PlayerSeekBar2, {
+      /* @__PURE__ */ jsx109(PlayerSeekBar2, {
         durationInFrames,
         playerRef,
         inFrame: null,
@@ -44419,30 +44825,31 @@ var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
           return;
         }
       }),
-      /* @__PURE__ */ jsx108("div", {
+      /* @__PURE__ */ jsx109("div", {
         style: { width: 20 }
       }),
-      /* @__PURE__ */ jsx108(Separator2, {}),
+      /* @__PURE__ */ jsx109(Separator2, {}),
       children
     ]
   });
 };
 
 // src/components/homepage/Demo/ThemeNudge.tsx
-import React75 from "react";
-import { jsx as jsx109, jsxs as jsxs37 } from "react/jsx-runtime";
-var origWidth3 = 21;
+import React77 from "react";
+import { jsx as jsx110, jsxs as jsxs38 } from "react/jsx-runtime";
+var origWidth3 = 37;
 var scale3 = 0.4;
 var Icon6 = () => {
-  return /* @__PURE__ */ jsx109("svg", {
+  return /* @__PURE__ */ jsx110("svg", {
     style: {
-      width: origWidth3 * scale3
+      width: origWidth3 * scale3,
+      overflow: "visible"
     },
-    viewBox: "0 0 21 161",
+    viewBox: "0 0 37 59",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx109("path", {
-      d: "M5 5C23 59.5 14.5 120.5 5.00005 156",
+    children: /* @__PURE__ */ jsx110("path", {
+      d: "M32 5C32 36.5 21 44 5 54",
       stroke: "currentColor",
       strokeWidth: "8",
       strokeLinecap: "round"
@@ -44451,34 +44858,34 @@ var Icon6 = () => {
 };
 var ThemeNudge = () => {
   const { colorMode, setColorMode } = useColorMode();
-  const toggleTheme = React75.useCallback((e) => {
+  const toggleTheme = React77.useCallback((e) => {
     e.preventDefault();
     setColorMode(colorMode === "dark" ? "light" : "dark");
   }, [colorMode, setColorMode]);
-  return /* @__PURE__ */ jsx109("div", {
+  return /* @__PURE__ */ jsx110("div", {
     style: {
       flexDirection: "row",
       display: "flex",
       justifyContent: "flex-start",
-      paddingBottom: 5,
+      paddingBottom: 0,
       textAlign: "right",
-      position: "absolute",
-      right: 0
+      position: "absolute"
     },
-    children: /* @__PURE__ */ jsxs37("div", {
+    className: "lg:top-3 lg:-right-6 right-0 top-0",
+    children: /* @__PURE__ */ jsxs38("div", {
       children: [
-        /* @__PURE__ */ jsxs37("div", {
+        /* @__PURE__ */ jsxs38("div", {
           style: {
             fontFamily: FONTS.GTPLANAR,
             fontSize: 15,
             width: 280,
             paddingBottom: 8,
-            marginLeft: -15,
+            marginLeft: 20,
             textWrap: "balance",
             marginTop: 5
           },
           children: [
-            /* @__PURE__ */ jsxs37("a", {
+            /* @__PURE__ */ jsxs38("a", {
               href: "#",
               onClick: toggleTheme,
               className: "bluelink",
@@ -44493,14 +44900,14 @@ var ThemeNudge = () => {
             " "
           ]
         }),
-        /* @__PURE__ */ jsx109(Icon6, {})
+        /* @__PURE__ */ jsx110(Icon6, {})
       ]
     })
   });
 };
 
 // src/components/homepage/Demo/index.tsx
-import { jsx as jsx110, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs39 } from "react/jsx-runtime";
 var style3 = {
   width: "100%",
   aspectRatio: "640 / 360",
@@ -44517,7 +44924,7 @@ var playerWrapper = {
 var Demo = () => {
   const { colorMode } = useColorMode();
   const [data2, setData] = useState56(null);
-  const ref = useRef57(null);
+  const ref = useRef58(null);
   const [isFullscreen, setIsFullscreen] = useState56(false);
   const [cardOrder, setCardOrder] = useState56([0, 1, 2, 3]);
   const [emojiIndex, setEmojiIndex] = useState56(0);
@@ -44543,7 +44950,7 @@ var Demo = () => {
       playerRef.removeEventListener("fullscreenchange", onFullscreenChange);
     };
   }, [data2]);
-  const updateCardOrder = useCallback51((newCardOrder) => {
+  const updateCardOrder = useCallback53((newCardOrder) => {
     setCardOrder(newCardOrder);
   }, []);
   const props = useMemo67(() => {
@@ -44565,69 +44972,78 @@ var Demo = () => {
       emojiIndex
     };
   }, [cardOrder, emojiIndex, colorMode, data2, updateCardOrder]);
-  const onError = useCallback51(() => {
+  const onError = useCallback53(() => {
     setError(true);
   }, []);
-  return /* @__PURE__ */ jsxs38("div", {
+  return /* @__PURE__ */ jsxs39("div", {
+    id: "demo",
     children: [
-      /* @__PURE__ */ jsx110("br", {}),
-      /* @__PURE__ */ jsx110("br", {}),
-      /* @__PURE__ */ jsx110(SectionTitle, {
-        children: "Demo"
+      /* @__PURE__ */ jsx111("br", {}),
+      /* @__PURE__ */ jsx111("br", {}),
+      /* @__PURE__ */ jsx111(SectionTitle, {
+        children: "Interactive demo"
       }),
-      /* @__PURE__ */ jsxs38("div", {
-        style: { height: 140, position: "relative" },
+      /* @__PURE__ */ jsxs39("div", {
+        className: "max-w-[760px] mx-auto",
         children: [
-          /* @__PURE__ */ jsx110(DragAndDropNudge, {}),
-          /* @__PURE__ */ jsx110(ThemeNudge, {})
-        ]
-      }),
-      /* @__PURE__ */ jsxs38("div", {
-        style: playerWrapper,
-        children: [
-          /* @__PURE__ */ jsx110(Player, {
-            ref,
-            component: HomepageVideoComp,
-            compositionWidth: 640,
-            compositionHeight: 360,
-            durationInFrames: 120,
-            fps: 30,
-            autoPlay: true,
-            controls: isFullscreen,
-            clickToPlay: false,
-            style: style3,
-            initiallyMuted: true,
-            inputProps: props,
-            acknowledgeRemotionLicense: true,
-            numberOfSharedAudioTags: 0,
-            loop: true
+          /* @__PURE__ */ jsxs39("div", {
+            className: "h-[105px] relative",
+            children: [
+              /* @__PURE__ */ jsx111(DragAndDropNudge, {}),
+              /* @__PURE__ */ jsx111(ThemeNudge, {})
+            ]
           }),
-          /* @__PURE__ */ jsx110(PlayerControls, {
-            playerRef: ref,
-            durationInFrames: 120,
-            fps: 30,
-            children: /* @__PURE__ */ jsx110(RenderButton, {
-              onError,
-              renderData: data2 ? {
-                cardOrder,
-                emojiIndex,
-                location: data2.location,
-                theme: colorMode,
-                trending: data2.trending
-              } : null,
-              playerRef: ref
-            })
-          })
+          /* @__PURE__ */ jsxs39("div", {
+            style: playerWrapper,
+            children: [
+              /* @__PURE__ */ jsx111(Player, {
+                ref,
+                component: HomepageVideoComp,
+                compositionWidth: 640,
+                compositionHeight: 360,
+                durationInFrames: 120,
+                fps: 30,
+                autoPlay: true,
+                controls: isFullscreen,
+                clickToPlay: false,
+                style: style3,
+                initiallyMuted: true,
+                inputProps: props,
+                acknowledgeRemotionLicense: true,
+                numberOfSharedAudioTags: 0,
+                loop: true
+              }),
+              /* @__PURE__ */ jsx111(PlayerControls, {
+                playerRef: ref,
+                durationInFrames: 120,
+                fps: 30,
+                children: /* @__PURE__ */ jsx111(RenderButton, {
+                  onError,
+                  renderData: data2 ? {
+                    cardOrder,
+                    emojiIndex,
+                    location: data2.location,
+                    theme: colorMode,
+                    trending: data2.trending
+                  } : null,
+                  playerRef: ref
+                })
+              })
+            ]
+          }),
+          error2 ? /* @__PURE__ */ jsx111(DemoError, {}) : null,
+          /* @__PURE__ */ jsx111(DownloadNudge, {})
         ]
-      }),
-      error2 ? /* @__PURE__ */ jsx110(DemoError, {}) : null,
-      /* @__PURE__ */ jsx110(DownloadNudge, {})
+      })
     ]
   });
 };
 
+// src/components/homepage/EvaluateRemotion.tsx
+import { useEffect as useEffect59, useState as useState57 } from "react";
+
 // src/components/homepage/layout/Button.tsx
-import { jsx as jsx111 } from "react/jsx-runtime";
+import { jsx as jsx114 } from "react/jsx-runtime";
 var Button2 = (props) => {
   const {
     children,
@@ -44640,7 +45056,7 @@ var Button2 = (props) => {
     ...other
   } = props;
   const actualDisabled = other.disabled || loading;
-  return /* @__PURE__ */ jsx111("button", {
+  return /* @__PURE__ */ jsx114("button", {
     type: "button",
     className: cn2("text-base rounded-lg font-bold appearance-none border-2 border-solid border-black border-b-4 font-sans flex flex-row items-center justify-center ", className3),
     disabled: actualDisabled,
@@ -44658,254 +45074,18 @@ var Button2 = (props) => {
   });
 };
 var BlueButton = (props) => {
-  return /* @__PURE__ */ jsx111(Button2, {
+  return /* @__PURE__ */ jsx114(Button2, {
     ...props,
     background: "var(--blue-underlay)",
     color: "white"
   });
 };
-var ClearButton = (props) => {
-  return /* @__PURE__ */ jsx111(Button2, {
-    ...props,
-    background: "transparent",
-    color: "var(--text-color)",
-    hoverColor: "var(--clear-hover)"
-  });
-};
-
-// src/components/homepage/MuxVideo.tsx
-import Hls2 from "hls.js";
-import { forwardRef as forwardRef40, useEffect as useEffect60, useImperativeHandle as useImperativeHandle15, useRef as useRef59 } from "react";
-
-// src/components/homepage/VideoPlayerWithControls.tsx
-import Hls from "hls.js";
-import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef39, useCallback as useCallback53, useEffect as useEffect59, useRef as useRef58, useState as useState57 } from "react";
-import { jsx as jsx114 } from "react/jsx-runtime";
-var useCombinedRefs = function(...refs) {
-  const targetRef = useRef58(null);
-  useEffect59(() => {
-    refs.forEach((ref) => {
-      if (!ref)
-        return;
-      if (typeof ref === "function") {
-        ref(targetRef.current);
-      } else {
-        ref.current = targetRef.current;
-      }
-    });
-  }, [refs]);
-  return targetRef;
-};
-var VideoPlayerWithControls = forwardRef39(({ playbackId, poster, currentTime, onLoaded, onError, onSize, autoPlay }, ref) => {
-  const videoRef = useRef58(null);
-  const metaRef = useCombinedRefs(ref, videoRef);
-  const playerRef = useRef58(null);
-  const [playerInitTime] = useState57(Date.now());
-  const videoError = useCallback53((event) => onError(event), [onError]);
-  const onImageLoad = useCallback53((event) => {
-    const [w, h] = [event.target.width, event.target.height];
-    if (w && h) {
-      onSize({ width: w, height: h });
-      onLoaded();
-    } else {
-      onLoaded();
-      console.error("Error getting img dimensions", event);
-    }
-  }, [onLoaded, onSize]);
-  useEffect59(() => {
-    const img = new Image;
-    img.onload = (evt) => onImageLoad(evt);
-    img.src = poster;
-  }, [onImageLoad, poster]);
-  useEffect59(() => {
-    const video = videoRef.current;
-    const src = `https://stream.mux.com/${playbackId}.m3u8`;
-    let hls;
-    hls = null;
-    if (video) {
-      video.addEventListener("error", videoError);
-      const Plyr = __require("plyr");
-      playerRef.current = new Plyr(video, {
-        previewThumbnails: {
-          enabled: true,
-          src: `https://image.mux.com/${playbackId}/storyboard.vtt`
-        },
-        storage: { enabled: false },
-        fullscreen: {
-          iosNative: true
-        },
-        captions: { active: true, language: "auto", update: true }
-      });
-      if (video.canPlayType("application/vnd.apple.mpegurl")) {
-        video.src = src;
-      } else if (Hls.isSupported()) {
-        hls = new Hls;
-        hls.loadSource(src);
-        hls.attachMedia(video);
-        hls.on(Hls.Events.ERROR, (_event, data2) => {
-          if (data2.fatal) {
-            videoError(new ErrorEvent("HLS.js fatal error"));
-          }
-        });
-      } else {
-        console.error("This is an old browser that does not support MSE https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API");
-      }
-    }
-    return () => {
-      if (video) {
-        video.removeEventListener("error", videoError);
-      }
-      if (hls) {
-        hls.destroy();
-      }
-    };
-  }, [playbackId, playerInitTime, videoError, videoRef]);
-  useEffect59(() => {
-    const video = videoRef.current;
-    if (currentTime && video) {
-      video.currentTime = currentTime;
-    }
-  }, [currentTime]);
-  return /* @__PURE__ */ jsx114("div", {
-    className: "video-container",
-    children: /* @__PURE__ */ jsx114("video", {
-      ref: metaRef,
-      autoPlay,
-      poster,
-      controls: true,
-      playsInline: true
-    })
-  });
-});
-
-// src/components/homepage/MuxVideo.tsx
-import { jsx as jsx116 } from "react/jsx-runtime";
-var getVideoToPlayUrl = (muxId) => {
-  return `https://stream.mux.com/${muxId}.m3u8`;
-};
-var MuxVideoForward = ({ muxId, ...props }, ref) => {
-  const videoRef = useRef59(null);
-  const vidUrl = getVideoToPlayUrl(muxId);
-  useImperativeHandle15(ref, () => videoRef.current, []);
-  useEffect60(() => {
-    let hls;
-    if (videoRef.current) {
-      const { current } = videoRef;
-      if (current.canPlayType("application/vnd.apple.mpegurl")) {
-        current.src = vidUrl;
-      } else if (Hls2.isSupported()) {
-        hls = new Hls2;
-        hls.loadSource(vidUrl);
-        hls.attachMedia(current);
-      } else {
-        console.error("This is a legacy browser that doesn't support MSE");
-      }
-    }
-    return () => {
-      if (hls) {
-        hls.destroy();
-      }
-    };
-  }, [vidUrl, videoRef]);
-  return /* @__PURE__ */ jsx116("video", {
-    ref: videoRef,
-    ...props
-  });
-};
-var MuxVideo = forwardRef40(MuxVideoForward);
-
-// src/components/homepage/EditorStarterSection.tsx
-import { jsx as jsx117, jsxs as jsxs39 } from "react/jsx-runtime";
-var EditorStarterSection = () => {
-  return /* @__PURE__ */ jsxs39("div", {
-    children: [
-      /* @__PURE__ */ jsx117(SectionTitle, {
-        children: "Build your own video editor"
-      }),
-      /* @__PURE__ */ jsx117("br", {}),
-      /* @__PURE__ */ jsx117("div", {
-        className: "card flex p-0 overflow-hidden",
-        children: /* @__PURE__ */ jsxs39("div", {
-          className: "flex-1 flex flex-col lg:flex-row justify-center",
-          children: [
-            /* @__PURE__ */ jsx117("div", {
-              className: "w-full max-w-[500px] aspect-square relative overflow-hidden bg-[#eee]",
-              children: /* @__PURE__ */ jsx117(MuxVideo, {
-                muxId: "YIvIidbcAc7009B00Wr7gIbGyq67YGNlytGvMXwdsLRtc",
-                className: "absolute left-0 top-0 w-full h-full object-cover object-top rounded-sm rounded-tr-none rounded-br-none",
-                loop: true,
-                autoPlay: true,
-                playsInline: true,
-                muted: true
-              })
-            }),
-            /* @__PURE__ */ jsxs39("div", {
-              className: "p-6 flex-1 flex flex-col h-full",
-              children: [
-                /* @__PURE__ */ jsx117("div", {
-                  className: "text-4xl font-bold fontbrand mt-0",
-                  children: "Editor Starter"
-                }),
-                /* @__PURE__ */ jsx117("div", {
-                  className: "text-muted mt-4 text-base fontbrand",
-                  children: "A comprehensive template that includes everything you need to create custom video editing applications with React and TypeScript."
-                }),
-                /* @__PURE__ */ jsx117("div", {
-                  className: "h-5"
-                }),
-                /* @__PURE__ */ jsxs39("div", {
-                  className: "flex gap-2 items-center",
-                  children: [
-                    /* @__PURE__ */ jsx117("a", {
-                      href: "https://www.remotion.pro/editor-starter?ref=remotion.dev",
-                      target: "_blank",
-                      className: "no-underline",
-                      children: /* @__PURE__ */ jsx117(BlueButton, {
-                        size: "sm",
-                        loading: false,
-                        children: "Purchase"
-                      })
-                    }),
-                    /* @__PURE__ */ jsx117("a", {
-                      href: "https://editor-starter.remotion.dev?ref=remotion.dev",
-                      target: "_blank",
-                      className: "no-underline",
-                      children: /* @__PURE__ */ jsx117(ClearButton, {
-                        size: "sm",
-                        loading: false,
-                        children: "Demo"
-                      })
-                    }),
-                    " ",
-                    /* @__PURE__ */ jsx117("a", {
-                      href: "https://remotion.dev/editor-starter",
-                      className: "no-underline",
-                      children: /* @__PURE__ */ jsx117(ClearButton, {
-                        size: "sm",
-                        loading: false,
-                        children: "Docs"
-                      })
-                    })
-                  ]
-                }),
-                /* @__PURE__ */ jsx117("br", {})
-              ]
-            })
-          ]
-        })
-      })
-    ]
-  });
-};
-var EditorStarterSection_default = EditorStarterSection;
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { useEffect as useEffect61, useState as useState58 } from "react";
-import { jsx as jsx118, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx116, jsxs as jsxs40 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
-  const [dailyAvatars, setDailyAvatars] = useState58([]);
-  useEffect61(() => {
+  const [dailyAvatars, setDailyAvatars] = useState57([]);
+  useEffect59(() => {
     const avatars = experts.map((expert) => expert.image);
     const selectedAvatars = [];
     for (let i = 0;i < 3; i++) {
@@ -44921,35 +45101,35 @@ var EvaluateRemotionSection = () => {
       /* @__PURE__ */ jsxs40("div", {
         className: "card flex-1 flex flex-col",
         children: [
-          /* @__PURE__ */ jsx118("div", {
+          /* @__PURE__ */ jsx116("div", {
             className: "fontbrand text-2xl font-bold",
             children: "Questions about our license?"
           }),
-          /* @__PURE__ */ jsx118("p", {
+          /* @__PURE__ */ jsx116("p", {
             className: "text-muted fontbrand leading-snug",
             children: "Book a 20 minute call or write us an email to get all your questions answered."
           }),
-          /* @__PURE__ */ jsx118("div", {
+          /* @__PURE__ */ jsx116("div", {
             className: "flex-1"
           }),
           /* @__PURE__ */ jsxs40("div", {
             className: "flex flex-row flex-wrap gap-2",
             children: [
-              /* @__PURE__ */ jsx118("a", {
+              /* @__PURE__ */ jsx116("a", {
                 target: "_blank",
                 href: "https://cal.com/remotion/evaluate",
                 style: { textDecoration: "none" },
-                children: /* @__PURE__ */ jsx118(BlueButton, {
+                children: /* @__PURE__ */ jsx116(BlueButton, {
                   size: "sm",
                   loading: false,
                   children: "Schedule a call"
                 })
               }),
-              /* @__PURE__ */ jsx118("a", {
+              /* @__PURE__ */ jsx116("a", {
                 target: "_blank",
                 href: "mailto:hi@remotion.dev",
                 style: { textDecoration: "none" },
-                children: /* @__PURE__ */ jsx118(BlueButton, {
+                children: /* @__PURE__ */ jsx116(BlueButton, {
                   size: "sm",
                   loading: false,
                   children: "Write an email"
@@ -44962,32 +45142,32 @@ var EvaluateRemotionSection = () => {
       /* @__PURE__ */ jsxs40("div", {
         className: "card flex-1 flex flex-col",
         children: [
-          /* @__PURE__ */ jsx118("div", {
+          /* @__PURE__ */ jsx116("div", {
             className: "fontbrand text-2xl font-bold",
             children: "Get help with your Remotion project"
           }),
-          /* @__PURE__ */ jsx118("p", {
+          /* @__PURE__ */ jsx116("p", {
             className: "text-muted fontbrand leading-snug",
             children: "Contact our experts for help and work."
           }),
-          /* @__PURE__ */ jsx118("div", {
+          /* @__PURE__ */ jsx116("div", {
             className: "flex-1"
           }),
           /* @__PURE__ */ jsxs40("div", {
             className: "flex flex-row justify-between",
             children: [
-              /* @__PURE__ */ jsx118("a", {
+              /* @__PURE__ */ jsx116("a", {
                 href: "/experts",
                 style: { textDecoration: "none" },
-                children: /* @__PURE__ */ jsx118(BlueButton, {
+                children: /* @__PURE__ */ jsx116(BlueButton, {
                   size: "sm",
                   loading: false,
                   children: "Remotion Experts"
                 })
               }),
-              /* @__PURE__ */ jsx118("div", {
+              /* @__PURE__ */ jsx116("div", {
                 className: "flex justify-end items-end gap-3",
-                children: dailyAvatars.map((avatar) => /* @__PURE__ */ jsx118("div", {
+                children: dailyAvatars.map((avatar) => /* @__PURE__ */ jsx116("div", {
                   className: "w-12 h-12 rounded-full bg-muted bg-cover bg-center -ml-5 border-2 border-black",
                   style: { backgroundImage: `url(${avatar})` }
                 }, avatar))
@@ -45002,8 +45182,8 @@ var EvaluateRemotionSection = () => {
 var EvaluateRemotion_default = EvaluateRemotionSection;
 
 // src/components/homepage/IfYouKnowReact.tsx
-import { useEffect as useEffect63, useState as useState59 } from "react";
-import { jsx as jsx119, jsxs as jsxs41 } from "react/jsx-runtime";
+import { useEffect as useEffect60, useState as useState58 } from "react";
+import { jsx as jsx117, jsxs as jsxs41 } from "react/jsx-runtime";
 var isWebkit = () => {
   if (typeof window === "undefined") {
     return false;
@@ -45012,13 +45192,13 @@ var isWebkit = () => {
   const isChrome = Boolean(navigator.userAgent.match(/CriOS\//));
   return isSafariUserAgent || isChrome;
 };
-var icon2 = {
+var icon3 = {
   height: 16,
   marginLeft: 10
 };
 var IfYouKnowReact = () => {
-  const [vid, setVid] = useState59("/img/compose.webm");
-  useEffect63(() => {
+  const [vid, setVid] = useState58("/img/compose.webm");
+  useEffect60(() => {
     if (isWebkit()) {
       setVid("/img/compose.mp4");
     }
@@ -45026,7 +45206,7 @@ var IfYouKnowReact = () => {
   return /* @__PURE__ */ jsxs41("div", {
     className: "flex flex-col lg:flex-row text-left justify-start lg:justify-end items-start lg:mb-0 gap-6 mt-8",
     children: [
-      /* @__PURE__ */ jsx119("video", {
+      /* @__PURE__ */ jsx117("video", {
         src: vid,
         muted: true,
         autoPlay: true,
@@ -45039,18 +45219,18 @@ var IfYouKnowReact = () => {
           /* @__PURE__ */ jsxs41("h2", {
             className: "text-4xl fontbrand pt-20",
             children: [
-              /* @__PURE__ */ jsx119("span", {
+              /* @__PURE__ */ jsx117("span", {
                 className: "text-brand",
                 children: "Compose"
               }),
               " with code"
             ]
           }),
-          /* @__PURE__ */ jsx119("p", {
+          /* @__PURE__ */ jsx117("p", {
             className: "leading-relaxed font-brand",
             children: "Use React, a powerful frontend technology, to create sophisticated videos with code."
           }),
-          /* @__PURE__ */ jsx119("div", {
+          /* @__PURE__ */ jsx117("div", {
             className: "h-4"
           }),
           /* @__PURE__ */ jsxs41("a", {
@@ -45059,11 +45239,11 @@ var IfYouKnowReact = () => {
             children: [
               "Learn Remotion",
               " ",
-              /* @__PURE__ */ jsx119("svg", {
-                style: icon2,
+              /* @__PURE__ */ jsx117("svg", {
+                style: icon3,
                 xmlns: "http://www.w3.org/2000/svg",
                 viewBox: "0 0 448 512",
-                children: /* @__PURE__ */ jsx119("path", {
+                children: /* @__PURE__ */ jsx117("path", {
                   fill: "currentColor",
                   d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"
                 })
@@ -45077,12 +45257,12 @@ var IfYouKnowReact = () => {
 };
 
 // src/components/homepage/NewsletterButton.tsx
-import { useCallback as useCallback55, useState as useState60 } from "react";
-import { jsx as jsx120, jsxs as jsxs44 } from "react/jsx-runtime";
+import { useCallback as useCallback55, useState as useState59 } from "react";
+import { jsx as jsx118, jsxs as jsxs44 } from "react/jsx-runtime";
 var NewsletterButton = () => {
-  const [email, setEmail] = useState60("");
-  const [submitting, setSubmitting] = useState60(false);
-  const [subscribed, setSubscribed] = useState60(false);
+  const [email, setEmail] = useState59("");
+  const [submitting, setSubmitting] = useState59(false);
+  const [subscribed, setSubscribed] = useState59(false);
   const handleSubmit = useCallback55(async (e) => {
     try {
       setSubmitting(true);
@@ -45105,15 +45285,15 @@ var NewsletterButton = () => {
       alert("Something went wrong. Please try again later.");
     }
   }, [email]);
-  return /* @__PURE__ */ jsx120("div", {
-    children: /* @__PURE__ */ jsx120("div", {
+  return /* @__PURE__ */ jsx118("div", {
+    children: /* @__PURE__ */ jsx118("div", {
       className: "flex flex-col",
-      children: /* @__PURE__ */ jsx120("div", {
+      children: /* @__PURE__ */ jsx118("div", {
         className: "w-full",
         children: /* @__PURE__ */ jsxs44("div", {
           className: "flex flex-col flex-1",
           children: [
-            /* @__PURE__ */ jsx120(SectionTitle, {
+            /* @__PURE__ */ jsx118(SectionTitle, {
               children: "Newsletter"
             }),
             /* @__PURE__ */ jsxs44("form", {
@@ -45132,7 +45312,7 @@ var NewsletterButton = () => {
                 /* @__PURE__ */ jsxs44("div", {
                   className: "flex flex-col md:flex-row gap-2 justify-center",
                   children: [
-                    /* @__PURE__ */ jsx120(Input, {
+                    /* @__PURE__ */ jsx118(Input, {
                       disabled: submitting,
                       value: email,
                       className: "md:max-w-[400px]",
@@ -45141,14 +45321,14 @@ var NewsletterButton = () => {
                       required: true,
                       placeholder: "animator@gmail.com"
                     }),
-                    /* @__PURE__ */ jsx120("div", {
-                      children: /* @__PURE__ */ jsx120(Button, {
+                    /* @__PURE__ */ jsx118("div", {
+                      children: /* @__PURE__ */ jsx118(Button, {
                         type: "submit",
                         className: "w-14 rounded-full h-14 bg-brand text-white font-bold disabled:text-white/50 disabled:border-black px-0 py-0",
                         disabled: submitting || subscribed,
-                        children: subscribed ? /* @__PURE__ */ jsx120(CheckIcon, {
+                        children: subscribed ? /* @__PURE__ */ jsx118(CheckIcon, {
                           className: " size-5 mt-[1px]"
-                        }) : /* @__PURE__ */ jsx120(PlanePaperIcon, {
+                        }) : /* @__PURE__ */ jsx118(PlanePaperIcon, {
                           className: " size-6 ml-[2px]"
                         })
                       })
@@ -45165,16 +45345,16 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect65, useRef as useRef60, useState as useState61 } from "react";
-import { jsx as jsx121, jsxs as jsxs46 } from "react/jsx-runtime";
-var icon3 = {
+import { useEffect as useEffect61, useRef as useRef59, useState as useState60 } from "react";
+import { jsx as jsx119, jsxs as jsxs46 } from "react/jsx-runtime";
+var icon4 = {
   height: 16,
   marginLeft: 10
 };
 var ParameterizeAndEdit = () => {
-  const ref = useRef60(null);
-  const [vid, setVid] = useState61("/img/editing-vp9-chrome.webm");
-  useEffect65(() => {
+  const ref = useRef59(null);
+  const [vid, setVid] = useState60("/img/editing-vp9-chrome.webm");
+  useEffect61(() => {
     if (isWebkit()) {
       setVid("/img/editing-safari.mp4");
     }
@@ -45183,8 +45363,8 @@ var ParameterizeAndEdit = () => {
     ref,
     className: "flex flex-col lg:flex-row justify-start lg:justify-end items-start gap-6 mt-20 lg:mt-0",
     children: [
-      /* @__PURE__ */ jsx121("div", {
-        children: /* @__PURE__ */ jsx121("video", {
+      /* @__PURE__ */ jsx119("div", {
+        children: /* @__PURE__ */ jsx119("video", {
           src: vid,
           autoPlay: true,
           muted: true,
@@ -45206,7 +45386,7 @@ var ParameterizeAndEdit = () => {
             className: "fontbrand text-4xl",
             children: [
               "Edit ",
-              /* @__PURE__ */ jsx121("span", {
+              /* @__PURE__ */ jsx119("span", {
                 className: "text-brand",
                 children: "dynamically"
               })
@@ -45216,11 +45396,11 @@ var ParameterizeAndEdit = () => {
             className: "leading-relaxed",
             children: [
               "Parameterize your video by passing data.",
-              /* @__PURE__ */ jsx121("br", {}),
+              /* @__PURE__ */ jsx119("br", {}),
               "Or embed it into your app and build an interface around it."
             ]
           }),
-          /* @__PURE__ */ jsx121("div", {
+          /* @__PURE__ */ jsx119("div", {
             className: "h-4"
           }),
           /* @__PURE__ */ jsxs46("div", {
@@ -45232,47 +45412,47 @@ var ParameterizeAndEdit = () => {
                 children: [
                   "Remotion Studio",
                   " ",
-                  /* @__PURE__ */ jsx121("svg", {
-                    style: icon3,
+                  /* @__PURE__ */ jsx119("svg", {
+                    style: icon4,
                     xmlns: "http://www.w3.org/2000/svg",
                     viewBox: "0 0 448 512",
-                    children: /* @__PURE__ */ jsx121("path", {
+                    children: /* @__PURE__ */ jsx119("path", {
                       fill: "currentColor",
                       d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"
                     })
                   })
                 ]
               }),
-              /* @__PURE__ */ jsx121("br", {}),
+              /* @__PURE__ */ jsx119("br", {}),
               /* @__PURE__ */ jsxs46("a", {
                 className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                 href: "/player",
                 children: [
                   "Remotion Player",
                   " ",
-                  /* @__PURE__ */ jsx121("svg", {
-                    style: icon3,
+                  /* @__PURE__ */ jsx119("svg", {
+                    style: icon4,
                     xmlns: "http://www.w3.org/2000/svg",
                     viewBox: "0 0 448 512",
-                    children: /* @__PURE__ */ jsx121("path", {
+                    children: /* @__PURE__ */ jsx119("path", {
                       fill: "currentColor",
                       d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"
                     })
                   })
                 ]
               }),
-              /* @__PURE__ */ jsx121("br", {}),
+              /* @__PURE__ */ jsx119("br", {}),
               /* @__PURE__ */ jsxs46("a", {
                 className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                 href: "/docs/editor-starter",
                 children: [
                   "Remotion Editor Starter",
                   " ",
-                  /* @__PURE__ */ jsx121("svg", {
-                    style: icon3,
+                  /* @__PURE__ */ jsx119("svg", {
+                    style: icon4,
                     xmlns: "http://www.w3.org/2000/svg",
                     viewBox: "0 0 448 512",
-                    children: /* @__PURE__ */ jsx121("path", {
+                    children: /* @__PURE__ */ jsx119("path", {
                       fill: "currentColor",
                       d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"
                     })
@@ -45288,22 +45468,22 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect66, useRef as useRef61, useState as useState64 } from "react";
-import { jsx as jsx124, jsxs as jsxs47 } from "react/jsx-runtime";
-var icon4 = {
+import { useEffect as useEffect63, useRef as useRef60, useState as useState61 } from "react";
+import { jsx as jsx120, jsxs as jsxs47 } from "react/jsx-runtime";
+var icon5 = {
   height: 16,
   marginLeft: 10
 };
 var RealMP4Videos = () => {
-  const ref = useRef61(null);
-  const videoRef = useRef61(null);
-  const [vid, setVid] = useState64("/img/render-progress.webm");
-  useEffect66(() => {
+  const ref = useRef60(null);
+  const videoRef = useRef60(null);
+  const [vid, setVid] = useState61("/img/render-progress.webm");
+  useEffect63(() => {
     if (isWebkit()) {
       setVid("/img/render-progress.mp4");
     }
   }, []);
-  useEffect66(() => {
+  useEffect63(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -45324,9 +45504,9 @@ var RealMP4Videos = () => {
     ref,
     className: "flex flex-col lg:flex-row mt-40 lg:mt-30 gap-6",
     children: [
-      /* @__PURE__ */ jsx124("div", {
+      /* @__PURE__ */ jsx120("div", {
         className: "flex w-[500px] justify-start lg:justify-start items-end",
-        children: /* @__PURE__ */ jsx124("video", {
+        children: /* @__PURE__ */ jsx120("video", {
           ref: videoRef,
           src: vid,
           muted: true,
@@ -45349,7 +45529,7 @@ var RealMP4Videos = () => {
           /* @__PURE__ */ jsxs47("h2", {
             className: "text-4xl fontbrand",
             children: [
-              /* @__PURE__ */ jsx124("span", {
+              /* @__PURE__ */ jsx120("span", {
                 className: "text-brand",
                 children: "Scalable"
               }),
@@ -45360,12 +45540,12 @@ var RealMP4Videos = () => {
             className: "leading-relaxed",
             children: [
               "Render the video as .mp4 or other formats. ",
-              /* @__PURE__ */ jsx124("br", {}),
+              /* @__PURE__ */ jsx120("br", {}),
               "Locally, on the server or serverless."
             ]
           }),
           " ",
-          /* @__PURE__ */ jsx124("div", {
+          /* @__PURE__ */ jsx120("div", {
             className: "h-4"
           }),
           /* @__PURE__ */ jsxs47("div", {
@@ -45377,29 +45557,29 @@ var RealMP4Videos = () => {
                 children: [
                   "Render options",
                   " ",
-                  /* @__PURE__ */ jsx124("svg", {
-                    style: icon4,
+                  /* @__PURE__ */ jsx120("svg", {
+                    style: icon5,
                     xmlns: "http://www.w3.org/2000/svg",
                     viewBox: "0 0 448 512",
-                    children: /* @__PURE__ */ jsx124("path", {
+                    children: /* @__PURE__ */ jsx120("path", {
                       fill: "currentColor",
                       d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"
                     })
                   })
                 ]
               }),
-              /* @__PURE__ */ jsx124("br", {}),
+              /* @__PURE__ */ jsx120("br", {}),
               /* @__PURE__ */ jsxs47("a", {
                 className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                 href: "/lambda",
                 children: [
                   "Remotion Lambda",
                   " ",
-                  /* @__PURE__ */ jsx124("svg", {
-                    style: icon4,
+                  /* @__PURE__ */ jsx120("svg", {
+                    style: icon5,
                     xmlns: "http://www.w3.org/2000/svg",
                     viewBox: "0 0 448 512",
-                    children: /* @__PURE__ */ jsx124("path", {
+                    children: /* @__PURE__ */ jsx120("path", {
                       fill: "currentColor",
                       d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"
                     })
@@ -45415,18 +45595,18 @@ var RealMP4Videos = () => {
 };
 
 // src/components/homepage/TrustedByBanner.tsx
-import { jsx as jsx126, jsxs as jsxs48, Fragment as Fragment15 } from "react/jsx-runtime";
+import { jsx as jsx121, jsxs as jsxs48, Fragment as Fragment16 } from "react/jsx-runtime";
 var TrustedByBanner = () => {
   const logos = [
     {
       id: "logo1",
       url: "https://www.github.com/",
-      light: /* @__PURE__ */ jsx126("svg", {
+      light: /* @__PURE__ */ jsx121("svg", {
         height: "50",
         viewBox: "0 0 64 62",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsx126("path", {
+        children: /* @__PURE__ */ jsx121("path", {
           d: "M21.3033 49.7496C21.3033 50.0051 21.0079 50.2095 20.6355 50.2095C20.2118 50.2478 19.9164 50.0434 19.9164 49.7496C19.9164 49.4941 20.2118 49.2896 20.5842 49.2896C20.9694 49.2513 21.3033 49.4557 21.3033 49.7496ZM17.3097 49.1747C17.2198 49.4302 17.4766 49.724 17.8619 49.8007C18.1957 49.9284 18.581 49.8007 18.658 49.5452C18.7351 49.2896 18.4911 48.9958 18.1059 48.8808C17.772 48.7914 17.3996 48.9191 17.3097 49.1747ZM22.9854 48.9575C22.6131 49.0469 22.3562 49.2896 22.3948 49.5835C22.4333 49.839 22.7671 50.0051 23.1524 49.9157C23.5248 49.8262 23.7816 49.5835 23.7431 49.328C23.7045 49.0852 23.3578 48.9191 22.9854 48.9575ZM31.4348 0C13.6243 0 0 13.4531 0 31.1733C0 45.3419 8.96304 57.4663 21.7655 61.7334C23.4092 62.0273 23.987 61.018 23.987 60.1875C23.987 59.3954 23.9485 55.0261 23.9485 52.3431C23.9485 52.3431 14.9598 54.2595 13.0722 48.5359C13.0722 48.5359 11.6083 44.8181 9.50236 43.8599C9.50236 43.8599 6.56177 41.854 9.70782 41.8924C9.70782 41.8924 12.9052 42.1479 14.6645 45.1886C17.4766 50.1201 22.1893 48.702 24.0256 47.8587C24.3209 45.8146 25.1556 44.3965 26.0801 43.5532C18.902 42.7611 11.6597 41.7263 11.6597 29.4358C11.6597 25.9224 12.6356 24.1593 14.6901 21.9108C14.3563 21.0803 13.2648 17.6564 15.024 13.2359C17.7078 12.4055 23.8843 16.6854 23.8843 16.6854C26.4525 15.9699 29.2133 15.5994 31.9485 15.5994C34.6836 15.5994 37.4444 15.9699 40.0126 16.6854C40.0126 16.6854 46.1892 12.3927 48.873 13.2359C50.6322 17.6691 49.5407 21.0803 49.2068 21.9108C51.2614 24.1721 52.5198 25.9352 52.5198 29.4358C52.5198 41.7646 44.9564 42.7484 37.7783 43.5532C38.9597 44.5625 39.9613 46.4789 39.9613 49.4813C39.9613 53.7868 39.9228 59.1144 39.9228 60.162C39.9228 60.9924 40.5134 62.0017 42.1443 61.7079C54.9853 57.4663 63.6915 45.3419 63.6915 31.1733C63.6915 13.4531 49.2453 0 31.4348 0ZM12.4815 44.0643C12.3145 44.192 12.3531 44.4859 12.5714 44.7286C12.7768 44.933 13.0722 45.0225 13.2391 44.8564C13.406 44.7286 13.3675 44.4348 13.1492 44.192C12.9438 43.9876 12.6484 43.8982 12.4815 44.0643ZM11.0946 43.0294C11.0048 43.1955 11.1332 43.3999 11.39 43.5277C11.5954 43.6554 11.8523 43.6171 11.9422 43.4383C12.032 43.2722 11.9036 43.0678 11.6468 42.94C11.39 42.8633 11.1845 42.9017 11.0946 43.0294ZM15.2551 47.5777C15.0497 47.7438 15.1267 48.127 15.4221 48.3698C15.7174 48.6636 16.0898 48.702 16.2567 48.4975C16.4237 48.3314 16.3466 47.9482 16.0898 47.7054C15.8073 47.4116 15.4221 47.3732 15.2551 47.5777ZM13.7913 45.6996C13.5858 45.8274 13.5858 46.1595 13.7913 46.4534C13.9967 46.7472 14.3434 46.875 14.5104 46.7472C14.7158 46.5811 14.7158 46.249 14.5104 45.9551C14.3306 45.6613 13.9967 45.5335 13.7913 45.6996Z",
           fill: "var(--text-color)"
         })
@@ -45441,51 +45621,51 @@ var TrustedByBanner = () => {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: [
-          /* @__PURE__ */ jsx126("path", {
+          /* @__PURE__ */ jsx121("path", {
             d: "M6.51644 0.088258C4.05524 0.528184 1.89128 2.12143 0.856857 4.24972C-0.058664 6.12832 0.000785433 4.71342 0.000785433 23.7491C0.000785433 38.5758 0.0245652 40.9181 0.179134 41.5245C0.892527 44.3543 2.99704 46.4826 5.82683 47.2435C6.77802 47.4932 8.49017 47.5289 9.48892 47.303C11.0465 46.9582 11.855 46.4113 18.9889 40.9538C22.7224 38.1002 25.8137 35.7579 25.8613 35.7579C25.897 35.7579 29.0002 38.1002 32.7336 40.9538C36.5622 43.8906 39.9033 46.3518 40.367 46.6015C40.8307 46.8393 41.5441 47.1246 41.9721 47.2435C43.0065 47.517 44.8613 47.517 45.8958 47.2435C48.4996 46.5302 50.5328 44.5921 51.4364 41.9407C51.6505 41.3105 51.6623 40.5733 51.6623 23.7491V6.21155L51.377 5.34359C50.6398 3.08451 48.7255 1.19402 46.3595 0.385505C45.4796 0.088258 45.1943 0.0406985 43.9339 0.0406985C42.6855 0.0406985 42.3882 0.088258 41.5559 0.373615C41.0328 0.551964 40.3432 0.861101 40.0103 1.06323C39.6892 1.26536 36.3957 3.70278 32.7099 6.48502C29.0121 9.26725 25.9326 11.5382 25.8613 11.5382C25.79 11.5382 22.7105 9.26725 19.0127 6.48502C15.3269 3.70278 12.0334 1.26536 11.7123 1.06323C10.3569 0.230937 8.06213 -0.197099 6.51644 0.088258ZM8.82308 4.63019C9.13222 4.72531 11.5459 6.46124 15.6835 9.57639C19.1911 12.2159 22.0684 14.4037 22.0803 14.4512C22.1279 14.582 14.1141 20.7172 13.912 20.7053C13.8168 20.7053 11.6291 19.0764 9.06088 17.0908L4.38815 13.4882L4.42382 10.2066L4.45949 6.92494L4.78052 6.33045C5.06588 5.7954 5.39879 5.40304 5.96951 4.975C6.57589 4.5113 7.91945 4.35673 8.82308 4.63019ZM45.0872 4.67775C45.8125 4.91555 46.5497 5.5695 46.9421 6.31856L47.2631 6.92494L47.2988 10.2066L47.3344 13.4882L42.6617 17.0908C40.0935 19.0764 37.9057 20.7053 37.7987 20.7053C37.5966 20.7172 29.5947 14.582 29.6423 14.4512C29.7017 14.2491 42.519 4.71342 42.8519 4.6183C43.4345 4.43996 44.4927 4.47563 45.0872 4.67775ZM30.0346 20.5032C32.2818 22.251 34.0891 23.7135 34.0415 23.7491C33.8632 23.9156 26.0991 29.8843 25.9683 29.9675C25.8375 30.0389 17.7167 23.868 17.6929 23.6778C17.6929 23.5827 25.6948 17.3405 25.8375 17.3405C25.897 17.3286 27.7875 18.7554 30.0346 20.5032ZM7.37252 21.4425C9.72671 23.2616 10.2142 23.6897 10.0834 23.8086C9.80994 24.082 4.51894 28.1484 4.45949 28.1484C4.42382 28.1484 4.40004 26.139 4.40004 23.6897C4.40004 21.2404 4.42382 19.231 4.4476 19.231C4.48327 19.231 5.80305 20.2297 7.37252 21.4425ZM47.3225 23.6897C47.3225 26.139 47.2988 28.1484 47.2631 28.1484C47.2274 28.1484 45.9195 27.1496 44.3501 25.9369C42.2456 24.308 41.5203 23.6778 41.6154 23.5827C41.8651 23.333 47.1442 19.2548 47.2393 19.2429C47.2869 19.231 47.3225 21.2404 47.3225 23.6897ZM20.3682 31.4776C21.3312 32.2147 22.116 32.8568 22.116 32.8925C22.1041 33.047 9.59592 42.4995 9.07277 42.7373C7.51519 43.4745 5.58903 42.7492 4.79241 41.1321L4.45949 40.4544L4.42382 37.1847L4.38815 33.9031L9.156 30.2053L13.9357 26.5076L16.2662 28.3148C17.5621 29.3017 19.3932 30.7285 20.3682 31.4776ZM42.6617 30.3005L47.3344 33.915L47.2988 37.2442L47.2631 40.5733L46.9421 41.1678C46.5378 41.9288 46.1217 42.3211 45.3013 42.7016C44.4452 43.1059 43.4583 43.1178 42.6498 42.7373C42.0197 42.4519 29.5947 33.0232 29.6423 32.8687C29.7017 32.6665 37.7631 26.5195 37.8701 26.6027C37.9414 26.6503 40.0935 28.303 42.6617 30.3005Z",
             fill: "var(--text-color)"
           }),
-          /* @__PURE__ */ jsx126("path", {
+          /* @__PURE__ */ jsx121("path", {
             d: "M120.255 8.16145C119.673 8.43492 118.983 9.20776 118.805 9.82604C118.484 10.8842 118.709 11.7998 119.47 12.5607C120.374 13.4643 121.563 13.6546 122.681 13.0958C124.785 12.0494 124.678 9.00564 122.502 8.09011C121.955 7.86421 120.838 7.89988 120.255 8.16145Z",
             fill: "var(--text-color)"
           }),
-          /* @__PURE__ */ jsx126("path", {
+          /* @__PURE__ */ jsx121("path", {
             d: "M214.613 19.7065V31.4775H216.801H219.001L219.036 26.8048C219.084 21.6446 219.084 21.6327 219.88 20.7885C220.427 20.2178 221.081 19.9443 221.926 19.9443C222.817 19.9443 223.507 20.2535 223.947 20.8123C224.565 21.6327 224.601 21.9656 224.601 26.9237V31.4775H226.8H229V26.0914C229 21.6446 228.964 20.5864 228.822 20.0038C228.382 18.2916 227.478 17.1145 226.087 16.4249C223.935 15.3667 221.414 15.6759 219.809 17.1978C219.452 17.5307 219.131 17.8042 219.096 17.8042C219.048 17.8042 219.013 15.5807 219.013 12.8699V7.93555H216.813H214.613V19.7065Z",
             fill: "var(--text-color)"
           }),
-          /* @__PURE__ */ jsx126("path", {
+          /* @__PURE__ */ jsx121("path", {
             d: "M188.574 13.6427V16.0207H187.088H185.602V17.9825V19.9443H187.076H188.563L188.598 23.8323C188.646 27.4587 188.67 27.7917 188.907 28.5051C189.383 29.9437 190.477 30.9781 191.963 31.43C192.819 31.6915 194.757 31.7629 195.827 31.5726L196.719 31.4181L196.755 29.6108L196.79 27.8154L195.482 27.7679C194.032 27.7322 193.723 27.6014 193.271 26.8286C193.045 26.4481 193.033 26.2103 193.033 23.2141V20.0038L194.971 19.9681L196.897 19.9443V17.9825V16.0207H194.935H192.974V13.6427V11.2647H190.774H188.574V13.6427Z",
             fill: "var(--text-color)"
           }),
-          /* @__PURE__ */ jsx126("path", {
+          /* @__PURE__ */ jsx121("path", {
             d: "M109.768 15.8423C106.82 16.3774 104.763 18.6959 105.048 21.1809C105.321 23.654 106.736 24.8192 110.196 25.4137C110.957 25.5445 111.813 25.7466 112.087 25.8417C113.775 26.46 113.145 28.3862 111.266 28.3862C110.089 28.3862 109.233 27.8511 108.829 26.8999C108.71 26.6027 108.532 26.3649 108.437 26.3649C108.341 26.3649 107.485 26.5789 106.534 26.8286C104.81 27.2804 104.81 27.2923 104.822 27.6252C104.87 28.6834 106.273 30.3837 107.652 31.0614C109.804 32.1196 112.8 32.0839 114.869 30.9901C115.796 30.4907 116.783 29.4206 117.104 28.5764C117.616 27.1972 117.544 25.6039 116.902 24.4268C116.141 23.0238 114.477 22.1797 111.778 21.8467C110.47 21.6803 109.673 21.4187 109.447 21.0977C108.936 20.3605 109.554 19.3261 110.612 19.1715C111.742 19.0051 112.574 19.3974 113.074 20.3367C113.24 20.6459 113.43 20.8955 113.49 20.8955C113.561 20.8955 114.417 20.6815 115.392 20.4318C117.425 19.9206 117.342 20.0157 116.759 18.8029C116.046 17.3167 114.405 16.1753 112.515 15.8423C111.385 15.6402 110.898 15.6402 109.768 15.8423Z",
             fill: "var(--text-color)"
           }),
-          /* @__PURE__ */ jsx126("path", {
+          /* @__PURE__ */ jsx121("path", {
             d: "M70.1511 15.9493C69.4496 16.1515 68.9146 16.4249 68.1655 16.9838L67.5353 17.4593V16.7341V16.0207H65.3357H63.1361V23.7491V31.4775H65.3952H67.6424L67.678 26.6265C67.7137 21.9299 67.7256 21.7754 67.9753 21.3117C68.4865 20.3605 69.2237 19.9443 70.3889 19.9443C71.5541 19.9443 72.2675 20.3961 72.7312 21.4306C72.9215 21.8586 72.9452 22.3937 72.9809 26.6859L73.0166 31.4775H75.2043H77.3921L77.4277 26.6265C77.4634 21.9299 77.4753 21.7754 77.725 21.3117C78.2362 20.3486 78.9734 19.9443 80.1624 19.9443C81.0304 19.9443 81.7557 20.2297 82.1361 20.7172C82.7068 21.4425 82.7544 21.9181 82.7544 26.8642V31.4775H85.0254H87.2963L87.2488 26.0914C87.2012 20.9431 87.1893 20.6815 86.9396 19.9324C86.4284 18.3749 85.4058 17.2216 83.8602 16.4487C82.9565 15.9969 81.9102 15.7829 80.5548 15.7829C78.7832 15.7829 77.5942 16.1515 76.5003 17.0432L76.0009 17.4356L75.561 17.0194C74.6574 16.1634 73.4684 15.7829 71.8276 15.7948C71.1974 15.7948 70.4484 15.8661 70.1511 15.9493Z",
             fill: "var(--text-color)"
           }),
-          /* @__PURE__ */ jsx126("path", {
+          /* @__PURE__ */ jsx121("path", {
             d: "M149.064 15.9018C148.434 16.0682 147.459 16.5676 146.877 17.0551L146.365 17.4593V16.746V16.0207H144.166H141.966V23.7491V31.4775H144.154H146.353L146.401 26.8048C146.425 23.7253 146.484 22.0013 146.579 21.7278C146.781 21.1333 147.4 20.4199 147.959 20.1702C148.624 19.873 149.801 19.873 150.384 20.1702C150.943 20.4556 151.169 20.7053 151.466 21.3711C151.704 21.8824 151.716 22.1321 151.716 26.6859V31.4775H153.975H156.234V26.8286C156.234 21.7873 156.258 21.5614 156.864 20.8242C157.363 20.2178 158.017 19.9443 158.98 19.9443C160.134 19.9443 160.704 20.2654 161.168 21.1928L161.525 21.9062L161.561 26.6859L161.596 31.4775H163.796H165.984V26.1509C165.984 20.3961 165.96 20.194 165.318 18.9218C164.628 17.5664 162.833 16.2704 161.133 15.9137C160.324 15.7472 158.445 15.7472 157.637 15.9137C156.793 16.092 155.913 16.52 155.306 17.0432L154.807 17.4712L154.201 16.9243C153.321 16.1277 152.536 15.878 150.883 15.8304C150.134 15.8067 149.314 15.8423 149.064 15.9018Z",
             fill: "var(--text-color)"
           }),
-          /* @__PURE__ */ jsx126("path", {
+          /* @__PURE__ */ jsx121("path", {
             d: "M173.95 15.8661C171.203 16.2823 168.849 18.4224 167.934 21.3236C167.232 23.5351 167.541 26.2103 168.742 28.2435C169.23 29.0758 170.49 30.3718 171.239 30.8117C172.583 31.5964 174.211 31.9056 175.924 31.7153C177.267 31.5727 178.385 31.2278 179.074 30.7641L179.598 30.4193L179.633 30.9425L179.669 31.4775H181.869H184.056V23.8086V16.1396H181.857H179.657V16.6746V17.2216L179.122 16.853C177.957 16.0563 175.614 15.6045 173.95 15.8661ZM177.113 20.0038C178.04 20.2891 178.813 20.955 179.3 21.8943C179.693 22.6552 179.716 22.786 179.716 23.7967C179.705 24.6408 179.657 24.9975 179.455 25.4375C179.098 26.2222 178.313 27.0188 177.529 27.3993C176.97 27.6847 176.72 27.7322 175.912 27.7203C175.127 27.7203 174.842 27.6609 174.283 27.3993C173.486 27.0069 172.844 26.3292 172.428 25.4256C171.976 24.4625 171.976 23.0238 172.428 22.0607C173.248 20.2891 175.21 19.4331 177.113 20.0038Z",
             fill: "var(--text-color)"
           }),
-          /* @__PURE__ */ jsx126("path", {
+          /* @__PURE__ */ jsx121("path", {
             d: "M203.615 15.9612C200.607 16.6152 198.181 18.9575 197.432 21.9062C197.004 23.5708 197.29 25.9725 198.11 27.649C198.669 28.7904 200.215 30.3123 201.416 30.9068C202.902 31.6202 203.615 31.7748 205.577 31.7629C207.099 31.7629 207.408 31.7272 208.217 31.4538C210.369 30.7404 211.831 29.5276 212.723 27.7441C213.02 27.1258 213.186 26.674 213.115 26.6146C212.996 26.4957 209.501 25.4137 209.251 25.4137C209.156 25.4137 209.013 25.5564 208.942 25.7347C208.656 26.3768 208.062 26.9475 207.301 27.328C206.635 27.6609 206.409 27.7084 205.577 27.7084C204.745 27.7084 204.531 27.6609 203.853 27.328C201.094 25.9606 201.118 21.5733 203.889 20.2178C204.471 19.9325 204.709 19.8849 205.577 19.8849C206.362 19.8849 206.718 19.9443 207.135 20.1465C207.8 20.4437 208.538 21.1571 208.823 21.7516L209.025 22.1915L209.596 22.0132C209.905 21.9181 210.809 21.6446 211.617 21.4068L213.079 20.9669L212.996 20.6102C212.961 20.408 212.735 19.8849 212.509 19.445C211.665 17.8161 209.715 16.4368 207.634 15.9731C206.599 15.7472 204.614 15.7353 203.615 15.9612Z",
             fill: "var(--text-color)"
           }),
-          /* @__PURE__ */ jsx126("path", {
+          /* @__PURE__ */ jsx121("path", {
             d: "M119.256 23.7491V31.4775H121.456H123.656V23.7491V16.0207H121.456H119.256V23.7491Z",
             fill: "var(--text-color)"
           }),
-          /* @__PURE__ */ jsx126("path", {
+          /* @__PURE__ */ jsx121("path", {
             d: "M125.082 16.0801C125.082 16.1158 126.283 17.8517 127.746 19.9443L130.409 23.7491L127.686 27.5539C126.188 29.6584 124.964 31.3943 124.964 31.4181C124.964 31.4537 126.057 31.4775 127.401 31.4775H129.838L131.277 29.2779C132.074 28.0651 132.763 27.0783 132.811 27.0783C132.858 27.0783 133.548 28.0651 134.333 29.2779L135.771 31.4775H138.28H140.801L140.385 30.9068C138.661 28.5407 135.308 23.7372 135.308 23.6421C135.308 23.5826 136.473 21.9062 137.9 19.9206C139.326 17.9231 140.539 16.2347 140.587 16.1634C140.646 16.0563 140.087 16.0207 138.221 16.0207H135.771L134.333 18.2203C133.548 19.4212 132.858 20.3961 132.823 20.3724C132.787 20.3486 132.133 19.3498 131.384 18.1727L130.017 16.0207H127.556C126.188 16.0207 125.082 16.0445 125.082 16.0801Z",
             fill: "var(--text-color)"
           }),
-          /* @__PURE__ */ jsx126("path", {
+          /* @__PURE__ */ jsx121("path", {
             d: "M88.9728 21.0382C89.0323 26.5076 89.0679 26.7929 89.8527 28.291C90.9228 30.3361 93.051 31.6083 95.7144 31.7986C98.5561 32.0007 101.41 30.5501 102.575 28.3267C103.336 26.8643 103.36 26.6978 103.407 21.1571L103.455 16.1396H101.196H98.9246V20.8123C98.9246 26.1033 98.9009 26.2698 98.0924 27.0069C97.0579 27.9343 95.2269 27.8987 94.2638 26.9356C93.491 26.1627 93.4553 25.8655 93.4553 20.6934V16.1396H91.1843H88.9134L88.9728 21.0382Z",
             fill: "var(--text-color)"
           })
@@ -45502,11 +45682,11 @@ var TrustedByBanner = () => {
         className: "-mt-2",
         xmlns: "http://www.w3.org/2000/svg",
         children: [
-          /* @__PURE__ */ jsx126("path", {
+          /* @__PURE__ */ jsx121("path", {
             d: "M16.4128 26.0434H11.2775C9.66644 26.0434 8.15605 26.4461 7.04844 27.6544L0.302047 35.4078C5.23597 35.7098 10.3713 35.7098 13.9962 35.7098C32.4229 35.7098 35.343 24.6337 35.4437 19.0956C33.8326 21.1094 28.9994 26.0434 16.4128 26.0434ZM33.1278 8.22082C33.0271 9.12705 32.5236 13.0541 21.4474 13.0541C12.4858 13.0541 8.8609 13.054 -3.05176e-05 12.8527L6.64567 20.5053C7.95467 22.0157 9.76713 22.5191 11.781 22.6198C13.9962 22.6198 17.017 22.7205 17.4198 22.7205C29.8049 22.7205 35.0409 16.9811 35.0409 12.8527C35.1416 10.6374 34.4368 9.22774 33.1278 8.22082Z",
             fill: "var(--light-text-color)"
           }),
-          /* @__PURE__ */ jsx126("path", {
+          /* @__PURE__ */ jsx121("path", {
             d: "M68.0509 9.70953H75.3052V27.0081C75.3052 28.9054 74.8588 30.5795 74.0776 31.9187C73.2963 33.258 72.2919 34.1508 70.9526 34.8204C69.6134 35.49 68.1625 35.7132 66.4885 35.7132C64.8144 35.7132 63.3636 35.3784 62.0243 34.8204C60.6851 34.1508 59.6807 33.258 58.8994 31.9187C58.7878 31.8071 58.7878 31.5839 58.6762 31.4723C58.5646 31.5839 58.5646 31.8071 58.453 31.9187C57.6718 33.258 56.6673 34.1508 55.3281 34.8204C53.9889 35.49 52.538 35.7132 50.8639 35.7132C49.1899 35.7132 47.739 35.3784 46.5114 34.8204C45.1722 34.1508 44.1677 33.258 43.3865 31.9187C42.6053 30.5795 42.2704 29.017 42.2704 27.0081L42.0472 9.70953H49.3015V25.6689C49.3015 26.7849 49.5247 27.5662 50.0827 28.0126C50.6407 28.459 51.3104 28.6822 52.0916 28.6822C52.8728 28.6822 53.654 28.459 54.2121 28.0126C54.7701 27.5662 55.1049 26.7849 55.1049 25.6689V9.70953H57.7834H59.6807H62.3592V25.6689C62.3592 26.7849 62.694 27.5662 63.252 28.0126C63.81 28.459 64.5912 28.6822 65.3725 28.6822C66.1537 28.6822 66.8233 28.459 67.3813 28.0126C67.8277 27.5662 68.0509 26.7849 68.0509 25.6689V9.70953ZM85.796 0.446408C85.2379 0.111596 84.5683 -7.62939e-06 83.7871 -7.62939e-06C83.0059 -7.62939e-06 82.3362 0.111596 81.7782 0.446408C81.2202 0.78122 80.6622 1.22764 80.3274 1.78565C79.9926 2.34367 79.7694 3.0133 79.7694 3.68292C79.7694 4.79896 80.1042 5.69179 80.8854 6.36141C81.6666 7.03104 82.6711 7.36585 83.7871 7.36585C84.5683 7.36585 85.2379 7.25425 85.796 6.91943C86.4656 6.58462 86.912 6.13821 87.2468 5.58019C87.5816 5.02217 87.8048 4.35254 87.8048 3.57132C87.8048 2.79009 87.5816 2.23207 87.2468 1.67405C86.912 1.22764 86.4656 0.78122 85.796 0.446408ZM80.1042 35.1552H87.3584V10.0443H80.1042V35.1552ZM104.211 23.4368C103.876 22.8788 103.318 22.3208 102.871 21.7628C102.425 21.3163 101.867 20.8699 101.309 20.3119C100.862 19.8655 100.528 19.5307 100.193 19.1959C99.9697 18.8611 99.8581 18.5262 99.8581 18.0798C99.8581 17.4102 100.193 16.9638 100.974 16.629C101.755 16.2942 102.648 16.1826 103.764 16.1826H104.88L104.211 9.48632C103.541 9.37472 102.871 9.37472 102.202 9.37472C100.416 9.37472 98.742 9.59793 97.068 10.0443C95.5055 10.4908 94.1663 11.272 93.1618 12.388C92.1574 13.5041 91.5994 14.9549 91.5994 16.8522C91.5994 18.1914 91.8226 19.3075 92.3806 20.3119C92.9386 21.3163 93.6082 22.2092 94.3895 23.102C94.8359 23.5484 95.2823 23.9948 95.7287 24.4412C96.1751 24.8877 96.6215 25.3341 96.8448 25.6689C97.068 26.0037 97.1796 26.3385 97.1796 26.7849C97.1796 27.4546 96.8447 28.0126 96.0635 28.3474C95.2823 28.6822 94.2779 28.9054 92.827 28.9054C92.269 28.9054 91.8226 28.9054 91.5994 28.7938L92.4922 35.49C93.1618 35.7132 93.7198 35.7132 94.5011 35.7132C96.6215 35.7132 98.4072 35.3784 100.081 34.8204C101.755 34.2624 103.095 33.3696 104.099 32.1419C105.103 30.9143 105.55 29.4634 105.55 27.5662C105.55 26.7849 105.438 26.0037 105.215 25.2225C104.88 24.5529 104.657 23.9948 104.211 23.4368ZM117.491 28.0126C116.933 27.4546 116.71 26.6733 116.71 25.6689V16.4058H121.956V10.0443H116.71V3.68292L109.456 5.8034V28.0126C109.456 30.5795 110.014 32.5883 111.018 33.816C112.134 35.0436 113.697 35.7132 115.817 35.7132C116.933 35.7132 117.938 35.6016 118.942 35.49C119.947 35.3784 120.728 35.1552 121.509 34.8204L122.848 28.5706C122.067 28.7938 121.063 28.9054 119.947 28.9054C118.719 28.7938 117.938 28.5706 117.491 28.0126ZM126.531 35.1552H133.786V10.0443H126.531V35.1552ZM132.223 0.446408C131.665 0.111596 130.996 -7.62939e-06 130.214 -7.62939e-06C129.433 -7.62939e-06 128.763 0.111596 128.205 0.446408C127.647 0.78122 127.089 1.22764 126.755 1.78565C126.42 2.34367 126.197 3.0133 126.197 3.68292C126.197 4.79896 126.531 5.69179 127.313 6.36141C128.094 7.03104 129.098 7.36585 130.214 7.36585C130.996 7.36585 131.665 7.25425 132.223 6.91943C132.893 6.58462 133.339 6.13821 133.674 5.58019C134.009 5.02217 134.232 4.35254 134.232 3.57132C134.232 2.79009 134.009 2.23207 133.674 1.67405C133.339 1.22764 132.893 0.78122 132.223 0.446408ZM164.477 10.0443V35.1552H157.222V31.0259C156.441 32.2535 155.548 33.258 154.432 34.0392C152.87 35.1552 150.973 35.7132 148.852 35.7132C146.732 35.7132 144.834 35.1552 143.272 34.0392C141.71 32.9231 140.482 31.3607 139.589 29.3518C138.696 27.3429 138.25 25.1109 138.25 22.544C138.25 19.9771 138.696 17.745 139.589 15.8477C140.482 13.8389 141.71 12.2764 143.272 11.1604C144.834 10.0443 146.732 9.48632 148.852 9.48632C150.973 9.48632 152.87 10.0443 154.432 11.1604C155.548 11.9416 156.441 12.946 157.222 14.1737V10.0443H164.477ZM156.664 25.6689C157.222 24.7761 157.446 23.66 157.446 22.544C157.446 21.4279 157.222 20.3119 156.664 19.4191C156.218 18.5262 155.548 17.745 154.656 17.2986C153.763 16.7406 152.87 16.5174 151.754 16.5174C150.749 16.5174 149.745 16.7406 148.852 17.2986C147.959 17.8566 147.29 18.5262 146.843 19.4191C146.285 20.3119 146.062 21.3163 146.062 22.544C146.062 23.66 146.285 24.7761 146.843 25.6689C147.401 26.5617 148.071 27.3429 148.852 27.7894C149.745 28.3474 150.638 28.5706 151.754 28.5706C152.758 28.5706 153.763 28.3474 154.656 27.7894C155.548 27.3429 156.218 26.5617 156.664 25.6689Z",
             fill: "var(--text-color)"
           })
@@ -45516,27 +45696,27 @@ var TrustedByBanner = () => {
     {
       id: "logo5",
       url: "https://www.soundcloud.com/",
-      light: /* @__PURE__ */ jsx126("svg", {
+      light: /* @__PURE__ */ jsx121("svg", {
         height: "40",
         viewBox: "0 0 129 57",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsx126("path", {
+        children: /* @__PURE__ */ jsx121("path", {
           d: "M68.962 1.89524C67.7646 2.35781 67.4474 2.83682 67.4351 3.75787V54.1228C67.4597 55.093 68.2007 55.9034 69.1483 55.9976C69.1893 55.9996 112.847 56.0222 113.134 56.0222C121.898 56.0222 129 48.9199 129 40.1536C129 31.3872 121.898 24.287 113.134 24.287C111.027 24.286 108.941 24.7042 106.997 25.5171C105.734 11.2183 93.7445 -2.25304e-06 79.1141 -2.25304e-06C75.643 0.00545336 72.2022 0.649256 68.964 1.89936M62.4471 5.46073L61.7308 41.2056L62.4471 54.1781C62.4717 55.1257 63.2454 55.9055 64.1951 55.9055C64.6562 55.9018 65.0976 55.7172 65.4241 55.3915C65.7506 55.0657 65.9362 54.6249 65.941 54.1637V54.1761L66.7188 41.2036L65.941 5.45461C65.9165 4.49876 65.1427 3.7149 64.1951 3.7149C63.2474 3.7149 62.4553 4.50079 62.4471 5.46073ZM57.1398 8.42858L56.5259 41.1913C56.5259 41.2118 57.1398 54.3643 57.1398 54.3643C57.1643 55.2547 57.889 55.9875 58.7773 55.9875C59.2089 55.9827 59.6215 55.8099 59.9276 55.5056C60.2338 55.2014 60.4094 54.7897 60.4168 54.3582L61.1064 41.2036L60.4168 8.42645C60.3923 7.52996 59.6656 6.7993 58.7793 6.7993C58.3481 6.80456 57.9359 6.97771 57.6302 7.28189C57.3245 7.58607 57.1495 7.99738 57.142 8.42858M41.2713 11.863L40.4588 41.1933L41.2733 54.6611C41.2938 55.3816 41.8872 55.9506 42.579 55.9506C43.2708 55.9506 43.8625 55.3775 43.885 54.655V54.6488L44.7999 41.1913L43.885 11.861C43.8604 11.1303 43.2872 10.5613 42.579 10.5613C41.8708 10.5613 41.2898 11.1303 41.2693 11.861M46.5171 12.6122L45.7721 41.1953L46.5191 54.5301C46.5437 55.314 47.1577 55.9343 47.9375 55.9343C48.7174 55.9343 49.3294 55.312 49.3539 54.522V54.5301L50.1727 41.1933L49.3539 12.6101C49.3294 11.818 48.7112 11.1978 47.9375 11.1978C47.1639 11.1978 46.5356 11.82 46.5171 12.6101M36.0642 12.8148L35.1842 41.1892L36.0642 54.7388C36.0711 55.0527 36.1999 55.3516 36.4234 55.5721C36.647 55.7926 36.9477 55.9173 37.2617 55.9199C37.9064 55.9199 38.4324 55.402 38.459 54.7327L39.4496 41.1892L38.459 12.8127C38.4324 12.1475 37.9064 11.6257 37.2617 11.6257C36.9467 11.6283 36.6451 11.7538 36.4214 11.9756C36.1978 12.1974 36.0695 12.4978 36.0642 12.8127M51.808 13.6561L51.1244 41.1933L51.808 54.4461C51.8325 55.2915 52.4979 55.9567 53.3371 55.9567C54.1762 55.9567 54.8435 55.2915 54.8619 54.438V54.4483L55.6272 41.1953L54.8619 13.6539C54.8581 13.2511 54.6962 12.8658 54.4109 12.5813C54.1256 12.2968 53.7399 12.1359 53.3371 12.1332C52.5184 12.1332 51.8223 12.8026 51.808 13.6561ZM30.8982 14.9946C30.8982 14.9967 29.9566 41.1831 29.9566 41.1831L30.8982 54.8719C30.9066 55.1562 31.0241 55.4263 31.2266 55.6261C31.429 55.8258 31.7008 55.9398 31.9851 55.9444C32.5643 55.9444 33.041 55.4736 33.0697 54.8678L34.1341 41.1831L33.0697 14.9946C33.039 14.3908 32.5623 13.918 31.9851 13.918C31.7001 13.9227 31.4278 14.0372 31.2253 14.2378C31.0228 14.4385 30.9056 14.7097 30.8982 14.9946ZM25.7751 19.866L24.7659 41.1831L25.7751 54.9578C25.8017 55.4961 26.2296 55.9199 26.7515 55.9199C27.0066 55.9138 27.2498 55.8107 27.4316 55.6316C27.6133 55.4525 27.7198 55.2108 27.7296 54.9558V54.96L28.872 41.1851L27.7296 19.868C27.6969 19.3276 27.2673 18.9019 26.7515 18.9019C26.2357 18.9019 25.8017 19.3256 25.7751 19.866ZM15.6516 27.0563L14.5138 41.179L15.6516 54.8412C15.6844 55.2648 16.008 55.5821 16.4092 55.5821C16.8103 55.5821 17.1296 55.2648 17.1665 54.8412L18.4559 41.179L17.1665 27.0522C17.1296 26.6326 16.8062 26.3112 16.4092 26.3112C16.0121 26.3112 15.6823 26.6306 15.6516 27.0563ZM10.6514 27.4308C10.6514 27.4329 9.44385 41.177 9.44385 41.177L10.6514 54.4195C10.6882 54.788 10.9585 55.0337 11.2982 55.0337C11.638 55.0337 11.9042 54.7676 11.9431 54.3992L13.3103 41.1565L11.9451 27.4103C11.9042 27.0419 11.6319 26.7758 11.2982 26.7758C10.9646 26.7758 10.6841 27.0419 10.6514 27.4103M20.6929 28.0592L19.6205 41.1585L20.6929 54.9334C20.7256 55.4184 21.0942 55.7888 21.5588 55.7888C22.0235 55.7888 22.3898 55.4204 22.4246 54.9354L23.6423 41.1606L22.4246 28.0531C22.3877 27.5721 22.0194 27.2057 21.5588 27.2057C21.0983 27.2057 20.7236 27.57 20.6929 28.0592ZM5.69409 29.5738C5.69409 29.5758 4.4251 41.1585 4.4251 41.1585L5.69409 52.4894C5.73093 52.7924 5.9603 53.0094 6.23252 53.0094C6.50474 53.0094 6.72376 52.7965 6.7647 52.4916L8.20559 41.1585L6.7647 29.5738C6.71762 29.2668 6.49869 29.0539 6.22852 29.0539C5.95835 29.0539 5.72693 29.2729 5.69009 29.5738M0.941686 33.9948L0 41.1585L0.941686 48.1994C0.978528 48.4962 1.19125 48.705 1.45938 48.705C1.7275 48.705 1.93013 48.4962 1.97107 48.2015L3.08865 41.1565L1.97107 33.9928C1.93013 33.698 1.71727 33.4913 1.45938 33.4913C1.20148 33.4913 0.976481 33.7 0.941686 33.9948Z",
           fill: "var(--text-color)"
         })
       })
     }
   ];
-  return /* @__PURE__ */ jsxs48(Fragment15, {
+  return /* @__PURE__ */ jsxs48(Fragment16, {
     children: [
-      /* @__PURE__ */ jsx126("h3", {
+      /* @__PURE__ */ jsx121("h3", {
         className: "text-center mt-20 mb-10",
         children: "Trusted by"
       }),
-      /* @__PURE__ */ jsx126("div", {
+      /* @__PURE__ */ jsx121("div", {
         className: "text-center flex flex-col lg:flex-row flex-nowrap justify-center items-center gap-10 mb-20",
-        children: logos.map((logo) => /* @__PURE__ */ jsx126("a", {
+        children: logos.map((logo) => /* @__PURE__ */ jsx121("a", {
           href: logo.url,
           target: "_blank",
           className: "opacity-80 hover:opacity-100 transition-opacity",
@@ -45549,7 +45729,151 @@ var TrustedByBanner = () => {
 var TrustedByBanner_default = TrustedByBanner;
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { useRef as useRef63, useState as useState66 } from "react";
+import { useRef as useRef65, useState as useState66 } from "react";
+
+// src/components/homepage/MuxVideo.tsx
+import Hls2 from "hls.js";
+import { forwardRef as forwardRef40, useEffect as useEffect66, useImperativeHandle as useImperativeHandle15, useRef as useRef63 } from "react";
+
+// src/components/homepage/VideoPlayerWithControls.tsx
+import Hls from "hls.js";
+import"plyr/dist/plyr.css";
+import { forwardRef as forwardRef39, useCallback as useCallback56, useEffect as useEffect65, useRef as useRef61, useState as useState64 } from "react";
+import { jsx as jsx124 } from "react/jsx-runtime";
+var useCombinedRefs = function(...refs) {
+  const targetRef = useRef61(null);
+  useEffect65(() => {
+    refs.forEach((ref) => {
+      if (!ref)
+        return;
+      if (typeof ref === "function") {
+        ref(targetRef.current);
+      } else {
+        ref.current = targetRef.current;
+      }
+    });
+  }, [refs]);
+  return targetRef;
+};
+var VideoPlayerWithControls = forwardRef39(({ playbackId, poster, currentTime, onLoaded, onError, onSize, autoPlay }, ref) => {
+  const videoRef = useRef61(null);
+  const metaRef = useCombinedRefs(ref, videoRef);
+  const playerRef = useRef61(null);
+  const [playerInitTime] = useState64(Date.now());
+  const videoError = useCallback56((event) => onError(event), [onError]);
+  const onImageLoad = useCallback56((event) => {
+    const [w, h] = [event.target.width, event.target.height];
+    if (w && h) {
+      onSize({ width: w, height: h });
+      onLoaded();
+    } else {
+      onLoaded();
+      console.error("Error getting img dimensions", event);
+    }
+  }, [onLoaded, onSize]);
+  useEffect65(() => {
+    const img = new Image;
+    img.onload = (evt) => onImageLoad(evt);
+    img.src = poster;
+  }, [onImageLoad, poster]);
+  useEffect65(() => {
+    const video = videoRef.current;
+    const src = `https://stream.mux.com/${playbackId}.m3u8`;
+    let hls;
+    hls = null;
+    if (video) {
+      video.addEventListener("error", videoError);
+      const Plyr = __require("plyr");
+      playerRef.current = new Plyr(video, {
+        previewThumbnails: {
+          enabled: true,
+          src: `https://image.mux.com/${playbackId}/storyboard.vtt`
+        },
+        storage: { enabled: false },
+        fullscreen: {
+          iosNative: true
+        },
+        captions: { active: true, language: "auto", update: true }
+      });
+      if (video.canPlayType("application/vnd.apple.mpegurl")) {
+        video.src = src;
+      } else if (Hls.isSupported()) {
+        hls = new Hls;
+        hls.loadSource(src);
+        hls.attachMedia(video);
+        hls.on(Hls.Events.ERROR, (_event, data2) => {
+          if (data2.fatal) {
+            videoError(new ErrorEvent("HLS.js fatal error"));
+          }
+        });
+      } else {
+        console.error("This is an old browser that does not support MSE https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API");
+      }
+    }
+    return () => {
+      if (video) {
+        video.removeEventListener("error", videoError);
+      }
+      if (hls) {
+        hls.destroy();
+      }
+    };
+  }, [playbackId, playerInitTime, videoError, videoRef]);
+  useEffect65(() => {
+    const video = videoRef.current;
+    if (currentTime && video) {
+      video.currentTime = currentTime;
+    }
+  }, [currentTime]);
+  return /* @__PURE__ */ jsx124("div", {
+    className: "video-container",
+    children: /* @__PURE__ */ jsx124("video", {
+      ref: metaRef,
+      autoPlay,
+      poster,
+      controls: true,
+      playsInline: true
+    })
+  });
+});
+
+// src/components/homepage/MuxVideo.tsx
+import { jsx as jsx126 } from "react/jsx-runtime";
+var getVideoToPlayUrl = (muxId) => {
+  return `https://stream.mux.com/${muxId}.m3u8`;
+};
+var MuxVideoForward = ({ muxId, ...props }, ref) => {
+  const videoRef = useRef63(null);
+  const vidUrl = getVideoToPlayUrl(muxId);
+  useImperativeHandle15(ref, () => videoRef.current, []);
+  useEffect66(() => {
+    let hls;
+    if (videoRef.current) {
+      const { current } = videoRef;
+      if (current.canPlayType("application/vnd.apple.mpegurl")) {
+        current.src = vidUrl;
+      } else if (Hls2.isSupported()) {
+        hls = new Hls2;
+        hls.loadSource(vidUrl);
+        hls.attachMedia(current);
+      } else {
+        console.error("This is a legacy browser that doesn't support MSE");
+      }
+    }
+    return () => {
+      if (hls) {
+        hls.destroy();
+      }
+    };
+  }, [vidUrl, videoRef]);
+  return /* @__PURE__ */ jsx126("video", {
+    ref: videoRef,
+    ...props
+  });
+};
+var MuxVideo = forwardRef40(MuxVideoForward);
+
+// src/components/homepage/VideoAppsShowcase.tsx
 import { jsx as jsx127, jsxs as jsxs49 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
@@ -45597,17 +45921,26 @@ var videoApps = [
     buttonText: "GitHub Unwrapped website"
   }
 ];
-var icon5 = {
+var icon6 = {
   height: 16,
   marginLeft: 10
 };
-var VideoAppsShowcase = () => {
+var Arrow5 = () => /* @__PURE__ */ jsx127("svg", {
+  style: icon6,
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 448 512",
+  children: /* @__PURE__ */ jsx127("path", {
+    fill: "currentColor",
+    d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"
+  })
+});
+var BuiltWithRemotionShowcase = () => {
   const [activeTab, setActiveTab] = useState66(0);
   const [isMuted, setIsMuted] = useState66(true);
   const [isPlaying, setIsPlaying] = useState66(false);
   const [videoLoaded, setVideoLoaded] = useState66(false);
-  const videoRef = useRef63(null);
-  const containerRef = useRef63(null);
+  const videoRef = useRef65(null);
+  const containerRef = useRef65(null);
   const handleTabChange = (index2) => {
     const video = videoRef.current;
     if (video) {
@@ -45652,14 +45985,14 @@ var VideoAppsShowcase = () => {
     ref: containerRef,
     children: [
       /* @__PURE__ */ jsx127(SectionTitle, {
-        children: "Use Cases"
+        children: "Built with Remotion"
       }),
       /* @__PURE__ */ jsx127("div", {
-        className: "grid justify-center grid-flow-col grid-rows-1 gap-2.5 justify-self-center mb-4 w-[90vw] md:w-auto -mt-4",
+        className: "flex flex-wrap justify-center gap-x-8 gap-y-3 mb-6 mt-1",
         children: tabs.map((tab, index2) => /* @__PURE__ */ jsx127("button", {
           type: "button",
           "data-active": index2 === activeTab,
-          className: `bg-transparent border-none m-0 p-0 lg:mx-3 my-4 cursor-pointer text-base fontbrand font-bold transition-colors text-muted data-[active=true]:text-brand`,
+          className: `bg-transparent border-none m-0 p-0 cursor-pointer text-sm fontbrand font-bold transition-colors text-muted data-[active=true]:text-brand`,
           onClick: () => handleTabChange(index2),
           children: tab
         }, tab))
@@ -45668,10 +46001,10 @@ var VideoAppsShowcase = () => {
         className: "card flex p-0 overflow-hidden",
         "data-nosnippet": true,
         children: /* @__PURE__ */ jsxs49("div", {
-          className: "flex-1 flex flex-col lg:flex-row justify-center",
+          className: "flex-1 grid grid-cols-1 lg:grid-cols-2",
           children: [
             /* @__PURE__ */ jsxs49("div", {
-              className: "w-full max-w-[500px] aspect-square relative overflow-hidden bg-[#eee] cursor-pointer",
+              className: "w-full aspect-video lg:aspect-square relative overflow-hidden bg-[#eee] cursor-pointer",
               onClick: handlePlayPause,
               children: [
                 videoLoaded ? /* @__PURE__ */ jsx127(MuxVideo, {
@@ -45735,14 +46068,14 @@ var VideoAppsShowcase = () => {
               ]
             }),
             /* @__PURE__ */ jsxs49("div", {
-              className: "p-6 flex-1 flex flex-col h-full",
+              className: "p-6 lg:p-10 flex min-w-0 flex-col justify-center",
               children: [
                 /* @__PURE__ */ jsx127("div", {
-                  className: "text-4xl font-bold fontbrand mt-0",
+                  className: "text-3xl font-bold fontbrand mt-0",
                   children: videoApps[activeTab].title
                 }),
                 /* @__PURE__ */ jsx127("div", {
-                  className: "text-muted mt-4 text-base fontbrand",
+                  className: "text-muted mt-3 text-base fontbrand leading-relaxed",
                   children: videoApps[activeTab].description
                 }),
                 videoApps[activeTab].additionalInfo ? /* @__PURE__ */ jsx127("div", {
@@ -45757,15 +46090,7 @@ var VideoAppsShowcase = () => {
                   href: videoApps[activeTab].link,
                   children: [
                     videoApps[activeTab].buttonText,
-                    /* @__PURE__ */ jsx127("svg", {
-                      style: icon5,
-                      xmlns: "http://www.w3.org/2000/svg",
-                      viewBox: "0 0 448 512",
-                      children: /* @__PURE__ */ jsx127("path", {
-                        fill: "currentColor",
-                        d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"
-                      })
-                    })
+                    /* @__PURE__ */ jsx127(Arrow5, {})
                   ]
                 })
               ]
@@ -45784,7 +46109,7 @@ var VideoAppsShowcase = () => {
             fontFamily: "GTPlanar"
           },
           children: [
-            "For more examples see our",
+            "For more examples of products and workflows, see our",
             " ",
             /* @__PURE__ */ jsx127("a", {
               href: "/showcase",
@@ -45798,7 +46123,6 @@ var VideoAppsShowcase = () => {
     ]
   });
 };
-var VideoAppsShowcase_default = VideoAppsShowcase;
 
 // ../create-video/dist/esm/index.mjs
 var listOfRemotionPackages = [
@@ -47017,7 +47341,7 @@ var useMobileLayout = () => {
 
 // src/components/homepage/MoreTemplatesButton.tsx
 import { jsx as jsx158, jsxs as jsxs60 } from "react/jsx-runtime";
-var icon6 = {
+var icon7 = {
   height: 16,
   marginLeft: 10
 };
@@ -47029,7 +47353,7 @@ var MoreTemplatesButton = () => {
     children: [
       mobileLayout ? "Templates" : "Find a template",
       /* @__PURE__ */ jsx158("svg", {
-        style: icon6,
+        style: icon7,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 448 512",
         children: /* @__PURE__ */ jsx158("path", {
@@ -47043,7 +47367,7 @@ var MoreTemplatesButton = () => {
 
 // src/components/homepage/TemplateIcon.tsx
 import { jsx as jsx159, jsxs as jsxs61 } from "react/jsx-runtime";
-var icon7 = {
+var icon8 = {
   display: "flex",
   width: 36,
   height: 36,
@@ -47067,7 +47391,7 @@ var TemplateIcon = ({ children, label: label3 }) => {
     style: outer,
     children: [
       /* @__PURE__ */ jsx159("div", {
-        style: icon7,
+        style: icon8,
         children
       }),
       mobileLayout ? null : /* @__PURE__ */ jsx159("div", {
@@ -47318,13 +47642,20 @@ var NewLanding = ({ colorMode, setColorMode }) => {
               /* @__PURE__ */ jsx167("br", {}),
               /* @__PURE__ */ jsx167("br", {}),
               /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167(VideoAppsShowcase_default, {}),
+              /* @__PURE__ */ jsx167("div", {
+                className: "pt-6 md:pt-8",
+                children: /* @__PURE__ */ jsx167(AutomationsSection_default, {})
+              }),
               /* @__PURE__ */ jsx167("br", {}),
               /* @__PURE__ */ jsx167("br", {}),
               /* @__PURE__ */ jsx167(Demo, {}),
               /* @__PURE__ */ jsx167("br", {}),
               /* @__PURE__ */ jsx167("br", {}),
               /* @__PURE__ */ jsx167("br", {}),
+              /* @__PURE__ */ jsx167(BuiltWithRemotionShowcase, {}),
+              /* @__PURE__ */ jsx167("br", {}),
+              /* @__PURE__ */ jsx167("br", {}),
+              /* @__PURE__ */ jsx167("br", {}),
               /* @__PURE__ */ jsx167(SectionTitle, {
                 children: "Pricing"
               }),
@@ -47339,10 +47670,6 @@ var NewLanding = ({ colorMode, setColorMode }) => {
               /* @__PURE__ */ jsx167("br", {}),
               /* @__PURE__ */ jsx167("br", {}),
               /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167(EditorStarterSection_default, {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167("br", {}),
               /* @__PURE__ */ jsx167("br", {}),
               /* @__PURE__ */ jsx167(NewsletterButton, {}),
               /* @__PURE__ */ jsx167("br", {}),