@remotion/promo-pages 4.0.363 → 4.0.365

package/src/components/homepage/Demo/index.tsx

@@ -1,158 +0,0 @@
-import type {PlayerRef} from '@remotion/player';
-import {Player} from '@remotion/player';
-import React, {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-	type CSSProperties,
-} from 'react';
-
-import {PALETTE} from '../layout/colors';
-import {useColorMode} from '../layout/use-color-mode';
-import {SectionTitle} from '../VideoAppsTitle';
-import {
-	getDataAndProps,
-	HomepageVideoComp,
-	type DemoPlayerProps,
-	type LocationAndTrending,
-	type RemoteData,
-} from './Comp';
-import {DemoError} from './DemoError';
-import {RenderButton} from './DemoRender';
-import {DownloadNudge} from './DownloadNudge';
-import {DragAndDropNudge} from './DragAndDropNudge';
-import {PlayerControls} from './PlayerControls';
-import {ThemeNudge} from './ThemeNudge';
-import type {Location} from './types';
-
-const style: React.CSSProperties = {
-	width: '100%',
-	aspectRatio: '640 / 360',
-	borderBottom: `2px solid ${PALETTE.BOX_STROKE}`,
-	touchAction: 'none', // prevent page from scrolling when dragging children on mobile
-};
-
-const playerWrapper: CSSProperties = {
-	border: `2px solid ${PALETTE.BOX_STROKE}`,
-	borderBottom: `4px solid ${PALETTE.BOX_STROKE}`,
-	borderRadius: 8,
-	width: '100%',
-	overflow: 'hidden',
-};
-
-export const Demo: React.FC = () => {
-	const {colorMode} = useColorMode();
-	const [data, setData] = useState<LocationAndTrending | null>(null);
-	const ref = useRef<PlayerRef>(null);
-
-	const [isFullscreen, setIsFullscreen] = useState(false);
-	const [cardOrder, setCardOrder] = useState([0, 1, 2, 3]);
-	const [emojiIndex, setEmojiIndex] = useState<number>(0);
-	const [error, setError] = useState(false);
-
-	useEffect(() => {
-		getDataAndProps()
-			.then((d) => {
-				setData(d);
-			})
-			.catch((err) => {
-				// eslint-disable-next-line no-console
-				console.log(err);
-				setError(true);
-			});
-	}, []);
-
-	useEffect(() => {
-		const {current: playerRef} = ref;
-		if (!playerRef || !data) {
-			return;
-		}
-
-		const onFullscreenChange = () => {
-			setIsFullscreen(playerRef.isFullscreen());
-		};
-
-		playerRef.addEventListener('fullscreenchange', onFullscreenChange);
-
-		return () => {
-			playerRef.removeEventListener('fullscreenchange', onFullscreenChange);
-		};
-	}, [data]);
-
-	const updateCardOrder = useCallback((newCardOrder: number[]) => {
-		setCardOrder(newCardOrder);
-	}, []);
-
-	const props: DemoPlayerProps = useMemo(() => {
-		return {
-			theme: colorMode,
-			onToggle: () => {
-				ref.current?.toggle();
-			},
-			cardOrder,
-			updateCardOrder,
-			location: data?.location ?? null,
-			trending: data?.trending ?? null,
-			onClickLeft: () => {
-				setEmojiIndex((e) => e - 1);
-			},
-			onClickRight: () => {
-				setEmojiIndex((e) => e + 1);
-			},
-			emojiIndex,
-		};
-	}, [cardOrder, emojiIndex, colorMode, data, updateCardOrder]);
-
-	const onError = useCallback(() => {
-		setError(true);
-	}, []);
-
-	return (
-		<div>
-			<br />
-			<br />
-			<SectionTitle>Demo</SectionTitle>
-			<div style={{height: 140, position: 'relative'}}>
-				<DragAndDropNudge />
-				<ThemeNudge />
-			</div>
-			<div style={playerWrapper}>
-				<Player
-					ref={ref}
-					component={HomepageVideoComp}
-					compositionWidth={640}
-					compositionHeight={360}
-					durationInFrames={120}
-					fps={30}
-					autoPlay
-					controls={isFullscreen}
-					clickToPlay={false}
-					style={style}
-					initiallyMuted
-					inputProps={props}
-					loop
-				/>
-				<PlayerControls playerRef={ref} durationInFrames={120} fps={30}>
-					<RenderButton
-						onError={onError}
-						renderData={
-							data
-								? {
-										cardOrder,
-										emojiIndex,
-										location: data.location as Location,
-										theme: colorMode,
-										trending: data.trending as RemoteData,
-									}
-								: null
-						}
-					/>
-				</PlayerControls>
-			</div>
-			{error ? <DemoError /> : null}
-			<DownloadNudge />
-		</div>
-	);
-};

