@remotion/promo-pages 4.0.458 → 4.0.459

package/dist/components/prompts/prompt-helpers.js

@@ -0,0 +1,76 @@
+export const formatLikeCount = (n) => {
+    if (n < 1000)
+        return String(n);
+    if (n < 10000)
+        return `${(n / 1000).toFixed(1).replace(/\.0$/, '')}k`;
+    if (n < 1000000)
+        return `${Math.floor(n / 1000)}k`;
+    return `${(n / 1000000).toFixed(1).replace(/\.0$/, '')}M`;
+};
+const LIKED_KEY = 'remotion-prompt-likes';
+export const getLikedIds = () => {
+    try {
+        const stored = localStorage.getItem(LIKED_KEY);
+        return new Set(stored ? JSON.parse(stored) : []);
+    }
+    catch (_a) {
+        return new Set();
+    }
+};
+export const saveLikedId = (id) => {
+    const liked = getLikedIds();
+    liked.add(id);
+    try {
+        localStorage.setItem(LIKED_KEY, JSON.stringify([...liked]));
+    }
+    catch (_a) {
+        // Ignore storage errors to avoid breaking like functionality
+    }
+};
+export const removeLikedId = (id) => {
+    const liked = getLikedIds();
+    liked.delete(id);
+    try {
+        localStorage.setItem(LIKED_KEY, JSON.stringify([...liked]));
+    }
+    catch (_a) {
+        // Ignore storage errors to avoid breaking like functionality
+    }
+};
+export const getAvatarUrl = (s) => {
+    if (s.customAvatarUrl)
+        return s.customAvatarUrl;
+    if (s.githubUsername)
+        return `https://github.com/${s.githubUsername}.png`;
+    if (s.xUsername)
+        return `https://unavatar.io/x/${s.xUsername}`;
+    return null;
+};
+export const getAuthorName = (s) => {
+    if (s.githubUsername)
+        return s.githubUsername;
+    if (s.xUsername)
+        return `@${s.xUsername}`;
+    return 'Anonymous';
+};
+export const getRelativeTime = (dateStr) => {
+    const now = Date.now();
+    const then = new Date(dateStr).getTime();
+    const seconds = Math.floor((now - then) / 1000);
+    if (seconds < 60)
+        return 'just now';
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return `${minutes} minute${minutes === 1 ? '' : 's'} ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours} hour${hours === 1 ? '' : 's'} ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 30)
+        return `${days} day${days === 1 ? '' : 's'} ago`;
+    const months = Math.floor(days / 30);
+    if (months < 12)
+        return `${months} month${months === 1 ? '' : 's'} ago`;
+    const years = Math.floor(months / 12);
+    return `${years} year${years === 1 ? '' : 's'} ago`;
+};

package/dist/components/prompts/prompt-types.d.ts

@@ -0,0 +1,14 @@
+export type PromptSubmission = {
+    id: string;
+    createdAt: string;
+    title: string;
+    slug: string;
+    muxPlaybackId: string;
+    prompt: string;
+    githubUsername: string | null;
+    xUsername: string | null;
+    customAvatarUrl: string | null;
+    likeCount: number;
+    toolUsed?: string | null;
+    modelUsed?: string | null;
+};

package/dist/components/prompts/use-heart-animation.d.ts

@@ -0,0 +1,5 @@
+export declare const useHeartAnimation: () => {
+    scale: number;
+    roundness: number;
+    animate: () => void;
+};

package/dist/components/prompts/use-heart-animation.js

@@ -0,0 +1,29 @@
+import { useCallback, useRef, useState } from 'react';
+const DURATION = 300;
+export const useHeartAnimation = () => {
+    const [scale, setScale] = useState(1);
+    const [roundness, setRoundness] = useState(0.09);
+    const rafRef = useRef(0);
+    const animate = useCallback(() => {
+        cancelAnimationFrame(rafRef.current);
+        const start = performance.now();
+        const tick = (now) => {
+            const elapsed = now - start;
+            const t = Math.min(elapsed / DURATION, 1);
+            // ease-out quad for the up phase, then ease-in for down
+            const half = t < 0.5 ? t * 2 : (1 - t) * 2;
+            const eased = half * (2 - half); // ease-out quad
+            setScale(1 + 0.1 * eased);
+            setRoundness(0.09 + 0.1 * eased);
+            if (t < 1) {
+                rafRef.current = requestAnimationFrame(tick);
+            }
+            else {
+                setScale(1);
+                setRoundness(0.09);
+            }
+        };
+        rafRef.current = requestAnimationFrame(tick);
+    }, []);
+    return { scale, roundness, animate };
+};

package/dist/components/team/TeamCards.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const LinkedInLogo: React.FC;
+export declare const TwitterLogo: React.FC;
+export declare const GitHubLogo: React.FC;
+export declare const EmailLogo: React.FC;
+export declare const TeamCardsLayout: React.FC;

package/dist/components/team/TeamCards.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const LinkedInLogo = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1000 1000", className: "w-[30px]", children: _jsx("path", { fill: "currentcolor", d: "M195.877 0C88.16 0 0 88.158 0 195.877V803.718C0 911.435 88.158 999.563 195.877 999.563H803.718C911.436 999.563 999.563 911.436 999.563 803.718V195.877C999.563 88.16 911.436 0 803.718 0H195.877ZM245.143 164.948C296.791 164.948 328.604 198.854 329.586 243.423C329.586 287.008 296.789 321.867 244.144 321.867H243.175C192.51 321.867 159.763 287.01 159.763 243.423C159.763 198.855 193.501 164.948 245.142 164.948H245.143ZM690.223 373.258C789.552 373.258 864.013 438.18 864.013 577.694V838.143H713.06V595.156C713.06 534.096 691.213 492.438 636.584 492.438C594.88 492.438 570.022 520.516 559.108 547.64C555.121 557.344 554.141 570.897 554.141 584.472V838.143H403.188C403.188 838.143 405.169 426.53 403.188 383.91H554.172V448.234C574.232 417.284 610.114 373.257 690.223 373.257V373.258ZM168.667 383.943H319.62V838.145H168.667V383.943V383.943Z" }) }));
+};
+export const TwitterLogo = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 530 570", className: "w-[32px]", children: _jsx("path", { fill: "currentcolor", d: "M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" }) }));
+};
+export const GitHubLogo = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1084 1084", className: "w-[30px]", children: _jsx("path", { fill: "currentcolor", d: "M542 0C242.545 0 0 242.545 0 542C0 781.835 155.147 984.408 370.592 1056.22C397.692 1060.97 407.855 1044.71 407.855 1030.48C407.855 1017.61 407.178 974.923 407.178 929.53C271 954.598 235.77 896.332 224.93 865.845C218.832 850.262 192.41 802.16 169.375 789.287C150.405 779.125 123.305 754.057 168.698 753.38C211.38 752.702 241.868 792.675 252.03 808.935C300.81 890.912 378.723 867.878 409.888 853.65C414.63 818.42 428.857 794.707 444.44 781.157C323.845 767.607 197.83 720.86 197.83 513.545C197.83 454.602 218.833 405.822 253.385 367.882C247.965 354.332 228.995 298.777 258.805 224.252C258.805 224.252 304.198 210.025 407.855 279.808C451.215 267.613 497.285 261.515 543.355 261.515C589.425 261.515 635.495 267.613 678.855 279.808C782.513 209.348 827.905 224.252 827.905 224.252C857.715 298.777 838.745 354.332 833.325 367.882C867.878 405.822 888.88 453.925 888.88 513.545C888.88 721.537 762.188 767.607 641.593 781.157C661.24 798.095 678.178 830.615 678.178 881.428C678.178 953.92 677.5 1012.19 677.5 1030.48C677.5 1044.71 687.663 1061.64 714.763 1056.22C822.365 1019.91 915.868 950.759 982.106 858.512C1048.34 766.264 1083.98 655.565 1084 542C1084 242.545 841.455 0 542 0Z" }) }));
+};
+export const EmailLogo = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1299 1299", className: "w-[30px]", children: _jsx("path", { fill: "currentcolor", d: "M1177.22 202.969H121.781C99.3278 202.969 81.1875 221.109 81.1875 243.562V1055.44C81.1875 1077.89 99.3278 1096.03 121.781 1096.03H1177.22C1199.67 1096.03 1217.81 1077.89 1217.81 1055.44V243.562C1217.81 221.109 1199.67 202.969 1177.22 202.969ZM1126.48 343.525V1004.7H172.523V343.525L137.511 316.251L187.366 252.189L241.66 294.432H1057.47L1111.76 252.189L1161.62 316.251L1126.48 343.525V343.525ZM1057.47 294.305L649.5 611.443L241.533 294.305L187.239 252.062L137.384 316.124L172.397 343.398L605.735 680.326C618.197 690.008 633.529 695.263 649.31 695.263C665.091 695.263 680.422 690.008 692.885 680.326L1126.48 343.525L1161.49 316.251L1111.63 252.189L1057.47 294.305Z" }) }));
+};
+const TeamMemberCard = ({ name, title, description, image, twitter, linkedin, github, email, }) => {
+    return (_jsxs("div", { className: "flex-1 rounded-[15px] flex flex-col md:flex-row gap-2 md:gap-4", children: [_jsx("img", { src: image, className: "w-[250px] h-[250px] rounded-xl border-effect" }), _jsxs("div", { className: "flex flex-col border-effect px-4 py-3 bg-pane", children: [_jsx("h2", { className: "ext-[1.6em] mb-1 mt-3 text-[var(--ifm-color-primary)] font-brand", children: name }), _jsx("strong", { className: "font-brand", children: title }), _jsx("div", { className: "mt-5 mb-5 leading-normal font-brand", children: description }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "gap-3 flex flex-row", children: [_jsx("a", { className: "no-underline text-inherit", target: "_blank", href: twitter, children: _jsx(TwitterLogo, {}) }), _jsx("a", { className: "no-underline text-inherit", target: "_blank", href: linkedin, children: _jsx(LinkedInLogo, {}) }), _jsx("a", { className: "no-underline text-inherit", target: "_blank", href: github, children: _jsx(GitHubLogo, {}) }), _jsx("a", { className: "no-underline text-inherit", target: "_blank", href: `mailto:${email}`, children: _jsx(EmailLogo, {}) })] })] })] }));
+};
+export const TeamCardsLayout = () => {
+    return (_jsxs("div", { className: "flex flex-col gap-12 md:gap-4", children: [_jsx(TeamMemberCard, { name: "Jonny Burger", title: "Chief Hacker", description: "Making cool software for myself and others and getting to know all kinds of different people - that's what makes Remotion my dream job!", image: "/img/team/jonny.png", twitter: "https://twitter.com/JNYBGR", linkedin: "https://ch.linkedin.com/in/jonny-burger-4115109b", github: "https://github.com/JonnyBurger", email: "jonny@remotion.dev" }), _jsx(TeamMemberCard, { name: "Mehmet Ademi", title: "Business Manager", description: "Transitioning from traditional business, Remotion allowed me to merge my passion for technology and business in a distinctive way.", image: "/img/team/mehmet.png", twitter: "https://twitter.com/mehmetademi", linkedin: "https://www.linkedin.com/in/mehmetademi", github: "https://github.com/MehmetAdemi", email: "mehmet@remotion.dev" }), _jsx(TeamMemberCard, { name: "Igor Samokhovets", title: "Product Engineer", description: "With a background in music industry and a passion for coding, I've been building tools to help musicians create. Remotion is the perfect place to blend my tech skills and creativity.", image: "/img/team/igor.jpg", twitter: "https://x.com/tequilafunks", linkedin: "https://www.linkedin.com/in/samohovets/", github: "https://github.com/samohovets", email: "igor@remotion.dev" })] }));
+};

package/dist/components/team/TitleTeamCards.d.ts

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

package/dist/components/team/TitleTeamCards.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TeamPicture } from '../TeamPicture';
+import { TeamCardsLayout } from './TeamCards';
+export const TitleTeamCards = () => {
+    return (_jsxs("div", { children: [_jsx("h1", { className: "font-brand", children: "Team" }), _jsx(TeamPicture, {}), _jsx(TeamCardsLayout, {})] }));
+};

package/dist/components/team/TrustSection.d.ts

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

package/dist/components/team/TrustSection.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from '@remotion/design';
+const SwissIcon = () => {
+    return (_jsx("svg", { viewBox: "0 0 512 512", style: {
+            height: 36,
+            overflow: 'visible',
+        }, children: _jsx("path", { fill: "#DA291C", className: "stroke-black dark:stroke-white", strokeWidth: 36, d: "M64 32C28.7 32 0 60.7 0 96l0 320c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192l80 0 0-80c0-17.7 14.3-32 32-32l0 0c17.7 0 32 14.3 32 32l0 80 80 0c17.7 0 32 14.3 32 32l0 0c0 17.7-14.3 32-32 32l-80 0 0 80c0 17.7-14.3 32-32 32l0 0c-17.7 0-32-14.3-32-32l0-80-80 0c-17.7 0-32-14.3-32-32l0 0c0-17.7 14.3-32 32-32z" }) }));
+};
+const ProfitableIcon = () => {
+    return (_jsx("svg", { viewBox: "0 0 512 512", style: {
+            height: 36,
+            overflow: 'visible',
+        }, children: _jsx("path", { className: "fill-brand stroke-black dark:stroke-white", strokeWidth: 36, d: "M470.7 9.4c3 3.1 5.3 6.6 6.9 10.3s2.4 7.8 2.4 12.2l0 .1 0 72c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-29.7L330.5 175.8c-6.2 6.3-14.3 9.9-22.8 10.2s-17-2.8-23.5-8.7l-70.2-63.4L73.4 263.4c-9.2 9.6-24.3 9.9-33.9 .7s-9.9-24.3-.7-33.9l160-168c6.2-6.5 14.4-10.1 23-10.3s17 3 23.4 8.9l70.4 63.6L404.7 33.9 375.9 34c-13.3 0-24-10.7-24-24s10.7-24 24-24L448 6c0 0 0 0 0 0c8.3 0 16.4 3.4 22.7 9.4zM40 288c-13.3 0-24 10.7-24 24l0 160c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-160c0-13.3-10.7-24-24-24l-48 0zm120 24l0 160c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-160c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zm144-72l0 232c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-232c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zm144-48l0 280c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-280c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24z" }) }));
+};
+const KeyIcon = () => {
+    return (_jsx("svg", { viewBox: "0 0 512 512", style: {
+            height: 36,
+            overflow: 'visible',
+        }, children: _jsx("path", { className: "fill-brand stroke-black dark:stroke-white", strokeWidth: 36, d: "M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17l0 80c0 13.3 10.7 24 24 24l80 0c13.3 0 24-10.7 24-24l0-40 40 0c13.3 0 24-10.7 24-24l0-40 40 0c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zm40-176a40 40 0 1 1 0-80 40 40 0 1 1 0 80z" }) }));
+};
+const ShieldIcon = () => {
+    return (_jsx("svg", { viewBox: "0 0 512 512", style: {
+            height: 36,
+            overflow: 'visible',
+        }, children: _jsx("path", { className: "fill-brand stroke-black dark:stroke-white", strokeWidth: 36, d: "M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8l0 378.1C394 378 431.1 230.1 432 141.4L256 66.8z" }) }));
+};
+const ClockIcon = () => {
+    return (_jsx("svg", { viewBox: "0 0 512 512", style: {
+            height: 36,
+            overflow: 'visible',
+        }, children: _jsx("path", { className: "fill-brand stroke-black dark:stroke-white", strokeWidth: 36, d: "M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" }) }));
+};
+const UsersIcon = () => {
+    return (_jsx("svg", { viewBox: "0 0 640 512", style: {
+            height: 36,
+            overflow: 'visible',
+        }, children: _jsx("path", { className: "fill-brand stroke-black dark:stroke-white", strokeWidth: 36, d: "M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192l42.7 0c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96l-176.7 0C26.8 320 0 293.2 0 260.7l0 0 0 38zm640 0l0-38 0 0C640 293.2 613.2 320 580.7 320l-176.7 0c26.5-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7l42.7 0C592.2 192 640 239.8 640 298.7zM208 224a112 112 0 1 1 224 0 112 112 0 1 1-224 0zm-16 160l256 0 0 0c53 0 96 43 96 96l0 0c0 17.7-14.3 32-32 32L128 512c-17.7 0-32-14.3-32-32l0 0c0-53 43-96 96-96l0 0z" }) }));
+};
+const CodeIcon = () => {
+    return (_jsx("svg", { viewBox: "0 0 640 512", style: {
+            height: 36,
+            overflow: 'visible',
+        }, children: _jsx("path", { className: "fill-brand stroke-black dark:stroke-white", strokeWidth: 36, d: "M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z" }) }));
+};
+const VideoIcon = () => {
+    return (_jsx("svg", { viewBox: "0 0 576 512", style: {
+            height: 36,
+            overflow: 'visible',
+        }, children: _jsx("path", { className: "fill-brand stroke-black dark:stroke-white", strokeWidth: 36, d: "M0 128C0 92.7 28.7 64 64 64l256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2l0 256c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 336l0-16 0-128 0-16 14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z" }) }));
+};
+const StarIcon = () => {
+    return (_jsx("svg", { viewBox: "0 0 576 512", style: {
+            height: 36,
+            overflow: 'visible',
+        }, children: _jsx("path", { className: "fill-brand stroke-black dark:stroke-white", strokeWidth: 36, d: "M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.6 329l104.2-103.1c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" }) }));
+};
+export const TrustSection = () => {
+    return (_jsxs("div", { className: "mt-10", children: [_jsxs("div", { className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap", children: [_jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(SwissIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Swiss quality" }), _jsxs("div", { className: "font-brand", children: ["We are a company based in Zurich, Switzerland. We", "'", "re far away from the craziness that is Silicon Valley."] })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(ProfitableIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Sustainable business" }), _jsxs("div", { className: "font-brand", children: ["Remotion is profitable. Aside from our", ' ', _jsx("a", { href: "/investors", className: "text-brand hover:underline underline-offset-4", children: "early investors" }), ", we don", "'", "t need outside investment to sustain the business."] })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(KeyIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Founder-owned" }), _jsx("div", { className: "font-brand", children: "Us founders own the company. And we just want one thing: Make programmatic video glorious." })] })] }), _jsx("div", { className: "h-4" }), _jsxs("div", { className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap", children: [_jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(ClockIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "5 years and counting" }), _jsx("div", { className: "font-brand", children: "Making Remotion since 2021. No plans to change our business model or sell the company." })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(ShieldIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Succession plan" }), _jsxs("div", { className: "font-brand", children: ["If something happens to us, the project will fall under", ' ', _jsx("a", { href: "https://github.com/wcandillon", target: "_blank", className: "text-brand hover:underline underline-offset-4", children: "William Candillon" }), "'s", " supervision."] })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(UsersIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "200+ customers" }), _jsx("div", { className: "font-brand", children: "More than 200 companies trust Remotion, from small businesses to FAANG." })] })] }), _jsx("div", { className: "h-4" }), _jsxs("div", { className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap", children: [_jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(CodeIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Source-available" }), _jsx("div", { className: "font-brand", children: "Our code is publicly available on GitHub. You can inspect, fork, and self-host it. Full transparency, no black boxes." })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(VideoIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "1M+ videos/month" }), _jsx("div", { className: "font-brand", children: "More than one million videos are rendered with Remotion every month. Battle-tested at scale." })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(StarIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "40,000+ GitHub stars" }), _jsx("div", { className: "font-brand", children: "One of the most popular media projects on GitHub. Trusted by the developer community." })] })] })] }));
+};

package/dist/components/team.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const AboutUsHeader: React.FC;
+export declare const TeamPage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/team.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TitleTeamCards } from './team/TitleTeamCards';
+import { TrustSection } from './team/TrustSection';
+export const AboutUsHeader = () => {
+    return (_jsx("div", { className: "flex flex-row items-center md:flex-col pt-10", children: _jsxs("div", { className: "flex-1", children: [_jsxs("h1", { className: "text-3xl font-bold font-['GTPlanar'] leading-tight max-w-[1000px] md:text-5xl", children: [_jsx("svg", { className: "h-6 md:h-8 mr-3 md:mr-6", viewBox: "0 0 105 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M24.0635 0.00717926C21.8217 0.12886 20.0152 0.48455 18.1946 1.17721C17.2867 1.51886 15.7984 2.26301 14.9794 2.77782C11.5535 4.926 8.94203 8.15529 7.58011 11.9134C7.30866 12.6576 6.57388 15.0304 6.10119 16.6638C2.95146 27.5825 1.16365 39.5215 0.779884 52.1579C0.719043 54.1703 0.719043 58.9628 0.779884 60.9425C1.03729 69.3199 1.83759 76.883 3.28843 84.5958C3.87813 87.7175 4.82352 91.9109 5.37109 93.8157C6.48964 97.6861 8.77354 100.981 12.0216 103.396C14.1978 105.015 16.6689 106.101 19.4068 106.635C20.7266 106.892 22.4676 107.009 23.75 106.925C25.5237 106.808 29.0432 106.335 31.9027 105.825C44.7918 103.527 56.6981 99.4131 67.4951 93.5255C74.3328 89.7954 80.1783 85.7565 85.8178 80.8564C91.4386 75.9797 96.2311 70.7333 100.448 64.8457C101.426 63.4838 101.917 62.6881 102.409 61.6866C103.673 59.1032 104.267 56.5338 104.262 53.6602C104.262 50.9831 103.757 48.6056 102.666 46.172C102.142 44.9973 101.641 44.1548 100.518 42.5542C96.3809 36.662 91.7897 31.5278 86.1922 26.5388C77.5153 18.8073 67.2096 12.4657 55.7012 7.77151C53.2067 6.75593 50.7496 5.86202 47.7918 4.89323C41.5298 2.84802 33.7795 1.07425 27.2226 0.189705C26.193 0.0493011 24.7936 -0.0302582 24.0635 0.00717926Z", fill: "#0B84F3" }) }), "The programmatic video dream", ' '] }), _jsx("p", { className: "leading-relaxed text-balance font-brand", children: "Started as a side project in 2021, we are now a company in Zurich, Switzerland and are pushing to combine the powers of video editing and programming!" })] }) }));
+};
+const container = {
+    maxWidth: 1000,
+    margin: 'auto',
+    paddingLeft: 16,
+    paddingRight: 16,
+};
+export const TeamPage = () => {
+    return (_jsx("div", { className: "bg-[var(--background)]", children: _jsxs("div", { style: container, children: [_jsx("br", {}), _jsx(AboutUsHeader, {}), _jsx("br", {}), _jsx(TitleTeamCards, {}), _jsx("br", {}), _jsx(TrustSection, {}), _jsx("br", {})] }) }));
+};

package/dist/components/template-modal-content.d.ts

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

package/dist/components/template-modal-content.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card, Triangle } from '@remotion/design';
+import { useCallback, useState } from 'react';
+import { cn } from '../cn';
+import { useMobileLayout } from '../helpers/mobile-layout';
+import { BackButton } from './BackButton';
+import { CommandCopyButton } from './CommandCopyButton';
+import { MuxVideo } from './homepage/MuxVideo';
+import { Tailwind } from './icons/tailwind';
+const RESERVED_FOR_SIDEBAR = 350;
+const GithubIcon = () => {
+    return (_jsx("svg", { viewBox: "0 0 496 512", height: "22", width: "22", 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" }) }));
+};
+const StackBlitzIcon = () => {
+    return (_jsx("svg", { viewBox: "0 0 28 28", "aria-hidden": "true", width: "24", height: "24", children: _jsx("path", { fill: "currentColor", d: "M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z" }) }));
+};
+const PreviewIcon = () => {
+    return (_jsx("svg", { viewBox: "0 0 512 512", "aria-hidden": "true", width: "24", height: "24", children: _jsx("path", { fill: "currentColor", d: "M368 208A160 160 0 1 0 48 208a160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1l124 124 17 17L478.1 512l-17-17-124-124zM145.8 116.2l24 14 110.2 64L303.9 208 280 221.8l-110.2 64-24 14V272 144 116.2z" }) }));
+};
+let copyTimeout = null;
+export const TemplateModalContent = ({ template }) => {
+    var _a;
+    const [copied, setCopied] = useState(false);
+    const mobileLayout = useMobileLayout();
+    const copyCommand = useCallback(async (command) => {
+        clearTimeout(copyTimeout);
+        const permissionName = 'clipboard-write';
+        try {
+            const result = await navigator.permissions.query({
+                name: permissionName,
+            });
+            if (result.state === 'granted' || result.state === 'prompt') {
+                await navigator.clipboard.writeText(command);
+                setCopied(command);
+            }
+        }
+        catch (_a) {
+            // eslint-disable-next-line no-alert
+            alert('Copying is not supported on this device');
+        }
+        copyTimeout = setTimeout(() => {
+            setCopied(false);
+        }, 2000);
+    }, []);
+    const npmCommand = `npx create-video@latest --${template.cliId}`;
+    const pnpmCommand = `pnpm create video --${template.cliId}`;
+    const bunCommand = `bun create video --${template.cliId}`;
+    return (_jsxs("div", { children: [_jsx(BackButton, { link: "/templates", text: "Back to Templates", color: "currentcolor" }), _jsx("h1", { className: "mt-0", children: template.shortName }), _jsxs(Card, { className: "mb-7 overflow-hidden w-full", children: [_jsxs("div", { className: `mb-0 flex overflow-auto ${mobileLayout ? 'flex-col h-full left-0 top-0' : 'flex-row'} w-full border-b-2 border-black`, children: [_jsx("div", { className: cn('flex w-full border-black flex-row', mobileLayout ? 'border-b-2' : 'border-r-2'), style: {
+                                    aspectRatio: template.type === 'video'
+                                        ? `${template.promoVideo.width} / ${template.promoVideo.height}`
+                                        : undefined,
+                                    flex: 1,
+                                    maxHeight: 500,
+                                }, children: template.type === 'video' ? (_jsx(MuxVideo, { muxId: template.promoVideo.muxId, loop: true, autoPlay: true, muted: true, playsInline: true, style: {
+                                        aspectRatio: `${template.promoVideo.width} / ${template.promoVideo.height}`,
+                                        width: '100%',
+                                        height: 'auto',
+                                        overflow: 'hidden',
+                                        display: 'block',
+                                    } })) : (_jsx("img", { src: template.promoBanner.src, className: "w-full h-auto border border-[var(--ifm-color-emphasis-300)]" })) }), _jsxs("div", { className: `overflow-auto ${mobileLayout ? 'w-full' : ''} p-5 font-brand`, style: {
+                                    width: mobileLayout ? '100%' : RESERVED_FOR_SIDEBAR,
+                                }, children: [_jsx("div", { className: "flex flex-row items-center pt-1 pb-1 align-middle pr-4", children: _jsxs("a", { className: "text-inherit inline-flex flex-row items-center cursor-pointer select-none", onPointerDown: () => copyCommand(npmCommand), children: [_jsx("div", { className: "w-6 h-9 mr-3 inline-flex items-center justify-center", children: _jsx(CommandCopyButton, { customSvg: _jsxs("svg", { viewBox: "0 0 2500 2500", xmlns: "http://www.w3.org/2000/svg", className: "h-5", children: [_jsx("path", { d: "M0 0h2500v2500H0z", fill: "#CB0201" }), _jsx("path", { d: "M1241.5 268.5h-973v1962.9h972.9V763.5h495v1467.9h495V268.5z", fill: "white" })] }), copied: copied === npmCommand }) }), _jsx("div", { className: "mr-3", children: npmCommand })] }) }), _jsx("div", { className: "flex flex-row items-center pt-1 pb-1 align-middle pr-4", children: _jsxs("a", { target: "_blank", className: "text-inherit inline-flex flex-row items-center cursor-pointer select-none", onPointerDown: () => copyCommand(bunCommand), children: [_jsx("div", { className: "w-6 h-9 mr-3 inline-flex items-center justify-center", children: _jsx(CommandCopyButton, { customSvg: _jsxs("svg", { id: "Bun", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 80 70", className: "h-5", children: [_jsx("path", { id: "Shadow", d: "M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z" }), _jsxs("g", { id: "Body", children: [_jsx("path", { id: "Background", d: "M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z", style: { fill: '#fbf0df' } }), _jsx("path", { id: "Bottom_Shadow", "data-name": "Bottom Shadow", d: "M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z", style: { fill: '#f6dece' } }), _jsx("path", { id: "Light_Shine", "data-name": "Light Shine", d: "M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z", style: { fill: '#fffefc' } }), _jsx("path", { id: "Top", d: "M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z", style: { fill: '#ccbea7', fillRule: 'evenodd' } }), _jsx("path", { id: "Outline", d: "M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z" })] }), _jsxs("g", { id: "Mouth", children: [_jsx("g", { id: "Background-2", "data-name": "Background", children: _jsx("path", { d: "M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z", style: { fill: '#b71422' } }) }), _jsxs("g", { id: "Tongue", children: [_jsx("path", { id: "Background-3", "data-name": "Background", d: "M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z", style: { fill: '#ff6164' } }), _jsx("path", { id: "Outline-2", "data-name": "Outline", d: "M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z" })] }), _jsx("path", { id: "Outline-3", "data-name": "Outline", d: "M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z" })] }), _jsxs("g", { id: "Face", children: [_jsx("ellipse", { id: "Right_Blush", "data-name": "Right Blush", cx: "53.22", cy: "40.18", rx: "5.85", ry: "3.44", style: { fill: '#febbd0' } }), _jsx("ellipse", { id: "Left_Bluch", "data-name": "Left Bluch", cx: "22.95", cy: "40.18", rx: "5.85", ry: "3.44", style: { fill: '#febbd0' } }), _jsx("path", { id: "Eyes", d: "M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z", style: { fillRule: 'evenodd' } }), _jsx("path", { id: "Iris", d: "M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z", style: { fill: '#fff', fillRule: 'evenodd' } })] })] }), copied: copied === bunCommand }) }), _jsx("div", { className: "mr-3", children: bunCommand })] }) }), _jsx("div", { className: "flex flex-row items-center pt-1 pb-1 align-middle pr-4", children: _jsxs("a", { className: "text-inherit inline-flex flex-row items-center cursor-pointer select-none", onPointerDown: () => copyCommand(pnpmCommand), children: [_jsx("div", { className: "w-6 h-9 mr-3 inline-flex items-center justify-center", children: _jsx(CommandCopyButton, { customSvg: _jsxs("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", viewBox: "76.58987244897958 44 164.00775510204068 164", width: "160.01", height: "160", className: "h-5", children: [_jsxs("defs", { children: [_jsx("path", { d: "M237.6 95L187.6 95L187.6 45L237.6 45L237.6 95Z", id: "b45vdTD8hs" }), _jsx("path", { d: "M182.59 95L132.59 95L132.59 45L182.59 45L182.59 95Z", id: "a40WtxIl8d" }), _jsx("path", { d: "M127.59 95L77.59 95L77.59 45L127.59 45L127.59 95Z", id: "h2CN9AEEpe" }), _jsx("path", { d: "M237.6 150L187.6 150L187.6 100L237.6 100L237.6 150Z", id: "dqv5133G8" }), _jsx("path", { d: "M182.59 150L132.59 150L132.59 100L182.59 100L182.59 150Z", id: "b1Lv79ypvm" }), _jsx("path", { d: "M182.59 205L132.59 205L132.59 155L182.59 155L182.59 205Z", id: "hy1IZWwLX" }), _jsx("path", { d: "M237.6 205L187.6 205L187.6 155L237.6 155L237.6 205Z", id: "akQfjxQes" }), _jsx("path", { d: "M127.59 205L77.59 205L77.59 155L127.59 155L127.59 205Z", id: "bdSrwE5pk" })] }), _jsxs("g", { children: [_jsx("g", { children: _jsx("use", { xlinkHref: "#b45vdTD8hs", opacity: "1", fill: "#f9ad00", fillOpacity: "1" }) }), _jsx("g", { children: _jsx("use", { xlinkHref: "#a40WtxIl8d", opacity: "1", fill: "#f9ad00", fillOpacity: "1" }) }), _jsx("g", { children: _jsx("use", { xlinkHref: "#h2CN9AEEpe", opacity: "1", fill: "#f9ad00", fillOpacity: "1" }) }), _jsx("g", { children: _jsx("use", { xlinkHref: "#dqv5133G8", opacity: "1", fill: "#f9ad00", fillOpacity: "1" }) }), _jsx("g", { children: _jsx("use", { xlinkHref: "#b1Lv79ypvm", opacity: "1", fill: "currentColor", fillOpacity: "1" }) }), _jsx("g", { children: _jsx("use", { xlinkHref: "#hy1IZWwLX", opacity: "1", fill: "currentColor", fillOpacity: "1" }) }), _jsx("g", { children: _jsx("use", { xlinkHref: "#akQfjxQes", opacity: "1", fill: "currentColor", fillOpacity: "1" }) }), _jsx("g", { children: _jsx("use", { xlinkHref: "#bdSrwE5pk", opacity: "1", fill: "currentColor", fillOpacity: "1" }) })] })] }), copied: copied === pnpmCommand }) }), _jsx("div", { className: "mr-3", children: pnpmCommand })] }) }), _jsx("div", { className: "flex flex-row items-center pt-1 pb-1 align-middle pr-4", children: _jsxs("a", { target: "_blank", className: "text-inherit inline-flex flex-row items-center cursor-pointer select-none", href: `https://github.com/${template.org}/${template.repoName}/generate`, children: [_jsx("div", { className: "w-6 h-9 mr-3 inline-flex items-center justify-center", children: _jsx(GithubIcon, {}) }), ' ', "Fork template"] }) }), _jsx("div", { className: "flex flex-row items-center pt-1 pb-1 align-middle pr-4", children: _jsxs("a", { target: "_blank", className: "text-inherit inline-flex flex-row items-center cursor-pointer select-none", href: `https://github.com/${template.org}/${template.repoName}`, children: [_jsx("div", { className: "w-6 h-9 mr-3 inline-flex items-center justify-center", children: _jsx(GithubIcon, {}) }), ' ', "View source"] }) }), template.previewURL && (_jsx("a", { target: "_blank", className: "text-inherit inline-flex flex-row items-center cursor-pointer select-none", href: template.previewURL, children: _jsxs("div", { className: "flex flex-row items-center pt-1 pb-1 align-middle pr-4", children: [_jsx("div", { className: "w-6 h-9 mr-3 inline-flex items-center justify-center", children: _jsx(PreviewIcon, {}) }), (_a = template.previewLabel) !== null && _a !== void 0 ? _a : (_jsxs(_Fragment, { children: ["See Preview", ' ', _jsxs("span", { className: "whitespace-pre text-[var(--light-text-color)]", children: [' ', "via Remotion Studio"] })] }))] }) })), template.showStackblitz ? (_jsx("a", { target: "_blank", className: "text-inherit inline-flex flex-row items-center cursor-pointer select-none", href: `https://stackblitz.com/github/${template.org}/${template.repoName}`, children: _jsxs("div", { className: "flex flex-row items-center pt-1 pb-1 align-middle pr-4", children: [_jsx("div", { className: "w-6 h-9 mr-3 inline-flex items-center justify-center", children: _jsx(StackBlitzIcon, {}) }), "Try online", ' ', _jsxs("span", { className: "whitespace-pre text-[var(--light-text-color)]", children: [' ', "via StackBlitz"] })] }) })) : null, template.allowEnableTailwind ? (_jsxs("div", { className: "flex flex-row items-center pt-1 pb-1 align-middle pr-4", children: [_jsx("div", { className: "w-6 h-9 mr-3 inline-flex items-center justify-center", children: _jsx(Tailwind, {}) }), "Supports Tailwind"] })) : null] })] }), _jsxs("div", { className: cn('flex flex-row w-full', template.contributedBy !== null && mobileLayout
+                            ? 'flex-col'
+                            : 'flex-row'), children: [_jsx("div", { 
+                                // eslint-disable-next-line react/no-danger
+                                dangerouslySetInnerHTML: {
+                                    __html: template.longerDescription,
+                                }, className: cn('p-5 font-brand flex-1', mobileLayout ? null : 'border-r-2 border-black') }), _jsx("div", { style: { width: mobileLayout ? '100%' : RESERVED_FOR_SIDEBAR }, className: cn(mobileLayout && template.contributedBy === null
+                                    ? 'hidden'
+                                    : 'flex', template.contributedBy !== null && mobileLayout
+                                    ? 'border-t-2 border-black w-full py-4 justify-start px-5'
+                                    : 'pl-5 pr-8 justify-end ', 'items-center  text-brand dark:text-white gap-2'), children: template.contributedBy ? (_jsxs("div", { className: cn('flex flex-row pt-1 pb-1 pr-4 gap-2 text-text font-brand items-center'), children: [_jsx("img", { src: `https://github.com/${template.contributedBy}.png`, className: "w-6 h-6 rounded-full" }), _jsxs("div", { className: "text-text leading-tight", children: ["Thanks to", ' ', _jsx("a", { href: `https://github.com/${template.contributedBy}`, target: "_blank", className: "text-inherit underline", children: template.contributedBy }), ' ', "for contributing this template!"] })] })) : (_jsx(Triangle, { className: "h-7" })) })] })] })] }));
+};

