@remotion/promo-pages 4.0.502 → 4.0.503

package/dist/components/Homepage.js

@@ -1,6 +1,5 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import AutomationsSection from './homepage/AutomationsSection';
 import { BackgroundAnimation } from './homepage/BackgroundAnimation';
 import CommunityStats from './homepage/CommunityStats';
 import { Demo } from './homepage/Demo';
@@ -20,5 +19,19 @@ export const NewLanding = ({ colorMode, setColorMode }) => {
     return (_jsx(ColorModeProvider, { colorMode: colorMode, setColorMode: setColorMode, children: _jsx("div", { className: "w-full relative", children: _jsxs("div", { style: { overflow: 'hidden' }, children: [_jsx("div", { children: _jsx(BackgroundAnimation, {}) }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsxs("div", { className: "max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 overflow-x-clip md:overflow-x-visible relative", children: [_jsx(WriteInReact, {}), _jsx("br", {}), _jsxs("div", { className: makeVideosRowClassName, children: [_jsx(MakeVideosAgentically, { videoSrc: "/img/homepage-assets-master.webm", fallbackVideoSrc: "/img/homepage-assets-master.mp4" }), _jsx(MakeVideosInteractively, {}), _jsx(MakeVideosProgrammatically, { links: [
                                             { label: 'API Docs', href: '/docs/api' },
                                             { label: 'Resources', href: '/docs/resources' },
-                                        ] })] }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("div", { className: "pt-6 md:pt-8", children: _jsx(AutomationsSection, {}) }), _jsx("br", {}), _jsx("br", {}), _jsx(Demo, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(BuiltWithRemotionShowcase, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(SectionTitle, { children: "Pricing" }), _jsx(Pricing, {}), _jsx(TrustedByBanner, {}), _jsx("br", {}), _jsx(EvaluateRemotionSection, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(CommunityStats, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(NewsletterButton, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {})] })] }) }) }));
+                                        ] })] }), _jsx("br", {}), _jsx("br", {}), _jsxs("div", { className: makeVideosRowClassName, children: [_jsx(MakeVideosProgrammatically, { title: "Design systems", description: "Create a library of animated assets for your organization.", videoSrc: "/img/design-systems.webm", fallbackVideoSrc: "/img/design-systems.mp4", links: [
+                                            { label: 'Motion design systems', href: '/design-systems' },
+                                        ] }), _jsx(MakeVideosAgentically, { title: "Batch rendering", description: "Render millions of videos on your own infrastructure.", links: [
+                                            {
+                                                label: 'Server-side rendering',
+                                                href: '/docs/compare-ssr',
+                                            },
+                                            {
+                                                label: 'Client-side rendering',
+                                                href: '/docs/client-side-rendering',
+                                            },
+                                        ] }), _jsx(MakeVideosInteractively, { title: "Applications", description: "Publish a simple tool or a complex video editor.", videoSrc: "/img/applications.webm", fallbackVideoSrc: "/img/applications.mp4", links: [
+                                            { label: 'Player', href: '/docs/player' },
+                                            { label: 'Editor Starter', href: '/editor-starter' },
+                                        ] })] }), _jsx(Demo, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(BuiltWithRemotionShowcase, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(SectionTitle, { children: "Pricing" }), _jsx(Pricing, {}), _jsx(TrustedByBanner, {}), _jsx("br", {}), _jsx(EvaluateRemotionSection, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(CommunityStats, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(NewsletterButton, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {})] })] }) }) }));
 };

package/dist/components/homepage/CanvasSectionTitle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const CanvasSectionTitle: React.FC<{
+    readonly children: string;
+}>;