package/src/components/homepage/Demo/math.ts

@@ -1,43 +0,0 @@
-export type Position = {
-	x: number;
-	y: number;
-};
-
-export const paddingAndMargin = 20;
-const height = 360;
-const width = 640;
-export const cardHeight = (height - paddingAndMargin * 3) / 2;
-export const cardWidth = (width - paddingAndMargin * 3) / 2;
-
-export const getPositionForIndex = (index: number): Position => {
-	const x =
-		index % 2 === 0 ? paddingAndMargin : cardWidth + paddingAndMargin * 2;
-	const y = index < 2 ? paddingAndMargin : cardHeight + paddingAndMargin * 2;
-
-	return {x, y};
-};
-
-export const getInitialPositions = () => {
-	return new Array(4).fill(true).map((_, i) => getPositionForIndex(i));
-};
-
-export const getIndexFromPosition = (clientX: number, clientY: number) => {
-	const left = clientX < cardWidth / 2 + paddingAndMargin;
-	const top = clientY < cardHeight / 2 + paddingAndMargin;
-
-	if (left && top) {
-		return 0;
-	}
-
-	if (!left && top) {
-		return 1;
-	}
-
-	if (left && !top) {
-		return 2;
-	}
-
-	if (!left && !top) {
-		return 3;
-	}
-};

package/src/components/homepage/Demo/types.ts

@@ -1,6 +0,0 @@
-export type Location = {
-	country: string;
-	city: string;
-	latitude: number | string;
-	longitude: number | string;
-};

package/src/components/homepage/EditorStarterSection.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-
-import {BlueButton, ClearButton} from './layout/Button';
-import {MuxVideo} from './MuxVideo';
-import {SectionTitle} from './VideoAppsTitle';
-
-const EditorStarterSection: React.FC = () => {
-	return (
-		<div>
-			<SectionTitle>Build your own video editor</SectionTitle>
-			<br />
-			<div className={'card flex p-0 overflow-hidden'}>
-				<div className={'flex-1 flex flex-col lg:flex-row justify-center'}>
-					<div
-						className={
-							'w-full max-w-[500px] aspect-square relative overflow-hidden bg-[#eee]'
-						}
-					>
-						<MuxVideo
-							muxId={'YIvIidbcAc7009B00Wr7gIbGyq67YGNlytGvMXwdsLRtc'}
-							className={
-								'absolute left-0 top-0 w-full h-full object-cover object-top rounded-sm rounded-tr-none rounded-br-none'
-							}
-							loop
-							autoPlay
-							playsInline
-							muted
-						/>
-					</div>
-					<div className={'p-6 flex-1 flex flex-col h-full'}>
-						<div className="text-4xl font-bold fontbrand mt-0">
-							Editor Starter
-						</div>
-						<div className="text-muted mt-4 text-base fontbrand">
-							A comprehensive template that includes everything you need to
-							create custom video editing applications with React and
-							TypeScript.
-						</div>
-						<div className="h-5" />
-						<div className="flex gap-2 items-center">
-							<a
-								href="https://www.remotion.pro/editor-starter?ref=remotion.dev"
-								target="_blank"
-								className="no-underline"
-							>
-								<BlueButton size="sm" loading={false}>
-									Purchase
-								</BlueButton>
-							</a>
-							<a
-								href="https://editor-starter.remotion.dev?ref=remotion.dev"
-								target="_blank"
-								className="no-underline"
-							>
-								<ClearButton size="sm" loading={false}>
-									Demo
-								</ClearButton>
-							</a>{' '}
-							<a
-								href="https://remotion.dev/editor-starter"
-								className="no-underline"
-							>
-								<ClearButton size="sm" loading={false}>
-									Docs
-								</ClearButton>
-							</a>
-						</div>
-						<br />
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default EditorStarterSection;

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>
-	);
-};