@remotion/promo-pages 4.0.504 → 4.0.506

package/dist/team.js

@@ -4375,7 +4375,13 @@ import React13, { createContext as createContext14 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 import { useContext as useContext15, useMemo as useMemo13 } from "react";
 import { createContext as createContext15 } from "react";
-import React14, { forwardRef as forwardRef2, useContext as useContext17, useMemo as useMemo14, useState as useState4 } from "react";
+import React14, {
+  forwardRef as forwardRef2,
+  useContext as useContext17,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo14,
+  useState as useState4
+} from "react";
 import { useContext as useContext16, useRef as useRef5 } from "react";
 import { createContext as createContext16 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
@@ -4385,7 +4391,7 @@ import {
   forwardRef as forwardRef4,
   useEffect as useEffect5,
   useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect as useLayoutEffect3,
   useRef as useRef10,
   useState as useState6
 } from "react";
@@ -4394,12 +4400,12 @@ import React17, { useCallback as useCallback8, useImperativeHandle, useMemo as u
 import { useEffect as useEffect4, useMemo as useMemo17, useRef as useRef8 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import { jsx as jsx15 } from "react/jsx-runtime";
-import { useContext as useContext19, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
+import { useContext as useContext19, useLayoutEffect as useLayoutEffect5, useState as useState8 } from "react";
 import {
   createContext as createContext17,
   useCallback as useCallback9,
   useImperativeHandle as useImperativeHandle3,
-  useLayoutEffect as useLayoutEffect3,
+  useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo19,
   useRef as useRef11,
   useState as useState7
@@ -4423,7 +4429,7 @@ import React24, {
   useRef as useRef20,
   useState as useState14
 } from "react";
-import { useContext as useContext22, useLayoutEffect as useLayoutEffect5, useRef as useRef15 } from "react";
+import { useContext as useContext22, useLayoutEffect as useLayoutEffect6, useRef as useRef15 } from "react";
 import React21, {
   createContext as createContext21,
   createRef as createRef2,
@@ -4443,7 +4449,7 @@ import {
   useCallback as useCallback13,
   useContext as useContext27,
   useEffect as useEffect12,
-  useLayoutEffect as useLayoutEffect7,
+  useLayoutEffect as useLayoutEffect8,
   useRef as useRef19
 } from "react";
 import { useCallback as useCallback12, useMemo as useMemo27, useRef as useRef17 } from "react";
@@ -4452,7 +4458,7 @@ import React22, {
   useCallback as useCallback11,
   useContext as useContext25,
   useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect6,
+  useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo25,
   useRef as useRef16,
   useState as useState12
@@ -4469,7 +4475,7 @@ import {
   useContext as useContext30,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
-  useLayoutEffect as useLayoutEffect8,
+  useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo30,
   useRef as useRef21
 } from "react";
@@ -4490,7 +4496,7 @@ import {
   forwardRef as forwardRef9,
   useCallback as useCallback17,
   useContext as useContext32,
-  useLayoutEffect as useLayoutEffect9,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo32,
   useRef as useRef23
 } from "react";
@@ -4500,7 +4506,7 @@ import {
   useCallback as useCallback18,
   useContext as useContext33,
   useImperativeHandle as useImperativeHandle7,
-  useLayoutEffect as useLayoutEffect10,
+  useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo33,
   useRef as useRef24,
   useState as useState16
@@ -4511,7 +4517,7 @@ import { jsx as jsx28 } from "react/jsx-runtime";
 import {
   useCallback as useCallback20,
   useContext as useContext34,
-  useLayoutEffect as useLayoutEffect11,
+  useLayoutEffect as useLayoutEffect12,
   useRef as useRef25,
   useState as useState18
 } from "react";
@@ -4541,7 +4547,7 @@ import {
   useCallback as useCallback23,
   useContext as useContext37,
   useEffect as useEffect17,
-  useLayoutEffect as useLayoutEffect12,
+  useLayoutEffect as useLayoutEffect13,
   useMemo as useMemo37,
   useState as useState20
 } from "react";
@@ -4574,7 +4580,7 @@ import {
   useContext as useContext39,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
-  useLayoutEffect as useLayoutEffect13,
+  useLayoutEffect as useLayoutEffect14,
   useMemo as useMemo41,
   useRef as useRef29
 } from "react";
@@ -5767,7 +5773,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.504";
+var VERSION = "4.0.506";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -5818,6 +5824,7 @@ var SetTimelineContext = createContext13({
   }
 });
 var TimelineContext = createContext13(null);
+var TimelineImperativeContext = createContext13(null);
 var PlaybackRateContext = createContext13(null);
 var AbsoluteTimeContext = createContext13(null);
 var TimelineContextProvider = ({ children, frameState }) => {
@@ -5827,6 +5834,8 @@ var TimelineContextProvider = ({ children, frameState }) => {
   const audioAndVideoTags = useRef3([]);
   const [_frame, setFrame] = useState2(() => getInitialFrameState());
   const frame = frameState ?? _frame;
+  const frameRef = useRef3(frame);
+  frameRef.current = frame;
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -5862,6 +5871,13 @@ var TimelineContextProvider = ({ children, frameState }) => {
       audioAndVideoTags
     };
   }, [frame, playing]);
+  const timelineImperativeContextValue = useMemo8(() => {
+    return {
+      frameRef,
+      imperativePlaying,
+      audioAndVideoTags
+    };
+  }, []);
   const playbackRateContextValue = useMemo8(() => {
     return {
       playbackRate,
@@ -5878,11 +5894,14 @@ var TimelineContextProvider = ({ children, frameState }) => {
     value: timelineContextValue,
     children: /* @__PURE__ */ jsx8(PlaybackRateContext.Provider, {
       value: playbackRateContextValue,
-      children: /* @__PURE__ */ jsx8(TimelineContext.Provider, {
-        value: timelineContextValue,
-        children: /* @__PURE__ */ jsx8(SetTimelineContext.Provider, {
-          value: setTimelineContextValue,
-          children
+      children: /* @__PURE__ */ jsx8(TimelineImperativeContext.Provider, {
+        value: timelineImperativeContextValue,
+        children: /* @__PURE__ */ jsx8(TimelineContext.Provider, {
+          value: timelineContextValue,
+          children: /* @__PURE__ */ jsx8(SetTimelineContext.Provider, {
+            value: setTimelineContextValue,
+            children
+          })
         })
       })
     })
@@ -8707,6 +8726,31 @@ var getFlatSchemaWithAllKeys = (schema) => {
   }
   return out;
 };
+var createRuntimeValueStore = (initialSnapshot) => {
+  let snapshot = initialSnapshot;
+  const listeners = new Set;
+  const store = {
+    getSnapshot: () => snapshot,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+  return {
+    store,
+    setSnapshot: (newSnapshot) => {
+      if (snapshot === newSnapshot) {
+        return;
+      }
+      snapshot = newSnapshot;
+      for (const listener of listeners) {
+        listener();
+      }
+    }
+  };
+};
 var findPropsToDelete = ({
   schema,
   key,
@@ -9008,16 +9052,21 @@ var withInteractivitySchema = ({
       props: cleanProps
     }));
     const currentRuntimeValueDotNotation = useMemo14(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
+    const [runtimeValueStore] = useState4(() => createRuntimeValueStore(currentRuntimeValueDotNotation));
+    useLayoutEffect2(() => {
+      runtimeValueStore.setSnapshot(currentRuntimeValueDotNotation);
+    }, [currentRuntimeValueDotNotation, runtimeValueStore]);
     const controls = useMemo14(() => {
       return {
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
+        runtimeValues: runtimeValueStore.store,
         overrideId,
         supportsEffects,
         componentIdentity,
         componentName
       };
-    }, [currentRuntimeValueDotNotation, overrideId]);
+    }, [currentRuntimeValueDotNotation, overrideId, runtimeValueStore.store]);
     setStackForControls(controls, internalStack);
     const { merged: valuesDotNotation, propsToDelete } = useMemo14(() => {
       return computeEffectiveSchemaValuesDotNotation({
@@ -9202,6 +9251,32 @@ var RegularSequenceRefForwardingFunction = ({
   const startMediaFrom = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom - cumulatedNegativeFrom : null;
   const mediaFrameAtSequenceZero = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom : null;
   const frozenMediaFrame = isMedia && isMedia.type !== "image" && mediaFrameAtSequenceZero !== null ? registeredFrozenFrame === null ? null : mediaFrameAtSequenceZero + (loopDisplay ? registeredFrozenFrame % loopDisplay.durationInFrames : registeredFrozenFrame) * isMedia.data.playbackRate : null;
+  const controlsSchema = controls?.schema;
+  const controlsRuntimeValues = controls?.runtimeValues;
+  const controlsOverrideId = controls?.overrideId;
+  const controlsSupportsEffects = controls?.supportsEffects;
+  const controlsComponentIdentity = controls?.componentIdentity;
+  const controlsComponentName = controls?.componentName;
+  const registrationControls = useMemo15(() => {
+    if (controlsSchema === undefined || controlsRuntimeValues === undefined || controlsOverrideId === undefined || controlsSupportsEffects === undefined || controlsComponentIdentity === undefined || controlsComponentName === undefined) {
+      return null;
+    }
+    return {
+      schema: controlsSchema,
+      runtimeValues: controlsRuntimeValues,
+      overrideId: controlsOverrideId,
+      supportsEffects: controlsSupportsEffects,
+      componentIdentity: controlsComponentIdentity,
+      componentName: controlsComponentName
+    };
+  }, [
+    controlsComponentIdentity,
+    controlsComponentName,
+    controlsOverrideId,
+    controlsRuntimeValues,
+    controlsSchema,
+    controlsSupportsEffects
+  ]);
   useEffect3(() => {
     if (!env.isStudio) {
       return;
@@ -9210,7 +9285,7 @@ var RegularSequenceRefForwardingFunction = ({
       if (isMedia.type === "image") {
         registerSequence({
           type: "image",
-          controls: controls ?? null,
+          controls: registrationControls,
           effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
           displayName: timelineClipName,
           documentationLink: resolvedDocumentationLink,
@@ -9234,7 +9309,7 @@ var RegularSequenceRefForwardingFunction = ({
       } else {
         registerSequence({
           type: isMedia.type,
-          controls: controls ?? null,
+          controls: registrationControls,
           effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
           displayName: timelineClipName,
           documentationLink: resolvedDocumentationLink,
@@ -9281,7 +9356,7 @@ var RegularSequenceRefForwardingFunction = ({
       getStack: () => stackRef.current,
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
-      controls: controls ?? null,
+      controls: registrationControls,
       effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
       refForOutline: refForOutline ?? null,
       isInsideSeries,
@@ -9309,7 +9384,7 @@ var RegularSequenceRefForwardingFunction = ({
     premountDisplay,
     postmountDisplay,
     env.isStudio,
-    controls,
+    registrationControls,
     _remotionInternalEffects,
     isMedia,
     resolvedDocumentationLink,
@@ -10235,7 +10310,7 @@ var AnimatedImageContent = forwardRef4(({
       imageDecoder?.close();
     };
   }, [imageDecoder]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!imageDecoder) {
       return;
     }
@@ -10492,7 +10567,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a2) => a2.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     if (typeof window !== "undefined") {
       window.remotion_collectAssets = () => {
         const assets = renderAssetsRef.current;
@@ -10522,7 +10597,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
   const [id] = useState8(() => {
     return String(Math.random());
   });
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!env.isRendering) {
       return;
     }
@@ -11840,7 +11915,7 @@ var useVolume = ({
   }
   const { audioContext, gainNode: masterGainNode } = sharedAudioContext;
   if (typeof window !== "undefined") {
-    useLayoutEffect5(() => {
+    useLayoutEffect6(() => {
       if (!audioContext) {
         return;
       }
@@ -12206,7 +12281,7 @@ var useBufferManager = (logLevel, mountTime) => {
     }
   }, [blocks]);
   if (typeof window !== "undefined") {
-    useLayoutEffect6(() => {
+    useLayoutEffect7(() => {
       if (rendering) {
         return;
       }
@@ -12840,7 +12915,7 @@ var useMediaPlayback = ({
     isPostmounting
   ]);
   const env = useRemotionEnvironment();
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
       mediaRef.current.playbackRate = playbackRateToSet;
@@ -13318,7 +13393,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   ]);
   const { src } = props;
   const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     if (window.process?.env?.NODE_ENV === "test") {
       return;
     }
@@ -13965,7 +14040,7 @@ var HtmlInCanvasContent = forwardRef9(({
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     const placeholder = canvas2dRef.current;
     if (!placeholder) {
       throw new Error("Canvas not found");
@@ -13997,7 +14072,7 @@ var HtmlInCanvasContent = forwardRef9(({
     usesDirectLayoutCanvas
   ]);
   const onPaintChangedRef = useRef23(false);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!onPaintChangedRef.current) {
       onPaintChangedRef.current = true;
       return;
@@ -14008,7 +14083,7 @@ var HtmlInCanvasContent = forwardRef9(({
     }
     canvas.requestPaint?.();
   }, [onPaint, memoizedEffects]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     const canvas = canvas2dRef.current;
     if (!canvas) {
       return;
@@ -14306,7 +14381,7 @@ var CanvasImageContent = forwardRef10(({
       ref.current = canvas;
     }
   }, [ref, refForOutline]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (!pauseWhenLoading || !isLoadPending || isPremounting || isPostmounting) {
       return;
     }
@@ -14318,7 +14393,7 @@ var CanvasImageContent = forwardRef10(({
     isPremounting,
     pauseWhenLoading
   ]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
@@ -14380,7 +14455,7 @@ var CanvasImageContent = forwardRef10(({
     maxRetries,
     onError
   ]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (!loadedImage || !outputCanvas || !sourceCanvas) {
       return;
     }
@@ -14708,7 +14783,7 @@ var ImgContent = ({
     } catch {}
   }, [cancelRender2, maxRetries, onError, retryIn]);
   if (typeof window !== "undefined") {
-    useLayoutEffect11(() => {
+    useLayoutEffect12(() => {
       if (!pauseWhenLoading || !isLoading || isPremounting || isPostmounting) {
         return;
       }
@@ -14720,7 +14795,7 @@ var ImgContent = ({
       isPremounting,
       pauseWhenLoading
     ]);
-    useLayoutEffect11(() => {
+    useLayoutEffect12(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -15071,7 +15146,8 @@ var makeRemotionComponentIdentity = ({
 };
 var interactiveElementSchema = {
   ...baseSchema,
-  ...transformSchema
+  ...transformSchema,
+  ...cropSchema
 };
 var interactiveBackgroundElementSchema = {
   ...interactiveElementSchema,
@@ -15128,8 +15204,21 @@ var makeInteractiveElement = (tag, displayName, schema) => {
       name,
       showInTimeline,
       controls,
+      cropLeft,
+      cropRight,
+      cropTop,
+      cropBottom,
+      style,
       ...props2
     } = propsWithControls;
+    const croppedStyle = useCropStyle({
+      cropLeft,
+      cropRight,
+      cropTop,
+      cropBottom,
+      style: style ?? null,
+      componentName: displayName
+    });
     const refForOutline = useRef26(null);
     const callbackRef = useCallback21((element) => {
       refForOutline.current = element;
@@ -15149,6 +15238,7 @@ var makeInteractiveElement = (tag, displayName, schema) => {
       outlineRef: refForOutline,
       children: React31.createElement(tag, {
         ...props2,
+        style: croppedStyle ?? undefined,
         ref: callbackRef
       })
     });
@@ -15850,7 +15940,7 @@ var OffthreadVideoForRendering = ({
   }, [toneMapped, currentTime, src, transparent]);
   const [imageSrc, setImageSrc] = useState20(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -16385,6 +16475,7 @@ var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 function useRemotionContexts() {
   const compositionManagerCtx = React41.useContext(CompositionManager);
   const timelineContext = React41.useContext(TimelineContext);
+  const timelineImperativeContext = React41.useContext(TimelineImperativeContext);
   const setTimelineContext = React41.useContext(SetTimelineContext);
   const sequenceContext = React41.useContext(SequenceContext);
   const nonceContext = React41.useContext(NonceContext);
@@ -16400,6 +16491,7 @@ function useRemotionContexts() {
   return useMemo39(() => ({
     compositionManagerCtx,
     timelineContext,
+    timelineImperativeContext,
     setTimelineContext,
     sequenceContext,
     nonceContext,
@@ -16418,6 +16510,7 @@ function useRemotionContexts() {
     sequenceContext,
     setTimelineContext,
     timelineContext,
+    timelineImperativeContext,
     canUseRemotionHooksContext,
     preloadContext,
     resolveCompositionContext,
@@ -16451,15 +16544,18 @@ var RemotionContextProvider = (props2) => {
                     value: contexts.renderAssetManagerContext,
                     children: /* @__PURE__ */ jsx37(ResolveCompositionContext.Provider, {
                       value: contexts.resolveCompositionContext,
-                      children: /* @__PURE__ */ jsx37(TimelineContext.Provider, {
-                        value: contexts.timelineContext,
-                        children: /* @__PURE__ */ jsx37(SetTimelineContext.Provider, {
-                          value: contexts.setTimelineContext,
-                          children: /* @__PURE__ */ jsx37(SequenceContext.Provider, {
-                            value: contexts.sequenceContext,
-                            children: /* @__PURE__ */ jsx37(BufferingContextReact.Provider, {
-                              value: contexts.bufferManagerContext,
-                              children
+                      children: /* @__PURE__ */ jsx37(TimelineImperativeContext.Provider, {
+                        value: contexts.timelineImperativeContext,
+                        children: /* @__PURE__ */ jsx37(TimelineContext.Provider, {
+                          value: contexts.timelineContext,
+                          children: /* @__PURE__ */ jsx37(SetTimelineContext.Provider, {
+                            value: contexts.setTimelineContext,
+                            children: /* @__PURE__ */ jsx37(SequenceContext.Provider, {
+                              value: contexts.sequenceContext,
+                              children: /* @__PURE__ */ jsx37(BufferingContextReact.Provider, {
+                                value: contexts.bufferManagerContext,
+                                children
+                              })
                             })
                           })
                         })
@@ -16603,6 +16699,7 @@ var Internals = {
   TimelinePosition: exports_timeline_position_state,
   DelayRenderContextType,
   TimelineContext,
+  TimelineImperativeContext,
   PlaybackRateContext,
   AbsoluteTimeContext,
   RenderAssetManagerProvider,
@@ -17187,7 +17284,7 @@ var VideoForRenderingForwardFunction = ({
   ]);
   const { src } = props2;
   if (environment.isRendering) {
-    useLayoutEffect13(() => {
+    useLayoutEffect14(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }
@@ -27113,205 +27210,184 @@ var StarIcon = () => {
 };
 var TrustSection = () => {
   return /* @__PURE__ */ jsxs6("div", {
-    className: "mt-10",
+    className: "mt-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
     children: [
-      /* @__PURE__ */ jsxs6("div", {
-        className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap",
+      /* @__PURE__ */ jsxs6(Card, {
+        className: "text-left px-4 py-6",
         children: [
-          /* @__PURE__ */ jsxs6(Card, {
-            className: "lg:w-[300px] text-left px-4 py-6 flex-1",
-            children: [
-              /* @__PURE__ */ jsx46(SwissIcon, {}),
-              /* @__PURE__ */ jsx46("div", {
-                className: "h-4"
-              }),
-              /* @__PURE__ */ jsx46("div", {
-                className: "font-brand font-bold text-2xl mb-2",
-                children: "Swiss quality"
-              }),
-              /* @__PURE__ */ jsxs6("div", {
-                className: "font-brand",
-                children: [
-                  "We are a company based in Zurich, Switzerland. We",
-                  "'",
-                  "re far away from the craziness that is Silicon Valley."
-                ]
-              })
-            ]
+          /* @__PURE__ */ jsx46(SwissIcon, {}),
+          /* @__PURE__ */ jsx46("div", {
+            className: "h-4"
+          }),
+          /* @__PURE__ */ jsx46("div", {
+            className: "font-brand font-bold text-2xl mb-2",
+            children: "Swiss quality"
           }),
-          /* @__PURE__ */ jsxs6(Card, {
-            className: "lg:w-[300px] text-left px-4 py-6 flex-1",
+          /* @__PURE__ */ jsxs6("div", {
+            className: "font-brand",
             children: [
-              /* @__PURE__ */ jsx46(ProfitableIcon, {}),
-              /* @__PURE__ */ jsx46("div", {
-                className: "h-4"
-              }),
-              /* @__PURE__ */ jsx46("div", {
-                className: "font-brand font-bold text-2xl mb-2",
-                children: "Sustainable business"
-              }),
-              /* @__PURE__ */ jsxs6("div", {
-                className: "font-brand",
-                children: [
-                  "Remotion is profitable. Aside from our",
-                  " ",
-                  /* @__PURE__ */ jsx46("a", {
-                    href: "/docs/investors",
-                    className: "text-brand hover:underline underline-offset-4",
-                    children: "early investors"
-                  }),
-                  ", we don",
-                  "'",
-                  "t need outside investment to sustain the business."
-                ]
-              })
+              "We are a company based in Zurich, Switzerland. We",
+              "'",
+              "re far away from the craziness that is Silicon Valley."
             ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs6(Card, {
+        className: "text-left px-4 py-6",
+        children: [
+          /* @__PURE__ */ jsx46(ProfitableIcon, {}),
+          /* @__PURE__ */ jsx46("div", {
+            className: "h-4"
           }),
-          /* @__PURE__ */ jsxs6(Card, {
-            className: "lg:w-[300px] text-left px-4 py-6 flex-1",
+          /* @__PURE__ */ jsx46("div", {
+            className: "font-brand font-bold text-2xl mb-2",
+            children: "Sustainable business"
+          }),
+          /* @__PURE__ */ jsxs6("div", {
+            className: "font-brand",
             children: [
-              /* @__PURE__ */ jsx46(KeyIcon, {}),
-              /* @__PURE__ */ jsx46("div", {
-                className: "h-4"
-              }),
-              /* @__PURE__ */ jsx46("div", {
-                className: "font-brand font-bold text-2xl mb-2",
-                children: "Founder-owned"
+              "Remotion is profitable. Aside from our",
+              " ",
+              /* @__PURE__ */ jsx46("a", {
+                href: "/docs/investors",
+                className: "text-brand hover:underline underline-offset-4",
+                children: "early investors"
               }),
-              /* @__PURE__ */ jsx46("div", {
-                className: "font-brand",
-                children: "We, the founders, own the company. And we just want one thing: Make programmatic video glorious."
-              })
+              ", we don",
+              "'",
+              "t need outside investment to sustain the business."
             ]
           })
         ]
       }),
-      /* @__PURE__ */ jsx46("div", {
-        className: "h-4"
+      /* @__PURE__ */ jsxs6(Card, {
+        className: "text-left px-4 py-6",
+        children: [
+          /* @__PURE__ */ jsx46(KeyIcon, {}),
+          /* @__PURE__ */ jsx46("div", {
+            className: "h-4"
+          }),
+          /* @__PURE__ */ jsx46("div", {
+            className: "font-brand font-bold text-2xl mb-2",
+            children: "Founder-owned"
+          }),
+          /* @__PURE__ */ jsx46("div", {
+            className: "font-brand",
+            children: "We, the founders, own the company. And we just want one thing: Make programmatic video glorious."
+          })
+        ]
       }),
-      /* @__PURE__ */ jsxs6("div", {
-        className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap",
+      /* @__PURE__ */ jsxs6(Card, {
+        className: "text-left px-4 py-6",
         children: [
-          /* @__PURE__ */ jsxs6(Card, {
-            className: "lg:w-[300px] text-left px-4 py-6 flex-1",
-            children: [
-              /* @__PURE__ */ jsx46(ClockIcon, {}),
-              /* @__PURE__ */ jsx46("div", {
-                className: "h-4"
-              }),
-              /* @__PURE__ */ jsx46("div", {
-                className: "font-brand font-bold text-2xl mb-2",
-                children: "5 years and counting"
-              }),
-              /* @__PURE__ */ jsx46("div", {
-                className: "font-brand",
-                children: "Making Remotion since 2021. No plans to change our business model or sell the company."
-              })
-            ]
+          /* @__PURE__ */ jsx46(ClockIcon, {}),
+          /* @__PURE__ */ jsx46("div", {
+            className: "h-4"
           }),
-          /* @__PURE__ */ jsxs6(Card, {
-            className: "lg:w-[300px] text-left px-4 py-6 flex-1",
-            children: [
-              /* @__PURE__ */ jsx46(ShieldIcon, {}),
-              /* @__PURE__ */ jsx46("div", {
-                className: "h-4"
-              }),
-              /* @__PURE__ */ jsx46("div", {
-                className: "font-brand font-bold text-2xl mb-2",
-                children: "Succession plan"
-              }),
-              /* @__PURE__ */ jsxs6("div", {
-                className: "font-brand",
-                children: [
-                  "If something happens to us, the project will fall under",
-                  " ",
-                  /* @__PURE__ */ jsx46("a", {
-                    href: "https://github.com/wcandillon",
-                    target: "_blank",
-                    className: "text-brand hover:underline underline-offset-4",
-                    children: "William Candillon"
-                  }),
-                  "'s",
-                  " supervision."
-                ]
-              })
-            ]
+          /* @__PURE__ */ jsx46("div", {
+            className: "font-brand font-bold text-2xl mb-2",
+            children: "5 years and counting"
           }),
-          /* @__PURE__ */ jsxs6(Card, {
-            className: "lg:w-[300px] text-left px-4 py-6 flex-1",
+          /* @__PURE__ */ jsx46("div", {
+            className: "font-brand",
+            children: "Making Remotion since 2021. No plans to change our business model or sell the company."
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs6(Card, {
+        className: "text-left px-4 py-6",
+        children: [
+          /* @__PURE__ */ jsx46(ShieldIcon, {}),
+          /* @__PURE__ */ jsx46("div", {
+            className: "h-4"
+          }),
+          /* @__PURE__ */ jsx46("div", {
+            className: "font-brand font-bold text-2xl mb-2",
+            children: "Succession plan"
+          }),
+          /* @__PURE__ */ jsxs6("div", {
+            className: "font-brand",
             children: [
-              /* @__PURE__ */ jsx46(UsersIcon, {}),
-              /* @__PURE__ */ jsx46("div", {
-                className: "h-4"
-              }),
-              /* @__PURE__ */ jsx46("div", {
-                className: "font-brand font-bold text-2xl mb-2",
-                children: "300+ customers"
+              "If something happens to us, the project will fall under",
+              " ",
+              /* @__PURE__ */ jsx46("a", {
+                href: "https://github.com/wcandillon",
+                target: "_blank",
+                className: "text-brand hover:underline underline-offset-4",
+                children: "William Candillon"
               }),
-              /* @__PURE__ */ jsx46("div", {
-                className: "font-brand",
-                children: "More than 300 companies trust Remotion, from small businesses to FAANG."
-              })
+              "'s",
+              " supervision."
             ]
           })
         ]
       }),
-      /* @__PURE__ */ jsx46("div", {
-        className: "h-4"
+      /* @__PURE__ */ jsxs6(Card, {
+        className: "text-left px-4 py-6",
+        children: [
+          /* @__PURE__ */ jsx46(UsersIcon, {}),
+          /* @__PURE__ */ jsx46("div", {
+            className: "h-4"
+          }),
+          /* @__PURE__ */ jsx46("div", {
+            className: "font-brand font-bold text-2xl mb-2",
+            children: "400+ customers"
+          }),
+          /* @__PURE__ */ jsx46("div", {
+            className: "font-brand",
+            children: "More than 400 companies trust Remotion, from small businesses to FAANG / MANGOS."
+          })
+        ]
       }),
-      /* @__PURE__ */ jsxs6("div", {
-        className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap",
+      /* @__PURE__ */ jsxs6(Card, {
+        className: "text-left px-4 py-6",
         children: [
-          /* @__PURE__ */ jsxs6(Card, {
-            className: "lg:w-[300px] text-left px-4 py-6 flex-1",
-            children: [
-              /* @__PURE__ */ jsx46(CodeIcon, {}),
-              /* @__PURE__ */ jsx46("div", {
-                className: "h-4"
-              }),
-              /* @__PURE__ */ jsx46("div", {
-                className: "font-brand font-bold text-2xl mb-2",
-                children: "Source-available"
-              }),
-              /* @__PURE__ */ jsx46("div", {
-                className: "font-brand",
-                children: "Our code is publicly available on GitHub. You can inspect, fork, and self-host it. Full transparency, no black boxes."
-              })
-            ]
+          /* @__PURE__ */ jsx46(CodeIcon, {}),
+          /* @__PURE__ */ jsx46("div", {
+            className: "h-4"
           }),
-          /* @__PURE__ */ jsxs6(Card, {
-            className: "lg:w-[300px] text-left px-4 py-6 flex-1",
-            children: [
-              /* @__PURE__ */ jsx46(VideoIcon, {}),
-              /* @__PURE__ */ jsx46("div", {
-                className: "h-4"
-              }),
-              /* @__PURE__ */ jsx46("div", {
-                className: "font-brand font-bold text-2xl mb-2",
-                children: "2M+ videos/month"
-              }),
-              /* @__PURE__ */ jsx46("div", {
-                className: "font-brand",
-                children: "More than one million videos are rendered with Remotion every month. Battle-tested at scale."
-              })
-            ]
+          /* @__PURE__ */ jsx46("div", {
+            className: "font-brand font-bold text-2xl mb-2",
+            children: "Source-available"
           }),
-          /* @__PURE__ */ jsxs6(Card, {
-            className: "lg:w-[300px] text-left px-4 py-6 flex-1",
-            children: [
-              /* @__PURE__ */ jsx46(StarIcon, {}),
-              /* @__PURE__ */ jsx46("div", {
-                className: "h-4"
-              }),
-              /* @__PURE__ */ jsx46("div", {
-                className: "font-brand font-bold text-2xl mb-2",
-                children: "50,000+ GitHub stars"
-              }),
-              /* @__PURE__ */ jsx46("div", {
-                className: "font-brand",
-                children: "One of the most popular media projects on GitHub. Trusted by the developer community."
-              })
-            ]
+          /* @__PURE__ */ jsx46("div", {
+            className: "font-brand",
+            children: "Our code is publicly available on GitHub. You can inspect, fork, and self-host it. Full transparency, no black boxes."
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs6(Card, {
+        className: "text-left px-4 py-6",
+        children: [
+          /* @__PURE__ */ jsx46(VideoIcon, {}),
+          /* @__PURE__ */ jsx46("div", {
+            className: "h-4"
+          }),
+          /* @__PURE__ */ jsx46("div", {
+            className: "font-brand font-bold text-2xl mb-2",
+            children: "2M+ videos/month"
+          }),
+          /* @__PURE__ */ jsx46("div", {
+            className: "font-brand",
+            children: "More than two million videos are rendered with Remotion every month. Battle-tested at scale."
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs6(Card, {
+        className: "text-left px-4 py-6",
+        children: [
+          /* @__PURE__ */ jsx46(StarIcon, {}),
+          /* @__PURE__ */ jsx46("div", {
+            className: "h-4"
+          }),
+          /* @__PURE__ */ jsx46("div", {
+            className: "font-brand font-bold text-2xl mb-2",
+            children: "55,000+ GitHub stars"
+          }),
+          /* @__PURE__ */ jsx46("div", {
+            className: "font-brand",
+            children: "One of the most popular media projects on GitHub. Trusted by the developer community."
           })
         ]
       })