@remotion/promo-pages 4.0.364 → 4.0.366

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/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',
-			'/img/freelancers/andrei.png',
-			// 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,283 +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'
-			}
-		>
-			{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="Private Slack or Discord" checked />
-			<PricingBulletPoint text="Monthly consulting session" checked />
-			<PricingBulletPoint text="Custom terms, billing and pricing" checked />
-			<PricingBulletPoint text="Compliance forms" checked />
-			<PricingBulletPoint text="Prioritized feature requests" checked />
-			<PricingBulletPoint
-				text={
-					<span>
-						<a
-							href="https://www.remotion.dev/editor-starter"
-							className="underline underline-offset-4 text-inherit"
-						>
-							Editor Starter
-						</a>{' '}
-						included
-					</span>
-				}
-				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 icon: React.CSSProperties = {
-	height: 16,
-	marginLeft: 4,
-};
-
-export const CompanyPricing: React.FC = () => {
-	const [devSeatCount, setDevSeatCount] = React.useState(1);
-	const [cloudRenders, setCloudRenders] = React.useState(1000);
-
-	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 + (cloudRenders / 1000) * RENDER_UNIT_PRICE,
-		);
-	}, [cloudRenders, devSeatCount]);
-
-	const totalPriceString = useMemo(() => {
-		return formatPrice(totalPrice);
-	}, [formatPrice, totalPrice]);
-
-	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="$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-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}} 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-col md:flex-row md:items-center'}>
-				<div style={textUnitWrapper}>
-					<div className={'fontbrand font-bold text-lg'}>Video renders</div>
-					<div className={'text-muted fontbrand text-sm'}>
-						<a
-							href="https://www.remotion.dev/docs/render"
-							className="underline underline-offset-4 text-inherit"
-						>
-							Renders per month (self-hosted)
-						</a>
-					</div>
-				</div>
-				<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 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>
-			<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/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">
-				{'24k'}
-			</div>
-		</div>
-	);
-};

package/src/components/homepage/IconForTemplate.tsx

@@ -1,170 +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 {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';
-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 === 'music-visualization') {
-		return (
-			<MusicIcon
-				style={{
-					height: scale * 32,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'react-router') {
-		return (
-			<ReactRouterIcon
-				style={{
-					height: scale * 32,
-				}}
-			/>
-		);
-	}
-
-	if (template.cliId === 'overlay') {
-		return <OverlayIcon style={{height: scale * 42}} />;
-	}
-
-	if (template.cliId === 'recorder') {
-		return <Recorder style={{height: scale * 36}} />;
-	}
-
-	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,
-			}}
-		/>
-	);
-};