Merge pull request #4857 from remotion-dev/update-pricing-page

remotion-dev · Feb 4, 2025 · 1a4ed85 · 1a4ed85
2 parents 0c67836 + 665f4ed
commit 1a4ed85
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 12 deletions.
diff --git a/packages/promo-pages/bundle.ts b/packages/promo-pages/bundle.ts
@@ -23,7 +23,10 @@ if (nodeVersion.trim() === 'undefined') {
 await $`bunx tailwindcss -i src/index.css -o dist/tailwind.css`;
 
 const result = await Bun.build({
-	entrypoints: ['./src/components/Homepage.tsx'],
+	entrypoints: [
+		'./src/components/Homepage.tsx',
+		'./src/components/homepage/Pricing.tsx',
+	],
 	format: 'esm',
 	external: ['react', 'react-dom', 'lottie-web', 'hls.js', 'plyr', 'zod'],
 });

diff --git a/packages/promo-pages/package.json b/packages/promo-pages/package.json
@@ -1,7 +1,9 @@
 {
 	"name": "@remotion/promo-pages",
 	"version": "4.0.258",
-	"private": true,
+	"publishConfig": {
+		"access": "public"
+	},
 	"scripts": {
 		"make": "bun --env-file=../.env.bundle bundle.ts",
 		"lint": "tsc && eslint src",

diff --git a/packages/promo-pages/src/components/homepage/FreePricing.tsx b/packages/promo-pages/src/components/homepage/FreePricing.tsx
@@ -80,11 +80,11 @@ export const FreePricing: React.FC = () => {
 			<Title>Free License</Title>
 			<PricingBulletPoint text="Unlimited videos" checked />
 			<PricingBulletPoint text="Commercial use allowed" checked />
+			<PricingBulletPoint text="Self-hosted cloud rendering allowed" checked />
 			<PricingBulletPoint
-				text="Cloud rendering allowed (self-hosted)"
-				checked
+				text="Must upgrade when your team grows"
+				checked={false}
 			/>
-			<PricingBulletPoint text="Upgrade when your team grows" checked={false} />
 		</Container>
 	);
 };
@@ -135,10 +135,12 @@ export const EnterpriseLicense: React.FC = () => {
 
 const SEAT_PRICE = 25;
 const RENDER_UNIT_PRICE = 10;
+const WEBCODECS_UNIT_PRICE = 10;
 
 export const CompanyPricing: React.FC = () => {
 	const [devSeatCount, setDevSeatCount] = React.useState(1);
 	const [cloudUnitCount, setCloudUnitCount] = React.useState(1);
+	const [webcodecsUnits, setWebcodecsUnits] = React.useState(1);
 
 	const formatPrice = useCallback((price: number) => {
 		const formatter = new Intl.NumberFormat('en-US', {
@@ -152,9 +154,11 @@ export const CompanyPricing: React.FC = () => {
 	const totalPrice = useMemo(() => {
 		return Math.max(
 			100,
-			devSeatCount * SEAT_PRICE + cloudUnitCount * RENDER_UNIT_PRICE,
+			devSeatCount * SEAT_PRICE +
+				cloudUnitCount * RENDER_UNIT_PRICE +
+				webcodecsUnits * WEBCODECS_UNIT_PRICE,
 		);
-	}, [cloudUnitCount, devSeatCount]);
+	}, [cloudUnitCount, devSeatCount, webcodecsUnits]);
 
 	const totalPriceString = useMemo(() => {
 		return formatPrice(totalPrice);
@@ -164,16 +168,37 @@ export const CompanyPricing: React.FC = () => {
 		const formatter = new Intl.NumberFormat('en-US', {
 			maximumFractionDigits: 0,
 		});
-		return formatter.format(cloudUnitCount * 2000);
+		return formatter.format(cloudUnitCount * 1000);
 	}, [cloudUnitCount]);
 
+	const conversionsPerMonth = useMemo(() => {
+		const formatter = new Intl.NumberFormat('en-US', {
+			maximumFractionDigits: 0,
+		});
+		return formatter.format(webcodecsUnits * 1000);
+	}, [webcodecsUnits]);
+
 	return (
 		<Container>
 			<Audience>For collaborations and companies of 4+ people</Audience>
 			<Title>Company License</Title>
-			<PricingBulletPoint text="Everything in Free License" checked />
+			<PricingBulletPoint text="Commercial use allowed" checked />
+			<PricingBulletPoint text="Self-hosted cloud rendering allowed" checked />
 			<PricingBulletPoint text="Prioritized Support" checked />
-			<PricingBulletPoint text="Remotion Recorder included" checked />
+			<PricingBulletPoint
+				text={
+					<span>
+						<a
+							href="https://remotion.dev/recorder"
+							className="underline underline-offset-4 text-inherit"
+						>
+							Remotion Recorder
+						</a>{' '}
+						included
+					</span>
+				}
+				checked
+			/>
 			<PricingBulletPoint text="$250 Mux credits" checked>
 				<InfoTooltip text="Credits for Mux.com. Applies only to new Mux customers." />
 			</PricingBulletPoint>
@@ -201,7 +226,14 @@ export const CompanyPricing: React.FC = () => {
 						Cloud Rendering Units
 					</div>
 					<div className={'text-muted fontbrand text-sm'}>
-						Allows for {rendersPerMonth} self-hosted renders per month
+						Allows for {rendersPerMonth}{' '}
+						<a
+							href="https://www.remotion.dev/docs/compare-ssr"
+							className="underline underline-offset-4 text-inherit"
+						>
+							self-hosted renders per month
+						</a>{' '}
+						each
 					</div>
 				</div>
 				<div style={{flex: 3}} />
@@ -217,6 +249,35 @@ export const CompanyPricing: React.FC = () => {
 					}).format(RENDER_UNIT_PRICE * cloudUnitCount)}
 				</SmallPriceTag>
 			</div>
+			<div style={{height: 14}} />
+			<div className={'flex flex-row items-center'}>
+				<div style={textUnitWrapper}>
+					<div className={'fontbrand font-bold text-lg'}>
+						WebCodec Conversion Units
+					</div>
+					<div className={'text-muted fontbrand text-sm'}>
+						Allows for{' '}
+						<a
+							className="underline underline-offset-4 text-inherit"
+							href="https://remotion.dev/webcodecs"
+						>
+							{conversionsPerMonth} client-side video conversions{' '}
+						</a>
+					</div>
+				</div>
+				<div style={{flex: 3}} />
+				<Counter
+					count={webcodecsUnits}
+					setCount={setWebcodecsUnits}
+					minCount={0}
+				/>
+				<SmallPriceTag>
+					$
+					{new Intl.NumberFormat('en-US', {
+						maximumFractionDigits: 0,
+					}).format(RENDER_UNIT_PRICE * webcodecsUnits)}
+				</SmallPriceTag>
+			</div>
 			<div style={{height: 20}} />
 			<div className={'flex flex-row justify-end'}>
 				<div style={{...textUnitWrapper, alignItems: 'flex-end'}}>

diff --git a/packages/promo-pages/src/components/homepage/PricingBulletPoint.tsx b/packages/promo-pages/src/components/homepage/PricingBulletPoint.tsx
@@ -15,7 +15,7 @@ const greyCircle: React.CSSProperties = {
 };
 
 export const PricingBulletPoint: React.FC<{
-	readonly text: string;
+	readonly text: React.ReactNode;
 	readonly checked: boolean;
 	readonly children?: React.ReactNode;
 }> = ({text, checked, children}) => {