@remotion/promo-pages 5.0.0-canary → 5.0.0-canary.3

package/src/components/homepage/EvaluateRemotion.tsx

@@ -1,92 +0,0 @@
-// Adjustments to the EvaluateRemotionSection.tsx to separate the flex box into two boxes
-// with specified alignment and positioning requirements.
-
-import React, {useEffect, useState} from 'react';
-import {BlueButton} from './layout/Button';
-
-const EvaluateRemotionSection: React.FC = () => {
-	const [dailyAvatars, setDailyAvatars] = useState<string[]>([]);
-
-	useEffect(() => {
-		const avatars = [
-			'/img/freelancers/alex.jpeg',
-			'/img/freelancers/antoine.jpeg',
-			'/img/freelancers/ayush.png',
-			'/img/freelancers/benjamin.jpeg',
-			'/img/freelancers/florent.jpeg',
-			'/img/freelancers/karel.jpeg',
-			'/img/freelancers/lorenzo.jpeg',
-			'/img/freelancers/mickael.jpeg',
-			'/img/freelancers/mohit.jpeg',
-			'/img/freelancers/pramod.jpg',
-			'/img/freelancers/pranav.jpg',
-			'/img/freelancers/rahul.png',
-			'/img/freelancers/ray.jpeg',
-			'/img/freelancers/stephen.png',
-			'/img/freelancers/umungo.png',
-			'/img/freelancers/yehor.jpeg',
-			// Add more avatar paths here
-		];
-
-		const selectedAvatars: string[] = [];
-		for (let i = 0; i < 3; i++) {
-			const index = Math.floor(Math.random() * avatars.length);
-			selectedAvatars.push(avatars[index]);
-			avatars.splice(index, 1); // Remove selected avatar to avoid duplicates
-		}
-
-		setDailyAvatars(selectedAvatars);
-	}, []);
-
-	return (
-		<div className="flex flex-col lg:flex-row gap-2">
-			<div className={'card flex-1 flex flex-col'}>
-				<div className={'fontbrand text-2xl font-bold'}>
-					Evaluate Remotion for your company
-				</div>
-				<p className={'text-muted fontbrand leading-snug'}>
-					Book a 20 minute call with us to get all your questions answered.
-				</p>
-				<div className="flex-1" />
-				<a
-					target="_blank"
-					href="https://cal.com/remotion/evaluate"
-					style={{textDecoration: 'none'}}
-				>
-					<BlueButton size="sm" loading={false}>
-						Schedule a call
-					</BlueButton>
-				</a>
-			</div>
-			<div className={'card flex-1 flex flex-col'}>
-				<div className={'fontbrand text-2xl font-bold'}>
-					Get help for your projects
-				</div>
-				<p className={'text-muted fontbrand leading-snug'}>
-					Contact our experts for help and work.
-				</p>
-				<div className="flex-1" />
-				<div className={'flex flex-row justify-between'}>
-					<a href="/experts" style={{textDecoration: 'none'}}>
-						<BlueButton size="sm" loading={false}>
-							Remotion Experts
-						</BlueButton>
-					</a>
-					<div className={'flex justify-end items-end gap-3'}>
-						{dailyAvatars.map((avatar) => (
-							<div
-								key={avatar}
-								className={
-									'w-12 h-12 rounded-full bg-muted bg-cover bg-center -ml-5 border-2 border-black'
-								}
-								style={{backgroundImage: `url(${avatar})`}}
-							/>
-						))}
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default EvaluateRemotionSection;

package/src/components/homepage/FreePricing.tsx

@@ -1,295 +0,0 @@
-import React, {useCallback, useMemo} from 'react';
-import {cn} from '../../cn';
-import {Counter} from './Counter';
-import {InfoTooltip} from './InfoTooltip';
-import {PricingBulletPoint} from './PricingBulletPoint';
-
-const Container: React.FC<{readonly children: React.ReactNode}> = ({
-	children,
-}) => {
-	return (
-		<div className={'flex flex-col border-effect rounded-xl p-5 bg-pane'}>
-			{children}
-		</div>
-	);
-};
-
-const Title: React.FC<{
-	readonly children: React.ReactNode;
-}> = ({children}) => {
-	return (
-		<div className="text-4xl font-bold leading-none fontbrand mt-2 mb-5">
-			{children}
-		</div>
-	);
-};
-
-const Audience: React.FC<{
-	readonly children: React.ReactNode;
-}> = ({children}) => {
-	return <div className={'fontbrand text-lg leading-none'}>{children}</div>;
-};
-
-const BottomInfo: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-	children,
-	className,
-	...props
-}) => {
-	return (
-		<div
-			className={cn(className, 'text-[var(--subtitle)] fontbrand text-sm')}
-			{...props}
-		>
-			{children}
-		</div>
-	);
-};
-
-const PriceTag: React.FC<{
-	readonly children: React.ReactNode;
-}> = ({children}) => {
-	return (
-		<div
-			className={
-				'fontbrand text-2xl font-bold min-w-[80px] w-auto text-right shrink-0 ml-4'
-			}
-		>
-			{children}
-		</div>
-	);
-};
-
-const SmallPriceTag: React.FC<{
-	readonly children: React.ReactNode;
-}> = ({children}) => {
-	return (
-		<div
-			className={
-				'fontbrand text-2xl font-medium  w-auto min-w-[80px] text-right shrink-0 ml-4'
-			}
-		>
-			{children}
-		</div>
-	);
-};
-
-export const FreePricing: React.FC = () => {
-	return (
-		<Container>
-			<Audience>For individuals and companies of up to 3 people</Audience>
-			<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="Must upgrade when your team grows"
-				checked={false}
-			/>
-		</Container>
-	);
-};
-
-const textUnitWrapper: React.CSSProperties = {
-	display: 'flex',
-	flexDirection: 'column',
-};
-
-export const EnterpriseLicense: React.FC = () => {
-	return (
-		<Container>
-			<Audience>For advanced needs</Audience>
-			<Title>Enterprise License</Title>
-			<PricingBulletPoint text="Everything in Company License" checked />
-			<PricingBulletPoint text="Custom terms, billing and pricing" checked />
-			<PricingBulletPoint text="Compliance forms" checked />
-			<PricingBulletPoint text="Prioritized feature requests" checked />
-			<PricingBulletPoint text="Private support channel" checked />
-			<PricingBulletPoint text="Monthly consulting session" checked />
-			<div style={{height: 30}} />
-			<div className={'flex flex-row justify-end'}>
-				<div
-					style={{
-						...textUnitWrapper,
-						alignItems: 'flex-end',
-					}}
-				>
-					<PriceTag>
-						<a
-							className={
-								'cursor-pointer no-underline text-inherit hover:text-brand'
-							}
-							target={'_blank'}
-							href="https://www.remotion.pro/contact"
-						>
-							Contact us
-						</a>
-					</PriceTag>
-					<div className={'text-[var(--subtitle)] fontbrand text-sm'}>
-						Starting at $500 per month
-					</div>
-				</div>
-			</div>
-		</Container>
-	);
-};
-
-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', {
-			style: 'currency',
-			currency: 'USD',
-			maximumFractionDigits: 0,
-		});
-		return formatter.format(price);
-	}, []);
-
-	const totalPrice = useMemo(() => {
-		return Math.max(
-			100,
-			devSeatCount * SEAT_PRICE +
-				cloudUnitCount * RENDER_UNIT_PRICE +
-				webcodecsUnits * WEBCODECS_UNIT_PRICE,
-		);
-	}, [cloudUnitCount, devSeatCount, webcodecsUnits]);
-
-	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>
-			<Title>Company License</Title>
-			<PricingBulletPoint text="Commercial use allowed" checked />
-			<PricingBulletPoint text="Self-hosted cloud rendering allowed" checked />
-			<PricingBulletPoint text="Prioritized Support" 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>
-			<div style={{height: 30}} />
-			<div className={'flex flex-row 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>
-			<div style={{height: 14}} />
-			<div className={'flex flex-row items-center'}>
-				<div style={textUnitWrapper}>
-					<div className={'fontbrand font-bold text-lg'}>
-						Cloud Rendering Units
-					</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
-					</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>
-			<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'}}>
-					<PriceTag>{totalPriceString}/mo</PriceTag>
-					<BottomInfo
-						data-visible={totalPrice <= 100}
-						className="opacity-0 data-[visible=true]:opacity-100 transition-opacity"
-					>
-						The minimum is $100 per month
-					</BottomInfo>
-				</div>
-			</div>
-		</Container>
-	);
-};

