@remotion/promo-pages 4.0.430 → 4.0.432

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

@@ -1,95 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Player } from '@remotion/player';
-import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
-import { PALETTE } from '../layout/colors';
-import { useColorMode } from '../layout/use-color-mode';
-import { SectionTitle } from '../VideoAppsTitle';
-import { getDataAndProps, HomepageVideoComp, } from './Comp';
-import { DemoError } from './DemoError';
-import { RenderButton } from './DemoRender';
-import { DownloadNudge } from './DownloadNudge';
-import { DragAndDropNudge } from './DragAndDropNudge';
-import { PlayerControls } from './PlayerControls';
-import { ThemeNudge } from './ThemeNudge';
-const style = {
-    width: '100%',
-    aspectRatio: '640 / 360',
-    borderBottom: `2px solid ${PALETTE.BOX_STROKE}`,
-    touchAction: 'none', // prevent page from scrolling when dragging children on mobile
-};
-const playerWrapper = {
-    border: `2px solid ${PALETTE.BOX_STROKE}`,
-    borderBottom: `4px solid ${PALETTE.BOX_STROKE}`,
-    borderRadius: 8,
-    width: '100%',
-    overflow: 'hidden',
-};
-export const Demo = () => {
-    const { colorMode } = useColorMode();
-    const [data, setData] = useState(null);
-    const ref = useRef(null);
-    const [isFullscreen, setIsFullscreen] = useState(false);
-    const [cardOrder, setCardOrder] = useState([0, 1, 2, 3]);
-    const [emojiIndex, setEmojiIndex] = useState(0);
-    const [error, setError] = useState(false);
-    useEffect(() => {
-        getDataAndProps()
-            .then((d) => {
-            setData(d);
-        })
-            .catch((err) => {
-            // eslint-disable-next-line no-console
-            console.log(err);
-            setError(true);
-        });
-    }, []);
-    useEffect(() => {
-        const { current: playerRef } = ref;
-        if (!playerRef || !data) {
-            return;
-        }
-        const onFullscreenChange = () => {
-            setIsFullscreen(playerRef.isFullscreen());
-        };
-        playerRef.addEventListener('fullscreenchange', onFullscreenChange);
-        return () => {
-            playerRef.removeEventListener('fullscreenchange', onFullscreenChange);
-        };
-    }, [data]);
-    const updateCardOrder = useCallback((newCardOrder) => {
-        setCardOrder(newCardOrder);
-    }, []);
-    const props = useMemo(() => {
-        var _a, _b;
-        return {
-            theme: colorMode,
-            onToggle: () => {
-                var _a;
-                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.toggle();
-            },
-            cardOrder,
-            updateCardOrder,
-            location: (_a = data === null || data === void 0 ? void 0 : data.location) !== null && _a !== void 0 ? _a : null,
-            trending: (_b = data === null || data === void 0 ? void 0 : data.trending) !== null && _b !== void 0 ? _b : null,
-            onClickLeft: () => {
-                setEmojiIndex((e) => e - 1);
-            },
-            onClickRight: () => {
-                setEmojiIndex((e) => e + 1);
-            },
-            emojiIndex,
-        };
-    }, [cardOrder, emojiIndex, colorMode, data, updateCardOrder]);
-    const onError = useCallback(() => {
-        setError(true);
-    }, []);
-    return (_jsxs("div", { children: [_jsx("br", {}), _jsx("br", {}), _jsx(SectionTitle, { children: "Demo" }), _jsxs("div", { style: { height: 140, position: '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,
-                                    location: data.location,
-                                    theme: colorMode,
-                                    trending: data.trending,
-                                }
-                                : null, playerRef: ref }) })] }), error ? _jsx(DemoError, {}) : null, _jsx(DownloadNudge, {})] }));
-};

package/dist/components/homepage/Demo/math.d.ts

@@ -1,10 +0,0 @@
-export type Position = {
-    x: number;
-    y: number;
-};
-export declare const paddingAndMargin = 20;
-export declare const cardHeight: number;
-export declare const cardWidth: number;
-export declare const getPositionForIndex: (index: number) => Position;
-export declare const getInitialPositions: () => Position[];
-export declare const getIndexFromPosition: (clientX: number, clientY: number) => 0 | 3 | 1 | 2 | undefined;

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

