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

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

package/src/components/homepage/MoreTemplatesButton.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import {useMobileLayout} from './layout/use-mobile-layout';
-
-const icon: React.CSSProperties = {
-	height: 16,
-	marginLeft: 10,
-};
-
-export const MoreTemplatesButton: React.FC = () => {
-	const mobileLayout = useMobileLayout();
-
-	return (
-		<a href="/templates" className="no-underline text-inherit">
-			<div className="right-0 border-2 rounded-full text-inherit px-4 py-2 fontbrand font-semibold text-sm flex flex-row items-center">
-				{mobileLayout ? 'Templates' : 'Find a template'}
-				<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>
-			</div>
-		</a>
-	);
-};

package/src/components/homepage/MuxVideo.tsx

@@ -1,68 +0,0 @@
-import Hls from 'hls.js';
-import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
-import {VideoPlayerWithControls} from './VideoPlayerWithControls';
-
-const getVideoToPlayUrl = (muxId: string) => {
-	return `https://stream.mux.com/${muxId}.m3u8`;
-};
-
-const MuxVideoForward: React.ForwardRefRenderFunction<
-	HTMLVideoElement,
-	React.DetailedHTMLProps<
-		React.VideoHTMLAttributes<HTMLVideoElement>,
-		HTMLVideoElement
-	> & {
-		readonly muxId: string;
-	}
-> = ({muxId, ...props}, ref) => {
-	const videoRef = useRef<HTMLVideoElement>(null);
-	const vidUrl = getVideoToPlayUrl(muxId);
-
-	useImperativeHandle(ref, () => videoRef.current!, []);
-
-	useEffect(() => {
-		let hls: Hls;
-		if (videoRef.current) {
-			const {current} = videoRef;
-			if (current.canPlayType('application/vnd.apple.mpegurl')) {
-				// Some browers (safari and ie edge) support HLS natively
-				current.src = vidUrl;
-			} else if (Hls.isSupported()) {
-				// This will run in all other modern browsers
-				hls = new Hls();
-				hls.loadSource(vidUrl);
-				hls.attachMedia(current);
-			} else {
-				// eslint-disable-next-line no-console
-				console.error("This is a legacy browser that doesn't support MSE");
-			}
-		}
-
-		return () => {
-			if (hls) {
-				hls.destroy();
-			}
-		};
-	}, [vidUrl, videoRef]);
-
-	return <video ref={videoRef} {...props} />;
-};
-
-export const MuxVideo = forwardRef(MuxVideoForward);
-
-export const NewMuxVideo: React.FC<{
-	readonly muxId: string;
-}> = ({muxId}) => {
-	return (
-		<VideoPlayerWithControls
-			playbackId={muxId}
-			poster={'https://image.mux.com/' + muxId + '/thumbnail.png?time=1'}
-			onError={(error) => {
-				// eslint-disable-next-line no-console
-				console.log(error);
-			}}
-			onLoaded={() => undefined}
-			onSize={() => undefined}
-		/>
-	);
-};

package/src/components/homepage/NewsletterButton.tsx

@@ -1,88 +0,0 @@
-import React, {useCallback, useState} from 'react';
-import {BlueButton} from './layout/Button';
-import {Spacer} from './Spacer';
-
-export const NewsletterButton: React.FC<{}> = () => {
-	const [email, setEmail] = useState('');
-	const [submitting, setSubmitting] = useState(false);
-	const [subscribed, setSubscribed] = useState(false);
-
-	const handleSubmit = useCallback(
-		async (e: React.FormEvent<HTMLFormElement>) => {
-			try {
-				setSubmitting(true);
-				e.preventDefault();
-
-				const response = await fetch(
-					'https://www.remotion.pro/api/newsletter',
-					{
-						method: 'POST',
-						body: JSON.stringify({email}),
-						headers: {
-							'content-type': 'application/json',
-						},
-					},
-				);
-				const json = await response.json();
-				if (json.success) {
-					setSubscribed(true);
-				} else {
-					// eslint-disable-next-line no-alert
-					alert('Something went wrong. Please try again later.');
-				}
-
-				setSubmitting(false);
-			} catch {
-				// eslint-disable-next-line no-alert
-				alert('Something went wrong. Please try again later.');
-			}
-		},
-		[email],
-	);
-
-	return (
-		<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>
-						<form
-							onSubmit={handleSubmit}
-							style={{
-								width: '100%',
-							}}
-						>
-							<p className="leading-snug mt-1 text-muted fontbrand">
-								Read about new features and noteworthy updates we have made on
-								Remotion once in a while.
-							</p>
-
-							<input
-								className="w-full rounded-lg border-effect border-black outline-none px-3 py-3 fontbrand text-lg box-border focus:border-brand"
-								disabled={submitting}
-								value={email}
-								onChange={(e) => setEmail(e.target.value)}
-								type={'email'}
-								required
-								placeholder="animator@gmail.com"
-							/>
-							<Spacer />
-							<Spacer />
-							<div>
-								<BlueButton
-									type="submit"
-									className="w-full"
-									loading={submitting}
-									disabled={submitting || subscribed}
-									size="sm"
-								>
-									{subscribed ? 'Subscribed!' : 'Subscribe'}
-								</BlueButton>
-							</div>
-						</form>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};

package/src/components/homepage/Pricing.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import {CompanyPricing, EnterpriseLicense, FreePricing} from './FreePricing';
-
-export const Pricing: React.FC = () => {
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				gap: 20,
-				marginBottom: 40,
-			}}
-		>
-			<FreePricing />
-			<CompanyPricing />
-			<EnterpriseLicense />
-			<div
-				style={{
-					justifyContent: 'center',
-					display: 'flex',
-				}}
-			>
-				<div
-					style={{
-						fontFamily: 'GTPlanar',
-					}}
-				>
-					See our{' '}
-					<a
-						target="_blank"
-						className="bluelink"
-						href="https://remotion.pro/faq"
-					>
-						FAQ
-					</a>{' '}
-					and{' '}
-					<a
-						target="_blank"
-						className="bluelink"
-						href="https://www.remotion.pro/terms"
-					>
-						Terms and Conditions
-					</a>{' '}
-					for more details.
-				</div>
-			</div>
-		</div>
-	);
-};