package/src/components/homepage/GetStartedStrip.tsx

@@ -1,77 +0,0 @@
-import React, {useState} from 'react';
-import {GithubButton} from './GitHubButton';
-import {PlainButton} from './layout/Button';
-
-export const GetStarted: React.FC = () => {
-	const [clicked, setClicked] = useState<number | null>(null);
-
-	return (
-		<div className="flex flex-col lg:flex-row items-center justify-center text-center w-full">
-			<div className="w-full lg:w-auto">
-				<div className="flex flex-row w-full ">
-					{clicked ? (
-						<div
-							key={clicked}
-							style={{
-								animation: 'click 0.7s linear',
-								animationFillMode: 'forwards',
-							}}
-							className="absolute z-0 top-0 font-mono text-sm text-center w-full"
-						>
-							Copied!
-						</div>
-					) : null}
-					<div
-						className="bg-[#333] text-white rounded-lg px-4 font-mono hover:[#444] cursor-pointer justify-center items-center flex flex-1 min-h-12"
-						onClick={() => {
-							navigator.clipboard.writeText('npx create-video@latest');
-
-							setClicked(Date.now());
-						}}
-						title="Click to copy"
-					>
-						$ npx create-video@latest
-					</div>
-				</div>
-			</div>
-			<div className="w-2 h-2" />
-			<div className="w-full lg:w-auto">
-				<a
-					className={'no-underline w-full block'}
-					href="https://www.youtube.com/watch?v=deg8bOoziaE"
-					target="_blank"
-				>
-					<PlainButton size="sm" loading={false} className="w-full">
-						Watch demo
-					</PlainButton>
-				</a>
-			</div>
-			<div style={{width: 10, height: 10}} />
-			<a className={'no-underline w-full lg:w-auto'} href="/docs">
-				<PlainButton size="sm" loading={false} className="w-full">
-					Docs
-				</PlainButton>
-			</a>
-			<div className="w-2 h-2" />
-			<a
-				className="no-underline w-full lg:w-auto"
-				href="https://remotion.dev/discord"
-				target="_blank"
-			>
-				<PlainButton size="sm" loading={false} className="w-full">
-					Discord
-				</PlainButton>
-			</a>
-			<div className="w-2 h-2" />
-			<a
-				className="no-underline w-full lg:w-auto"
-				href="https://github.com/remotion-dev/remotion"
-				target="_blank"
-			>
-				<PlainButton size="sm" loading={false} className="w-full">
-					<GithubButton />
-				</PlainButton>
-			</a>
-		</div>
-	);
-};

