@remotion/promo-pages 4.0.435 → 4.0.437

package/dist/Homepage.js

@@ -1003,7 +1003,7 @@ var useIsPlayer = () => {
 function truthy(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.435";
+var VERSION = "4.0.437";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -4081,7 +4081,7 @@ var useBasicMediaInTimeline = ({
   const videoConfig = useVideoConfig();
   const [initialVolume] = useState10(() => volume);
   const mediaDuration = calculateMediaDuration({
-    mediaDurationInFrames: videoConfig.durationInFrames,
+    mediaDurationInFrames: videoConfig.durationInFrames + (trimBefore ?? 0),
     playbackRate,
     trimBefore,
     trimAfter
@@ -28459,7 +28459,12 @@ var setGlobalTimeAnchor = ({
   }
   audioSyncAnchor.value = newAnchor;
 };
-var makeAudioIterator = (startFromSecond, maximumTimestamp, cache2, debugAudioScheduling) => {
+var makeAudioIterator = ({
+  startFromSecond,
+  maximumTimestamp,
+  cache: cache2,
+  debugAudioScheduling
+}) => {
   let destroyed = false;
   const iterator = cache2.makeIteratorOrUsePrewarmed(startFromSecond, maximumTimestamp);
   const queuedAudioNodes = [];
@@ -28469,15 +28474,15 @@ var makeAudioIterator = (startFromSecond, maximumTimestamp, cache2, debugAudioSc
   const cleanupAudioQueue = (audioContext) => {
     for (const node of queuedAudioNodes) {
       try {
-        const currentlyHearing = audioContext.getOutputTimestamp().contextTime;
-        const nodeEndTime = node.scheduledTime + node.buffer.duration / node.playbackRate;
-        const isAlreadyPlaying = node.scheduledTime - ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT < audioContext.currentTime;
-        const shouldKeep = isAlreadyPlaying;
-        if (shouldKeep) {
+        const isAlreadyPlaying = node.scheduledTime - ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT < audioContext.audioContext.currentTime;
+        const wasScheduledForThisAnchor = node.scheduledAtAnchor === audioContext.audioSyncAnchor.value;
+        if (isAlreadyPlaying && wasScheduledForThisAnchor) {
           continue;
         }
         if (debugAudioScheduling) {
-          Internals.Log.info({ logLevel: "trace", tag: "audio-scheduling" }, `Stopping node ${node.timestamp.toFixed(3)}, currently hearing = ${currentlyHearing.toFixed(3)} currentTime = ${audioContext.currentTime.toFixed(3)} nodeEndTime = ${nodeEndTime.toFixed(3)} scheduledTime = ${node.scheduledTime.toFixed(3)}`);
+          const currentlyHearing = audioContext.audioContext.getOutputTimestamp().contextTime;
+          const nodeEndTime = node.scheduledTime + node.buffer.duration / node.playbackRate;
+          Internals.Log.info({ logLevel: "trace", tag: "audio-scheduling" }, `Stopping node ${node.timestamp.toFixed(3)}, currently hearing = ${currentlyHearing.toFixed(3)} currentTime = ${audioContext.audioContext.currentTime.toFixed(3)} nodeEndTime = ${nodeEndTime.toFixed(3)} scheduledTime = ${node.scheduledTime.toFixed(3)}`);
         }
         node.node.stop();
       } catch {}
@@ -28638,14 +28643,16 @@ var makeAudioIterator = (startFromSecond, maximumTimestamp, cache2, debugAudioSc
       timestamp,
       buffer,
       scheduledTime,
-      playbackRate
+      playbackRate,
+      scheduledAtAnchor
     }) => {
       queuedAudioNodes.push({
         node,
         timestamp,
         buffer,
         scheduledTime,
-        playbackRate
+        playbackRate,
+        scheduledAtAnchor
       });
     },
     removeQueuedAudioNode: (node) => {
@@ -28884,8 +28891,8 @@ var audioIteratorManager = ({
 }) => {
   let muted = initialMuted;
   let currentVolume = 1;
-  const gainNode = sharedAudioContext.createGain();
-  gainNode.connect(sharedAudioContext.destination);
+  const gainNode = sharedAudioContext.audioContext.createGain();
+  gainNode.connect(sharedAudioContext.audioContext.destination);
   const audioSink = new AudioBufferSink(audioTrack);
   const prewarmedAudioIteratorCache = makePrewarmedAudioIteratorCache(audioSink);
   let audioBufferIterator = null;
@@ -28901,13 +28908,13 @@ var audioIteratorManager = ({
     if (!audioBufferIterator) {
       throw new Error("Audio buffer iterator not found");
     }
-    if (sharedAudioContext.state !== "running") {
+    if (sharedAudioContext.audioContext.state !== "running") {
       throw new Error("Tried to schedule node while audio context is not running");
     }
     if (muted) {
       return;
     }
-    const node = sharedAudioContext.createBufferSource();
+    const node = sharedAudioContext.audioContext.createBufferSource();
     node.buffer = buffer;
     node.playbackRate.value = playbackRate;
     node.connect(gainNode);
@@ -28925,7 +28932,8 @@ var audioIteratorManager = ({
       timestamp: mediaTimestamp,
       buffer,
       scheduledTime: started.scheduledTime,
-      playbackRate
+      playbackRate,
+      scheduledAtAnchor: sharedAudioContext.audioSyncAnchor.value
     });
     node.onended = () => {
       setTimeout(() => {
@@ -28972,7 +28980,7 @@ var audioIteratorManager = ({
     if (buffer.timestamp >= endTime) {
       return;
     }
-    if (getIsPlaying() && sharedAudioContext.state === "running" && (sharedAudioContext.getOutputTimestamp().contextTime ?? 0) > 0) {
+    if (getIsPlaying() && sharedAudioContext.audioContext.state === "running" && (sharedAudioContext.audioContext.getOutputTimestamp().contextTime ?? 0) > 0) {
       resumeScheduledAudioChunks({
         playbackRate,
         scheduleAudioNode,
@@ -29012,7 +29020,12 @@ var audioIteratorManager = ({
       audioBufferIterator?.destroy(sharedAudioContext);
       const delayHandle = __using(__stack, delayPlaybackHandleIfNotPremounting(), 0);
       currentDelayHandle = delayHandle;
-      const iterator = makeAudioIterator(startFromSecond, getEndTime(), prewarmedAudioIteratorCache, debugAudioScheduling);
+      const iterator = makeAudioIterator({
+        startFromSecond,
+        maximumTimestamp: getEndTime(),
+        cache: prewarmedAudioIteratorCache,
+        debugAudioScheduling
+      });
       audioIteratorsCreated++;
       audioBufferIterator = iterator;
       try {
@@ -29096,7 +29109,7 @@ var audioIteratorManager = ({
     }
     const queuedPeriod = audioBufferIterator.getQueuedPeriod();
     const queuedPeriodMinusLatency = queuedPeriod ? {
-      from: queuedPeriod.from - ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT - sharedAudioContext.baseLatency - sharedAudioContext.outputLatency,
+      from: queuedPeriod.from - ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT - sharedAudioContext.audioContext.baseLatency - sharedAudioContext.audioContext.outputLatency,
       until: queuedPeriod.until
     } : null;
     const currentTimeIsAlreadyQueued = isAlreadyQueued(newTime, queuedPeriodMinusLatency);
@@ -29521,7 +29534,8 @@ class MediaPlayer {
     durationInFrames,
     onVideoFrameCallback,
     playing,
-    sequenceOffset
+    sequenceOffset,
+    credentials
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
@@ -29545,7 +29559,9 @@ class MediaPlayer {
     this.playing = playing;
     this.sequenceOffset = sequenceOffset;
     this.input = new Input2({
-      source: new UrlSource(this.src),
+      source: new UrlSource(this.src, credentials ? {
+        requestInit: { credentials }
+      } : undefined),
       formats: ALL_FORMATS
     });
     if (canvas) {
@@ -29659,7 +29675,7 @@ class MediaPlayer {
           this.audioIteratorManager = audioIteratorManager({
             audioTrack,
             delayPlaybackHandleIfNotPremounting: this.delayPlaybackHandleIfNotPremounting,
-            sharedAudioContext: this.sharedAudioContext.audioContext,
+            sharedAudioContext: this.sharedAudioContext,
             getIsLooping: () => this.loop,
             getEndTime: () => this.getEndTime(),
             getStartTime: () => this.getStartTime(),
@@ -30328,6 +30344,7 @@ var AudioForPreviewAssertedShowing = ({
   fallbackHtml5AudioProps,
   debugAudioScheduling,
   onError,
+  credentials,
   controls
 }) => {
   const videoConfig = useUnsafeVideoConfig2();
@@ -30454,7 +30471,8 @@ var AudioForPreviewAssertedShowing = ({
         durationInFrames: videoConfig.durationInFrames,
         onVideoFrameCallback: null,
         playing: initialPlaying.current,
-        sequenceOffset: initialSequenceOffset.current
+        sequenceOffset: initialSequenceOffset.current,
+        credentials
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -30546,7 +30564,8 @@ var AudioForPreviewAssertedShowing = ({
     debugAudioScheduling,
     buffer,
     onError,
-    videoConfig.durationInFrames
+    videoConfig.durationInFrames,
+    credentials
   ]);
   if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
     return /* @__PURE__ */ jsx58(Audio, {
@@ -30589,6 +30608,7 @@ var AudioForPreview2 = ({
   fallbackHtml5AudioProps,
   debugAudioScheduling,
   onError,
+  credentials,
   controls
 }) => {
   const preloadedSrc = usePreload2(src);
@@ -30638,6 +30658,7 @@ var AudioForPreview2 = ({
     toneFrequency,
     debugAudioScheduling: debugAudioScheduling ?? false,
     onError,
+    credentials,
     fallbackHtml5AudioProps,
     controls
   });
@@ -31732,11 +31753,12 @@ var getFormatOrNullOrNetworkError = async (input) => {
     return null;
   }
 };
-var getSinks = async (src) => {
+var getSinks = async (src, credentials) => {
   const input = new Input22({
     formats: ALL_FORMATS2,
     source: new UrlSource2(src, {
-      getRetryDelay
+      getRetryDelay,
+      ...credentials ? { requestInit: { credentials } } : undefined
     })
   });
   const format = await getFormatOrNullOrNetworkError(input);
@@ -31816,15 +31838,16 @@ var getSinks = async (src) => {
   };
 };
 var sinkPromises = {};
-var getSink = (src, logLevel) => {
-  let promise = sinkPromises[src];
+var getSink = (src, logLevel, credentials) => {
+  const cacheKey = credentials ? `${src}::${credentials}` : src;
+  let promise = sinkPromises[cacheKey];
   if (!promise) {
     Internals.Log.verbose({
       logLevel,
       tag: "@remotion/media"
     }, `Sink for ${src} was not found, creating new sink`);
-    promise = getSinks(src);
-    sinkPromises[src] = promise;
+    promise = getSinks(src, credentials);
+    sinkPromises[cacheKey] = promise;
   }
   return promise;
 };
@@ -31839,9 +31862,10 @@ var extractAudioInternal = async ({
   trimBefore,
   trimAfter,
   fps,
-  maxCacheSize
+  maxCacheSize,
+  credentials
 }) => {
-  const { getAudio, actualMatroskaTimestamps, isMatroska, getDuration } = await getSink(src, logLevel);
+  const { getAudio, actualMatroskaTimestamps, isMatroska, getDuration } = await getSink(src, logLevel, credentials);
   let mediaDurationInSeconds = null;
   if (loop) {
     mediaDurationInSeconds = await getDuration();
@@ -31964,9 +31988,10 @@ var extractFrameInternal = async ({
   trimBefore,
   playbackRate,
   fps,
-  maxCacheSize
+  maxCacheSize,
+  credentials
 }) => {
-  const sink = await getSink(src, logLevel);
+  const sink = await getSink(src, logLevel, credentials);
   const [video, mediaDurationInSecondsRaw] = await Promise.all([
     sink.getVideo(),
     loop ? sink.getDuration() : Promise.resolve(null)
@@ -32088,7 +32113,8 @@ var extractFrameAndAudio = async ({
   trimAfter,
   trimBefore,
   fps,
-  maxCacheSize
+  maxCacheSize,
+  credentials
 }) => {
   try {
     const [video, audio] = await Promise.all([
@@ -32101,7 +32127,8 @@ var extractFrameAndAudio = async ({
         playbackRate,
         trimBefore,
         fps,
-        maxCacheSize
+        maxCacheSize,
+        credentials
       }) : null,
       includeAudio ? extractAudio({
         src,
@@ -32114,7 +32141,8 @@ var extractFrameAndAudio = async ({
         trimAfter,
         fps,
         trimBefore,
-        maxCacheSize
+        maxCacheSize,
+        credentials
       }) : null
     ]);
     if (video?.type === "cannot-decode") {
@@ -32195,7 +32223,8 @@ var addBroadcastChannelListener = () => {
           trimAfter: data.trimAfter,
           trimBefore: data.trimBefore,
           fps: data.fps,
-          maxCacheSize: data.maxCacheSize
+          maxCacheSize: data.maxCacheSize,
+          credentials: data.credentials
         });
         if (result.type === "cannot-decode") {
           const cannotDecodeResponse = {
@@ -32290,7 +32319,8 @@ var extractFrameViaBroadcastChannel = async ({
   trimAfter,
   trimBefore,
   fps,
-  maxCacheSize
+  maxCacheSize,
+  credentials
 }) => {
   if (isClientSideRendering || window.remotion_isMainTab) {
     return extractFrameAndAudio({
@@ -32306,7 +32336,8 @@ var extractFrameViaBroadcastChannel = async ({
       trimAfter,
       trimBefore,
       fps,
-      maxCacheSize
+      maxCacheSize,
+      credentials
     });
   }
   await waitForMainTabToBeReady(window.remotion_broadcastChannel);
@@ -32383,7 +32414,8 @@ var extractFrameViaBroadcastChannel = async ({
     trimAfter,
     trimBefore,
     fps,
-    maxCacheSize
+    maxCacheSize,
+    credentials
   };
   window.remotion_broadcastChannel.postMessage(request);
   let timeoutId;
@@ -32418,7 +32450,8 @@ var AudioForRendering2 = ({
   toneFrequency,
   trimAfter,
   trimBefore,
-  onError
+  onError,
+  credentials
 }) => {
   const defaultLogLevel = Internals.useLogLevel();
   const logLevel = overriddenLogLevel ?? defaultLogLevel;
@@ -32482,7 +32515,8 @@ var AudioForRendering2 = ({
       trimAfter,
       trimBefore,
       fps,
-      maxCacheSize
+      maxCacheSize,
+      credentials
     }).then((result) => {
       const handleError = (error2, clientSideError, fallbackMessage) => {
         const [action, errorToUse] = callOnErrorAndResolve({
@@ -32576,7 +32610,8 @@ var AudioForRendering2 = ({
     replaceWithHtml5Audio,
     maxCacheSize,
     audioEnabled,
-    onError
+    onError,
+    credentials
   ]);
   if (replaceWithHtml5Audio) {
     return /* @__PURE__ */ jsx216(Html5Audio, {
@@ -32676,6 +32711,7 @@ var VideoForPreviewAssertedShowing = ({
   debugAudioScheduling,
   headless,
   onError,
+  credentials,
   controls
 }) => {
   const src = usePreload22(unpreloadedSrc);
@@ -32779,7 +32815,8 @@ var VideoForPreviewAssertedShowing = ({
         durationInFrames: videoConfig.durationInFrames,
         onVideoFrameCallback: initialOnVideoFrameRef.current ?? null,
         playing: initialPlaying.current,
-        sequenceOffset: initialSequenceOffset.current
+        sequenceOffset: initialSequenceOffset.current,
+        credentials
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -32869,7 +32906,8 @@ var VideoForPreviewAssertedShowing = ({
     sharedAudioContext,
     videoConfig.fps,
     onError,
-    videoConfig.durationInFrames
+    videoConfig.durationInFrames,
+    credentials
   ]);
   const classNameValue = useMemo412(() => {
     return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className2].filter(Internals.truthy).join(" ");
@@ -33001,7 +33039,8 @@ var VideoForRendering2 = ({
   trimAfterValue,
   trimBeforeValue,
   headless,
-  onError
+  onError,
+  credentials
 }) => {
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
@@ -33068,7 +33107,8 @@ var VideoForRendering2 = ({
       trimAfter: trimAfterValue,
       trimBefore: trimBeforeValue,
       fps,
-      maxCacheSize
+      maxCacheSize,
+      credentials
     }).then((result) => {
       const handleError = (err, clientSideError, fallbackMessage, mediaDurationInSeconds) => {
         if (environment.isClientSideRendering) {
@@ -33200,7 +33240,8 @@ var VideoForRendering2 = ({
     maxCacheSize,
     cancelRender3,
     headless,
-    onError
+    onError,
+    credentials
   ]);
   const classNameValue = useMemo53(() => {
     return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className2].filter(Internals.truthy).join(" ");
@@ -33339,6 +33380,7 @@ var InnerVideo = ({
   debugAudioScheduling,
   headless,
   onError,
+  credentials,
   controls
 }) => {
   const environment = useRemotionEnvironment();
@@ -33381,7 +33423,8 @@ var InnerVideo = ({
       trimAfterValue,
       trimBeforeValue,
       headless,
-      onError
+      onError,
+      credentials
     });
   }
   return /* @__PURE__ */ jsx65(VideoForPreview2, {
@@ -33407,6 +33450,7 @@ var InnerVideo = ({
     debugAudioScheduling: debugAudioScheduling ?? false,
     headless: headless ?? false,
     onError,
+    credentials,
     controls
   });
 };
@@ -33436,6 +33480,7 @@ var VideoInner = ({
   debugAudioScheduling,
   headless,
   onError,
+  credentials,
   controls
 }) => {
   const fallbackLogLevel = Internals.useLogLevel();
@@ -33465,6 +33510,7 @@ var VideoInner = ({
     debugAudioScheduling: debugAudioScheduling ?? false,
     headless: headless ?? false,
     onError,
+    credentials,
     controls
   });
 };
@@ -34772,7 +34818,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.435";
+var VERSION2 = "4.0.437";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -41376,7 +41422,7 @@ var FEATURED_TEMPLATES = [
     shortName: "Prompt to Motion Graphics SaaS Starter Kit",
     org: "remotion-dev",
     repoName: "template-prompt-to-motion-graphics-saas",
-    description: "SaaS template for AI-powered code generation with Remotion",
+    description: "SaaS template for AI-powered animation generation",
     longerDescription: 'A SaaS template for "Prompt to Motion Graphics" products. Generates Remotion code, streams it to the frontend, and compiles and previews it in the browser. See the <a href="/docs/ai/ai-saas-template">documentation page</a> for more details.',
     promoBanner: {
       width: 2880,
@@ -41440,6 +41486,29 @@ var FEATURED_TEMPLATES = [
     contributedBy: null,
     showStackblitz: true
   },
+  {
+    homePageLabel: "Electron",
+    shortName: "Electron",
+    org: "remotion-dev",
+    repoName: "template-electron",
+    description: "Render Remotion videos from a desktop app",
+    longerDescription: "An Electron Forge + Vite starter template that renders Remotion videos from the Electron main process.",
+    promoVideo: {
+      muxId: "EvaWtUbbZ5zuYQ5EZFcZ501fg4JPtdVXXt9K02Rf62xcM",
+      width: 1920,
+      height: 1080
+    },
+    cliId: "electron",
+    type: "video",
+    defaultBranch: "main",
+    featuredOnHomePage: null,
+    previewURL: null,
+    previewLabel: null,
+    templateInMonorepo: "template-electron",
+    allowEnableTailwind: false,
+    contributedBy: null,
+    showStackblitz: false
+  },
   {
     homePageLabel: "React Router 7",
     shortName: "React Router",
@@ -41824,14 +41893,28 @@ var Cubes = (props) => {
   });
 };
 
-// src/components/icons/js.tsx
+// src/components/icons/electron.tsx
 import { jsx as jsx136 } from "react/jsx-runtime";
-var JSIcon = (props) => {
+var ElectronIcon = ({ style: style4 }) => {
   return /* @__PURE__ */ jsx136("svg", {
+    viewBox: "0 0 640 640",
+    style: style4,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx136("path", {
+      d: "M402 488.7C376.3 484 348.5 475.2 320 462.8C291.4 475.3 263.7 484.1 238 488.7C238.8 490.5 239.6 492.3 240.5 494.1C261.3 538 289.1 559.9 320 559.9C350.9 559.9 378.7 537.9 399.5 494.1C400.3 492.3 401.2 490.5 402 488.7zM320 576C277.2 576 243.6 543.3 221.6 491.2C168.9 497.3 126.6 484.4 106.4 448C85.7 410.9 97 365.2 130 320C97 274.8 85.7 229.1 106.4 192C126.6 155.7 168.9 142.7 221.6 148.8C243.6 96.7 277.3 64 320 64C362.7 64 396.4 96.7 418.4 148.8C471.1 142.7 513.4 155.6 533.6 192C554.3 229.1 543 274.8 510 320C543 365.2 554.3 410.9 533.6 448C513.4 484.3 471.1 497.3 418.4 491.2C396.4 543.3 362.7 576 320 576zM300.3 453.7C286.4 446.9 272.4 439.3 258.3 430.9C242.6 421.5 227.7 411.6 213.8 401.4C217.8 428 223.9 452.4 231.8 473.7C253.1 470.1 276.2 463.4 300.3 453.8zM408.2 473.6C416 452.4 422.1 428 426.2 401.3C412.3 411.6 397.4 421.5 381.7 430.8C367.7 439.2 353.6 446.8 339.7 453.6C363.8 463.2 386.9 469.9 408.2 473.5zM373.5 417.2C393.6 405.2 412.2 392.4 429.1 379.1C431.1 360.3 432.1 340.5 432.1 320.1C432.1 299.7 431.1 279.9 429.1 261.1C412.2 247.8 393.6 235 373.5 223C355.5 212.2 337.6 202.8 320.1 194.8C302.6 202.8 284.7 212.2 266.7 223C246.6 235 228 247.8 211.1 261.1C209.1 279.9 208.1 299.7 208.1 320.1C208.1 340.5 209.1 360.3 211.1 379.1C228 392.4 246.6 405.2 266.7 417.2C284.7 428 302.6 437.4 320.1 445.4C337.6 437.4 355.5 428 373.5 417.2zM424.5 475.8C425.4 475.9 426.3 476 427.2 476C473.5 479.9 504.8 467 519.7 440.2C534.8 413.1 529.6 377.9 503.1 337.9C502 336.3 501 334.7 499.8 333.1C484.5 351.6 465.8 369.9 444.2 387.3C440.4 419.8 433.7 449.7 424.5 475.6zM446.4 364.7C463.2 350.1 477.8 335 489.9 320C477.9 305 463.2 290 446.4 275.3C447.5 289.8 448.1 304.7 448.1 320C448.1 335.3 447.5 350.2 446.4 364.7zM503 302C529.6 262 534.7 226.8 519.6 199.7C504.7 172.9 473.3 160.1 427.1 164C426.2 164.1 425.3 164.2 424.4 164.2C433.6 190.2 440.3 220.1 444.1 252.5C465.7 270 484.4 288.2 499.7 306.7C500.8 305.1 501.9 303.5 503 301.9zM399.5 145.8C378.7 102 351 80 320 80C289 80 261.3 102 240.5 145.8C239.7 147.6 238.8 149.4 238 151.2C263.7 155.9 291.5 164.7 320 177.1C348.6 164.6 376.3 155.8 402 151.2C401.2 149.4 400.4 147.6 399.5 145.8zM408.1 166.4C386.8 170 363.7 176.7 339.6 186.3C353.5 193.1 367.5 200.7 381.6 209.1C397.3 218.5 412.2 228.4 426.1 238.6C422.1 212 416 187.6 408.1 166.3zM231.7 166.4C223.9 187.6 217.8 212 213.7 238.7C227.6 228.4 242.5 218.6 258.2 209.2C272.2 200.8 286.3 193.2 300.2 186.4C276.1 176.8 253 170.1 231.7 166.5zM215.5 164.2C214.6 164.1 213.7 164 212.8 164C166.5 160.1 135.2 173 120.3 199.7C105.2 226.8 110.4 262 136.9 302C138 303.6 139 305.2 140.2 306.8C155.5 288.3 174.2 270 195.8 252.6C199.6 220.1 206.3 190.2 215.5 164.3zM195.8 387.4C174.2 369.9 155.5 351.7 140.2 333.2C139.1 334.8 138 336.4 136.9 338C110.3 378 105.2 413.2 120.3 440.3C135.2 467.1 166.6 479.9 212.8 476.1C213.7 476 214.6 475.9 215.5 475.9C206.3 449.9 199.6 420 195.8 387.6zM193.7 275.3C176.9 289.9 162.3 305 150.2 320C162.2 335 176.9 350 193.7 364.7C192.6 350.2 192 335.3 192 320C192 304.7 192.6 289.8 193.7 275.3zM320 272C346.5 272 368 293.5 368 320C368 346.5 346.5 368 320 368C293.5 368 272 346.5 272 320C272 293.5 293.5 272 320 272zM352 320C352 302.3 337.7 288 320 288C302.3 288 288 302.3 288 320C288 337.7 302.3 352 320 352C337.7 352 352 337.7 352 320z",
+      fill: "currentColor"
+    })
+  });
+};
+
+// src/components/icons/js.tsx
+import { jsx as jsx137 } from "react/jsx-runtime";
+var JSIcon = (props) => {
+  return /* @__PURE__ */ jsx137("svg", {
     className: "svg-inline--fa fa-js-square fa-w-14",
     viewBox: "0 0 448 512",
     ...props,
-    children: /* @__PURE__ */ jsx136("path", {
+    children: /* @__PURE__ */ jsx137("path", {
       fill: "currentColor",
       d: "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"
     })
@@ -41839,13 +41922,13 @@ var JSIcon = (props) => {
 };
 
 // src/components/icons/music.tsx
-import { jsx as jsx137 } from "react/jsx-runtime";
+import { jsx as jsx138 } from "react/jsx-runtime";
 var MusicIcon = (props) => {
-  return /* @__PURE__ */ jsx137("svg", {
+  return /* @__PURE__ */ jsx138("svg", {
     ...props,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
-    children: /* @__PURE__ */ jsx137("path", {
+    children: /* @__PURE__ */ jsx138("path", {
       fill: "currentColor",
       d: "M499.1 6.3c8.1 6 12.9 15.6 12.9 25.7l0 72 0 264c0 44.2-43 80-96 80s-96-35.8-96-80s43-80 96-80c11.2 0 22 1.6 32 4.6L448 147 192 223.8 192 432c0 44.2-43 80-96 80s-96-35.8-96-80s43-80 96-80c11.2 0 22 1.6 32 4.6L128 200l0-72c0-14.1 9.3-26.6 22.8-30.7l320-96c9.7-2.9 20.2-1.1 28.3 5z"
     })
@@ -41853,7 +41936,7 @@ var MusicIcon = (props) => {
 };
 
 // src/components/icons/next.tsx
-import { jsx as jsx138, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx139, jsxs as jsxs56 } from "react/jsx-runtime";
 var NextIcon = ({ style: style4 }) => {
   return /* @__PURE__ */ jsxs56("svg", {
     fill: "none",
@@ -41861,7 +41944,7 @@ var NextIcon = ({ style: style4 }) => {
     style: style4,
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ jsx138("mask", {
+      /* @__PURE__ */ jsx139("mask", {
         height: "180",
         id: "mask0_292_250",
         maskUnits: "userSpaceOnUse",
@@ -41869,7 +41952,7 @@ var NextIcon = ({ style: style4 }) => {
         width: "180",
         x: "0",
         y: "0",
-        children: /* @__PURE__ */ jsx138("circle", {
+        children: /* @__PURE__ */ jsx139("circle", {
           cx: "90",
           cy: "90",
           fill: "currentcolor",
@@ -41879,17 +41962,17 @@ var NextIcon = ({ style: style4 }) => {
       /* @__PURE__ */ jsxs56("g", {
         mask: "url(#mask0_292_250)",
         children: [
-          /* @__PURE__ */ jsx138("circle", {
+          /* @__PURE__ */ jsx139("circle", {
             cx: "90",
             cy: "90",
             fill: "currentcolor",
             r: "90"
           }),
-          /* @__PURE__ */ jsx138("path", {
+          /* @__PURE__ */ jsx139("path", {
             d: "M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z",
             fill: "url(#paint0_linear_292_250)"
           }),
-          /* @__PURE__ */ jsx138("rect", {
+          /* @__PURE__ */ jsx139("rect", {
             fill: "url(#paint1_linear_292_250)",
             height: "72",
             width: "12",
@@ -41908,10 +41991,10 @@ var NextIcon = ({ style: style4 }) => {
             y1: "116.5",
             y2: "160.5",
             children: [
-              /* @__PURE__ */ jsx138("stop", {
+              /* @__PURE__ */ jsx139("stop", {
                 stopColor: "var(--background)"
               }),
-              /* @__PURE__ */ jsx138("stop", {
+              /* @__PURE__ */ jsx139("stop", {
                 offset: "1",
                 stopColor: "var(--background)",
                 stopOpacity: "0"
@@ -41926,10 +42009,10 @@ var NextIcon = ({ style: style4 }) => {
             y1: "54",
             y2: "106.875",
             children: [
-              /* @__PURE__ */ jsx138("stop", {
+              /* @__PURE__ */ jsx139("stop", {
                 stopColor: "var(--background)"
               }),
-              /* @__PURE__ */ jsx138("stop", {
+              /* @__PURE__ */ jsx139("stop", {
                 offset: "1",
                 stopColor: "var(--background)",
                 stopOpacity: "0"
@@ -41943,7 +42026,7 @@ var NextIcon = ({ style: style4 }) => {
 };
 
 // src/components/icons/overlay.tsx
-import { jsx as jsx139, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx140, jsxs as jsxs57 } from "react/jsx-runtime";
 var OverlayIcon = (props) => {
   return /* @__PURE__ */ jsxs57("svg", {
     viewBox: "0 0 576 512",
@@ -41951,11 +42034,11 @@ var OverlayIcon = (props) => {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [
-      /* @__PURE__ */ jsx139("path", {
+      /* @__PURE__ */ jsx140("path", {
         d: "M251.1 407.9C274.5 418.7 301.5 418.7 324.9 407.9V407.8L476.9 337.6L530.1 362.2C538.6 366.1 544 374.6 544 384C544 393.4 538.6 401.9 530.1 405.8L311.5 506.8C296.6 513.7 279.4 513.7 264.5 506.8L45.9 405.8C37.4 401.9 32 393.4 32 384C32 374.6 37.4 366.1 45.9 362.2L99.1 337.7L251.1 407.9Z",
         fill: "currentcolor"
       }),
-      /* @__PURE__ */ jsx139("path", {
+      /* @__PURE__ */ jsx140("path", {
         d: "M277.8 132.7L495.2 230.1C505.4 234.7 512 244.8 512 256C512 267.2 505.4 277.3 495.2 281.9L277.8 379.3C270.1 382.4 263.5 384 256 384C248.5 384 241 382.4 234.2 379.3L16.76 281.9C6.561 277.3 0.0003 267.2 0.0003 256C0.0003 244.8 6.561 234.7 16.76 230.1L234.2 132.7C241 129.6 248.5 128 256 128C263.5 128 270.1 129.6 277.8 132.7Z",
         stroke: "currentcolor",
         transform: "translate(32, -25)",
@@ -41966,13 +42049,13 @@ var OverlayIcon = (props) => {
 };
 
 // src/components/icons/prompt-to-video.tsx
-import { jsx as jsx140 } from "react/jsx-runtime";
+import { jsx as jsx141 } from "react/jsx-runtime";
 var PromptToVideoIcon = (props) => {
-  return /* @__PURE__ */ jsx140("svg", {
+  return /* @__PURE__ */ jsx141("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
     ...props,
-    children: /* @__PURE__ */ jsx140("path", {
+    children: /* @__PURE__ */ jsx141("path", {
       d: "M278.5 15.6C275 6.2 266 0 256 0s-19 6.2-22.5 15.6L174.2 174.2 15.6 233.5C6.2 237 0 246 0 256s6.2 19 15.6 22.5l158.6 59.4 59.4 158.6C237 505.8 246 512 256 512s19-6.2 22.5-15.6l59.4-158.6 158.6-59.4C505.8 275 512 266 512 256s-6.2-19-15.6-22.5L337.8 174.2 278.5 15.6z",
       fill: "currentColor"
     })
@@ -41980,23 +42063,23 @@ var PromptToVideoIcon = (props) => {
 };
 
 // src/components/icons/recorder.tsx
-import { jsx as jsx141, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx144, jsxs as jsxs58 } from "react/jsx-runtime";
 var Recorder = (props) => {
   return /* @__PURE__ */ jsxs58("svg", {
     viewBox: "0 0 700 700",
     ...props,
     children: [
-      /* @__PURE__ */ jsx141("path", {
+      /* @__PURE__ */ jsx144("path", {
         d: "M0 350C0 115.5 115.5 0 350 0C584.5 0 700 115.5 700 350C700 584.5 584.5 700 350 700C115.5 700 0 584.5 0 350Z",
         fill: "#F43B00",
         fillOpacity: "0.15"
       }),
-      /* @__PURE__ */ jsx141("path", {
+      /* @__PURE__ */ jsx144("path", {
         d: "M79.4595 344.324C79.4595 161.794 169.362 71.8915 351.892 71.8915C534.422 71.8915 624.324 161.794 624.324 344.324C624.324 526.854 534.422 616.756 351.892 616.756C169.362 616.756 79.4595 526.854 79.4595 344.324Z",
         fill: "#F43B00",
         fillOpacity: "0.3"
       }),
-      /* @__PURE__ */ jsx141("path", {
+      /* @__PURE__ */ jsx144("path", {
         d: "M155.135 343.378C155.135 212.185 219.752 147.567 350.946 147.567C482.139 147.567 546.756 212.185 546.756 343.378C546.756 474.571 482.139 539.189 350.946 539.189C219.752 539.189 155.135 474.571 155.135 343.378Z",
         fill: "#F43B00"
       })
@@ -42005,9 +42088,9 @@ var Recorder = (props) => {
 };
 
 // src/components/icons/remix.tsx
-import { jsx as jsx144, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx146, jsxs as jsxs59 } from "react/jsx-runtime";
 var ReactRouterIcon = (props) => {
-  return /* @__PURE__ */ jsx144("svg", {
+  return /* @__PURE__ */ jsx146("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "800px",
     height: "800px",
@@ -42017,11 +42100,11 @@ var ReactRouterIcon = (props) => {
     ...props,
     children: /* @__PURE__ */ jsxs59("g", {
       children: [
-        /* @__PURE__ */ jsx144("path", {
+        /* @__PURE__ */ jsx146("path", {
           d: "M78.0659341,92.5875806 C90.8837956,92.5875806 101.274726,82.1966508 101.274726,69.3787894 C101.274726,56.5609279 90.8837956,46.1699982 78.0659341,46.1699982 C65.2480726,46.1699982 54.8571429,56.5609279 54.8571429,69.3787894 C54.8571429,82.1966508 65.2480726,92.5875806 78.0659341,92.5875806 Z M23.2087913,139.005163 C36.0266526,139.005163 46.4175825,128.614233 46.4175825,115.796372 C46.4175825,102.97851 36.0266526,92.5875806 23.2087913,92.5875806 C10.3909298,92.5875806 0,102.97851 0,115.796372 C0,128.614233 10.3909298,139.005163 23.2087913,139.005163 Z M232.791209,139.005163 C245.60907,139.005163 256,128.614233 256,115.796372 C256,102.97851 245.60907,92.5875806 232.791209,92.5875806 C219.973347,92.5875806 209.582418,102.97851 209.582418,115.796372 C209.582418,128.614233 219.973347,139.005163 232.791209,139.005163 Z",
           fill: "currentcolor"
         }),
-        /* @__PURE__ */ jsx144("path", {
+        /* @__PURE__ */ jsx146("path", {
           d: "M156.565464,70.3568084 C155.823426,62.6028163 155.445577,56.1490255 149.505494,51.6131676 C141.982638,45.8687002 133.461166,49.5960243 122.964463,45.8072968 C112.650326,43.3121427 105,34.1545727 105,23.2394367 C105,10.4046502 115.577888,0 128.626373,0 C138.29063,0 146.599638,5.70747659 150.259573,13.8825477 C155.861013,24.5221258 152.220489,35.3500418 159.258242,40.8041273 C167.591489,47.2621895 178.826167,42.5329154 191.362109,48.6517412 C195.390112,50.5026944 198.799584,53.4384578 201.202056,57.0769224 C203.604528,60.7153869 205,65.0565524 205,69.7183101 C205,80.633446 197.349674,89.7910161 187.035538,92.2861702 C176.538834,96.0748977 168.017363,92.3475736 160.494506,98.092041 C152.03503,104.551712 156.563892,115.358642 149.669352,126.774447 C145.756163,134.291567 137.802119,139.43662 128.626373,139.43662 C115.577888,139.43662 105,129.03197 105,116.197184 C105,106.873668 110.581887,98.832521 118.637891,95.1306146 C131.173833,89.0117889 142.408511,93.7410629 150.741758,87.2830007 C155.549106,83.5574243 156.565464,77.8102648 156.565464,70.3568084 Z",
           fill: "currentcolor"
         })
@@ -42031,7 +42114,7 @@ var ReactRouterIcon = (props) => {
 };
 
 // src/components/icons/render-server.tsx
-import { jsx as jsx146, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx147, jsxs as jsxs60 } from "react/jsx-runtime";
 var RenderServerIcon = (props) => {
   return /* @__PURE__ */ jsxs60("svg", {
     ...props,
@@ -42043,14 +42126,14 @@ var RenderServerIcon = (props) => {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx146("rect", {
+      /* @__PURE__ */ jsx147("rect", {
         width: "18",
         height: "18",
         x: "3",
         y: "3",
         rx: "2"
       }),
-      /* @__PURE__ */ jsx146("path", {
+      /* @__PURE__ */ jsx147("path", {
         d: "m10 8 4 4-4 4"
       })
     ]
@@ -42058,13 +42141,13 @@ var RenderServerIcon = (props) => {
 };
 
 // src/components/icons/skia.tsx
-import { jsx as jsx147 } from "react/jsx-runtime";
+import { jsx as jsx148 } from "react/jsx-runtime";
 var SkiaIcon = (props) => {
-  return /* @__PURE__ */ jsx147("svg", {
+  return /* @__PURE__ */ jsx148("svg", {
     ...props,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 576 512",
-    children: /* @__PURE__ */ jsx147("path", {
+    children: /* @__PURE__ */ jsx148("path", {
       fill: "currentColor",
       d: "M288 400C288 461.9 237.9 512 176 512H32C14.33 512 0 497.7 0 480C0 462.3 14.33 448 32 448H36.81C54.44 448 66.4 429.1 64.59 411.6C64.2 407.8 64 403.9 64 400C64 338.1 114.1 288 176 288C178.8 288 181.5 288.1 184.3 288.3C184.1 285.7 183.1 282.1 183.1 280.3C183.1 244.6 201.1 210.1 229.1 189.1L474.3 12.25C499.7-6.279 534.9-3.526 557.2 18.74C579.4 41 582.2 76.16 563.7 101.6L386.1 345.1C365 374.9 331.4 392 295.7 392C293 392 290.3 391.9 287.7 391.7C287.9 394.5 287.1 397.2 287.1 400H288zM295.7 360C321.2 360 345.2 347.8 360.2 327.2L537.8 82.82C547.1 70.08 545.7 52.5 534.5 41.37C523.4 30.24 505.8 28.86 493.1 38.12L248.8 215.8C228.2 230.8 215.1 254.8 215.1 280.3C215.1 285.7 216.5 290.9 217.5 295.1L217.6 295.1C217.9 297.3 218.2 298.6 218.5 299.9L276.1 357.5C277.4 357.8 278.7 358.1 280 358.4L280 358.5C285.1 359.5 290.3 360 295.7 360L295.7 360zM253.5 380.1L195.9 322.5C194.5 322.2 193.2 321.8 191.9 321.6C186.7 320.5 181.4 320 176 320C131.8 320 96 355.8 96 400C96 402.8 96.14 405.6 96.43 408.3C98.15 425 93.42 441.9 83.96 455.1C74.31 468.5 58 480 36.81 480H176C220.2 480 256 444.2 256 400C256 394.6 255.5 389.3 254.4 384.1C254.2 382.8 253.9 381.5 253.5 380.1V380.1z"
     })
@@ -42072,13 +42155,13 @@ var SkiaIcon = (props) => {
 };
 
 // src/components/icons/stargazer.tsx
-import { jsx as jsx148 } from "react/jsx-runtime";
+import { jsx as jsx149 } from "react/jsx-runtime";
 var Stargazer = (props) => {
-  return /* @__PURE__ */ jsx148("svg", {
+  return /* @__PURE__ */ jsx149("svg", {
     height: "1em",
     viewBox: "0 0 512 512",
     ...props,
-    children: /* @__PURE__ */ jsx148("path", {
+    children: /* @__PURE__ */ jsx149("path", {
       fill: "currentcolor",
       d: "M325.8 152.3c1.3 4.6 5.5 7.7 10.2 7.7s8.9-3.1 10.2-7.7L360 104l48.3-13.8c4.6-1.3 7.7-5.5 7.7-10.2s-3.1-8.9-7.7-10.2L360 56 346.2 7.7C344.9 3.1 340.7 0 336 0s-8.9 3.1-10.2 7.7L312 56 263.7 69.8c-4.6 1.3-7.7 5.5-7.7 10.2s3.1 8.9 7.7 10.2L312 104l13.8 48.3zM115.7 346.2L75.5 307l55.5-8.1c15.6-2.3 29.2-12.1 36.1-26.3l24.8-50.3 24.8 50.3c7 14.2 20.5 24 36.1 26.3l55.5 8.1-40.2 39.2c-11.3 11-16.4 26.9-13.8 42.4l9.5 55.4-49.5-26.1c-14-7.4-30.7-7.4-44.7 0L120 444l9.5-55.4c2.7-15.6-2.5-31.4-13.8-42.4zm54.7-188.8l-46.3 94L20.5 266.5C.9 269.3-7 293.5 7.2 307.4l74.9 73.2L64.5 483.9c-3.4 19.6 17.2 34.6 34.8 25.3l92.6-48.8 92.6 48.8c17.6 9.3 38.2-5.7 34.8-25.3L301.6 380.6l74.9-73.2c14.2-13.9 6.4-38.1-13.3-40.9L259.7 251.4l-46.3-94c-8.8-17.9-34.3-17.9-43.1 0zm258.4 85.8l11 38.6c1 3.6 4.4 6.2 8.2 6.2s7.1-2.5 8.2-6.2l11-38.6 38.6-11c3.6-1 6.2-4.4 6.2-8.2s-2.5-7.1-6.2-8.2l-38.6-11-11-38.6c-1-3.6-4.4-6.2-8.2-6.2s-7.1 2.5-8.2 6.2l-11 38.6-38.6 11c-3.6 1-6.2 4.4-6.2 8.2s2.5 7.1 6.2 8.2l38.6 11z"
     })
@@ -42086,13 +42169,13 @@ var Stargazer = (props) => {
 };
 
 // src/components/icons/still.tsx
-import { jsx as jsx149 } from "react/jsx-runtime";
+import { jsx as jsx150 } from "react/jsx-runtime";
 var StillIcon = (props) => {
-  return /* @__PURE__ */ jsx149("svg", {
+  return /* @__PURE__ */ jsx150("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
     ...props,
-    children: /* @__PURE__ */ jsx149("path", {
+    children: /* @__PURE__ */ jsx150("path", {
       fill: "currentColor",
       d: "M324.9 157.8c-11.38-17.38-39.89-17.31-51.23-.0625L200.5 268.5L184.1 245.9C172.7 229.1 145.9 229.9 134.4 245.9l-64.52 89.16c-6.797 9.406-7.75 21.72-2.547 32C72.53 377.5 83.05 384 94.75 384h322.5c11.41 0 21.8-6.281 27.14-16.38c5.312-10 4.734-22.09-1.516-31.56L324.9 157.8zM95.8 352l62.39-87.38l29.91 41.34C191.2 310.2 196.4 313.2 201.4 312.6c5.25-.125 10.12-2.781 13.02-7.188l83.83-129.9L415 352H95.8zM447.1 32h-384C28.65 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM480 416c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h384c17.64 0 32 14.36 32 32V416zM144 192C170.5 192 192 170.5 192 144S170.5 96 144 96S96 117.5 96 144S117.5 192 144 192zM144 128c8.822 0 15.1 7.178 15.1 16S152.8 160 144 160S128 152.8 128 144S135.2 128 144 128z"
     })
@@ -42100,12 +42183,12 @@ var StillIcon = (props) => {
 };
 
 // src/components/icons/tiktok.tsx
-import { jsx as jsx150 } from "react/jsx-runtime";
+import { jsx as jsx151 } from "react/jsx-runtime";
 var TikTok = (props) => {
-  return /* @__PURE__ */ jsx150("svg", {
+  return /* @__PURE__ */ jsx151("svg", {
     ...props,
     viewBox: "0 0 448 512",
-    children: /* @__PURE__ */ jsx150("path", {
+    children: /* @__PURE__ */ jsx151("path", {
       fill: "currentcolor",
       d: "M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z"
     })
@@ -42113,14 +42196,14 @@ var TikTok = (props) => {
 };
 
 // src/components/icons/ts.tsx
-import { jsx as jsx151 } from "react/jsx-runtime";
+import { jsx as jsx154 } from "react/jsx-runtime";
 var TypeScriptIcon = (props) => {
-  return /* @__PURE__ */ jsx151("svg", {
+  return /* @__PURE__ */ jsx154("svg", {
     fill: "#000000",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     ...props,
-    children: /* @__PURE__ */ jsx151("path", {
+    children: /* @__PURE__ */ jsx154("path", {
       fill: "currentColor",
       d: "M3,5v14c0,1.105,0.895,2,2,2h14c1.105,0,2-0.895,2-2V5c0-1.105-0.895-2-2-2H5C3.895,3,3,3.895,3,5z M13.666,12.451h-2.118\tV19H9.841v-6.549H7.767V11h5.899V12.451z M13.998,18.626v-1.751c0,0,0.956,0.721,2.104,0.721c1.148,0,1.103-0.75,1.103-0.853\tc0-1.089-3.251-1.089-3.251-3.501c0-3.281,4.737-1.986,4.737-1.986l-0.059,1.559c0,0-0.794-0.53-1.692-0.53\tc-0.897,0-1.221,0.427-1.221,0.883c0,1.177,3.281,1.059,3.281,3.428C19,20.244,13.998,18.626,13.998,18.626z"
     })
@@ -42128,27 +42211,27 @@ var TypeScriptIcon = (props) => {
 };
 
 // src/components/icons/vercel.tsx
-import { jsx as jsx154 } from "react/jsx-runtime";
+import { jsx as jsx156 } from "react/jsx-runtime";
 var VercelIcon = ({ style: style4 }) => {
-  return /* @__PURE__ */ jsx154("svg", {
+  return /* @__PURE__ */ jsx156("svg", {
     fill: "currentcolor",
     viewBox: "0 0 76 65",
     style: style4,
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx154("path", {
+    children: /* @__PURE__ */ jsx156("path", {
       d: "M37.5274 0L75.0548 65H0L37.5274 0Z"
     })
   });
 };
 
 // src/components/icons/waveform.tsx
-import { jsx as jsx156 } from "react/jsx-runtime";
+import { jsx as jsx157 } from "react/jsx-runtime";
 var Waveform = (props) => {
-  return /* @__PURE__ */ jsx156("svg", {
+  return /* @__PURE__ */ jsx157("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 640 512",
     ...props,
-    children: /* @__PURE__ */ jsx156("path", {
+    children: /* @__PURE__ */ jsx157("path", {
       fill: "currentColor",
       d: "M224 96C215.2 96 208 103.2 208 111.1v288C208 408.8 215.2 416 223.1 416C232.8 416 240 408.8 240 400V111.1C240 103.2 232.8 96 224 96zM128 192C119.2 192 112 199.2 112 207.1V304C112 312.8 119.2 320 127.1 320S144 312.8 144 304V207.1C144 199.2 136.8 192 128 192zM32 224C23.2 224 16 231.2 16 239.1V272C16 280.8 23.2 288 31.1 288S48 280.8 48 272V239.1C48 231.2 40.8 224 32 224zM416 128C407.2 128 400 135.2 400 143.1v224C400 376.8 407.2 384 415.1 384S432 376.8 432 368V143.1C432 135.2 424.8 128 416 128zM608 224c-8.8 0-16 7.2-16 15.1V272C592 280.8 599.2 288 608 288s16-7.2 16-15.1V239.1C624 231.2 616.8 224 608 224zM512 64c-8.8 0-16 7.2-16 15.1V432C496 440.8 503.2 448 511.1 448C520.8 448 528 440.8 528 432V79.1C528 71.2 520.8 64 512 64zM320 0C311.2 0 304 7.2 304 15.1V496C304 504.8 311.2 512 319.1 512S336 504.8 336 496V15.1C336 7.2 328.8 0 320 0z"
     })
@@ -42156,17 +42239,17 @@ var Waveform = (props) => {
 };
 
 // src/components/homepage/IconForTemplate.tsx
-import { jsx as jsx157 } from "react/jsx-runtime";
+import { jsx as jsx158 } from "react/jsx-runtime";
 var IconForTemplate = ({ template, scale: scale4 = 1 }) => {
   if (template.cliId === "hello-world") {
-    return /* @__PURE__ */ jsx157(TypeScriptIcon, {
+    return /* @__PURE__ */ jsx158(TypeScriptIcon, {
       style: {
         height: scale4 * 48
       }
     });
   }
   if (template.cliId === "blank") {
-    return /* @__PURE__ */ jsx157(Blank, {
+    return /* @__PURE__ */ jsx158(Blank, {
       style: {
         height: scale4 * 36,
         overflow: "visible"
@@ -42174,101 +42257,106 @@ var IconForTemplate = ({ template, scale: scale4 = 1 }) => {
     });
   }
   if (template.cliId === "javascript") {
-    return /* @__PURE__ */ jsx157(JSIcon, {
+    return /* @__PURE__ */ jsx158(JSIcon, {
       style: {
         height: scale4 * 40
       }
     });
   }
   if (template.cliId === "three") {
-    return /* @__PURE__ */ jsx157(Cubes, {
+    return /* @__PURE__ */ jsx158(Cubes, {
       style: {
         height: scale4 * 36
       }
     });
   }
   if (template.cliId === "still") {
-    return /* @__PURE__ */ jsx157(StillIcon, {
+    return /* @__PURE__ */ jsx158(StillIcon, {
       style: {
         height: scale4 * 36
       }
     });
   }
   if (template.cliId === "audiogram") {
-    return /* @__PURE__ */ jsx157(Waveform, {
+    return /* @__PURE__ */ jsx158(Waveform, {
       style: {
         height: scale4 * 36
       }
     });
   }
   if (template.cliId === "skia") {
-    return /* @__PURE__ */ jsx157(SkiaIcon, {
+    return /* @__PURE__ */ jsx158(SkiaIcon, {
       style: {
         height: scale4 * 32
       }
     });
   }
   if (template.cliId === "music-visualization") {
-    return /* @__PURE__ */ jsx157(MusicIcon, {
+    return /* @__PURE__ */ jsx158(MusicIcon, {
       style: {
         height: scale4 * 32
       }
     });
   }
   if (template.cliId === "react-router") {
-    return /* @__PURE__ */ jsx157(ReactRouterIcon, {
+    return /* @__PURE__ */ jsx158(ReactRouterIcon, {
       style: {
         height: scale4 * 32
       }
     });
   }
   if (template.cliId === "overlay") {
-    return /* @__PURE__ */ jsx157(OverlayIcon, {
+    return /* @__PURE__ */ jsx158(OverlayIcon, {
       style: { height: scale4 * 42 }
     });
   }
   if (template.cliId === "render-server") {
-    return /* @__PURE__ */ jsx157(RenderServerIcon, {
+    return /* @__PURE__ */ jsx158(RenderServerIcon, {
+      style: { height: scale4 * 36 }
+    });
+  }
+  if (template.cliId === "electron") {
+    return /* @__PURE__ */ jsx158(ElectronIcon, {
       style: { height: scale4 * 36 }
     });
   }
   if (template.cliId === "recorder") {
-    return /* @__PURE__ */ jsx157(Recorder, {
+    return /* @__PURE__ */ jsx158(Recorder, {
       style: { height: scale4 * 36 }
     });
   }
   if (template.cliId === "next" || template.cliId === "next-no-tailwind" || template.cliId === "next-pages-dir") {
-    return /* @__PURE__ */ jsx157(NextIcon, {
+    return /* @__PURE__ */ jsx158(NextIcon, {
       style: { height: scale4 * 36 }
     });
   }
   if (template.cliId === "stargazer") {
-    return /* @__PURE__ */ jsx157(Stargazer, {
+    return /* @__PURE__ */ jsx158(Stargazer, {
       style: { height: scale4 * 36 }
     });
   }
   if (template.cliId === "tiktok") {
-    return /* @__PURE__ */ jsx157(TikTok, {
+    return /* @__PURE__ */ jsx158(TikTok, {
       style: { height: scale4 * 36 }
     });
   }
   if (template.cliId === "code-hike") {
-    return /* @__PURE__ */ jsx157(CodeHike, {
+    return /* @__PURE__ */ jsx158(CodeHike, {
       style: { height: scale4 * 36 }
     });
   }
   if (template.cliId === "prompt-to-video") {
-    return /* @__PURE__ */ jsx157(PromptToVideoIcon, {
+    return /* @__PURE__ */ jsx158(PromptToVideoIcon, {
       style: { height: scale4 * 36 }
     });
   }
   if (template.cliId === "prompt-to-motion-graphics") {
-    return /* @__PURE__ */ jsx157(BrainIcon, {
+    return /* @__PURE__ */ jsx158(BrainIcon, {
       style: { height: scale4 * 36 }
     });
   }
   if (template.cliId === "vercel") {
-    return /* @__PURE__ */ jsx157(VercelIcon, {
+    return /* @__PURE__ */ jsx158(VercelIcon, {
       style: { height: scale4 * 28 }
     });
   }
@@ -42282,7 +42370,7 @@ var useMobileLayout = () => {
 };
 
 // src/components/homepage/MoreTemplatesButton.tsx
-import { jsx as jsx158, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx159, jsxs as jsxs61 } from "react/jsx-runtime";
 var icon6 = {
   height: 16,
   marginLeft: 10
@@ -42294,11 +42382,11 @@ var MoreTemplatesButton = () => {
     className: "right-0 border-2 rounded-full text-inherit px-4 py-2 fontbrand font-semibold text-sm flex flex-row items-center h-10",
     children: [
       mobileLayout ? "Templates" : "Find a template",
-      /* @__PURE__ */ jsx158("svg", {
+      /* @__PURE__ */ jsx159("svg", {
         style: icon6,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 448 512",
-        children: /* @__PURE__ */ jsx158("path", {
+        children: /* @__PURE__ */ jsx159("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"
         })
@@ -42308,7 +42396,7 @@ var MoreTemplatesButton = () => {
 };
 
 // src/components/homepage/TemplateIcon.tsx
-import { jsx as jsx159, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx160, jsxs as jsxs63 } from "react/jsx-runtime";
 var icon7 = {
   display: "flex",
   width: 36,
@@ -42332,11 +42420,11 @@ var TemplateIcon = ({ children, label: label3 }) => {
   return /* @__PURE__ */ jsxs63("span", {
     style: outer,
     children: [
-      /* @__PURE__ */ jsx159("div", {
+      /* @__PURE__ */ jsx160("div", {
         style: icon7,
         children
       }),
-      mobileLayout ? null : /* @__PURE__ */ jsx159("div", {
+      mobileLayout ? null : /* @__PURE__ */ jsx160("div", {
         className: "text-xs fontbrand",
         children: label3
       })
@@ -42345,14 +42433,14 @@ var TemplateIcon = ({ children, label: label3 }) => {
 };
 
 // src/components/homepage/ChooseTemplate.tsx
-import { jsx as jsx160, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx161, jsxs as jsxs65 } from "react/jsx-runtime";
 var ChooseTemplate = () => {
-  return /* @__PURE__ */ jsx160("div", {
+  return /* @__PURE__ */ jsx161("div", {
     style: {
       display: "flex",
       flexDirection: "column"
     },
-    children: /* @__PURE__ */ jsx160("div", {
+    children: /* @__PURE__ */ jsx161("div", {
       style: {
         position: "relative",
         textAlign: "center"
@@ -42371,19 +42459,19 @@ var ChooseTemplate = () => {
         },
         children: [
           CreateVideoInternals.FEATURED_TEMPLATES.filter((f) => f.featuredOnHomePage).map((template) => {
-            return /* @__PURE__ */ jsx160("a", {
+            return /* @__PURE__ */ jsx161("a", {
               className: "text-inherit no-underline",
               href: `/templates/${template.cliId}`,
-              children: /* @__PURE__ */ jsx160(TemplateIcon, {
+              children: /* @__PURE__ */ jsx161(TemplateIcon, {
                 label: template.featuredOnHomePage,
-                children: /* @__PURE__ */ jsx160(IconForTemplate, {
+                children: /* @__PURE__ */ jsx161(IconForTemplate, {
                   scale: 0.7,
                   template
                 })
               })
             }, template.cliId);
           }),
-          /* @__PURE__ */ jsx160(MoreTemplatesButton, {})
+          /* @__PURE__ */ jsx161(MoreTemplatesButton, {})
         ]
       })
     })
@@ -42394,12 +42482,12 @@ var ChooseTemplate = () => {
 import { useState as useState65 } from "react";
 
 // src/components/homepage/GitHubButton.tsx
-import { jsx as jsx161, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx164, jsxs as jsxs66 } from "react/jsx-runtime";
 var GithubIcon = () => {
-  return /* @__PURE__ */ jsx161("svg", {
+  return /* @__PURE__ */ jsx164("svg", {
     viewBox: "0 0 496 512",
     style: { height: 24, marginRight: 8 },
-    children: /* @__PURE__ */ jsx161("path", {
+    children: /* @__PURE__ */ jsx164("path", {
       fill: "currentColor",
       d: "M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
     })
@@ -42409,13 +42497,13 @@ var GithubButton = () => {
   return /* @__PURE__ */ jsxs66("div", {
     className: "flex flex-row items-center text-base",
     children: [
-      /* @__PURE__ */ jsx161(GithubIcon, {}),
+      /* @__PURE__ */ jsx164(GithubIcon, {}),
       " ",
-      /* @__PURE__ */ jsx161("span", {
+      /* @__PURE__ */ jsx164("span", {
         children: "GitHub"
       }),
       " ",
-      /* @__PURE__ */ jsx161("div", {
+      /* @__PURE__ */ jsx164("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
         children: "39k"
       })
@@ -42424,18 +42512,18 @@ var GithubButton = () => {
 };
 
 // src/components/homepage/GetStartedStrip.tsx
-import { jsx as jsx164, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx166, jsxs as jsxs67 } from "react/jsx-runtime";
 var GetStarted = () => {
   const [clicked, setClicked] = useState65(null);
   return /* @__PURE__ */ jsxs67("div", {
     className: "flex flex-col lg:flex-row items-center justify-center text-center w-full",
     children: [
-      /* @__PURE__ */ jsx164("div", {
+      /* @__PURE__ */ jsx166("div", {
         className: "w-full lg:w-auto",
         children: /* @__PURE__ */ jsxs67("div", {
           className: "flex flex-row w-full relative",
           children: [
-            clicked ? /* @__PURE__ */ jsx164("div", {
+            clicked ? /* @__PURE__ */ jsx166("div", {
               style: {
                 animation: "click 0.7s linear",
                 animationFillMode: "forwards"
@@ -42443,7 +42531,7 @@ var GetStarted = () => {
               className: "absolute z-0 top-[-10px] font-mono text-sm text-center w-full",
               children: "Copied!"
             }, clicked) : null,
-            /* @__PURE__ */ jsx164(Button, {
+            /* @__PURE__ */ jsx166(Button, {
               className: "bg-[#333] text-white rounded-lg px-4 font-mono hover:[#444] cursor-pointer w-full",
               onClick: () => {
                 navigator.clipboard.writeText("npx create-video@latest");
@@ -42455,59 +42543,59 @@ var GetStarted = () => {
           ]
         })
       }),
-      /* @__PURE__ */ jsx164("div", {
+      /* @__PURE__ */ jsx166("div", {
         style: { width: 10, height: 10 }
       }),
-      /* @__PURE__ */ jsx164("div", {
+      /* @__PURE__ */ jsx166("div", {
         className: "w-full lg:w-auto",
-        children: /* @__PURE__ */ jsx164(Button, {
+        children: /* @__PURE__ */ jsx166(Button, {
           href: "/docs",
           className: "w-full",
           children: "Docs"
         })
       }),
-      /* @__PURE__ */ jsx164("div", {
+      /* @__PURE__ */ jsx166("div", {
         className: "w-2 h-2"
       }),
-      /* @__PURE__ */ jsx164("div", {
+      /* @__PURE__ */ jsx166("div", {
         className: "w-full lg:w-auto",
-        children: /* @__PURE__ */ jsx164(Button, {
+        children: /* @__PURE__ */ jsx166(Button, {
           href: "https://remotion.dev/discord",
           target: "_blank",
           className: "w-full",
           children: "Discord"
         })
       }),
-      /* @__PURE__ */ jsx164("div", {
+      /* @__PURE__ */ jsx166("div", {
         className: "w-2 h-2"
       }),
-      /* @__PURE__ */ jsx164("div", {
+      /* @__PURE__ */ jsx166("div", {
         className: "w-full lg:w-auto",
-        children: /* @__PURE__ */ jsx164(Button, {
+        children: /* @__PURE__ */ jsx166(Button, {
           href: "https://github.com/remotion-dev/remotion",
           target: "_blank",
           className: "w-full",
-          children: /* @__PURE__ */ jsx164(GithubButton, {})
+          children: /* @__PURE__ */ jsx166(GithubButton, {})
         })
       }),
       " ",
-      /* @__PURE__ */ jsx164("div", {
+      /* @__PURE__ */ jsx166("div", {
         className: "w-2 h-2"
       }),
-      /* @__PURE__ */ jsx164("div", {
+      /* @__PURE__ */ jsx166("div", {
         className: "w-full lg:w-auto",
         children: /* @__PURE__ */ jsxs67(Button, {
           href: "/prompts",
           className: "w-full",
           children: [
-            /* @__PURE__ */ jsx164("svg", {
+            /* @__PURE__ */ jsx166("svg", {
               width: "20",
               height: "20",
               viewBox: "0 0 149 149",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
               style: { marginRight: 8 },
-              children: /* @__PURE__ */ jsx164("path", {
+              children: /* @__PURE__ */ jsx166("path", {
                 d: "M29.05 98.54L58.19 82.19L58.68 80.77L58.19 79.98H56.77L51.9 79.68L35.25 79.23L20.81 78.63L6.82 77.88L3.3 77.13L0 72.78L0.340004 70.61L3.3 68.62L7.54 68.99L16.91 69.63L30.97 70.6L41.17 71.2L56.28 72.77H58.68L59.02 71.8L58.2 71.2L57.56 70.6L43.01 60.74L27.26 50.32L19.01 44.32L14.55 41.28L12.3 38.43L11.33 32.21L15.38 27.75L20.82 28.12L22.21 28.49L27.72 32.73L39.49 41.84L54.86 53.16L57.11 55.03L58.01 54.39L58.12 53.94L57.11 52.25L48.75 37.14L39.83 21.77L35.86 15.4L34.81 11.58C34.44 10.01 34.17 8.69 34.17 7.08L38.78 0.820007L41.33 0L47.48 0.820007L50.07 3.07001L53.89 11.81L60.08 25.57L69.68 44.28L72.49 49.83L73.99 54.97L74.55 56.54H75.52V55.64L76.31 45.1L77.77 32.16L79.19 15.51L79.68 10.82L82 5.2L86.61 2.16L90.21 3.88L93.17 8.12L92.76 10.86L91 22.3L87.55 40.22L85.3 52.22H86.61L88.11 50.72L94.18 42.66L104.38 29.91L108.88 24.85L114.13 19.26L117.5 16.6H123.87L128.56 23.57L126.46 30.77L119.9 39.09L114.46 46.14L106.66 56.64L101.79 65.04L102.24 65.71L103.4 65.6L121.02 61.85L130.54 60.13L141.9 58.18L147.04 60.58L147.6 63.02L145.58 68.01L133.43 71.01L119.18 73.86L97.96 78.88L97.7 79.07L98 79.44L107.56 80.34L111.65 80.56H121.66L140.3 81.95L145.17 85.17L148.09 89.11L147.6 92.11L140.1 95.93L129.98 93.53L106.36 87.91L98.26 85.89H97.14V86.56L103.89 93.16L116.26 104.33L131.75 118.73L132.54 122.29L130.55 125.1L128.45 124.8L114.84 114.56L109.59 109.95L97.7 99.94H96.91V100.99L99.65 105L114.12 126.75L114.87 133.42L113.82 135.59L110.07 136.9L105.95 136.15L97.48 124.26L88.74 110.87L81.69 98.87L80.83 99.36L76.67 144.17L74.72 146.46L70.22 148.18L66.47 145.33L64.48 140.72L66.47 131.61L68.87 119.72L70.82 110.27L72.58 98.53L73.63 94.63L73.56 94.37L72.7 94.48L63.85 106.63L50.39 124.82L39.74 136.22L37.19 137.23L32.77 134.94L33.18 130.85L35.65 127.21L50.39 108.46L59.28 96.84L65.02 90.13L64.98 89.16H64.64L25.49 114.58L18.52 115.48L15.52 112.67L15.89 108.06L17.31 106.56L29.08 98.46L29.04 98.5L29.05 98.54Z",
                 fill: "#D97757"
               })
@@ -42521,11 +42609,11 @@ var GetStarted = () => {
 };
 
 // src/components/homepage/WriteInReact.tsx
-import { jsx as jsx166, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx167, jsxs as jsxs68 } from "react/jsx-runtime";
 var WriteInReact = () => {
   return /* @__PURE__ */ jsxs68("div", {
     children: [
-      /* @__PURE__ */ jsx166("h1", {
+      /* @__PURE__ */ jsx167("h1", {
         className: "text-5xl lg:text-[5em] text-center fontbrand font-black leading-none ",
         style: {
           textShadow: "0 5px 30px var(--background)"
@@ -42539,81 +42627,81 @@ var WriteInReact = () => {
         className: "font-medium text-center text-lg",
         children: [
           "Create real MP4 videos with React. ",
-          /* @__PURE__ */ jsx166("br", {}),
+          /* @__PURE__ */ jsx167("br", {}),
           "Parametrize content, render server-side and build applications."
         ]
       }),
-      /* @__PURE__ */ jsx166("br", {}),
-      /* @__PURE__ */ jsx166("div", {
-        children: /* @__PURE__ */ jsx166(GetStarted, {})
+      /* @__PURE__ */ jsx167("br", {}),
+      /* @__PURE__ */ jsx167("div", {
+        children: /* @__PURE__ */ jsx167(GetStarted, {})
       }),
-      /* @__PURE__ */ jsx166("br", {}),
-      /* @__PURE__ */ jsx166("br", {}),
-      /* @__PURE__ */ jsx166(ChooseTemplate, {})
+      /* @__PURE__ */ jsx167("br", {}),
+      /* @__PURE__ */ jsx167("br", {}),
+      /* @__PURE__ */ jsx167(ChooseTemplate, {})
     ]
   });
 };
 
 // src/components/Homepage.tsx
-import { jsx as jsx167, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx168, jsxs as jsxs69 } from "react/jsx-runtime";
 "use client";
 var NewLanding = ({ colorMode, setColorMode }) => {
-  return /* @__PURE__ */ jsx167(ColorModeProvider, {
+  return /* @__PURE__ */ jsx168(ColorModeProvider, {
     colorMode,
     setColorMode,
-    children: /* @__PURE__ */ jsx167("div", {
+    children: /* @__PURE__ */ jsx168("div", {
       className: "w-full relative",
       children: /* @__PURE__ */ jsxs69("div", {
         style: { overflow: "hidden" },
         children: [
-          /* @__PURE__ */ jsx167("div", {
-            children: /* @__PURE__ */ jsx167(BackgroundAnimation, {})
+          /* @__PURE__ */ jsx168("div", {
+            children: /* @__PURE__ */ jsx168(BackgroundAnimation, {})
           }),
-          /* @__PURE__ */ jsx167("br", {}),
-          /* @__PURE__ */ jsx167("br", {}),
-          /* @__PURE__ */ jsx167("br", {}),
-          /* @__PURE__ */ jsx167("br", {}),
+          /* @__PURE__ */ jsx168("br", {}),
+          /* @__PURE__ */ jsx168("br", {}),
+          /* @__PURE__ */ jsx168("br", {}),
+          /* @__PURE__ */ jsx168("br", {}),
           /* @__PURE__ */ jsxs69("div", {
             className: "max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 overflow-x-clip md:overflow-x-visible relative",
             children: [
-              /* @__PURE__ */ jsx167(WriteInReact, {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167(IfYouKnowReact, {}),
-              /* @__PURE__ */ jsx167(ParameterizeAndEdit, {}),
-              /* @__PURE__ */ jsx167(RealMP4Videos, {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167(VideoAppsShowcase_default, {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167(Demo, {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167(SectionTitle, {
+              /* @__PURE__ */ jsx168(WriteInReact, {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168(IfYouKnowReact, {}),
+              /* @__PURE__ */ jsx168(ParameterizeAndEdit, {}),
+              /* @__PURE__ */ jsx168(RealMP4Videos, {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168(VideoAppsShowcase_default, {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168(Demo, {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168(SectionTitle, {
                 children: "Pricing"
               }),
-              /* @__PURE__ */ jsx167(Pricing, {}),
-              /* @__PURE__ */ jsx167(TrustedByBanner_default, {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167(EvaluateRemotion_default, {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167(CommunityStats_default, {}),
-              /* @__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", {}),
-              /* @__PURE__ */ jsx167("br", {}),
-              /* @__PURE__ */ jsx167("br", {})
+              /* @__PURE__ */ jsx168(Pricing, {}),
+              /* @__PURE__ */ jsx168(TrustedByBanner_default, {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168(EvaluateRemotion_default, {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168(CommunityStats_default, {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168(EditorStarterSection_default, {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168(NewsletterButton, {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168("br", {}),
+              /* @__PURE__ */ jsx168("br", {})
             ]
           })
         ]