@remotion/promo-pages 4.0.314 → 4.0.317

package/dist/components/Homepage.js

@@ -3,18 +3,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BackgroundAnimation } from './homepage/BackgroundAnimation';
 import CommunityStats from './homepage/CommunityStats';
 import { Demo } from './homepage/Demo';
-import { LightningFastEditor } from './homepage/Editor';
 import EvaluateRemotionSection from './homepage/EvaluateRemotion';
 import { IfYouKnowReact } from './homepage/IfYouKnowReact';
 import { ColorModeProvider } from './homepage/layout/use-color-mode';
+import { MoreVideoPowerSection } from './homepage/MoreVideoPowerSection';
 import { NewsletterButton } from './homepage/NewsletterButton';
+import { ParameterizeAndEdit } from './homepage/ParameterizeAndEdit';
 import { Pricing } from './homepage/Pricing';
 import { RealMP4Videos } from './homepage/RealMp4Videos';
 import TrustedByBanner from './homepage/TrustedByBanner';
-import { VideoApps } from './homepage/VideoApps';
 import VideoAppsShowcase from './homepage/VideoAppsShowcase';
-import { SectionTitle, VideoAppsTitle } from './homepage/VideoAppsTitle';
+import { SectionTitle } from './homepage/VideoAppsTitle';
 import { WriteInReact } from './homepage/WriteInReact';
 export const NewLanding = ({ colorMode, setColorMode }) => {
-    return (_jsx(ColorModeProvider, { colorMode: colorMode, setColorMode: setColorMode, children: _jsx("div", { className: "bg-[var(--background)] 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", {}), _jsx(IfYouKnowReact, {}), _jsx(RealMP4Videos, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(LightningFastEditor, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(VideoAppsTitle, {}), _jsx(VideoApps, { active: "remotion" }), _jsx("br", {}), _jsx("br", {}), _jsx(VideoAppsShowcase, {}), _jsx("br", {}), _jsx("br", {}), _jsx(Demo, {}), _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(NewsletterButton, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {})] })] }) }) }));
+    return (_jsx(ColorModeProvider, { colorMode: colorMode, setColorMode: setColorMode, children: _jsx("div", { className: "bg-[var(--background)] 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", {}), _jsx(IfYouKnowReact, {}), _jsx(ParameterizeAndEdit, {}), _jsx(RealMP4Videos, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(VideoAppsShowcase, {}), _jsx("br", {}), _jsx("br", {}), _jsx(Demo, {}), _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(SectionTitle, { children: "Even more power to developers" }), _jsx("div", { className: 'fontbrand text-center mb-10 -mt-4', children: "Innovative video products that you might enjoy." }), _jsx(MoreVideoPowerSection, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(NewsletterButton, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {})] })] }) }) }));
 };

package/dist/components/homepage/BackgroundAnimation.js

@@ -44,7 +44,7 @@ export const BackgroundAnimation = () => {
         _style.innerHTML = css;
         document.head.appendChild(_style);
     }, [css]);