@@ -1,29 +0,0 @@
-export const paddingAndMargin = 20;
-const height = 360;
-const width = 640;
-export const cardHeight = (height - paddingAndMargin * 3) / 2;
-export const cardWidth = (width - paddingAndMargin * 3) / 2;
-export const getPositionForIndex = (index) => {
-    const x = index % 2 === 0 ? paddingAndMargin : cardWidth + paddingAndMargin * 2;
-    const y = index < 2 ? paddingAndMargin : cardHeight + paddingAndMargin * 2;
-    return { x, y };
-};
-export const getInitialPositions = () => {
-    return new Array(4).fill(true).map((_, i) => getPositionForIndex(i));
-};
-export const getIndexFromPosition = (clientX, clientY) => {
-    const left = clientX < cardWidth / 2 + paddingAndMargin;
-    const top = clientY < cardHeight / 2 + paddingAndMargin;
-    if (left && top) {
-        return 0;
-    }
-    if (!left && top) {
-        return 1;
-    }
-    if (left && !top) {
-        return 2;
-    }
-    if (!left && !top) {
-        return 3;
-    }
-};

package/dist/components/homepage/Demo/types.d.ts

@@ -1,6 +0,0 @@
-export type Location = {
-    country: string;
-    city: string;
-    latitude: number | string;
-    longitude: number | string;
-};

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

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

package/dist/components/homepage/EditorStarterSection.js

@@ -1,8 +0,0 @@
-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/EvaluateRemotion.d.ts

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

package/dist/components/homepage/EvaluateRemotion.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Adjustments to the EvaluateRemotionSection.tsx to separate the flex box into two boxes
-// with specified alignment and positioning requirements.
-import { useEffect, useState } from 'react';
-import { experts } from '../experts';
-import { BlueButton } from './layout/Button';
-const EvaluateRemotionSection = () => {
-    const [dailyAvatars, setDailyAvatars] = useState([]);
-    useEffect(() => {
-        const avatars = experts.map((expert) => expert.image);
-        const selectedAvatars = [];
-        for (let i = 0; i < 3; i++) {
-            const index = Math.floor(Math.random() * avatars.length);
-            selectedAvatars.push(avatars[index]);
-            avatars.splice(index, 1); // Remove selected avatar to avoid duplicates
-        }
-        setDailyAvatars(selectedAvatars);
-    }, []);
-    return (_jsxs("div", { className: "flex flex-col lg:flex-row gap-2", children: [_jsxs("div", { className: 'card flex-1 flex flex-col', children: [_jsx("div", { className: 'fontbrand text-2xl font-bold', children: "Questions about our license?" }), _jsx("p", { className: 'text-muted fontbrand leading-snug', children: "Book a 20 minute call or write us an email to get all your questions answered." }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "flex flex-row flex-wrap gap-2", children: [_jsx("a", { target: "_blank", href: "https://cal.com/remotion/evaluate", style: { textDecoration: 'none' }, children: _jsx(BlueButton, { size: "sm", loading: false, children: "Schedule a call" }) }), _jsx("a", { target: "_blank", href: "mailto:hi@remotion.dev", style: { textDecoration: 'none' }, children: _jsx(BlueButton, { size: "sm", loading: false, children: "Write an email" }) })] })] }), _jsxs("div", { className: 'card flex-1 flex flex-col', children: [_jsx("div", { className: 'fontbrand text-2xl font-bold', children: "Get help with your Remotion project" }), _jsx("p", { className: 'text-muted fontbrand leading-snug', children: "Contact our experts for help and work." }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: 'flex flex-row justify-between', children: [_jsx("a", { href: "/experts", style: { textDecoration: 'none' }, children: _jsx(BlueButton, { size: "sm", loading: false, children: "Remotion Experts" }) }), _jsx("div", { className: 'flex justify-end items-end gap-3', children: dailyAvatars.map((avatar) => (_jsx("div", { className: 'w-12 h-12 rounded-full bg-muted bg-cover bg-center -ml-5 border-2 border-black', style: { backgroundImage: `url(${avatar})` } }, avatar))) })] })] })] }));
-};
-export default EvaluateRemotionSection;

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

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const FreePricing: React.FC;
-export declare const EnterpriseLicense: React.FC;
-export declare const CompanyPricing: React.FC;