package/dist/components/homepage/CanvasSectionTitle.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from 'react';
+export const CanvasSectionTitle = ({ children }) => {
+    const svgId = useId().replace(/:/g, '');
+    const glowFilterId = `title-glow-${svgId}`;
+    const glowClipId = `title-glow-clip-${svgId}`;
+    return (_jsxs(_Fragment, { children: [_jsxs("svg", { "aria-hidden": "true", className: "pointer-events-none absolute w-full overflow-visible h-20", focusable: "false", preserveAspectRatio: "none", viewBox: "0 0 1200 320", children: [_jsx("g", { clipPath: `url(#${glowClipId})`, filter: `url(#${glowFilterId})`, children: _jsx("ellipse", { cx: "600", cy: "320", fill: "rgba(0, 0, 0, 0.1)", rx: "400", ry: '100' }) }), _jsxs("defs", { children: [_jsx("filter", { id: glowFilterId, colorInterpolationFilters: "sRGB", filterUnits: "userSpaceOnUse", height: "1120", width: "2000", x: "-400", y: "-480", children: _jsx("feGaussianBlur", { stdDeviation: "140" }) }), _jsx("clipPath", { id: glowClipId, clipPathUnits: "userSpaceOnUse", children: _jsx("rect", { height: "320", width: "2000", x: "-400", y: "0" }) })] })] }), _jsx("div", { className: "relative h-24 w-full overflow-visible", children: _jsx("div", { className: "relative z-10 flex h-full items-end justify-center", children: _jsx("h2", { className: "m-0 text-center text-4xl leading-none text-black", style: {
+                            fontFamily: 'GTPlanarVF, GTPlanar, sans-serif',
+                            fontVariationSettings: "'slnt' 0, 'wght' 700",
+                            fontStyle: 'normal',
+                            fontWeight: 700,
+                            paddingBottom: 16,
+                        }, children: children }) }) })] }));
+};

package/dist/components/homepage/ChooseTemplate.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ChooseTemplate: React.FC;

package/dist/components/homepage/ChooseTemplate.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CreateVideoInternals } from 'create-video';
+import { IconForTemplate } from './IconForTemplate';
+import { MoreTemplatesButton } from './MoreTemplatesButton';
+import { TemplateIcon } from './TemplateIcon';
+export const ChooseTemplate = () => {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: _jsx("div", { style: {
+                position: 'relative',
+                textAlign: 'center',
+            }, children: _jsxs("div", { className: "no-scroll-bar", style: {
+                    display: 'inline-flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-around',
+                    borderRadius: 50,
+                    alignItems: 'center',
+                    padding: 8,
+                    width: '100%',
+                    maxWidth: '550px',
+                }, children: [CreateVideoInternals.FEATURED_TEMPLATES.filter((f) => f.featuredOnHomePage).map((template) => {
+                        return (_jsx("a", { className: "text-inherit no-underline", href: `/templates/${template.cliId}`, children: _jsx(TemplateIcon, { label: template.featuredOnHomePage, children: _jsx(IconForTemplate, { scale: 0.7, template: template }) }) }, template.cliId));
+                    }), _jsx(MoreTemplatesButton, {})] }) }) }));
+};

package/dist/components/homepage/CommunityStatsItems.js