package/src/components/homepage/GitHubButton.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-const GithubIcon: React.FC = () => {
-	return (
-		<svg viewBox="0 0 496 512" style={{height: 24, marginRight: 8}}>
-			<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"
-			/>
-		</svg>
-	);
-};
-
-export const GithubButton: React.FC = () => {
-	return (
-		<div className="flex flex-row items-center text-base">
-			<GithubIcon /> <span>GitHub</span>{' '}
-			<div className="text-xs inline-block ml-2 leading-none mt-[3px] self-center">
-				{'21k'}
-			</div>
-		</div>
-	);
-};

package/src/components/homepage/IconForTemplate.tsx

@@ -1,154 +0,0 @@
-import type {Template} from 'create-video';
-import React from 'react';
-import {Blank} from '../icons/blank';
-import {CodeHike} from '../icons/code-hike';
-import {Cubes} from '../icons/cubes';
-import {JSIcon} from '../icons/js';
-import {NextIcon} from '../icons/next';
-import {OverlayIcon} from '../icons/overlay';
-import {RemixIcon} from '../icons/remix';
-import {SkiaIcon} from '../icons/skia';
-import {Stargazer} from '../icons/stargazer';
-import {StillIcon} from '../icons/still';
-import {TikTok} from '../icons/tiktok';
-import {TypeScriptIcon} from '../icons/ts';
-import {TTSIcon} from '../icons/tts';
-import {Waveform} from '../icons/waveform';
-
-export const IconForTemplate: React.FC<{
-	readonly template: Template;
-	readonly scale: number;
-}> = ({template, scale = 1}) => {
-	if (template.cliId === 'hello-world') {
-		return (
-			<TypeScriptIcon
-				style={{
-					height: scale * 48,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'blank') {
-		return (
-			<Blank
-				style={{
-					height: scale * 36,
-					overflow: 'visible',
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'javascript') {
-		return (
-			<JSIcon
-				style={{
-					height: scale * 40,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'three') {
-		return (
-			<Cubes
-				style={{
-					height: scale * 36,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'still') {
-		return (
-			<StillIcon
-				style={{
-					height: scale * 36,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'audiogram') {
-		return (
-			<Waveform
-				style={{
-					height: scale * 36,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'tts') {
-		return (
-			<TTSIcon
-				style={{
-					height: scale * 36,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'google-tts') {
-		return (
-			<TTSIcon
-				style={{
-					height: scale * 36,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'skia') {
-		return (
-			<SkiaIcon
-				style={{
-					height: scale * 32,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'remix') {
-		return (
-			<RemixIcon
-				style={{
-					height: scale * 32,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'overlay') {
-		return <OverlayIcon style={{height: scale * 42}} />;
-	}
-
-	if (
-		template.cliId === 'next' ||
-		template.cliId === 'next-tailwind' ||
-		template.cliId === 'next-pages-dir'
-	) {
-		return <NextIcon style={{height: scale * 36}} />;
-	}
-
-	if (template.cliId === 'stargazer') {
-		return <Stargazer style={{height: scale * 36}} />;
-	}
-
-	if (template.cliId === 'tiktok') {
-		return <TikTok style={{height: scale * 36}} />;
-	}
-
-	if (template.cliId === 'code-hike') {
-		return <CodeHike style={{height: scale * 36}} />;
-	}
-
-	return (
-		<Blank
-			style={{
-				height: scale * 40,
-			}}
-		/>
-	);
-};

package/src/components/homepage/IfYouKnowReact.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import {CodeExample} from './CodeExample';
-import {BlueButton} from './layout/Button';
-
-export const IfYouKnowReact: React.FC = () => {
-	return (
-		<div className="flex flex-col-reverse lg:flex-row text-left lg:text-right justify-start lg:justify-end items-start lg:items-center">
-			<CodeExample />
-			<div className="h-10 lg:w-10" />
-			<div className="lg:text-right">
-				<h2 className="text-4xl fontbrand">
-					Leverage <span className="text-brand">React</span> <br />
-					to express yourself.
-				</h2>
-				<p className="leading-relaxed">
-					Remotion gives you the tools for video creation, <br /> but the rules
-					of React stay the same. <br />
-				</p>
-				Learn the fundamentals in just a few minutes.
-				<div className="h-7" />
-				<a className="no-underline inline-block" href="/docs/the-fundamentals">
-					<BlueButton size="sm" loading={false}>
-						Learn Remotion
-					</BlueButton>
-				</a>
-			</div>
-		</div>
-	);
-};

package/src/components/homepage/InfoTooltip.tsx

@@ -1,25 +0,0 @@
-import React, {useState} from 'react';
-
-interface InfoTooltipProps {
-	readonly text: string;
-}
-
-export const InfoTooltip: React.FC<InfoTooltipProps> = ({text}) => {
-	const [isVisible, setIsVisible] = useState(false);
-
-	return (
-		<span
-			className="relative inline-block ml-1 text-gray-600 cursor-default"
-			onMouseEnter={() => setIsVisible(true)}
-			onMouseLeave={() => setIsVisible(false)}
-		>
-			<span style={{fontSize: '1rem'}}>ⓘ</span>
-			{isVisible && (
-				<span className="absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 text-white p-2 rounded text-xs whitespace-nowrap z-10 cursor-default">
-					{text}
-					<span className="absolute top-full left-1/2 transform -translate-x-1/2 border-5 border-solid border-gray-800 border-t-transparent border-r-transparent border-b-transparent border-l-transparent cursor-default" />
-				</span>
-			)}
-		</span>
-	);
-};