package/dist/components/homepage/FreePricing.js

@@ -1,134 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Switch } from '@remotion/design';
-import React, { useCallback, useMemo } from 'react';
-import { cn } from '../../cn';
-import { InfoTooltip } from './InfoTooltip';
-import { PricingBulletPoint } from './PricingBulletPoint';
-const Container = ({ children, }) => {
-    return (_jsx("div", { className: 'flex flex-col border-effect rounded-xl p-5 bg-pane', children: children }));
-};
-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 });
-};
-const BottomInfo = ({ children, className, ...props }) => {
-    return (_jsx("div", { className: cn(className, 'text-[var(--subtitle)] fontbrand text-sm'), ...props, children: children }));
-};
-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 icon = {
-    height: 16,
-    marginLeft: 4,
-};
-const PricingSlider = ({ value, onChange, min, max, step = 1 }) => {
-    const percentage = ((value - min) / (max - min)) * 100;
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
-					.pricing-slider {
-						-webkit-appearance: none;
-						appearance: none;
-						height: 12px;
-						border-radius: 8px;
-						border: 2px solid black;
-						cursor: pointer;
-					}
-				.pricing-slider::-webkit-slider-thumb {
-					-webkit-appearance: none;
-					appearance: none;
-					width: 24px;
-					height: 24px;
-					border-radius: 50%;
-					background: white;
-					border: 2px solid black;
-					border-bottom-width: 4px;
-					cursor: pointer;
-					scale: 1.2;
-				}
-				.pricing-slider::-moz-range-thumb {
-					width: 24px;
-					height: 24px;
-					border-radius: 50%;
-					background: white;
-					border: 2px solid black;
-					border-bottom-width: 4px;
-					scale: 1.2;
-					cursor: pointer;
-				}
-				` }), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: (e) => onChange(Number(e.target.value)), className: "pricing-slider w-full", style: {
-                    background: `linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) ${percentage}%, var(--background) ${percentage}%, var(--background) 100%)`,
-                } })] }));
-};
-const textUnitWrapper = {
-    display: 'flex',
-    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: {
-                        ...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" }) })] }) }) })] }));
-};
-export const EnterpriseLicense = () => {
-    return (_jsxs(Container, { children: [_jsx(Audience, { children: "For advanced needs" }), _jsx(Title, { children: "Enterprise License" }), _jsx(PricingBulletPoint, { text: "Everything in Company License", checked: true }), _jsx(PricingBulletPoint, { text: "Private Slack or Discord", checked: true }), _jsx(PricingBulletPoint, { text: "Monthly consulting session", checked: true }), _jsx(PricingBulletPoint, { text: "Custom terms, billing and pricing", checked: true }), _jsx(PricingBulletPoint, { text: "Compliance forms", checked: true }), _jsx(PricingBulletPoint, { text: "Prioritized feature requests", checked: true }), _jsx(PricingBulletPoint, { text: _jsxs("span", { children: [_jsx("a", { href: "https://www.remotion.dev/editor-starter", className: "underline underline-offset-4 text-inherit", children: "Editor Starter" }), ' ', "included"] }), checked: true }), _jsx("div", { style: { height: 30 } }), _jsx("div", { className: 'flex flex-row justify-end', children: _jsxs("div", { style: {
-                        ...textUnitWrapper,
-                        alignItems: 'flex-end',
-                    }, children: [_jsx(PriceTag, { children: _jsx("a", { className: 'cursor-pointer no-underline text-inherit hover:text-brand', target: '_blank', href: "https://www.remotion.pro/contact", children: "Contact us" }) }), _jsx("div", { className: 'text-[var(--subtitle)] fontbrand text-sm', children: "Starting at $500 per month" })] }) })] }));
-};
-const SEAT_PRICE = 25;
-const RENDER_UNIT_PRICE = 10;
-const SectionCheckbox = ({ checked, onChange, title, subtitle, children }) => {
-    return (_jsxs("div", { className: "flex flex-row gap-3 cursor-pointer select-none items-center", children: [_jsx(Switch, { active: checked, onToggle: () => onChange(!checked) }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "fontbrand font-bold text-lg flex flex-row items-center gap-1", children: [title, children] }), _jsx("div", { className: "text-muted fontbrand text-sm", children: subtitle })] }), _jsx("div", { className: "flex-1" }), _jsx("div", { className: cn('fontbrand text-muted transition-opacity duration-150', checked ? 'hidden' : 'opacity-100'), children: "Not selected" })] }));
-};
-export const CompanyPricing = () => {
-    const [creatorsSelected, setCreatorsSelected] = React.useState(false);
-    const [automatorsSelected, setAutomatorsSelected] = React.useState(true);
-    const [devSeatCount, setDevSeatCount] = React.useState(3);
-    const [cloudRenders, setCloudRenders] = React.useState(10000);
-    const formatPrice = useCallback((price) => {
-        const formatter = new Intl.NumberFormat('en-US', {
-            style: 'currency',
-            currency: 'USD',
-            maximumFractionDigits: 0,
-        });
-        return formatter.format(price);
-    }, []);
-    const creatorsPrice = creatorsSelected ? devSeatCount * SEAT_PRICE : 0;
-    const automatorsPrice = automatorsSelected
-        ? Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE
-        : 0;
-    const totalPrice = useMemo(() => {
-        const basePrice = creatorsPrice + automatorsPrice;
-        // Minimum only applies if automation is selected
-        if (automatorsSelected) {
-            return Math.max(100, basePrice);
-        }
-        return basePrice;
-    }, [creatorsPrice, automatorsPrice, automatorsSelected]);
-    const totalPriceString = useMemo(() => {
-        return formatPrice(totalPrice);
-    }, [formatPrice, totalPrice]);
-    const showMinimumMessage = automatorsSelected && creatorsPrice + automatorsPrice < 100;
-    const showEnterpriseMessage = totalPrice >= 500;
-    return (_jsxs(Container, { children: [_jsx(Audience, { children: "For collaborations and companies of 4+ people" }), _jsx(Title, { children: "Company License" }), _jsx(PricingBulletPoint, { text: "Create and automate", checked: true }), _jsx(PricingBulletPoint, { text: "Commercial use allowed", checked: true }), _jsx(PricingBulletPoint, { text: "Pay according to usage", checked: true }), _jsx(PricingBulletPoint, { text: "Prioritized Support", checked: true }), _jsx(PricingBulletPoint, { text: "$250 Mux credits", checked: true, children: _jsxs(InfoTooltip, { children: ["Credits for Mux.com.", _jsx("br", {}), " Applies only to new Mux customers."] }) }), _jsx("div", { style: { height: 30 } }), _jsx(SectionCheckbox, { checked: creatorsSelected, onChange: setCreatorsSelected, title: "Remotion for Creators", subtitle: "Create videos for yourself - $25/mo per seat", children: _jsxs(InfoTooltip, { children: ["Intended for low volume video creations through coding and prompting, and building motion design systems in a local environment.", _jsx("br", {}), _jsx("br", {}), "Get 1 Seat per user."] }) }), _jsx("div", { className: cn('grid ease-out', creatorsSelected
-                    ? 'grid-rows-[1fr] opacity-100'
-                    : 'grid-rows-[0fr] opacity-0'), style: {
-                    transition: creatorsSelected
-                        ? 'grid-template-rows 150ms ease-out, opacity 150ms ease-out 75ms'
-                        : 'opacity 150ms ease-out, grid-template-rows 150ms ease-out 75ms',
-                }, children: _jsx("div", { className: "overflow-hidden", children: _jsxs("div", { className: "flex flex-row items-center gap-3 sm:gap-4 w-full py-3", children: [_jsx("div", { className: "flex-1 min-w-0", children: _jsx(PricingSlider, { value: devSeatCount, onChange: setDevSeatCount, min: 1, max: 50 }) }), _jsxs("div", { className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-center", children: [devSeatCount, " ", devSeatCount === 1 ? 'Seat' : 'Seats'] }), _jsxs("div", { className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap", children: ["$", new Intl.NumberFormat('en-US', {
-                                        maximumFractionDigits: 0,
-                                    }).format(SEAT_PRICE * devSeatCount)] })] }) }) }), _jsx("div", { className: "h-6" }), _jsx(SectionCheckbox, { checked: automatorsSelected, onChange: setAutomatorsSelected, title: "Remotion for Automators", subtitle: "Build video creation tools - $0.01 per render, $100/mo minimum", children: _jsxs(InfoTooltip, { children: ["Intended for companies launching ", _jsx("br", {}), "SaaS applications; such as video editors and prompt-to-video apps, and automated high-volume video creation.", _jsx("br", {}), _jsx("br", {}), "A $100/mo Minimum Spend applies.", _jsx("br", {}), _jsx("br", {}), "Developers working on automation projects do not require a Seat."] }) }), _jsx("div", { className: cn('grid ease-out', automatorsSelected
-                    ? 'grid-rows-[1fr] opacity-100'
-                    : 'grid-rows-[0fr] opacity-0'), style: {
-                    transition: automatorsSelected
-                        ? 'grid-template-rows 150ms ease-out, opacity 150ms ease-out 75ms'
-                        : 'opacity 150ms ease-out, grid-template-rows 150ms ease-out 75ms',
-                }, children: _jsx("div", { className: "overflow-hidden", children: _jsxs("div", { className: "flex flex-row items-center gap-3 sm:gap-4 w-full py-3", children: [_jsx("div", { className: "flex-1 min-w-0", children: _jsx(PricingSlider, { value: cloudRenders, onChange: setCloudRenders, min: 1000, max: 100000, step: 1000 }) }), _jsxs("div", { className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-right", children: [new Intl.NumberFormat('en-US').format(cloudRenders), " Renders"] }), _jsxs("div", { className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap", children: ["$", new Intl.NumberFormat('en-US', {
-                                        maximumFractionDigits: 0,
-                                    }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)] })] }) }) }), _jsx("div", { style: { height: 14 } }), _jsx("div", { className: 'flex flex-row justify-end', children: _jsxs("div", { style: { ...textUnitWrapper, alignItems: 'flex-end' }, children: [_jsxs(PriceTag, { children: [totalPriceString, "/month"] }), _jsx(BottomInfo, { "data-visible": showMinimumMessage, className: "opacity-0 data-[visible=true]:opacity-100 transition-opacity", children: "The minimum is $100 per month for Remotion for Automators" }), _jsxs(BottomInfo, { "data-visible": showEnterpriseMessage, className: "opacity-0 data-[visible=true]:opacity-100 transition-opacity", children: ["At this spend, you are eligible for the Enterprise License.", _jsx("br", {}), " You can select it when setting up your license, or", ' ', _jsx("a", { className: "bluelink", target: "_blank", href: "https://www.remotion.pro/contact", children: "contact us" }), "."] })] }) }), _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/GetStartedStrip.d.ts

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

package/dist/components/homepage/GetStartedStrip.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '@remotion/design';
-import { useState } from 'react';
-import { GithubButton } from './GitHubButton';
-export const GetStarted = () => {
-    const [clicked, setClicked] = useState(null);
-    return (_jsxs("div", { className: "flex flex-col lg:flex-row items-center justify-center text-center w-full", children: [_jsx("div", { className: "w-full lg:w-auto", children: _jsxs("div", { className: "flex flex-row w-full relative", children: [clicked ? (_jsx("div", { style: {
-                                animation: 'click 0.7s linear',
-                                animationFillMode: 'forwards',
-                            }, className: "absolute z-0 top-[-10px] font-mono text-sm text-center w-full", children: "Copied!" }, clicked)) : null, _jsx(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');
-                                setClicked(Date.now());
-                            }, title: "Click to copy", children: "$ npx create-video@latest" })] }) }), _jsx("div", { style: { width: 10, height: 10 } }), _jsx("div", { className: "w-full lg:w-auto", children: _jsx(Button, { href: "/docs", className: "w-full", children: "Docs" }) }), _jsx("div", { className: "w-2 h-2" }), _jsx("div", { className: "w-full lg:w-auto", children: _jsx(Button, { href: "https://remotion.dev/discord", target: "_blank", className: "w-full", children: "Discord" }) }), _jsx("div", { className: "w-2 h-2" }), _jsx("div", { className: "w-full lg:w-auto", children: _jsx(Button, { href: "https://github.com/remotion-dev/remotion", target: "_blank", className: "w-full", children: _jsx(GithubButton, {}) }) }), ' ', _jsx("div", { className: "w-2 h-2" }), _jsx("div", { className: "w-full lg:w-auto", children: _jsxs(Button, { href: "/prompts", className: "w-full", children: [_jsx("svg", { width: "20", height: "20", viewBox: "0 0 149 149", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { marginRight: 8 }, children: _jsx("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" }) }), "Prompt a video"] }) })] }));
-};

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

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

package/dist/components/homepage/GitHubButton.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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: '37k' })] }));
-};

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

@@ -1,6 +0,0 @@
-import type { Template } from 'create-video';
-import React from 'react';
-export declare const IconForTemplate: React.FC<{
-    readonly template: Template;
-    readonly scale: number;
-}>;

package/dist/components/homepage/IconForTemplate.js

@@ -1,101 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Blank } from '../icons/blank';
-import { BrainIcon } from '../icons/brain';
-import { CodeHike } from '../icons/code-hike';
-import { Cubes } from '../icons/cubes';
-import { JSIcon } from '../icons/js';
-import { MusicIcon } from '../icons/music';
-import { NextIcon } from '../icons/next';
-import { OverlayIcon } from '../icons/overlay';
-import { PromptToVideoIcon } from '../icons/prompt-to-video';
-import { Recorder } from '../icons/recorder';
-import { ReactRouterIcon } from '../icons/remix';
-import { RenderServerIcon } from '../icons/render-server';
-import { SkiaIcon } from '../icons/skia';
-import { Stargazer } from '../icons/stargazer';
-import { StillIcon } from '../icons/still';
-import { TikTok } from '../icons/tiktok';
-import { TypeScriptIcon } from '../icons/ts';
-import { VercelIcon } from '../icons/vercel';
-import { Waveform } from '../icons/waveform';
-export const IconForTemplate = ({ template, scale = 1 }) => {
-    if (template.cliId === 'hello-world') {
-        return (_jsx(TypeScriptIcon, { style: {
-                height: scale * 48,
-            } }));
-    }
-    if (template.cliId === 'blank') {
-        return (_jsx(Blank, { style: {
-                height: scale * 36,
-                overflow: 'visible',
-            } }));
-    }
-    if (template.cliId === 'javascript') {
-        return (_jsx(JSIcon, { style: {
-                height: scale * 40,
-            } }));
-    }
-    if (template.cliId === 'three') {
-        return (_jsx(Cubes, { style: {
-                height: scale * 36,
-            } }));
-    }
-    if (template.cliId === 'still') {
-        return (_jsx(StillIcon, { style: {
-                height: scale * 36,
-            } }));
-    }
-    if (template.cliId === 'audiogram') {
-        return (_jsx(Waveform, { style: {
-                height: scale * 36,
-            } }));
-    }
-    if (template.cliId === 'skia') {
-        return (_jsx(SkiaIcon, { style: {
-                height: scale * 32,
-            } }));
-    }
-    if (template.cliId === 'music-visualization') {
-        return (_jsx(MusicIcon, { style: {
-                height: scale * 32,
-            } }));
-    }
-    if (template.cliId === 'react-router') {
-        return (_jsx(ReactRouterIcon, { style: {
-                height: scale * 32,
-            } }));
-    }
-    if (template.cliId === 'overlay') {
-        return _jsx(OverlayIcon, { style: { height: scale * 42 } });
-    }
-    if (template.cliId === 'render-server') {
-        return _jsx(RenderServerIcon, { style: { height: scale * 36 } });
-    }
-    if (template.cliId === 'recorder') {
-        return _jsx(Recorder, { style: { height: scale * 36 } });
-    }
-    if (template.cliId === 'next' ||
-        template.cliId === 'next-no-tailwind' ||
-        template.cliId === 'next-pages-dir') {
-        return _jsx(NextIcon, { style: { height: scale * 36 } });
-    }
-    if (template.cliId === 'stargazer') {
-        return _jsx(Stargazer, { style: { height: scale * 36 } });
-    }
-    if (template.cliId === 'tiktok') {
-        return _jsx(TikTok, { style: { height: scale * 36 } });
-    }
-    if (template.cliId === 'code-hike') {
-        return _jsx(CodeHike, { style: { height: scale * 36 } });
-    }
-    if (template.cliId === 'prompt-to-video') {
-        return _jsx(PromptToVideoIcon, { style: { height: scale * 36 } });
-    }
-    if (template.cliId === 'prompt-to-motion-graphics') {
-        return _jsx(BrainIcon, { style: { height: scale * 36 } });
-    }
-    if (template.cliId === 'vercel') {
-        return _jsx(VercelIcon, { style: { height: scale * 28 } });
-    }
-    throw new Error(`Unknown template: ${template.cliId}`);
-};

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

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const isWebkit: () => boolean;
-export declare const IfYouKnowReact: React.FC;

package/dist/components/homepage/IfYouKnowReact.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-export const isWebkit = () => {
-    if (typeof window === 'undefined') {
-        return false;
-    }
-    const isSafariUserAgent = Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/));
-    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(() => {
-        if (isWebkit()) {
-            setVid('/img/compose.mp4');
-        }
-    }, []);
-    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] h-[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/InfoTooltip.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-interface InfoTooltipProps {
-    readonly children: React.ReactNode;
-}
-export declare const InfoTooltip: React.FC<InfoTooltipProps>;
-export {};

package/dist/components/homepage/InfoTooltip.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-export const InfoTooltip = ({ children }) => {
-    const [isVisible, setIsVisible] = useState(false);
-    return (_jsxs("span", { className: "relative inline-block ml-1 text-gray-600 cursor-default", onPointerEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), children: [_jsx("span", { className: "font-bold", style: { fontSize: '1rem' }, children: "\u24D8" }), isVisible && (_jsxs("span", { className: "absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-500 text-white p-2 rounded text-sm z-10 cursor-default font-normal w-[300px] inline-block text-wrap", children: [children, _jsx("span", { className: "absolute top-full left-1/2 transform -translate-x-1/2 border-5 border-solid border-gray-500 border-t-transparent border-r-transparent border-b-transparent border-l-transparent cursor-default" })] }))] }));
-};

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

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

package/dist/components/homepage/MoreTemplatesButton.js

@@ -1,11 +0,0 @@
-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/MuxVideo.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export declare const MuxVideo: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLVideoElement> & React.VideoHTMLAttributes<HTMLVideoElement> & {
-    readonly muxId: string;
-}, "ref"> & React.RefAttributes<HTMLVideoElement>>;
-export declare const NewMuxVideo: React.FC<{
-    readonly muxId: string;
-}>;

package/dist/components/homepage/MuxVideo.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Hls from 'hls.js';
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-import { VideoPlayerWithControls } from './VideoPlayerWithControls';
-const getVideoToPlayUrl = (muxId) => {
-    return `https://stream.mux.com/${muxId}.m3u8`;
-};
-const MuxVideoForward = ({ muxId, ...props }, ref) => {
-    const videoRef = useRef(null);
-    const vidUrl = getVideoToPlayUrl(muxId);
-    useImperativeHandle(ref, () => videoRef.current, []);
-    useEffect(() => {
-        let hls;
-        if (videoRef.current) {
-            const { current } = videoRef;
-            if (current.canPlayType('application/vnd.apple.mpegurl')) {
-                // Some browers (safari and ie edge) support HLS natively
-                current.src = vidUrl;
-            }
-            else if (Hls.isSupported()) {
-                // This will run in all other modern browsers
-                hls = new Hls();
-                hls.loadSource(vidUrl);
-                hls.attachMedia(current);
-            }
-            else {
-                // eslint-disable-next-line no-console
-                console.error("This is a legacy browser that doesn't support MSE");
-            }
-        }
-        return () => {
-            if (hls) {
-                hls.destroy();
-            }
-        };
-    }, [vidUrl, videoRef]);
-    return _jsx("video", { ref: videoRef, ...props });
-};
-export const MuxVideo = forwardRef(MuxVideoForward);
-export const NewMuxVideo = ({ muxId }) => {
-    return (_jsx(VideoPlayerWithControls, { playbackId: muxId, poster: 'https://image.mux.com/' + muxId + '/thumbnail.png?time=1', onError: (error) => {
-            // eslint-disable-next-line no-console
-            console.log(error);
-        }, onLoaded: () => undefined, onSize: () => undefined }));
-};

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

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const NewsletterButton: React.FC<{}>;