package/src/components/homepage/PricingBulletPoint.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-
-const container: React.CSSProperties = {
-	display: 'flex',
-	flexDirection: 'row',
-	alignItems: 'center',
-	gap: '10px',
-};
-
-const greyCircle: React.CSSProperties = {
-	width: 20,
-	height: 20,
-	borderRadius: 10,
-	backgroundColor: 'var(--footer-border)',
-};
-
-export const PricingBulletPoint: React.FC<{
-	readonly text: React.ReactNode;
-	readonly checked: boolean;
-	readonly children?: React.ReactNode;
-}> = ({text, checked, children}) => {
-	const checkmarkSVG = (
-		<svg
-			width="20"
-			height="20"
-			viewBox="0 0 20 20"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			style={{
-				flexShrink: 0,
-			}}
-		>
-			<circle cx="10" cy="10" r="10" fill="#0B84F3" />
-			<path
-				d="M14.7908 7.20505C15.0697 7.47844 15.0697 7.92243 14.7908 8.19583L9.07711 13.795C8.79813 14.0683 8.34505 14.0683 8.06606 13.795L5.20924 10.9954C4.93025 10.722 4.93025 10.278 5.20924 10.0046C5.48823 9.73121 5.9413 9.73121 6.22029 10.0046L8.5727 12.3077L13.7819 7.20505C14.0609 6.93165 14.514 6.93165 14.793 7.20505H14.7908Z"
-				fill="white"
-			/>
-		</svg>
-	);
-
-	return (
-		<div style={container}>
-			{checked ? checkmarkSVG : <div style={greyCircle} />}
-			<div className={'fontbrand text-lg	'}>
-				{text}
-				{children}
-			</div>
-		</div>
-	);
-};

package/src/components/homepage/RealMp4Videos.tsx

@@ -1,50 +0,0 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
-
-export const RealMP4Videos: React.FC = () => {
-	const ref = useRef<HTMLDivElement>(null);
-	const [isIntersecting, setIsIntersecting] = useState(false);
-
-	const callback: IntersectionObserverCallback = useCallback((data) => {
-		setIsIntersecting(data[0].isIntersecting);
-	}, []);
-
-	useEffect(() => {
-		const {current} = ref;
-		if (!current) {
-			return;
-		}
-
-		const observer = new IntersectionObserver(callback, {
-			root: null,
-			threshold: 0.5,
-		});
-		observer.observe(current);
-
-		return () => observer.unobserve(current);
-	}, [callback]);
-
-	return (
-		<div ref={ref} className={'flex flex-col lg:flex-row'}>
-			<div>
-				<h2 className="text-4xl fontbrand">
-					Real <span className={'text-brand'}>.mp4</span> videos
-				</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>
-			</div>
-			<div className="flex flex-1 justify-start lg:justify-end items-end">
-				<img
-					src="/img/mp4.png"
-					className="mb-[30px] lg:mb-0"
-					style={{
-						width: 110,
-						animationPlayState: isIntersecting ? 'running' : 'paused',
-					}}
-				/>
-			</div>
-		</div>
-	);
-};

package/src/components/homepage/Spacer.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export const Spacer: React.FC = () => {
-	return <div style={{width: 4, height: 4}} />;
-};

package/src/components/homepage/TemplateIcon.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import {useMobileLayout} from './layout/use-mobile-layout';
-
-const icon: React.CSSProperties = {
-	display: 'flex',
-	width: 36,
-	height: 36,
-	justifyContent: 'center',
-	alignItems: 'center',
-	margin: 0,
-};
-
-const outer: React.CSSProperties = {
-	textAlign: 'center',
-	display: 'flex',
-	alignItems: 'center',
-	flexDirection: 'column',
-	color: 'var(--ifm-font-color-base)',
-	cursor: 'pointer',
-	filter: 'drop-shadow(0px 0px 4px var(--background))',
-	textDecoration: 'none',
-};
-
-export const TemplateIcon: React.FC<{
-	readonly label: string;
-	readonly children: React.ReactNode;
-}> = ({children, label}) => {
-	const mobileLayout = useMobileLayout();
-
-	return (
-		<span style={outer}>
-			<div style={icon}>{children}</div>
-			{mobileLayout ? null : <div className="text-xs fontbrand">{label}</div>}
-		</span>
-	);
-};