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

package/src/components/homepage/MoreTemplatesButton.tsx

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,88 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,50 @@
+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

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

package/src/components/homepage/TemplateIcon.tsx

@@ -0,0 +1,36 @@
+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>
+	);
+};

package/src/components/homepage/TextInput.tsx

@@ -0,0 +1,62 @@
+import type {DetailedHTMLProps} from 'react';
+import React, {useCallback, useState} from 'react';
+
+const inputStyle: React.CSSProperties = {
+	padding: 16,
+	border: 'none',
+	outline: 'none',
+	borderRadius: 4,
+	minWidth: 35,
+	fontSize: 16,
+	background: 'var(--background)',
+};
+
+const backgroundStyle = (
+	focused: boolean,
+	fullWidth: boolean,
+): React.CSSProperties => {
+	return {
+		padding: 2,
+		background: focused
+			? 'var(--ifm-color-primary)'
+			: 'var(--ifm-font-color-base)',
+		display: fullWidth ? 'block' : 'inline-block',
+		transition: '0.2s background-color',
+		borderRadius: 7,
+		overflow: 'hidden',
+		width: fullWidth ? '100%' : undefined,
+	};
+};
+
+type Props = Omit<
+	DetailedHTMLProps<
+		React.InputHTMLAttributes<HTMLInputElement>,
+		HTMLInputElement
+	>,
+	'onFocus' | 'onBlur'
+> & {
+	readonly fullWidth?: boolean;
+};
+
+export const CoolInput: React.FC<Props> = ({style, fullWidth, ...props}) => {
+	const [focus, setFocused] = useState(false);
+
+	const onFocus = useCallback(() => {
+		setFocused(true);
+	}, [setFocused]);
+
+	const onBlur = useCallback(() => {
+		setFocused(false);
+	}, [setFocused]);
+
+	return (
+		<div style={backgroundStyle(focus, fullWidth!)}>
+			<input
+				style={{...inputStyle, ...style}}
+				{...props}
+				onFocus={onFocus}
+				onBlur={onBlur}
+			/>
+		</div>
+	);
+};