@remotion/promo-pages 4.0.457 → 4.0.459
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Homepage.js +699 -495
- package/dist/components/experts/experts-data.js +13 -0
- package/dist/components/homepage/CommunityStatsItems.js +1 -1
- package/dist/components/homepage/FreePricing.js +10 -11
- package/dist/components/homepage/GitHubButton.js +1 -1
- package/dist/components/prompts/PromptsGallery.js +1 -1
- package/dist/components/prompts/PromptsSubmit.js +1 -1
- package/dist/components/team/TrustSection.js +1 -1
- package/dist/design.js +396 -335
- package/dist/experts/experts-data.js +124 -2
- package/dist/experts.js +535 -331
- package/dist/homepage/Pricing.js +399 -338
- package/dist/prompts/PromptsGallery.js +396 -335
- package/dist/prompts/PromptsShow.js +396 -335
- package/dist/prompts/PromptsSubmit.js +396 -335
- package/dist/team.js +396 -335
- package/dist/template-modal-content.js +398 -337
- package/dist/templates.js +396 -335
- package/package.json +13 -13
- package/public/img/freelancers/huang-chi-chang.jpg +0 -0
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/Homepage.css +0 -32
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/Homepage.js +0 -42672
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/design.js +0 -20460
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/experts/experts-data.js +0 -740
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/experts.js +0 -8778
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/homepage/Pricing.js +0 -21875
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/prompts/PromptsGallery.js +0 -20301
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/prompts/PromptsShow.css +0 -2578
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/prompts/PromptsShow.js +0 -40128
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/prompts/PromptsSubmit.css +0 -2578
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/prompts/PromptsSubmit.js +0 -40219
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/prompts/prompt-types.js +0 -0
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/team.js +0 -292
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/template-modal-content.css +0 -32
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/template-modal-content.js +0 -22044
- package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/templates.js +0 -21306
- package/dist/components/homepage/InfoTooltip.d.ts +0 -6
- package/dist/components/homepage/InfoTooltip.js +0 -6
|
@@ -273,4 +273,17 @@ export const experts = [
|
|
|
273
273
|
since: new Date('2026-04-02').getTime(),
|
|
274
274
|
description: (_jsxs("div", { children: ["Built a full", ' ', _jsx("a", { target: '_blank', href: "https://github.com/haingt-dev/Bookie/tree/master/projects/ai-book-video", children: "AI video production pipeline" }), ' ', "using Remotion 4.0 \u2014 orchestrating self-hosted TTS (viXTTS), Gemini API image generation, SRT-driven subtitle timing, and Ken Burns motion presets. The pipeline produces complete book-to-video content in about an hour (1-person operation) with editorial design overlays, cross-dissolve transitions, and audio spectrum visualization. GPU-accelerated rendering on Linux.", _jsx("br", {}), "Available for AI-powered video pipelines, multi-API media orchestration, and Remotion integrations with existing backend infrastructure."] })),
|
|
275
275
|
},
|
|
276
|
+
{
|
|
277
|
+
slug: 'ashok-reddy',
|
|
278
|
+
name: 'Ashok Reddy',
|
|
279
|
+
image: '/img/freelancers/ashok.png',
|
|
280
|
+
website: null,
|
|
281
|
+
x: 'indieashok',
|
|
282
|
+
github: 'ashokDevs',
|
|
283
|
+
linkedin: 'in/ashok-reddy-kakumanu-8a3078247/',
|
|
284
|
+
email: 'ashok17748@gmail.com',
|
|
285
|
+
videocall: null,
|
|
286
|
+
since: new Date('2026-04-30').getTime(),
|
|
287
|
+
description: (_jsxs("div", { children: ["I built many trending templates at", ' ', _jsx("a", { target: '_blank', href: "https://vubo.ai", children: "Vubo" }), ", along with automations and AI-generated media pipelines using Remotion. I specialize in creating custom video templates, AI-powered video generation workflows, and integrations with existing infrastructure.", _jsx("br", {}), "Available for hourly and project/milestone-based engagements."] })),
|
|
288
|
+
},
|
|
276
289
|
];
|
|
@@ -30,7 +30,7 @@ export const PagesOfDocs = () => {
|
|
|
30
30
|
};
|
|
31
31
|
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" })] }));
|
|
32
32
|
export const GitHubStars = () => {
|
|
33
|
-
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: "
|
|
33
|
+
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: "45k", width: "80px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "GitHub stars", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));
|
|
34
34
|
};
|
|
35
35
|
export const DiscordMembers = () => {
|
|
36
36
|
return (_jsx(Pill, { className: 'w-[30%]', children: _jsxs("div", { style: {
|
|
@@ -2,7 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import { Switch } from '@remotion/design';
|
|
3
3
|
import React, { useCallback, useMemo } from 'react';
|
|
4
4
|
import { cn } from '../../cn';
|
|
5
|
-
import { InfoTooltip } from './InfoTooltip';
|
|
6
5
|
import { PricingBulletPoint } from './PricingBulletPoint';
|
|
7
6
|
const Container = ({ children, }) => {
|
|
8
7
|
return (_jsx("div", { className: 'flex flex-col border-effect rounded-xl p-5 bg-pane', children: children }));
|
|
@@ -23,7 +22,7 @@ const icon = {
|
|
|
23
22
|
height: 16,
|
|
24
23
|
marginLeft: 4,
|
|
25
24
|
};
|
|
26
|
-
const PricingSlider = ({ value, onChange, min, max, step = 1 }) => {
|
|
25
|
+
const PricingSlider = ({ value, onChange, min, max, step = 1, 'aria-label': ariaLabel }) => {
|
|
27
26
|
const percentage = ((value - min) / (max - min)) * 100;
|
|
28
27
|
return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
|
|
29
28
|
.pricing-slider {
|
|
@@ -56,7 +55,7 @@ const PricingSlider = ({ value, onChange, min, max, step = 1 }) => {
|
|
|
56
55
|
scale: 1.2;
|
|
57
56
|
cursor: pointer;
|
|
58
57
|
}
|
|
59
|
-
` }), _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: {
|
|
58
|
+
` }), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: (e) => onChange(Number(e.target.value)), "aria-label": ariaLabel, className: "pricing-slider w-full", style: {
|
|
60
59
|
background: `linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) ${percentage}%, var(--background) ${percentage}%, var(--background) 100%)`,
|
|
61
60
|
} })] }));
|
|
62
61
|
};
|
|
@@ -79,7 +78,7 @@ export const EnterpriseLicense = () => {
|
|
|
79
78
|
const SEAT_PRICE = 25;
|
|
80
79
|
const RENDER_UNIT_PRICE = 10;
|
|
81
80
|
const SectionCheckbox = ({ checked, onChange, title, subtitle, children }) => {
|
|
82
|
-
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" })] }));
|
|
81
|
+
return (_jsxs("div", { className: "flex flex-row gap-3 cursor-pointer select-none items-center", onClick: () => onChange(!checked), children: [_jsx(Switch, { active: checked, onToggle: () => onChange(!checked), "aria-label": title }), _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" })] }));
|
|
83
82
|
};
|
|
84
83
|
export const CompanyPricing = () => {
|
|
85
84
|
const [creatorsSelected, setCreatorsSelected] = React.useState(false);
|
|
@@ -111,23 +110,23 @@ export const CompanyPricing = () => {
|
|
|
111
110
|
}, [formatPrice, totalPrice]);
|
|
112
111
|
const showMinimumMessage = automatorsSelected && creatorsPrice + automatorsPrice < 100;
|
|
113
112
|
const showEnterpriseMessage = totalPrice >= 500;
|
|
114
|
-
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
|
|
113
|
+
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 (applies only to new Mux customers)", checked: true }), _jsx("div", { style: { height: 30 } }), _jsx(SectionCheckbox, { checked: creatorsSelected, onChange: setCreatorsSelected, title: "Remotion for Creators", subtitle: "Create videos for yourself - $25/mo per seat" }), _jsx("div", { className: cn('grid ease-out', creatorsSelected
|
|
115
114
|
? 'grid-rows-[1fr] opacity-100'
|
|
116
115
|
: 'grid-rows-[0fr] opacity-0'), style: {
|
|
117
116
|
transition: creatorsSelected
|
|
118
117
|
? 'grid-template-rows 150ms ease-out, opacity 150ms ease-out 75ms'
|
|
119
118
|
: 'opacity 150ms ease-out, grid-template-rows 150ms ease-out 75ms',
|
|
120
|
-
}, children:
|
|
121
|
-
|
|
122
|
-
|
|
119
|
+
}, inert: !creatorsSelected, children: _jsxs("div", { className: "overflow-hidden", children: [_jsx("p", { className: "text-sm text-muted fontbrand pt-3 pb-1", children: "Intended for low volume video creations through coding and prompting, and building motion design systems in a local environment. Get 1 Seat per user." }), _jsxs("div", { className: "flex flex-row items-center gap-3 sm:gap-4 w-full pt-3 pb-1", children: [_jsx("div", { className: "flex-1 min-w-0", children: _jsx(PricingSlider, { value: devSeatCount, onChange: setDevSeatCount, min: 1, max: 50, "aria-label": "Number of seats" }) }), _jsxs("div", { className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-center tabular-nums", children: [devSeatCount, " ", devSeatCount === 1 ? 'Seat' : 'Seats'] }), _jsxs("div", { className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap tabular-nums", children: ["$", new Intl.NumberFormat('en-US', {
|
|
120
|
+
maximumFractionDigits: 0,
|
|
121
|
+
}).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" }), _jsx("div", { className: cn('grid ease-out', automatorsSelected
|
|
123
122
|
? 'grid-rows-[1fr] opacity-100'
|
|
124
123
|
: 'grid-rows-[0fr] opacity-0'), style: {
|
|
125
124
|
transition: automatorsSelected
|
|
126
125
|
? 'grid-template-rows 150ms ease-out, opacity 150ms ease-out 75ms'
|
|
127
126
|
: 'opacity 150ms ease-out, grid-template-rows 150ms ease-out 75ms',
|
|
128
|
-
}, children:
|
|
129
|
-
|
|
130
|
-
|
|
127
|
+
}, inert: !automatorsSelected, children: _jsxs("div", { className: "overflow-hidden", children: [_jsx("p", { className: "text-sm text-muted fontbrand pt-3 pb-1", children: "Intended for companies launching SaaS applications; such as video editors and prompt-to-video apps, and automated high-volume video creation. A $100/mo Minimum Spend applies. Developers working on automation projects do not require a Seat." }), _jsxs("div", { className: "flex flex-row items-center gap-3 sm:gap-4 w-full pt-3 pb-1", children: [_jsx("div", { className: "flex-1 min-w-0", children: _jsx(PricingSlider, { value: cloudRenders, onChange: setCloudRenders, min: 1000, max: 100000, step: 1000, "aria-label": "Number of renders" }) }), _jsxs("div", { className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-right tabular-nums", children: [new Intl.NumberFormat('en-US').format(cloudRenders), " Renders"] }), _jsxs("div", { className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap tabular-nums", children: ["$", new Intl.NumberFormat('en-US', {
|
|
128
|
+
maximumFractionDigits: 0,
|
|
129
|
+
}).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)] })] })] }) }), _jsx("div", { style: { height: 14 } }), _jsxs("div", { className: "flex flex-row items-baseline justify-end gap-2", children: [_jsx("div", { className: "fontbrand text-muted text-sm", children: "Total" }), _jsxs(PriceTag, { children: [totalPriceString, "/month"] })] }), _jsxs("div", { className: "flex flex-col items-end", children: [_jsx(BottomInfo, { "data-visible": showMinimumMessage, className: "opacity-0 data-[visible=true]:opacity-100 transition-opacity mt-1", 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 mt-1", 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: {
|
|
131
130
|
...textUnitWrapper,
|
|
132
131
|
alignItems: 'flex-end',
|
|
133
132
|
}, 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" }) })] }) }) })] }));
|
|
@@ -3,5 +3,5 @@ const GithubIcon = () => {
|
|
|
3
3
|
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" }) }));
|
|
4
4
|
};
|
|
5
5
|
export const GithubButton = () => {
|
|
6
|
-
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: '
|
|
6
|
+
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: '45k' })] }));
|
|
7
7
|
};
|
|
@@ -56,5 +56,5 @@ const Pagination = ({ currentPage, totalPages }) => {
|
|
|
56
56
|
: 'text-muted-foreground hover:text-text'}`, children: page }, page))) }), currentPage < totalPages ? (_jsx("a", { href: getPageUrl(currentPage + 1), className: "text-muted-foreground hover:text-text no-underline hover:no-underline", children: "Next \u2192" })) : (_jsx("span", { className: "text-gray-300 cursor-not-allowed", children: "Next \u2192" }))] }));
|
|
57
57
|
};
|
|
58
58
|
export const PromptsGalleryPage = ({ promptSubmissions, currentPage, totalPages }) => {
|
|
59
|
-
return (_jsx(Page, { className: "flex-col", children: _jsxs("div", { className: "m-auto max-w-[1200px] w-full px-4 py-12", children: [_jsxs("div", { className: "mb-8", children: [_jsx("h1", { className: "text-3xl font-brand font-black", children: "Prompt Showcase" }), _jsxs("p", { className: "font-brand text-muted-foreground mt-4 max-w-[700px]", children: ["See what the community has built using", ' ', _jsx("a", { href: "/docs/ai/skills", className: "underline hover:text-text underline-offset-4", children: "Remotion Skills" }), ' ', "and a coding agent like Claude Code, Codex, or OpenCode. Want to make your own?"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { href: "/docs/ai/
|
|
59
|
+
return (_jsx(Page, { className: "flex-col", children: _jsxs("div", { className: "m-auto max-w-[1200px] w-full px-4 py-12", children: [_jsxs("div", { className: "mb-8", children: [_jsx("h1", { className: "text-3xl font-brand font-black", children: "Prompt Showcase" }), _jsxs("p", { className: "font-brand text-muted-foreground mt-4 max-w-[700px]", children: ["See what the community has built using", ' ', _jsx("a", { href: "/docs/ai/skills", className: "underline hover:text-text underline-offset-4", children: "Remotion Skills" }), ' ', "and a coding agent like Claude Code, Codex, or OpenCode. Want to make your own?"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { href: "/docs/ai/coding-agents", className: "font-brand rounded-full bg-[#D97757] flex items-center text-white", 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: "#fff" }) }), _jsx("div", { className: "text-sm", children: "Create your own video" })] }), _jsx(Button, { href: "/prompts/submit", className: "font-brand rounded-full text-sm", children: "Share your video" })] }), _jsx("div", { className: "h-12" }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: promptSubmissions.map((p) => (_jsx(PromptSubmissionCard, { promptSubmission: p }, p.id))) }), _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages })] }) }));
|
|
60
60
|
};
|
|
@@ -166,7 +166,7 @@ export const PromptsSubmitPage = () => {
|
|
|
166
166
|
return (_jsx(Page, { className: "flex-col", children: _jsx("div", { className: "m-auto max-w-[800px] w-full", children: _jsxs("div", { className: "mx-4 px-8 py-8 pt-8", children: [_jsx(NewBackButton, { text: "Back to gallery", link: "/prompts" }), _jsx("h1", { className: "text-3xl font-brand font-black", children: "Share your video" }), _jsxs("p", { className: "text-muted-foreground text-sm font-brand", children: ["Share a video you made with Remotion to be featured in the", ' ', _jsx("a", { href: "/prompts", className: "underline hover:text-text underline-offset-4", children: "Prompt Showcase." })] }), _jsx("p", { className: "text-muted-foreground text-sm font-brand", children: "Note that this showcase is curated - we may reject submissions if they are repetitive or not up to our quality standards. In that case, we will not give notification or reason." }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Title *" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "A short title for your prompt (max 80 characters)." }), _jsx(Input, { name: "title", placeholder: "Newspaper highlighting animation", className: "font-brand mt-3", value: title, maxLength: 80, onChange: (e) => setTitle(e.target.value) }), _jsxs("p", { className: "text-muted-foreground text-xs mt-1 mb-0 font-brand", children: [title.length, "/80"] }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Video *" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "Upload a video showing the result of your prompt." }), _jsx("input", { ref: fileInputRef, type: "file", accept: "video/*", onChange: onFileSelect, className: "hidden" }), _jsxs("div", { onDrop: onDrop, onDragOver: onDragOver, onDragEnter: onDragEnter, onDragLeave: onDragLeave, className: `flex flex-col items-center py-12 mt-3 rounded-lg border-2 border-dashed transition-colors ${isDragging
|
|
167
167
|
? 'border-brand bg-brand/10'
|
|
168
168
|
: 'border-muted-foreground/25'}`, children: [uploadState.type === 'idle' &&
|
|
169
|
-
(isDragging ? (_jsx("div", { className: "font-brand text-sm text-brand font-medium", children: "Drop your video here" })) : (_jsxs(_Fragment, { children: [_jsx(Button, { className: "font-brand rounded-full", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Choose video file" }), _jsx("div", { className: "font-brand text-sm mt-3 text-muted-foreground", children: "or drag and drop a video file here" })] }))), uploadState.type === 'uploading' && (_jsxs("div", { className: "text-muted-foreground font-brand font-medium text-sm", children: ["Uploading ", Math.round(uploadState.progress), "%"] })), uploadState.type === 'processing' && (_jsx("div", { className: "text-muted-foreground font-brand font-medium text-sm", children: "Processing video..." })), uploadState.type === 'ready' && (_jsxs("div", { className: "w-full flex flex-col items-center px-4 gap-4", children: [_jsx(MuxPlayer, { playbackId: uploadState.muxPlaybackId, title: title || 'Preview' }), _jsx("button", { type: "button", className: "font-brand text-sm text-muted-foreground hover:text-foreground transition-colors", onClick: () => setUploadState({ type: 'idle' }), children: "Remove video" })] })), uploadState.type === 'error' && (_jsx("div", { className: "text-red-500 font-brand font-medium text-sm", children: uploadState.message }))] }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Prompt(s) *" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "The prompts you used to generate this video. Separate multiple prompts with an empty line." }), _jsx(Textarea, { name: "prompt", className: "font-brand mt-3", placeholder: "Enter your full prompt here", value: prompt, onChange: (e) => setPrompt(e.target.value) }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Tool used" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "Which tool did you use to generate this video? (e.g. Claude Code, Cursor, Codex)" }), _jsx(Input, { name: "toolUsed", placeholder: "Claude Code", className: "font-brand mt-3", value: toolUsed, onChange: (e) => setToolUsed(e.target.value) }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Model used" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "Which AI model did you use? (e.g. Opus 4.
|
|
169
|
+
(isDragging ? (_jsx("div", { className: "font-brand text-sm text-brand font-medium", children: "Drop your video here" })) : (_jsxs(_Fragment, { children: [_jsx(Button, { className: "font-brand rounded-full", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Choose video file" }), _jsx("div", { className: "font-brand text-sm mt-3 text-muted-foreground", children: "or drag and drop a video file here" })] }))), uploadState.type === 'uploading' && (_jsxs("div", { className: "text-muted-foreground font-brand font-medium text-sm", children: ["Uploading ", Math.round(uploadState.progress), "%"] })), uploadState.type === 'processing' && (_jsx("div", { className: "text-muted-foreground font-brand font-medium text-sm", children: "Processing video..." })), uploadState.type === 'ready' && (_jsxs("div", { className: "w-full flex flex-col items-center px-4 gap-4", children: [_jsx(MuxPlayer, { playbackId: uploadState.muxPlaybackId, title: title || 'Preview' }), _jsx("button", { type: "button", className: "font-brand text-sm text-muted-foreground hover:text-foreground transition-colors", onClick: () => setUploadState({ type: 'idle' }), children: "Remove video" })] })), uploadState.type === 'error' && (_jsx("div", { className: "text-red-500 font-brand font-medium text-sm", children: uploadState.message }))] }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Prompt(s) *" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "The prompts you used to generate this video. Separate multiple prompts with an empty line." }), _jsx(Textarea, { name: "prompt", className: "font-brand mt-3", placeholder: "Enter your full prompt here", value: prompt, onChange: (e) => setPrompt(e.target.value) }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Tool used" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "Which tool did you use to generate this video? (e.g. Claude Code, Cursor, Codex)" }), _jsx(Input, { name: "toolUsed", placeholder: "Claude Code", className: "font-brand mt-3", value: toolUsed, onChange: (e) => setToolUsed(e.target.value) }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Model used" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "Which AI model did you use? (e.g. Opus 4.7, GPT-5.5)" }), _jsx(Input, { name: "modelUsed", placeholder: "Opus 4.7", className: "font-brand mt-3", value: modelUsed, onChange: (e) => setModelUsed(e.target.value) }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "How should we credit you? *" }), _jsxs(Tabs, { defaultValue: "github", className: "mt-3", onValueChange: (value) => {
|
|
170
170
|
setUsernameType(value);
|
|
171
171
|
setUsername('');
|
|
172
172
|
}, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "github", children: "GitHub" }), _jsx(TabsTrigger, { value: "x", children: "X (Twitter)" })] }), _jsx(TabsContent, { value: "github", children: _jsx(Input, { name: "username", className: "font-brand", placeholder: "Your GitHub username", value: usernameType === 'github' ? username : '', onChange: (e) => setUsername(e.target.value) }) }), _jsx(TabsContent, { value: "x", children: _jsx(Input, { name: "username", className: "font-brand", placeholder: "Your X username (without @)", value: usernameType === 'x' ? username : '', onChange: (e) => setUsername(e.target.value) }) })] }), _jsx("div", { className: "h-8" }), _jsx(Button, { onClick: submit, disabled: !submitPossible, type: "submit", className: "font-brand rounded-full w-full bg-brand text-white", children: "Submit" }), submitStatus.type === 'error' && (_jsxs("p", { className: "text-red-500 mt-4 text-sm font-brand", children: ["An error occurred: ", submitStatus.err.message] }))] }) }) }));
|
|
@@ -55,5 +55,5 @@ const StarIcon = () => {
|
|
|
55
55
|
}, 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" }) }));
|
|
56
56
|
};
|
|
57
57
|
export const TrustSection = () => {
|
|
58
|
-
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." })] })] })] }));
|
|
58
|
+
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." })] })] })] }));
|
|
59
59
|
};
|