@@ -30,7 +30,7 @@ export const PagesOfDocs = () => {
 };
 export const TemplatesAndExamples = () => (_jsxs(Pill, { className: "w-[30%] flex items-center flex-row", children: [_jsx(StatItemContent, { content: "35", width: "60px", fontSize: "2.7rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: "templates & examples", width: "135px", fontSize: "1.35rem", fontWeight: "bold" })] }));
 export const GitHubStars = () => {
-    return (_jsxs(Pill, { className: "w-[30%] flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 26 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.9951 0C13.4424 0 13.8507 0.24375 14.0451 0.632812L17.3799 7.25625L24.8271 8.31562C25.2646 8.37656 25.6292 8.67188 25.7653 9.07969C25.9014 9.4875 25.7896 9.92812 25.4785 10.2281L20.0778 15.3937L21.3514 22.6875C21.4243 23.1094 21.2444 23.5359 20.8799 23.7891C20.5153 24.0422 20.0389 24.0703 19.65 23.8688L12.9903 20.4375L6.34027 23.8641C5.94652 24.0656 5.47014 24.0375 5.11041 23.7844C4.75069 23.5312 4.56597 23.1047 4.63889 22.6828L5.9125 15.3891L0.511803 10.2281C0.195831 9.92812 0.0888863 9.48281 0.224997 9.07969C0.361108 8.67656 0.725692 8.38125 1.16319 8.31562L8.61041 7.25625L11.9451 0.632812C12.1444 0.24375 12.5479 0 12.9951 0ZM12.9951 3.70312L10.4431 8.775C10.2729 9.10781 9.94722 9.34219 9.56319 9.39844L3.8125 10.2141L7.98819 14.2031C8.25555 14.4609 8.38194 14.8266 8.31875 15.1875L7.33194 20.7984L12.4458 18.1641C12.791 17.9859 13.2042 17.9859 13.5444 18.1641L18.6583 20.7984L17.6764 15.1922C17.6132 14.8313 17.7347 14.4656 18.0069 14.2078L22.1826 10.2188L16.4319 9.39844C16.0528 9.34219 15.7222 9.1125 15.5521 8.775L12.9951 3.70312Z", fill: "var(--text-color)" }) }), width: "45px" }), _jsx(StatItemContent, { content: "53K", width: "80px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "GitHub stars", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));
+    return (_jsxs(Pill, { className: "w-[30%] flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 26 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.9951 0C13.4424 0 13.8507 0.24375 14.0451 0.632812L17.3799 7.25625L24.8271 8.31562C25.2646 8.37656 25.6292 8.67188 25.7653 9.07969C25.9014 9.4875 25.7896 9.92812 25.4785 10.2281L20.0778 15.3937L21.3514 22.6875C21.4243 23.1094 21.2444 23.5359 20.8799 23.7891C20.5153 24.0422 20.0389 24.0703 19.65 23.8688L12.9903 20.4375L6.34027 23.8641C5.94652 24.0656 5.47014 24.0375 5.11041 23.7844C4.75069 23.5312 4.56597 23.1047 4.63889 22.6828L5.9125 15.3891L0.511803 10.2281C0.195831 9.92812 0.0888863 9.48281 0.224997 9.07969C0.361108 8.67656 0.725692 8.38125 1.16319 8.31562L8.61041 7.25625L11.9451 0.632812C12.1444 0.24375 12.5479 0 12.9951 0ZM12.9951 3.70312L10.4431 8.775C10.2729 9.10781 9.94722 9.34219 9.56319 9.39844L3.8125 10.2141L7.98819 14.2031C8.25555 14.4609 8.38194 14.8266 8.31875 15.1875L7.33194 20.7984L12.4458 18.1641C12.791 17.9859 13.2042 17.9859 13.5444 18.1641L18.6583 20.7984L17.6764 15.1922C17.6132 14.8313 17.7347 14.4656 18.0069 14.2078L22.1826 10.2188L16.4319 9.39844C16.0528 9.34219 15.7222 9.1125 15.5521 8.775L12.9951 3.70312Z", fill: "var(--text-color)" }) }), width: "45px" }), _jsx(StatItemContent, { content: "54K", width: "80px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "GitHub stars", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));
 };
 export const DiscordMembers = () => {
     return (_jsx(Pill, { className: 'w-[30%]', children: _jsxs("div", { style: {

package/dist/components/homepage/Demo/index.js

@@ -83,7 +83,7 @@ export const Demo = () => {
     const onError = useCallback(() => {
         setError(true);
     }, []);
-    return (_jsxs("div", { id: "demo", children: [_jsx("br", {}), _jsx("br", {}), _jsx(SectionTitle, { children: "Interactive demo" }), _jsxs("div", { className: "max-w-[760px] mx-auto", children: [_jsxs("div", { className: "h-[105px] relative", children: [_jsx(DragAndDropNudge, {}), _jsx(ThemeNudge, {})] }), _jsxs("div", { style: playerWrapper, children: [_jsx(Player, { ref: ref, component: HomepageVideoComp, compositionWidth: 640, compositionHeight: 360, durationInFrames: 120, fps: 30, autoPlay: true, controls: isFullscreen, clickToPlay: false, style: style, initiallyMuted: true, inputProps: props, acknowledgeRemotionLicense: true, numberOfSharedAudioTags: 0, loop: true }), _jsx(PlayerControls, { playerRef: ref, durationInFrames: 120, fps: 30, children: _jsx(RenderButton, { onError: onError, renderData: data
+    return (_jsxs("div", { id: "demo", className: "pt-24", children: [_jsx(SectionTitle, { children: "Interactive demo" }), _jsxs("div", { className: "max-w-[760px] mx-auto", children: [_jsxs("div", { className: "h-[105px] relative", children: [_jsx(DragAndDropNudge, {}), _jsx(ThemeNudge, {})] }), _jsxs("div", { style: playerWrapper, children: [_jsx(Player, { ref: ref, component: HomepageVideoComp, compositionWidth: 640, compositionHeight: 360, durationInFrames: 120, fps: 30, autoPlay: true, controls: isFullscreen, clickToPlay: false, style: style, initiallyMuted: true, inputProps: props, acknowledgeRemotionLicense: true, numberOfSharedAudioTags: 0, loop: true }), _jsx(PlayerControls, { playerRef: ref, durationInFrames: 120, fps: 30, children: _jsx(RenderButton, { onError: onError, renderData: data
                                         ? {
                                             cardOrder,
                                             emojiIndex,

package/dist/components/homepage/EditorStarterSection.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const EditorStarterSection: React.FC;
+export default EditorStarterSection;

package/dist/components/homepage/EditorStarterSection.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BlueButton, ClearButton } from './layout/Button';
+import { MuxVideo } from './MuxVideo';
+import { SectionTitle } from './VideoAppsTitle';
+const EditorStarterSection = () => {
+    return (_jsxs("div", { children: [_jsx(SectionTitle, { children: "Build your own video editor" }), _jsx("br", {}), _jsx("div", { className: 'card flex p-0 overflow-hidden', children: _jsxs("div", { className: 'flex-1 flex flex-col lg:flex-row justify-center', children: [_jsx("div", { className: 'w-full max-w-[500px] aspect-square relative overflow-hidden bg-[#eee]', children: _jsx(MuxVideo, { muxId: 'YIvIidbcAc7009B00Wr7gIbGyq67YGNlytGvMXwdsLRtc', className: 'absolute left-0 top-0 w-full h-full object-cover object-top rounded-sm rounded-tr-none rounded-br-none', loop: true, autoPlay: true, playsInline: true, muted: true }) }), _jsxs("div", { className: 'p-6 flex-1 flex flex-col h-full', children: [_jsx("div", { className: "text-4xl font-bold fontbrand mt-0", children: "Editor Starter" }), _jsx("div", { className: "text-muted mt-4 text-base fontbrand", children: "A comprehensive template that includes everything you need to create custom video editing applications with React and TypeScript." }), _jsx("div", { className: "h-5" }), _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("a", { href: "https://www.remotion.pro/editor-starter?ref=remotion.dev", target: "_blank", className: "no-underline", children: _jsx(BlueButton, { size: "sm", loading: false, children: "Purchase" }) }), _jsx("a", { href: "https://editor-starter.remotion.dev?ref=remotion.dev", target: "_blank", className: "no-underline", children: _jsx(ClearButton, { size: "sm", loading: false, children: "Demo" }) }), ' ', _jsx("a", { href: "https://remotion.dev/editor-starter", className: "no-underline", children: _jsx(ClearButton, { size: "sm", loading: false, children: "Docs" }) })] }), _jsx("br", {})] })] }) })] }));
+};
+export default EditorStarterSection;

package/dist/components/homepage/FreePricing.js

@@ -10,7 +10,7 @@ const Title = ({ children }) => {
     return (_jsx("div", { className: "text-4xl font-bold leading-none fontbrand mt-2 mb-5", children: children }));
 };
 const Audience = ({ children }) => {
-    return _jsx("div", { className: 'fontbrand text-lg leading-none', children: children });
+    return _jsx("div", { className: 'fontbrand text-lg leading-snug', children: children });
 };
 const BottomInfo = ({ children, className, ...props }) => {
     return (_jsx("div", { className: cn(className, 'text-[var(--subtitle)] fontbrand text-sm'), ...props, children: children }));
@@ -64,7 +64,7 @@ const textUnitWrapper = {
     flexDirection: 'column',
 };
 export const FreePricing = () => {
-    return (_jsxs(Container, { children: [_jsx(Audience, { children: "For individuals and companies of up to 3 people" }), _jsx(Title, { children: "Free License" }), _jsx(PricingBulletPoint, { text: "Create and automate", checked: true }), _jsx(PricingBulletPoint, { text: "Commercial use allowed", checked: true }), _jsx(PricingBulletPoint, { text: "Unlimited use", checked: true }), _jsx(PricingBulletPoint, { text: "Must upgrade when your team grows", checked: false }), _jsx("div", { className: 'flex flex-row justify-end mt-4', children: _jsx("div", { style: {
+    return (_jsxs(Container, { children: [_jsx(Audience, { children: "For individuals and companies of up to 3 people" }), _jsx(Title, { children: "Free License" }), _jsx(PricingBulletPoint, { text: "Create and automate", checked: true }), _jsx(PricingBulletPoint, { text: "All features included", checked: true }), _jsx(PricingBulletPoint, { text: "Unlimited commercial use", checked: true }), _jsx(PricingBulletPoint, { text: "Must upgrade when your team grows", checked: false }), _jsx("div", { className: 'flex flex-row justify-end mt-4', children: _jsx("div", { style: {
                         ...textUnitWrapper,
                         alignItems: 'flex-end',
                     }, children: _jsxs("a", { target: "_blank", href: "https://www.remotion.dev/docs", className: "font-brand text-brand flex flex-row items-center gap-1 no-underline", children: ["No sign up needed - get started", ' ', _jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("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" }) })] }) }) })] }));

package/dist/components/homepage/GitHubButton.js

@@ -3,5 +3,5 @@ const GithubIcon = () => {
     return (_jsx("svg", { viewBox: "0 0 496 512", style: { height: 24, marginRight: 8 }, children: _jsx("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" }) }));
 };
 export const GithubButton = () => {
-    return (_jsxs("div", { className: "flex flex-row items-center text-base", children: [_jsx(GithubIcon, {}), " ", _jsx("span", { children: "GitHub" }), ' ', _jsx("div", { className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center", children: '53k' })] }));
+    return (_jsxs("div", { className: "flex flex-row items-center text-base", children: [_jsx(GithubIcon, {}), " ", _jsx("span", { children: "GitHub" }), ' ', _jsx("div", { className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center", children: '54k' })] }));
 };

package/dist/components/homepage/MakeVideosAgentically.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { MakeVideosLinks } from './MakeVideosLinks';
+import { useTransparentVideoSource } from './use-transparent-video-source';
 export const MakeVideosAgentically = ({ title = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[var(--subtitle)]", children: "Make videos" }), _jsx("br", {}), " agentically"] })), description = 'Turn your idea into a video using your coding agent.', showLinks = true, links = [
     { label: 'Agent Skills', href: '/docs/ai/skills' },
     { label: 'Prompts', href: '/prompts' },
 ], showVideo = true, videoSrc = '/img/render-progress.webm', fallbackVideoSrc = '/img/render-progress.mp4', }) => {
     const ref = useRef(null);
     const videoRef = useRef(null);
+    const src = useTransparentVideoSource({ fallbackVideoSrc, videoSrc });
     useEffect(() => {
         const { current } = ref;
         if (!current) {
@@ -25,11 +27,11 @@ export const MakeVideosAgentically = ({ title = (_jsxs(_Fragment, { children: [_
         observer.observe(current);
         return () => observer.unobserve(current);
     }, []);
-    return (_jsxs("div", { ref: ref, className: 'flex min-w-0 basis-0 flex-col flex-1', children: [_jsx("div", { className: "flex aspect-square w-full items-start", children: showVideo ? (_jsxs("video", { ref: videoRef, muted: true, autoPlay: true, playsInline: true, loop: true, preload: "metadata", style: {
+    return (_jsxs("div", { ref: ref, className: 'flex min-w-0 basis-0 flex-col flex-1', children: [_jsx("div", { className: "flex aspect-square w-full items-start", children: showVideo && src ? (_jsx("video", { ref: videoRef, src: src, muted: true, autoPlay: true, playsInline: true, loop: true, preload: "metadata", style: {
                         width: 400,
                         maxWidth: '100%',
                         maxHeight: '100%',
                         borderRadius: 7,
                         overflow: 'hidden',
-                    }, className: "cursor-default! relative object-contain", children: [_jsx("source", { src: fallbackVideoSrc, type: "video/mp4" }), _jsx("source", { src: videoSrc, type: "video/webm" })] })) : null }), _jsxs("div", { className: "font-brand", children: [_jsx("h2", { className: "text-2xl fontbrand leading-[1.1] font-medium", children: title }), _jsx("p", { className: "leading-relaxed", children: description }), showLinks ? _jsx(MakeVideosLinks, { links: links }) : null] })] }));
+                    }, className: "cursor-default! relative object-contain" })) : null }), _jsxs("div", { className: "font-brand", children: [_jsx("h2", { className: "text-2xl fontbrand leading-[1.1] font-medium", children: title }), _jsx("p", { className: "leading-relaxed", children: description }), showLinks ? _jsx(MakeVideosLinks, { links: links }) : null] })] }));
 };

package/dist/components/homepage/MakeVideosInteractively.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { MakeVideosLinks } from './MakeVideosLinks';
+import { useTransparentVideoSource } from './use-transparent-video-source';
 export const MakeVideosInteractively = ({ title = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[var(--subtitle)]", children: "Make videos" }), _jsx("br", {}), " interactively"] })), description = 'Edit and animate using drag and drop and save back to code.', showLinks = true, links = [{ label: 'Remotion Studio', href: '/docs/studio' }], showVideo = true, videoSrc = '/img/editing-vp9-chrome.webm', fallbackVideoSrc = '/img/editing-safari.mp4', }) => {
     const ref = useRef(null);
-    return (_jsxs("div", { ref: ref, className: 'flex min-w-0 basis-0 flex-col justify-start items-start lg:mt-0 flex-1', children: [_jsx("div", { className: "flex aspect-square w-full items-start", children: showVideo ? (_jsxs("video", { autoPlay: true, muted: true, playsInline: true, loop: true, preload: "metadata", style: {
+    const src = useTransparentVideoSource({ fallbackVideoSrc, videoSrc });
+    return (_jsxs("div", { ref: ref, className: 'flex min-w-0 basis-0 flex-col justify-start items-start lg:mt-0 flex-1', children: [_jsx("div", { className: "flex aspect-square w-full items-start", children: showVideo && src ? (_jsx("video", { src: src, autoPlay: true, muted: true, playsInline: true, loop: true, preload: "metadata", style: {
                         width: 500,
                         maxWidth: '100%',
                         maxHeight: '100%',
                         borderRadius: 7,
                         overflow: 'hidden',
-                    }, className: "object-contain", children: [_jsx("source", { src: fallbackVideoSrc, type: "video/mp4" }), _jsx("source", { src: videoSrc, type: "video/webm" })] })) : null }), _jsxs("div", { className: "font-brand", children: [_jsx("h2", { className: "text-2xl fontbrand leading-[1.1] font-medium", children: title }), _jsx("p", { className: "leading-relaxed", children: description }), showLinks ? _jsx(MakeVideosLinks, { links: links }) : null] })] }));
+                    }, className: "object-contain" })) : null }), _jsxs("div", { className: "font-brand", children: [_jsx("h2", { className: "text-2xl fontbrand leading-[1.1] font-medium", children: title }), _jsx("p", { className: "leading-relaxed", children: description }), showLinks ? _jsx(MakeVideosLinks, { links: links }) : null] })] }));
 };

package/dist/components/homepage/MakeVideosProgrammatically.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MakeVideosLinks } from './MakeVideosLinks';
+import { useTransparentVideoSource } from './use-transparent-video-source';
 export const MakeVideosProgrammatically = ({ title = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[var(--subtitle)]", children: "Make videos" }), _jsx("br", {}), " programmatically"] })), description = 'Connect data and manage complexity with code.', showLinks = true, links = [], showVideo = true, videoSrc = '/img/what-is-remotion.webm', fallbackVideoSrc = '/img/what-is-remotion.mp4', }) => {
-    return (_jsxs("div", { className: 'flex min-w-0 basis-0 flex-col flex-1', children: [_jsx("div", { className: "flex aspect-square w-full items-start", children: showVideo ? (_jsxs("video", { muted: true, autoPlay: true, playsInline: true, loop: true, preload: "metadata", className: "relative max-h-full max-w-full cursor-default! object-contain lg:mb-0 lg:mt-0", children: [_jsx("source", { src: fallbackVideoSrc, type: "video/mp4" }), _jsx("source", { src: videoSrc, type: "video/webm" })] })) : null }), _jsxs("div", { className: "font-brand", children: [_jsx("h2", { className: "text-2xl fontbrand leading-[1.1] font-medium", children: title }), _jsx("p", { className: "leading-relaxed", children: description }), showLinks ? _jsx(MakeVideosLinks, { links: links }) : null] })] }));
+    const src = useTransparentVideoSource({ fallbackVideoSrc, videoSrc });
+    return (_jsxs("div", { className: 'flex min-w-0 basis-0 flex-col flex-1', children: [_jsx("div", { className: "flex aspect-square w-full items-start", children: showVideo && src ? (_jsx("video", { src: src, muted: true, autoPlay: true, playsInline: true, loop: true, preload: "metadata", className: "relative max-h-full max-w-full cursor-default! object-contain lg:mb-0 lg:mt-0" })) : null }), _jsxs("div", { className: "font-brand", children: [_jsx("h2", { className: "text-2xl fontbrand leading-[1.1] font-medium", children: title }), _jsx("p", { className: "leading-relaxed", children: description }), showLinks ? _jsx(MakeVideosLinks, { links: links }) : null] })] }));
 };

package/dist/components/homepage/MoreTemplatesButton.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MoreTemplatesButton: React.FC;

package/dist/components/homepage/MoreTemplatesButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@remotion/design';
+import { useMobileLayout } from './layout/use-mobile-layout';
+const icon = {
+    height: 16,
+    marginLeft: 10,
+};
+export const MoreTemplatesButton = () => {
+    const mobileLayout = useMobileLayout();
+    return (_jsxs(Button, { href: "/templates", 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', _jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("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" }) })] }));
+};

package/dist/components/homepage/PricingBulletPoint.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const container = {
     display: 'flex',
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     gap: '10px',
 };
 const greyCircle = {
@@ -10,10 +10,13 @@ const greyCircle = {
     height: 20,
     borderRadius: 10,
     backgroundColor: 'var(--footer-border)',
+    flexShrink: 0,
+    marginTop: 4,
 };
 export const PricingBulletPoint = ({ text, checked, children }) => {
     const checkmarkSVG = (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
             flexShrink: 0,
+            marginTop: 4,
         }, children: [_jsx("circle", { cx: "10", cy: "10", r: "10", fill: "#0B84F3" }), _jsx("path", { d: "M14.7908 7.20505C15.0697 7.47844 15.0697 7.92243 14.7908 8.19583L9.07711 13.795C8.79813 14.0683 8.34505 14.0683 8.06606 13.795L5.20924 10.9954C4.93025 10.722 4.93025 10.278 5.20924 10.0046C5.48823 9.73121 5.9413 9.73121 6.22029 10.0046L8.5727 12.3077L13.7819 7.20505C14.0609 6.93165 14.514 6.93165 14.793 7.20505H14.7908Z", fill: "white" })] }));
     return (_jsxs("div", { style: container, children: [checked ? checkmarkSVG : _jsx("div", { style: greyCircle }), _jsxs("div", { className: 'fontbrand text-lg	', children: [text, children] })] }));
 };

package/dist/components/homepage/use-transparent-video-source.d.ts

@@ -0,0 +1,4 @@
+export declare const useTransparentVideoSource: ({ fallbackVideoSrc, videoSrc, }: {
+    readonly fallbackVideoSrc: string;
+    readonly videoSrc: string;
+}) => string | null;

package/dist/components/homepage/use-transparent-video-source.js

@@ -0,0 +1,9 @@
+import { useEffect, useState } from 'react';
+import { isWebkit } from './IfYouKnowReact';
+export const useTransparentVideoSource = ({ fallbackVideoSrc, videoSrc, }) => {
+    const [src, setSrc] = useState(null);
+    useEffect(() => {
+        setSrc(isWebkit() ? fallbackVideoSrc : videoSrc);
+    }, [fallbackVideoSrc, videoSrc]);
+    return src;
+};