@remotion/promo-pages 4.0.314 → 4.0.317

package/src/components/homepage/FreePricing.tsx

@@ -65,7 +65,7 @@ const SmallPriceTag: React.FC<{
 	return (
 		<div
 			className={
-				'fontbrand text-2xl font-medium  w-auto min-w-[80px] text-right shrink-0 ml-4'
+				'fontbrand text-2xl font-medium  w-auto min-w-[80px] text-right shrink-0'
 			}
 		>
 			{children}
@@ -137,10 +137,15 @@ const SEAT_PRICE = 25;
 const RENDER_UNIT_PRICE = 10;
 const WEBCODECS_UNIT_PRICE = 10;
 
+const icon: React.CSSProperties = {
+	height: 16,
+	marginLeft: 4,
+};
+
 export const CompanyPricing: React.FC = () => {
 	const [devSeatCount, setDevSeatCount] = React.useState(1);
-	const [cloudUnitCount, setCloudUnitCount] = React.useState(1);
-	const [webcodecsUnits, setWebcodecsUnits] = React.useState(1);
+	const [cloudRenders, setCloudRenders] = React.useState(1000);
+	const [creations, setCreations] = React.useState(1000);
 
 	const formatPrice = useCallback((price: number) => {
 		const formatter = new Intl.NumberFormat('en-US', {
@@ -155,29 +160,15 @@ export const CompanyPricing: React.FC = () => {
 		return Math.max(
 			100,
 			devSeatCount * SEAT_PRICE +
-				cloudUnitCount * RENDER_UNIT_PRICE +
-				webcodecsUnits * WEBCODECS_UNIT_PRICE,
+				(cloudRenders / 1000) * RENDER_UNIT_PRICE +
+				(creations / 1000) * WEBCODECS_UNIT_PRICE,
 		);
-	}, [cloudUnitCount, devSeatCount, webcodecsUnits]);
+	}, [cloudRenders, devSeatCount, creations]);
 
 	const totalPriceString = useMemo(() => {
 		return formatPrice(totalPrice);
 	}, [formatPrice, totalPrice]);
 
-	const rendersPerMonth = useMemo(() => {
-		const formatter = new Intl.NumberFormat('en-US', {
-			maximumFractionDigits: 0,
-		});
-		return formatter.format(cloudUnitCount * 1000);
-	}, [cloudUnitCount]);
-
-	const conversionsPerMonth = useMemo(() => {
-		const formatter = new Intl.NumberFormat('en-US', {
-			maximumFractionDigits: 0,
-		});
-		return formatter.format(webcodecsUnits * 1000);
-	}, [webcodecsUnits]);
-
 	return (
 		<Container>
 			<Audience>For collaborations and companies of 4+ people</Audience>
@@ -189,80 +180,87 @@ export const CompanyPricing: React.FC = () => {
 				<InfoTooltip text="Credits for Mux.com. Applies only to new Mux customers." />
 			</PricingBulletPoint>
 			<div style={{height: 30}} />
-			<div className={'flex flex-row items-center'}>
+			<div className={'flex flex-col md:flex-row md:items-center'}>
 				<div style={textUnitWrapper}>
 					<div className={'fontbrand font-bold text-lg'}>Developer Seats</div>
 					<div className={'text-muted fontbrand text-sm'}>
 						Number of developers working with Remotion
 					</div>
 				</div>
-				<div style={{flex: 3}} />
-				<Counter count={devSeatCount} setCount={setDevSeatCount} minCount={1} />
-				<SmallPriceTag>
-					$
-					{new Intl.NumberFormat('en-US', {
-						maximumFractionDigits: 0,
-					}).format(SEAT_PRICE * devSeatCount)}
-				</SmallPriceTag>
+				<div style={{flex: 3}} className="hidden md:block" />
+				<div className="flex flex-row items-center justify-between mt-3 md:mt-0">
+					<Counter
+						count={devSeatCount}
+						setCount={setDevSeatCount}
+						minCount={1}
+					/>
+					<SmallPriceTag>
+						$
+						{new Intl.NumberFormat('en-US', {
+							maximumFractionDigits: 0,
+						}).format(SEAT_PRICE * devSeatCount)}
+					</SmallPriceTag>
+				</div>
 			</div>
 			<div style={{height: 14}} />
-			<div className={'flex flex-row items-center'}>
+			<div className={'flex flex-col md:flex-row md:items-center'}>
 				<div style={textUnitWrapper}>
-					<div className={'fontbrand font-bold text-lg'}>
-						Cloud Rendering Units
-					</div>
+					<div className={'fontbrand font-bold text-lg'}>Server renders</div>
 					<div className={'text-muted fontbrand text-sm'}>
-						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
+							Renders per month (self-hosted)
+						</a>
 					</div>
 				</div>
-				<div style={{flex: 3}} />
-				<Counter
-					count={cloudUnitCount}
-					setCount={setCloudUnitCount}
-					minCount={0}
-				/>
-				<SmallPriceTag>
-					$
-					{new Intl.NumberFormat('en-US', {
-						maximumFractionDigits: 0,
-					}).format(RENDER_UNIT_PRICE * cloudUnitCount)}
-				</SmallPriceTag>
+				<div style={{flex: 3}} className="hidden md:block" />
+				<div className="flex flex-row items-center justify-between mt-3 md:mt-0">
+					<Counter
+						count={cloudRenders}
+						setCount={setCloudRenders}
+						minCount={0}
+						step={1000}
+					/>
+					<SmallPriceTag>
+						$
+						{new Intl.NumberFormat('en-US', {
+							maximumFractionDigits: 0,
+						}).format((cloudRenders / 1000) * RENDER_UNIT_PRICE)}
+					</SmallPriceTag>
+				</div>
 			</div>
 			<div style={{height: 14}} />
-			<div className={'flex flex-row items-center'}>
+			<div className={'flex flex-col md:flex-row md:items-center'}>
 				<div style={textUnitWrapper}>
 					<div className={'fontbrand font-bold text-lg'}>
-						WebCodecs Creation Units
+						WebCodecs video creations
 					</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 creations{' '}
+							Client-side video creations per month
 						</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 style={{flex: 3}} className="hidden md:block" />
+				<div className="flex flex-row items-center justify-between mt-3 md:mt-0">
+					<Counter
+						count={creations}
+						setCount={setCreations}
+						minCount={0}
+						step={1000}
+					/>
+					<SmallPriceTag>
+						$
+						{new Intl.NumberFormat('en-US', {
+							maximumFractionDigits: 0,
+						}).format((creations / 1000) * WEBCODECS_UNIT_PRICE)}
+					</SmallPriceTag>
+				</div>
 			</div>
 			<div style={{height: 20}} />
 			<div className={'flex flex-row justify-end'}>
@@ -276,6 +274,31 @@ export const CompanyPricing: React.FC = () => {
 					</BottomInfo>
 				</div>
 			</div>
+			<div className={'flex flex-row justify-end mt-4'}>
+				<div
+					style={{
+						...textUnitWrapper,
+						alignItems: 'flex-end',
+					}}
+				>
+					<a
+						href="https://remotion.pro/dashboard"
+						className="font-brand text-brand flex flex-row items-center gap-1 no-underline"
+					>
+						Buy now{' '}
+						<svg
+							style={icon}
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 448 512"
+						>
+							<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"
+							/>
+						</svg>
+					</a>
+				</div>
+			</div>
 		</Container>
 	);
 };

package/src/components/homepage/IconForTemplate.tsx

@@ -7,6 +7,7 @@ import {JSIcon} from '../icons/js';
 import {MusicIcon} from '../icons/music';
 import {NextIcon} from '../icons/next';
 import {OverlayIcon} from '../icons/overlay';
+import {Recorder} from '../icons/recorder';
 import {ReactRouterIcon} from '../icons/remix';
 import {SkiaIcon} from '../icons/skia';
 import {Stargazer} from '../icons/stargazer';
@@ -135,6 +136,10 @@ export const IconForTemplate: React.FC<{
 		return <OverlayIcon style={{height: scale * 42}} />;
 	}
 
+	if (template.cliId === 'recorder') {
+		return <Recorder style={{height: scale * 36}} />;
+	}
+
 	if (
 		template.cliId === 'next' ||
 		template.cliId === 'next-tailwind' ||

package/src/components/homepage/IfYouKnowReact.tsx

@@ -1,5 +1,4 @@
 import React, {useEffect, useState} from 'react';
-import {BlueButton} from './layout/Button';
 
 export const isWebkit = () => {
 	if (typeof window === 'undefined') {
@@ -14,6 +13,11 @@ export const isWebkit = () => {
 	return isSafariUserAgent || isChrome;
 };
 
+const icon: React.CSSProperties = {
+	height: 16,
+	marginLeft: 10,
+};
+
 export const IfYouKnowReact: React.FC = () => {
 	const [vid, setVid] = useState('/img/compose.webm');
 
@@ -24,31 +28,39 @@ export const IfYouKnowReact: React.FC = () => {
 	}, []);
 
 	return (
-		<div className="flex flex-col lg:flex-row text-left lg:text-right justify-start lg:justify-end items-start lg:mb-0">
+		<div className="flex flex-col lg:flex-row text-left justify-start lg:justify-end items-start lg:mb-0 gap-6 mt-8">
 			<video
 				src={vid}
 				muted
 				autoPlay
 				playsInline
 				loop
-				className="w-[600px] h-[600px] cursor-default! relative lg:-translate-x-8 -mb-50 -mt-10 lg:mt-0 lg:mb-0"
+				className="w-[500px] cursor-default! relative lg:-translate-x-8 -mb-40 lg:mt-0 lg:mb-0"
 			/>
-			<div className="h-10 lg:flex-1" />
-			<div className="lg:text-right">
+			<div>
 				<h2 className="text-4xl fontbrand pt-20">
-					<span className="text-brand">Compose</span> your
-					<br />
-					video with code.
+					<span className="text-brand">Compose</span> with code
 				</h2>
-				<p className="leading-relaxed">
+				<p className="leading-relaxed font-brand">
 					Use React, a powerful frontend technology, to create sophisticated
 					videos with code.
 				</p>
-				<div className="h-7" />
-				<a className="no-underline inline-block" href="/docs/the-fundamentals">
-					<BlueButton size="sm" loading={false}>
-						Learn Remotion
-					</BlueButton>
+				<div className="h-4" />
+				<a
+					className="no-underline text-brand font-brand font-bold inline-flex flex-row items-center"
+					href="/docs/the-fundamentals"
+				>
+					Learn Remotion{' '}
+					<svg
+						style={icon}
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 448 512"
+					>
+						<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"
+						/>
+					</svg>
 				</a>
 			</div>
 		</div>

package/src/components/homepage/MoreVideoPowerSection.tsx

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

package/src/components/homepage/NewsletterButton.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback, useState} from 'react';
 import {BlueButton} from './layout/Button';
 import {Spacer} from './Spacer';
+import {SectionTitle} from './VideoAppsTitle';
 
 export const NewsletterButton: React.FC<{}> = () => {
 	const [email, setEmail] = useState('');
@@ -44,18 +45,18 @@ export const NewsletterButton: React.FC<{}> = () => {
 		<div>
 			<div className="flex flex-col">
 				<div className={'w-full'}>
-					<div className={'border-effect bg-pane flex flex-col flex-1 p-5'}>
-						<div className={'text-2xl font-bold fontbrand'}>Newsletter</div>
+					<div className={'flex flex-col flex-1'}>
+						<SectionTitle>Newsletter</SectionTitle>
 						<form
 							onSubmit={handleSubmit}
 							style={{
 								width: '100%',
 							}}
 						>
-							<p className="leading-snug mt-1 text-muted fontbrand">
+							<div className={'fontbrand text-center mb-10 -mt-4'}>
 								Read about new features and noteworthy updates we have made on
-								Remotion once in a while.
-							</p>
+								Remotion once in a while.{' '}
+							</div>
 
 							<input
 								className="w-full dark:bg-[#121212] rounded-lg border-effect border-black outline-none px-3 py-3 fontbrand text-lg box-border focus:border-brand"

package/src/components/homepage/ParameterizeAndEdit.tsx

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

package/src/components/homepage/RealMp4Videos.tsx

@@ -1,6 +1,11 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {isWebkit} from './IfYouKnowReact';
 
+const icon: React.CSSProperties = {
+	height: 16,
+	marginLeft: 10,
+};
+
 export const RealMP4Videos: React.FC = () => {
 	const ref = useRef<HTMLDivElement>(null);
 	const videoRef = useRef<HTMLVideoElement>(null);
@@ -35,11 +40,8 @@ export const RealMP4Videos: React.FC = () => {
 	}, []);
 
 	return (
-		<div
-			ref={ref}
-			className={'flex flex-col lg:flex-row-reverse items-center mt-20 lg:mt-0'}
-		>
-			<div className="flex flex-1 justify-start lg:justify-end items-end">
+		<div ref={ref} className={'flex flex-col lg:flex-row mt-40 lg:mt-30 gap-6'}>
+			<div className="flex w-[500px] justify-start lg:justify-start items-end">
 				<video
 					ref={videoRef}
 					src={vid}
@@ -47,19 +49,59 @@ export const RealMP4Videos: React.FC = () => {
 					autoPlay
 					playsInline
 					loop
-					style={{}}
-					className="w-[550px] h-[550px] cursor-default! relative lg:translate-x-8 -mt-20 -mb-20 lg:mt-0 lg:mb-0"
+					style={{
+						width: 400,
+						maxWidth: '100%',
+						borderRadius: 7,
+						overflow: 'hidden',
+					}}
+					className="w-[550px] cursor-default! relative lg:translate-x-8 -mt-20 lg:mt-0"
 				/>
 			</div>{' '}
-			<div>
+			<div className="font-brand">
 				<h2 className="text-4xl fontbrand">
-					Real <span className={'text-brand'}>.mp4</span> videos
+					<span className={'text-brand'}>Scalable</span> rendering
 				</h2>
 				<p className="leading-relaxed">
-					Remotion renders all frames to images and <br /> encodes them to a
-					real video - audio support included. <br /> WebM and other formats are
-					also supported.
-				</p>
+					Render the video .mp4 or other formats. <br />
+					Locally, on the server or serverless.
+				</p>{' '}
+				<div className="h-4" />
+				<div className="leading-6">
+					<a
+						className="no-underline text-brand font-brand font-bold inline-flex flex-row items-center"
+						href="/docs/render"
+					>
+						Render options{' '}
+						<svg
+							style={icon}
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 448 512"
+						>
+							<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"
+							/>
+						</svg>
+					</a>
+					<br />
+					<a
+						className="no-underline text-brand font-brand font-bold inline-flex flex-row items-center"
+						href="/lambda"
+					>
+						Remotion Lambda{' '}
+						<svg
+							style={icon}
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 448 512"
+						>
+							<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"
+							/>
+						</svg>
+					</a>
+				</div>
 			</div>
 		</div>
 	);