package/dist/components/templates.d.ts

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

package/dist/components/templates.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '@remotion/design';
+import { CreateVideoInternals } from 'create-video';
+import { IconForTemplate } from './homepage/IconForTemplate';
+import { EditorIcon } from './icons/editor';
+import { SkiaIcon } from './icons/skia';
+import { TimelineIcon } from './icons/timeline';
+const Item = ({ children, label, description }) => {
+    return (_jsxs("div", { className: "h-full w-full flex-1", children: [_jsxs("div", { className: "flex flex-row items-center", children: [_jsx("div", { className: "flex mr-2.5 h-[30px] w-[30px] justify-center items-center", children: children }), _jsx("div", { className: "font-bold", children: label })] }), _jsx("div", { children: _jsx("p", { 
+                    // eslint-disable-next-line react/no-danger
+                    dangerouslySetInnerHTML: {
+                        __html: description,
+                    }, className: "text-sm mt-2.5 text-gray-500 dark:text-gray-200 mb-2.5" }) })] }));
+};
+export const Templates = () => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "max-w-[1000px] mx-auto px-5 bg-[var(--background)]", children: [_jsxs("h1", { className: "text-4xl  md:text-7xl lg:text-8xl font-black leading-none mt-[75px] text-center mb-10", children: ["Find the right", _jsx("br", {}), "template"] }), _jsx("p", { className: "text-center mb-[50px] font-brand", children: "Jumpstart your project with a template that fits your usecase." }), _jsx("h3", { children: "Free templates" }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[15px]", children: CreateVideoInternals.FEATURED_TEMPLATES.map((template) => {
+                            return (_jsx(Button, { href: `/templates/${template.cliId}`, depth: 0.5, className: "justify-start text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] h-full w-full items-start", children: _jsx(Item, { label: template.homePageLabel, description: template.description, children: _jsx(IconForTemplate, { scale: 0.7, template: template }) }) }, template.cliId));
+                        }) }), _jsx("br", {}), _jsx("br", {}), _jsx("h3", { children: "Paid templates" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[15px]", children: [_jsx(Button, { href: "https://www.remotion.pro/editor-starter", depth: 0.5, className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] h-full w-full items-start", children: _jsx(Item, { label: 'Editor Starter', description: 'A boilerplate for starting your own video editor', children: _jsx(EditorIcon, { style: {
+                                            height: 0.7 * 32,
+                                            overflow: 'visible',
+                                        } }) }) }), _jsx(Button, { href: "https://www.remotion.pro/watercolor-map", depth: 0.5, className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] h-full w-full items-start", children: _jsx(Item, { label: 'Watercolor Map', description: 'A beautiful 2D map for travel videos', children: _jsx(SkiaIcon, { style: {
+                                            height: 0.7 * 32,
+                                            overflow: 'visible',
+                                        } }) }) }), _jsx(Button, { href: "https://www.remotion.pro/timeline", depth: 0.5, className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] h-full w-full items-start", children: _jsx(Item, { label: '<Timeline />', description: 'A copy pasteable component for timeline-based editing', children: _jsx(TimelineIcon, { style: {
+                                            height: 0.7 * 32,
+                                        } }) }) })] }), _jsx("br", {}), _jsxs("p", { className: "text-center text-gray-500 font-brand text-sm", children: ["Couldn't", " find what you need? Find more in the list of", ' ', _jsx("a", { href: '/docs/resources', children: "Resources" }), "."] })] }), _jsx("br", {})] }));
+};