-    return (_jsx("div", { className: " w-full h-full left-[50%] ml-[-50%] min-w-0 lg:m-auto lg:relative lg:min-w-[700px] lg:max-w-[1200px] lg:ml-auto lg:left-auto pointer-events-none", children: _jsxs("svg", { className: "translate-y-[-30%] lg:translate-y-[-50%]", viewBox: "0 0 1 1", style: {
+    return (_jsx("div", { className: " w-full h-full min-w-0 m-auto lg:relative lg:min-w-[700px] lg:max-w-[1200px] lg:ml-auto lg:left-auto pointer-events-none", children: _jsxs("svg", { className: "translate-y-[-30%] lg:translate-y-[-50%]", viewBox: "0 0 1 1", style: {
                 width: '100%',
                 position: 'absolute',
             }, children: [_jsx("path", { d: d, fill: "none", stroke: "var(--ifm-color-primary)", strokeLinecap: "round", className: "stroke-[0.04] lg:stroke-[0.035]", style: {

package/dist/components/homepage/CommunityStats.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Contributors, DiscordMembers, GitHubStars, InstallsPerMonth, PagesOfDocs, TemplatesAndExamples, } from './CommunityStatsItems';
 import { SectionTitle } from './VideoAppsTitle';
 const SectionLink = ({ href, children }) => (_jsx("a", { target: "_blank", href: href, className: 'no-underline text-inherit contents', children: children }));
-const CommunityStats = () => (_jsxs("div", { className: 'm-auto max-w-[700px] text-center', children: [_jsx(SectionTitle, { children: "Never build alone" }), _jsx("div", { className: 'fontbrand text-center mb-10', children: "Join a thriving community of developers." }), _jsxs("div", { className: 'flex flex-wrap justify-between gap-4 w-full items-center', children: [_jsx(SectionLink, { href: "https://www.npmjs.com/package/remotion", children: _jsx(InstallsPerMonth, {}) }), _jsx(SectionLink, { href: "https://www.remotion.dev/docs/", children: _jsx(PagesOfDocs, {}) }), _jsx(SectionLink, { href: "https://www.remotion.dev/templates", children: _jsx(TemplatesAndExamples, {}) }), _jsx(SectionLink, { href: "https://github.com/remotion-dev/remotion", children: _jsx(GitHubStars, {}) }), _jsx(SectionLink, { href: "https://remotion.dev/discord", children: _jsx(DiscordMembers, {}) }), _jsx(SectionLink, { href: "https://github.com/remotion-dev/remotion/graphs/contributors", children: _jsx(Contributors, {}) })] })] }));
+const CommunityStats = () => (_jsxs("div", { className: 'm-auto max-w-[700px] text-center', children: [_jsx(SectionTitle, { children: "Never build alone" }), _jsx("div", { className: 'fontbrand text-center mb-10 -mt-4', children: "Join a thriving community of developers." }), _jsxs("div", { className: 'flex flex-wrap justify-between gap-4 w-full items-center', children: [_jsx(SectionLink, { href: "https://www.npmjs.com/package/remotion", children: _jsx(InstallsPerMonth, {}) }), _jsx(SectionLink, { href: "https://www.remotion.dev/docs/", children: _jsx(PagesOfDocs, {}) }), _jsx(SectionLink, { href: "https://www.remotion.dev/templates", children: _jsx(TemplatesAndExamples, {}) }), _jsx(SectionLink, { href: "https://github.com/remotion-dev/remotion", children: _jsx(GitHubStars, {}) }), _jsx(SectionLink, { href: "https://remotion.dev/discord", children: _jsx(DiscordMembers, {}) }), _jsx(SectionLink, { href: "https://github.com/remotion-dev/remotion/graphs/contributors", children: _jsx(Contributors, {}) })] })] }));
 export default CommunityStats;

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: "21k", 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: "22k", 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/Counter.d.ts

@@ -3,6 +3,7 @@ interface CounterProps {
     readonly count: number;
     readonly setCount: (count: number) => void;
     readonly minCount?: number;
+    readonly step?: number;
 }
 export declare const Counter: React.FC<CounterProps>;
 export {};

package/dist/components/homepage/Counter.js

@@ -23,22 +23,30 @@ const buttonContainer = {
     backgroundColor: 'inherit',
     cursor: 'pointer',
 };
-export const Counter = ({ count, setCount, minCount = 0, }) => {
+export const Counter = ({ count, setCount, minCount = 0, step = 1, }) => {
     const decrement = () => {
         if (count > minCount) {
-            setCount(count - 1);
+            setCount(Math.max(minCount, count - step));
         }
     };
     const increment = () => {
-        setCount(count + 1);
+        setCount(count + step);
     };
-    return (_jsxs("div", { style: container, className: cn('border-effect w-[110px] text-text'), children: [_jsx("input", { className: 'fontbrand text-2xl font-medium min-w-[60px] border-0 text-end bg-transparent outline-0 text-text', type: "number", onClick: (e) => e.currentTarget.select(), value: count, onChange: (e) => {
+    return (_jsxs("div", { style: container, className: cn('border-effect w-[140px] text-text'), children: [_jsx("input", { className: 'fontbrand text-2xl font-medium min-w-[80px] border-0 text-end bg-transparent outline-0 text-text', type: "number", onClick: (e) => e.currentTarget.select(), value: count, onChange: (e) => {
                     if (e.target.value.trim() === '') {
-                        setCount(1);
+                        setCount(step === 1 ? 1 : minCount);
                         return;
                     }
-                    const max = Math.max(parseInt(e.target.value, 10), 1);
-                    setCount(max);
+                    const inputValue = parseInt(e.target.value, 10);
+                    const validValue = Math.max(inputValue, minCount);
+                    // For steps > 1, round to the nearest valid step
+                    if (step > 1) {
+                        const roundedValue = Math.round(validValue / step) * step;
+                        setCount(Math.max(roundedValue, minCount));
+                    }
+                    else {
+                        setCount(validValue);
+                    }
                 } }), _jsxs("div", { className: "flex flex-col ml-3 h-full", children: [_jsx("button", { type: "button", className: "border-0 border-l-2 border-l-solid border-b-2 flex-1 border-text", style: {
                             ...buttonContainer,
                         }, onClick: increment, children: _jsx(Triangle, { rotated: false }) }), _jsx("button", { type: "button", className: "border-0 border-l-2 border-l-solid flex-1 border-text", style: {

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Lottie, getLottieMetadata } from '@remotion/lottie';
 import { useEffect, useMemo, useState } from 'react';
 import { cancelRender, continueRender, delayRender, useVideoConfig, } from 'remotion';
 export const DisplayedEmoji = ({ emoji }) => {
     const [data, setData] = useState(null);
     const { durationInFrames, fps } = useVideoConfig();
+    const [browser, setBrowser] = useState(typeof document !== 'undefined');
     const src = useMemo(() => {
         if (emoji === 'melting') {
             return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json';
@@ -19,8 +19,14 @@ export const DisplayedEmoji = ({ emoji }) => {
     }, [emoji]);
     const [handle] = useState(() => delayRender());
     useEffect(() => {
-        Promise.all([fetch(src).then((res) => res.json())])
-            .then(([json]) => {
+        Promise.all([
+            fetch(src).then((res) => res.json()),
+            import('@remotion/lottie').then(({ Lottie, getLottieMetadata }) => ({
+                Lottie,
+                getLottieMetadata,
+            })),
+        ])
+            .then(([json, { Lottie, getLottieMetadata }]) => {
             var _a;
             setData({
                 Lottie,
@@ -33,6 +39,14 @@ export const DisplayedEmoji = ({ emoji }) => {
             cancelRender(err);
         });
     }, [handle, src]);
+    useEffect(() => {
+        if (typeof document !== 'undefined') {
+            setBrowser(true);
+        }
+    }, []);
+    if (!browser) {
+        return null;
+    }
     if (!data) {
         return null;
     }

package/dist/components/homepage/FreePricing.js

@@ -20,7 +20,7 @@ const PriceTag = ({ children }) => {
     return (_jsx("div", { className: 'fontbrand text-2xl font-bold min-w-[80px] w-auto text-right shrink-0 ml-4', children: children }));
 };
 const SmallPriceTag = ({ children }) => {
-    return (_jsx("div", { className: 'fontbrand text-2xl font-medium  w-auto min-w-[80px] text-right shrink-0 ml-4', children: children }));
+    return (_jsx("div", { className: 'fontbrand text-2xl font-medium  w-auto min-w-[80px] text-right shrink-0', children: children }));
 };
 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: "Unlimited videos", checked: true }), _jsx(PricingBulletPoint, { text: "Commercial use allowed", checked: true }), _jsx(PricingBulletPoint, { text: "Self-hosted cloud rendering allowed", checked: true }), _jsx(PricingBulletPoint, { text: "Must upgrade when your team grows", checked: false })] }));
@@ -38,10 +38,14 @@ export const EnterpriseLicense = () => {
 const SEAT_PRICE = 25;
 const RENDER_UNIT_PRICE = 10;
 const WEBCODECS_UNIT_PRICE = 10;
+const icon = {
+    height: 16,
+    marginLeft: 4,
+};
 export const CompanyPricing = () => {
     const [devSeatCount, setDevSeatCount] = React.useState(1);
-    const [cloudUnitCount, setCloudUnitCount] = React.useState(1);
-    const [webcodecsUnits, setWebcodecsUnits] = React.useState(1);
+    const [cloudRenders, setCloudRenders] = React.useState(1000);
+    const [creations, setCreations] = React.useState(1000);
     const formatPrice = useCallback((price) => {
         const formatter = new Intl.NumberFormat('en-US', {
             style: 'currency',
@@ -52,29 +56,20 @@ export const CompanyPricing = () => {
     }, []);
     const totalPrice = useMemo(() => {
         return Math.max(100, devSeatCount * SEAT_PRICE +
-            cloudUnitCount * RENDER_UNIT_PRICE +
-            webcodecsUnits * WEBCODECS_UNIT_PRICE);
-    }, [cloudUnitCount, devSeatCount, webcodecsUnits]);
+            (cloudRenders / 1000) * RENDER_UNIT_PRICE +
+            (creations / 1000) * WEBCODECS_UNIT_PRICE);
+    }, [cloudRenders, devSeatCount, creations]);
     const totalPriceString = useMemo(() => {
         return formatPrice(totalPrice);
     }, [formatPrice, totalPrice]);
-    const rendersPerMonth = useMemo(() => {
-        const formatter = new Intl.NumberFormat('en-US', {
-            maximumFractionDigits: 0,
-        });
-        return formatter.format(cloudUnitCount * 1000);
-    }, [cloudUnitCount]);
-    const conversionsPerMonth = useMemo(() => {
-        const formatter = new Intl.NumberFormat('en-US', {
-            maximumFractionDigits: 0,
-        });
-        return formatter.format(webcodecsUnits * 1000);
-    }, [webcodecsUnits]);
-    return (_jsxs(Container, { children: [_jsx(Audience, { children: "For collaborations and companies of 4+ people" }), _jsx(Title, { children: "Company License" }), _jsx(PricingBulletPoint, { text: "Commercial use allowed", checked: true }), _jsx(PricingBulletPoint, { text: "Self-hosted cloud rendering allowed", checked: true }), _jsx(PricingBulletPoint, { text: "Prioritized Support", checked: true }), _jsx(PricingBulletPoint, { text: "$250 Mux credits", checked: true, children: _jsx(InfoTooltip, { text: "Credits for Mux.com. Applies only to new Mux customers." }) }), _jsx("div", { style: { height: 30 } }), _jsxs("div", { className: 'flex flex-row items-center', children: [_jsxs("div", { style: textUnitWrapper, children: [_jsx("div", { className: 'fontbrand font-bold text-lg', children: "Developer Seats" }), _jsx("div", { className: 'text-muted fontbrand text-sm', children: "Number of developers working with Remotion" })] }), _jsx("div", { style: { flex: 3 } }), _jsx(Counter, { count: devSeatCount, setCount: setDevSeatCount, minCount: 1 }), _jsxs(SmallPriceTag, { children: ["$", new Intl.NumberFormat('en-US', {
-                                maximumFractionDigits: 0,
-                            }).format(SEAT_PRICE * devSeatCount)] })] }), _jsx("div", { style: { height: 14 } }), _jsxs("div", { className: 'flex flex-row items-center', children: [_jsxs("div", { style: textUnitWrapper, children: [_jsx("div", { className: 'fontbrand font-bold text-lg', children: "Cloud Rendering Units" }), _jsxs("div", { className: 'text-muted fontbrand text-sm', children: ["Allows for ", rendersPerMonth, ' ', _jsx("a", { href: "https://www.remotion.dev/docs/compare-ssr", className: "underline underline-offset-4 text-inherit", children: "self-hosted renders per month" }), ' ', "each"] })] }), _jsx("div", { style: { flex: 3 } }), _jsx(Counter, { count: cloudUnitCount, setCount: setCloudUnitCount, minCount: 0 }), _jsxs(SmallPriceTag, { children: ["$", new Intl.NumberFormat('en-US', {
-                                maximumFractionDigits: 0,
-                            }).format(RENDER_UNIT_PRICE * cloudUnitCount)] })] }), _jsx("div", { style: { height: 14 } }), _jsxs("div", { className: 'flex flex-row items-center', children: [_jsxs("div", { style: textUnitWrapper, children: [_jsx("div", { className: 'fontbrand font-bold text-lg', children: "WebCodecs Conversion Units" }), _jsxs("div", { className: 'text-muted fontbrand text-sm', children: ["Allows for", ' ', _jsxs("a", { className: "underline underline-offset-4 text-inherit", href: "https://remotion.dev/webcodecs", children: [conversionsPerMonth, " client-side video conversions", ' '] })] })] }), _jsx("div", { style: { flex: 3 } }), _jsx(Counter, { count: webcodecsUnits, setCount: setWebcodecsUnits, minCount: 0 }), _jsxs(SmallPriceTag, { children: ["$", new Intl.NumberFormat('en-US', {
-                                maximumFractionDigits: 0,
-                            }).format(RENDER_UNIT_PRICE * webcodecsUnits)] })] }), _jsx("div", { style: { height: 20 } }), _jsx("div", { className: 'flex flex-row justify-end', children: _jsxs("div", { style: { ...textUnitWrapper, alignItems: 'flex-end' }, children: [_jsxs(PriceTag, { children: [totalPriceString, "/mo"] }), _jsx(BottomInfo, { "data-visible": totalPrice <= 100, className: "opacity-0 data-[visible=true]:opacity-100 transition-opacity", children: "The minimum is $100 per month" })] }) })] }));
+    return (_jsxs(Container, { children: [_jsx(Audience, { children: "For collaborations and companies of 4+ people" }), _jsx(Title, { children: "Company License" }), _jsx(PricingBulletPoint, { text: "Commercial use allowed", checked: true }), _jsx(PricingBulletPoint, { text: "Self-hosted cloud rendering allowed", checked: true }), _jsx(PricingBulletPoint, { text: "Prioritized Support", checked: true }), _jsx(PricingBulletPoint, { text: "$250 Mux credits", checked: true, children: _jsx(InfoTooltip, { text: "Credits for Mux.com. Applies only to new Mux customers." }) }), _jsx("div", { style: { height: 30 } }), _jsxs("div", { className: 'flex flex-col md:flex-row md:items-center', children: [_jsxs("div", { style: textUnitWrapper, children: [_jsx("div", { className: 'fontbrand font-bold text-lg', children: "Developer Seats" }), _jsx("div", { className: 'text-muted fontbrand text-sm', children: "Number of developers working with Remotion" })] }), _jsx("div", { style: { flex: 3 }, className: "hidden md:block" }), _jsxs("div", { className: "flex flex-row items-center justify-between mt-3 md:mt-0", children: [_jsx(Counter, { count: devSeatCount, setCount: setDevSeatCount, minCount: 1 }), _jsxs(SmallPriceTag, { children: ["$", new Intl.NumberFormat('en-US', {
+                                        maximumFractionDigits: 0,
+                                    }).format(SEAT_PRICE * devSeatCount)] })] })] }), _jsx("div", { style: { height: 14 } }), _jsxs("div", { className: 'flex flex-col md:flex-row md:items-center', children: [_jsxs("div", { style: textUnitWrapper, children: [_jsx("div", { className: 'fontbrand font-bold text-lg', children: "Server renders" }), _jsx("div", { className: 'text-muted fontbrand text-sm', children: _jsx("a", { href: "https://www.remotion.dev/docs/compare-ssr", className: "underline underline-offset-4 text-inherit", children: "Renders per month (self-hosted)" }) })] }), _jsx("div", { style: { flex: 3 }, className: "hidden md:block" }), _jsxs("div", { className: "flex flex-row items-center justify-between mt-3 md:mt-0", children: [_jsx(Counter, { count: cloudRenders, setCount: setCloudRenders, minCount: 0, step: 1000 }), _jsxs(SmallPriceTag, { children: ["$", new Intl.NumberFormat('en-US', {
+                                        maximumFractionDigits: 0,
+                                    }).format((cloudRenders / 1000) * RENDER_UNIT_PRICE)] })] })] }), _jsx("div", { style: { height: 14 } }), _jsxs("div", { className: 'flex flex-col md:flex-row md:items-center', children: [_jsxs("div", { style: textUnitWrapper, children: [_jsx("div", { className: 'fontbrand font-bold text-lg', children: "WebCodecs video creations" }), _jsx("div", { className: 'text-muted fontbrand text-sm', children: _jsx("a", { className: "underline underline-offset-4 text-inherit", href: "https://remotion.dev/webcodecs", children: "Client-side video creations per month" }) })] }), _jsx("div", { style: { flex: 3 }, className: "hidden md:block" }), _jsxs("div", { className: "flex flex-row items-center justify-between mt-3 md:mt-0", children: [_jsx(Counter, { count: creations, setCount: setCreations, minCount: 0, step: 1000 }), _jsxs(SmallPriceTag, { children: ["$", new Intl.NumberFormat('en-US', {
+                                        maximumFractionDigits: 0,
+                                    }).format((creations / 1000) * WEBCODECS_UNIT_PRICE)] })] })] }), _jsx("div", { style: { height: 20 } }), _jsx("div", { className: 'flex flex-row justify-end', children: _jsxs("div", { style: { ...textUnitWrapper, alignItems: 'flex-end' }, children: [_jsxs(PriceTag, { children: [totalPriceString, "/mo"] }), _jsx(BottomInfo, { "data-visible": totalPrice <= 100, className: "opacity-0 data-[visible=true]:opacity-100 transition-opacity", children: "The minimum is $100 per month" })] }) }), _jsx("div", { className: 'flex flex-row justify-end mt-4', children: _jsx("div", { style: {
+                        ...textUnitWrapper,
+                        alignItems: 'flex-end',
+                    }, children: _jsxs("a", { href: "https://remotion.pro/dashboard", className: "font-brand text-brand flex flex-row items-center gap-1 no-underline", children: ["Buy now", ' ', _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: '21k' })] }));
+    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: '22k' })] }));
 };

package/dist/components/homepage/IconForTemplate.js

@@ -6,6 +6,7 @@ import { JSIcon } from '../icons/js';
 import { MusicIcon } from '../icons/music';
 import { NextIcon } from '../icons/next';
 import { OverlayIcon } from '../icons/overlay';
+import { Recorder } from '../icons/recorder';
 import { ReactRouterIcon } from '../icons/remix';
 import { SkiaIcon } from '../icons/skia';
 import { Stargazer } from '../icons/stargazer';
@@ -74,6 +75,9 @@ export const IconForTemplate = ({ template, scale = 1 }) => {
     if (template.cliId === 'overlay') {
         return _jsx(OverlayIcon, { style: { height: scale * 42 } });
     }
+    if (template.cliId === 'recorder') {
+        return _jsx(Recorder, { style: { height: scale * 36 } });
+    }
     if (template.cliId === 'next' ||
         template.cliId === 'next-tailwind' ||
         template.cliId === 'next-pages-dir') {

package/dist/components/homepage/IfYouKnowReact.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { BlueButton } from './layout/Button';
 export const isWebkit = () => {
     if (typeof window === 'undefined') {
         return false;
@@ -9,6 +8,10 @@ export const isWebkit = () => {
     const isChrome = Boolean(navigator.userAgent.match(/CriOS\//));
     return isSafariUserAgent || isChrome;
 };
+const icon = {
+    height: 16,
+    marginLeft: 10,
+};
 export const IfYouKnowReact = () => {
     const [vid, setVid] = useState('/img/compose.webm');
     useEffect(() => {
@@ -16,5 +19,5 @@ export const IfYouKnowReact = () => {
             setVid('/img/compose.mp4');
         }
     }, []);
-    return (_jsxs("div", { className: "flex flex-col lg:flex-row text-left lg:text-right justify-start lg:justify-end items-start lg:mb-0", children: [_jsx("video", { src: vid, muted: true, autoPlay: true, playsInline: true, loop: true, className: "w-[600px] h-[600px] cursor-default! relative lg:-translate-x-8 -mb-50 -mt-10 lg:mt-0 lg:mb-0" }), _jsx("div", { className: "h-10 lg:flex-1" }), _jsxs("div", { className: "lg:text-right", children: [_jsxs("h2", { className: "text-4xl fontbrand pt-20", children: [_jsx("span", { className: "text-brand", children: "Compose" }), " your", _jsx("br", {}), "video with code."] }), _jsx("p", { className: "leading-relaxed", children: "Use React, a powerful frontend technology, to create sophisticated videos with code." }), _jsx("div", { className: "h-7" }), _jsx("a", { className: "no-underline inline-block", href: "/docs/the-fundamentals", children: _jsx(BlueButton, { size: "sm", loading: false, children: "Learn Remotion" }) })] })] }));
+    return (_jsxs("div", { className: "flex flex-col lg:flex-row text-left justify-start lg:justify-end items-start lg:mb-0 gap-6 mt-8", children: [_jsx("video", { src: vid, muted: true, autoPlay: true, playsInline: true, loop: true, className: "w-[500px] cursor-default! relative lg:-translate-x-8 -mb-40 lg:mt-0 lg:mb-0" }), _jsxs("div", { children: [_jsxs("h2", { className: "text-4xl fontbrand pt-20", children: [_jsx("span", { className: "text-brand", children: "Compose" }), " with code"] }), _jsx("p", { className: "leading-relaxed font-brand", children: "Use React, a powerful frontend technology, to create sophisticated videos with code." }), _jsx("div", { className: "h-4" }), _jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: "/docs/the-fundamentals", children: ["Learn Remotion", ' ', _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/MoreVideoPowerSection.d.ts

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

package/dist/components/homepage/MoreVideoPowerSection.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StepTitle = ({ children }) => {
+    return (_jsx("div", { className: "text-left text-xl font-semibold fontbrand", children: children }));
+};
+const Subtitle = ({ children }) => {
+    return (_jsx("div", { className: "text-left text-base fontbrand text-[var(--subtitle)]", children: children }));
+};
+const Pane = ({ children, className }) => {
+    return (_jsx("div", { className: `border-effect bg-pane flex-1 flex flex-col ${className || ''}`, children: children }));
+};
+const FeatureCard = ({ title, subtitle, image, link }) => {
+    return (_jsxs("a", { href: link, className: "group lg:border-r-2 border-b lg:border-b-0 border-[var(--border)] cursor-pointer hover:bg-[var(--hover)] transition-colors no-underline text-inherit", children: [_jsx("div", { className: "relative", children: _jsx("img", { src: image, alt: title, className: "w-full h-auto" }) }), _jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(StepTitle, { children: title }), _jsx("svg", { width: "16", viewBox: "0 0 448 512", fill: "currentColor", className: "opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx("path", { d: "M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" }) })] }), _jsx(Subtitle, { children: subtitle }), _jsx("br", {}), _jsx("div", { className: "flex-1" })] })] }));
+};
+export const MoreVideoPowerSection = () => {
+    return (_jsx("div", { className: "w-full", children: _jsx(Pane, { className: "overflow-hidden", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 h-full", children: [_jsx(FeatureCard, { title: "Media Parser", subtitle: "A new multimedia library for the web", image: "/img/media-parser.png", link: "/media-parser" }), _jsx(FeatureCard, { title: "WebCodecs", subtitle: "Read, process, transform and create videos on the frontend", image: "/img/webcodecs.png", link: "/webcodecs" }), _jsx(FeatureCard, { title: "Recorder", subtitle: "Produce engaging screencasts end-to-end in JavaScript", image: "/img/recorder.png", link: "/recorder" })] }) }) }));
+};

package/dist/components/homepage/NewsletterButton.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import { BlueButton } from './layout/Button';
 import { Spacer } from './Spacer';
+import { SectionTitle } from './VideoAppsTitle';
 export const NewsletterButton = () => {
     const [email, setEmail] = useState('');
     const [submitting, setSubmitting] = useState(false);
@@ -32,7 +33,7 @@ export const NewsletterButton = () => {
             alert('Something went wrong. Please try again later.');
         }
     }, [email]);
-    return (_jsx("div", { children: _jsx("div", { className: "flex flex-col", children: _jsx("div", { className: 'w-full', children: _jsxs("div", { className: 'border-effect bg-pane flex flex-col flex-1 p-5', children: [_jsx("div", { className: 'text-2xl font-bold fontbrand', children: "Newsletter" }), _jsxs("form", { onSubmit: handleSubmit, style: {
+    return (_jsx("div", { children: _jsx("div", { className: "flex flex-col", children: _jsx("div", { className: 'w-full', children: _jsxs("div", { className: 'flex flex-col flex-1', children: [_jsx(SectionTitle, { children: "Newsletter" }), _jsxs("form", { onSubmit: handleSubmit, style: {
                                 width: '100%',
-                            }, children: [_jsx("p", { className: "leading-snug mt-1 text-muted fontbrand", children: "Read about new features and noteworthy updates we have made on Remotion once in a while." }), _jsx("input", { className: "w-full dark:bg-[#121212] rounded-lg border-effect border-black outline-none px-3 py-3 fontbrand text-lg box-border focus:border-brand", disabled: submitting, value: email, onChange: (e) => setEmail(e.target.value), type: 'email', required: true, placeholder: "animator@gmail.com" }), _jsx(Spacer, {}), _jsx(Spacer, {}), _jsx("div", { children: _jsx(BlueButton, { type: "submit", className: "w-full", loading: submitting, disabled: submitting || subscribed, size: "sm", children: subscribed ? 'Subscribed!' : 'Subscribe' }) })] })] }) }) }) }));
+                            }, children: [_jsxs("div", { className: 'fontbrand text-center mb-10 -mt-4', children: ["Read about new features and noteworthy updates we have made on Remotion once in a while.", ' '] }), _jsx("input", { className: "w-full dark:bg-[#121212] rounded-lg border-effect border-black outline-none px-3 py-3 fontbrand text-lg box-border focus:border-brand", disabled: submitting, value: email, onChange: (e) => setEmail(e.target.value), type: 'email', required: true, placeholder: "animator@gmail.com" }), _jsx(Spacer, {}), _jsx(Spacer, {}), _jsx("div", { children: _jsx(BlueButton, { type: "submit", className: "w-full", loading: submitting, disabled: submitting || subscribed, size: "sm", children: subscribed ? 'Subscribed!' : 'Subscribe' }) })] })] }) }) }) }));
 };

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

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

package/dist/components/homepage/ParameterizeAndEdit.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { isWebkit } from './IfYouKnowReact';
+const icon = {
+    height: 16,
+    marginLeft: 10,
+};
+export const ParameterizeAndEdit = () => {
+    const ref = useRef(null);
+    const [vid, setVid] = useState('/img/editing-vp9-chrome.webm');
+    useEffect(() => {
+        if (isWebkit()) {
+            setVid('/img/editing-safari.mp4');
+        }
+    }, []);
+    return (_jsxs("div", { ref: ref, className: 'flex flex-col lg:flex-row justify-start lg:justify-end items-start gap-6 mt-20 lg:mt-0', children: [_jsx("div", { children: _jsx("video", { src: vid, autoPlay: true, muted: true, playsInline: true, loop: true, style: {
+                        width: 500,
+                        maxWidth: '100%',
+                        borderRadius: 7,
+                        overflow: 'hidden',
+                    } }) }), _jsxs("div", { style: { flex: 1 }, className: "font-brand pt-4", children: [_jsxs("h2", { className: 'fontbrand text-4xl', children: ["Edit ", _jsx("span", { className: "text-brand", children: "dynamically" })] }), _jsxs("p", { className: "leading-relaxed", children: ["Parameterize your video by passing data.", _jsx("br", {}), "Or embed it into your app and build an interface around it."] }), _jsx("div", { className: "h-4" }), _jsxs("div", { className: "leading-6", children: [_jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: "/docs/studio", children: ["Remotion Studio", ' ', _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" }) })] }), _jsx("br", {}), _jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: "/player", children: ["Remotion Player", ' ', _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/RealMp4Videos.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { isWebkit } from './IfYouKnowReact';
+const icon = {
+    height: 16,
+    marginLeft: 10,
+};
 export const RealMP4Videos = () => {
     const ref = useRef(null);
     const videoRef = useRef(null);
@@ -28,5 +32,10 @@ export const RealMP4Videos = () => {
         observer.observe(current);
         return () => observer.unobserve(current);
     }, []);
-    return (_jsxs("div", { ref: ref, className: 'flex flex-col lg:flex-row-reverse items-center mt-20 lg:mt-0', children: [_jsx("div", { className: "flex flex-1 justify-start lg:justify-end items-end", children: _jsx("video", { ref: videoRef, src: vid, muted: true, autoPlay: true, playsInline: true, loop: true, style: {}, className: "w-[550px] h-[550px] cursor-default! relative lg:translate-x-8 -mt-20 -mb-20 lg:mt-0 lg:mb-0" }) }), ' ', _jsxs("div", { children: [_jsxs("h2", { className: "text-4xl fontbrand", children: ["Real ", _jsx("span", { className: 'text-brand', children: ".mp4" }), " videos"] }), _jsxs("p", { className: "leading-relaxed", children: ["Remotion renders all frames to images and ", _jsx("br", {}), " encodes them to a real video - audio support included. ", _jsx("br", {}), " WebM and other formats are also supported."] })] })] }));
+    return (_jsxs("div", { ref: ref, className: 'flex flex-col lg:flex-row mt-40 lg:mt-30 gap-6', children: [_jsx("div", { className: "flex w-[500px] justify-start lg:justify-start items-end", children: _jsx("video", { ref: videoRef, src: vid, muted: true, autoPlay: true, playsInline: true, loop: true, style: {
+                        width: 400,
+                        maxWidth: '100%',
+                        borderRadius: 7,
+                        overflow: 'hidden',
+                    }, className: "w-[550px] cursor-default! relative lg:translate-x-8 -mt-20 lg:mt-0" }) }), ' ', _jsxs("div", { className: "font-brand", children: [_jsxs("h2", { className: "text-4xl fontbrand", children: [_jsx("span", { className: 'text-brand', children: "Scalable" }), " rendering"] }), _jsxs("p", { className: "leading-relaxed", children: ["Render the video .mp4 or other formats. ", _jsx("br", {}), "Locally, on the server or serverless."] }), ' ', _jsx("div", { className: "h-4" }), _jsxs("div", { className: "leading-6", children: [_jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: "/docs/render", children: ["Render options", ' ', _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" }) })] }), _jsx("br", {}), _jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: "/lambda", children: ["Remotion Lambda", ' ', _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/VideoAppsShowcase.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { BlueButton } from './layout/Button';
 import { MuxVideo } from './MuxVideo';
 import { SectionTitle } from './VideoAppsTitle';
 const tabs = [
@@ -49,6 +48,10 @@ const videoApps = [
         buttonText: 'GitHub Unwrapped website',
     },
 ];
+const icon = {
+    height: 16,
+    marginLeft: 10,
+};
 const VideoAppsShowcase = () => {
     const [activeTab, setActiveTab] = useState(0);
     const [isMuted, setIsMuted] = useState(true);
@@ -146,10 +149,10 @@ const VideoAppsShowcase = () => {
             setIsMuted(newMutedState);
         }
     };
-    return (_jsxs("div", { ref: containerRef, children: [_jsx(SectionTitle, { children: "Use Cases" }), _jsx("div", { className: 'grid justify-center grid-flow-col grid-rows-1 gap-2.5 justify-self-center mb-4 w-[90vw] md:w-auto', children: tabs.map((tab, index) => (_jsx("button", { type: "button", "data-active": index === activeTab, className: `bg-transparent border-none m-0 p-0 lg:mx-3 my-4 cursor-pointer text-base fontbrand font-bold transition-colors text-muted data-[active=true]:text-brand`, onClick: () => setActiveTab(index), children: tab }, tab))) }), _jsx("div", { className: 'card flex p-0 overflow-hidden', children: _jsxs("div", { className: 'flex-1 flex flex-col lg:flex-row justify-center', children: [_jsxs("div", { className: 'w-full max-w-[500px] aspect-square relative overflow-hidden bg-[#eee]', onClick: handlePlayPause, children: [_jsx(MuxVideo, { ref: videoRef, muxId: videoApps[activeTab].muxId, className: 'absolute left-0 top-0 w-full h-full object-contain rounded-lg rounded-tr-none rounded-br-none', loop: true, playsInline: true, muted: isMuted }), isMuted && (_jsx("button", { type: "button", className: 'absolute bottom-2.5 right-2.5 bg-white text-black rounded-full w-8 h-8 flex justify-center items-center text-base cursor-pointer transition-colors border-2 border-black border-solid', onClick: (e) => {
+    return (_jsxs("div", { ref: containerRef, children: [_jsx(SectionTitle, { children: "Use Cases" }), _jsx("div", { className: 'grid justify-center grid-flow-col grid-rows-1 gap-2.5 justify-self-center mb-4 w-[90vw] md:w-auto -mt-4', children: tabs.map((tab, index) => (_jsx("button", { type: "button", "data-active": index === activeTab, className: `bg-transparent border-none m-0 p-0 lg:mx-3 my-4 cursor-pointer text-base fontbrand font-bold transition-colors text-muted data-[active=true]:text-brand`, onClick: () => setActiveTab(index), children: tab }, tab))) }), _jsx("div", { className: 'card flex p-0 overflow-hidden', children: _jsxs("div", { className: 'flex-1 flex flex-col lg:flex-row justify-center', children: [_jsxs("div", { className: 'w-full max-w-[500px] aspect-square relative overflow-hidden bg-[#eee]', onClick: handlePlayPause, children: [_jsx(MuxVideo, { ref: videoRef, muxId: videoApps[activeTab].muxId, className: 'absolute left-0 top-0 w-full h-full object-contain rounded-sm rounded-tr-none rounded-br-none', loop: true, playsInline: true, muted: isMuted }), isMuted && (_jsx("button", { type: "button", className: 'absolute bottom-2.5 right-2.5 bg-white text-black rounded-full w-8 h-8 flex justify-center items-center text-base cursor-pointer transition-colors border-2 border-black border-solid', onClick: (e) => {
                                         e.stopPropagation();
                                         handleMuteToggle();
-                                    }, children: _jsx("svg", { style: { width: 24 }, viewBox: "0 0 576 512", children: _jsx("path", { fill: "black", d: "M0 160L0 352l128 0L272 480l48 0 0-448-48 0L128 160 0 160zm441 23l-17-17L390.1 200l17 17 39 39-39 39-17 17L424 345.9l17-17 39-39 39 39 17 17L569.9 312l-17-17-39-39 39-39 17-17L536 166.1l-17 17-39 39-39-39z" }) }) }))] }), _jsxs("div", { className: 'pl-4 flex-1 lg:pl-4 flex flex-col h-full pt-8 pb-6', children: [_jsx("div", { className: "text-4xl font-bold fontbrand", children: videoApps[activeTab].title }), _jsx("div", { className: "text-muted mt-4 text-base fontbrand", children: videoApps[activeTab].description }), videoApps[activeTab].additionalInfo ? (_jsx("div", { className: "text-muted mt-4 text-base fontbrand", children: videoApps[activeTab].additionalInfo })) : null, _jsx("div", { className: "h-5" }), _jsx("a", { target: "_blank", href: videoApps[activeTab].link, style: { textDecoration: 'none' }, children: _jsx(BlueButton, { loading: false, size: "sm", children: videoApps[activeTab].buttonText }) })] })] }) }), _jsx("div", { style: {
+                                    }, children: _jsx("svg", { style: { width: 24 }, viewBox: "0 0 576 512", children: _jsx("path", { fill: "black", d: "M0 160L0 352l128 0L272 480l48 0 0-448-48 0L128 160 0 160zm441 23l-17-17L390.1 200l17 17 39 39-39 39-17 17L424 345.9l17-17 39-39 39 39 17 17L569.9 312l-17-17-39-39 39-39 17-17L536 166.1l-17 17-39 39-39-39z" }) }) }))] }), _jsxs("div", { className: 'p-6 flex-1 flex flex-col h-full', children: [_jsx("div", { className: "text-4xl font-bold fontbrand mt-0", children: videoApps[activeTab].title }), _jsx("div", { className: "text-muted mt-4 text-base fontbrand", children: videoApps[activeTab].description }), videoApps[activeTab].additionalInfo ? (_jsx("div", { className: "text-muted mt-4 text-base fontbrand", children: videoApps[activeTab].additionalInfo })) : null, _jsx("div", { className: "h-5" }), _jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: videoApps[activeTab].link, children: [videoApps[activeTab].buttonText, _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" }) })] })] })] }) }), _jsx("div", { style: {
                     marginTop: '1rem',
                     justifyContent: 'center',
                     display: 'flex',

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

@@ -1,5 +1,4 @@
 import React from 'react';
-export declare const VideoAppsTitle: React.FC;
 export declare const SectionTitle: React.FC<{
     readonly children: React.ReactNode;
 }>;

package/dist/components/homepage/VideoAppsTitle.js

@@ -1,7 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const VideoAppsTitle = () => {
-    return (_jsxs("div", { className: 'text-center', children: [_jsxs("h2", { className: 'fontbrand text-4xl', children: ["Build video ", _jsx("span", { className: 'fontbrand', children: "apps" })] }), _jsx("p", { children: "Use our suite of tools to build apps that lets others create videos." })] }));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
 export const SectionTitle = ({ children, }) => {
     return (_jsx("div", { className: 'text-center', children: _jsx("h2", { className: 'fontbrand text-4xl', children: children }) }));
 };

package/dist/components/icons/recorder.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const Recorder: React.FC<SVGProps<SVGSVGElement>>;

package/dist/components/icons/recorder.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Recorder = (props) => {
+    return (_jsxs("svg", { viewBox: "0 0 700 700", ...props, children: [_jsx("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" }), _jsx("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" }), _jsx("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" })] }));
+};