@remotion/promo-pages 4.0.314 → 4.0.317

package/src/components/homepage/VideoAppsShowcase.tsx

@@ -1,6 +1,5 @@
 import React, {useEffect, useRef, useState} from 'react';
 
-import {BlueButton} from './layout/Button';
 import {MuxVideo} from './MuxVideo';
 import {SectionTitle} from './VideoAppsTitle';
 
@@ -57,6 +56,11 @@ const videoApps = [
 	},
 ];
 
+const icon: React.CSSProperties = {
+	height: 16,
+	marginLeft: 10,
+};
+
 const VideoAppsShowcase: React.FC = () => {
 	const [activeTab, setActiveTab] = useState(0);
 	const [isMuted, setIsMuted] = useState(true);
@@ -174,7 +178,7 @@ const VideoAppsShowcase: React.FC = () => {
 			<SectionTitle>Use Cases</SectionTitle>
 			<div
 				className={
-					'grid justify-center grid-flow-col grid-rows-1 gap-2.5 justify-self-center mb-4 w-[90vw] md:w-auto'
+					'grid justify-center grid-flow-col grid-rows-1 gap-2.5 justify-self-center mb-4 w-[90vw] md:w-auto -mt-4'
 				}
 			>
 				{tabs.map((tab, index) => (
@@ -201,7 +205,7 @@ const VideoAppsShowcase: React.FC = () => {
 							ref={videoRef}
 							muxId={videoApps[activeTab].muxId}
 							className={
-								'absolute left-0 top-0 w-full h-full object-contain rounded-lg rounded-tr-none rounded-br-none'
+								'absolute left-0 top-0 w-full h-full object-contain rounded-sm rounded-tr-none rounded-br-none'
 							}
 							loop
 							playsInline
@@ -228,8 +232,8 @@ const VideoAppsShowcase: React.FC = () => {
 							</button>
 						)}
 					</div>
-					<div className={'pl-4 flex-1 lg:pl-4 flex flex-col h-full pt-8 pb-6'}>
-						<div className="text-4xl font-bold fontbrand">
+					<div className={'p-6 flex-1 flex flex-col h-full'}>
+						<div className="text-4xl font-bold fontbrand mt-0">
 							{videoApps[activeTab].title}
 						</div>
 						<div className="text-muted mt-4 text-base fontbrand">
@@ -242,13 +246,20 @@ const VideoAppsShowcase: React.FC = () => {
 						) : null}
 						<div className="h-5" />
 						<a
-							target="_blank"
+							className="no-underline text-brand font-brand font-bold inline-flex flex-row items-center"
 							href={videoApps[activeTab].link}
-							style={{textDecoration: 'none'}}
 						>
-							<BlueButton loading={false} size="sm">
-								{videoApps[activeTab].buttonText}
-							</BlueButton>
+							{videoApps[activeTab].buttonText}
+							<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>

package/src/components/homepage/VideoAppsTitle.tsx

@@ -1,18 +1,5 @@
 import React from 'react';
 
-export const VideoAppsTitle: React.FC = () => {
-	return (
-		<div className={'text-center'}>
-			<h2 className={'fontbrand text-4xl'}>
-				Build video <span className={'fontbrand'}>apps</span>
-			</h2>
-			<p>
-				Use our suite of tools to build apps that lets others create videos.
-			</p>
-		</div>
-	);
-};
-
 export const SectionTitle: React.FC<{readonly children: React.ReactNode}> = ({
 	children,
 }) => {

package/src/components/icons/recorder.tsx

@@ -0,0 +1,23 @@
+import type {SVGProps} from 'react';
+import React from 'react';
+
+export const Recorder: React.FC<SVGProps<SVGSVGElement>> = (props) => {
+	return (
+		<svg viewBox="0 0 700 700" {...props}>
+			<path
+				d="M0 350C0 115.5 115.5 0 350 0C584.5 0 700 115.5 700 350C700 584.5 584.5 700 350 700C115.5 700 0 584.5 0 350Z"
+				fill="#F43B00"
+				fillOpacity="0.15"
+			/>
+			<path
+				d="M79.4595 344.324C79.4595 161.794 169.362 71.8915 351.892 71.8915C534.422 71.8915 624.324 161.794 624.324 344.324C624.324 526.854 534.422 616.756 351.892 616.756C169.362 616.756 79.4595 526.854 79.4595 344.324Z"
+				fill="#F43B00"
+				fillOpacity="0.3"
+			/>
+			<path
+				d="M155.135 343.378C155.135 212.185 219.752 147.567 350.946 147.567C482.139 147.567 546.756 212.185 546.756 343.378C546.756 474.571 482.139 539.189 350.946 539.189C219.752 539.189 155.135 474.571 155.135 343.378Z"
+				fill="#F43B00"
+			/>
+		</svg>
+	);
+};

package/dist/components/homepage/Editor.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const LightningFastEditor: React.FC;

package/dist/components/homepage/Editor.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-export const LightningFastEditor = () => {
-    const ref = useRef(null);
-    const videoRef = useRef(null);
-    const [isIntersecting, setIsIntersecting] = useState(false);
-    const callback = useCallback((data) => {
-        var _a, _b;
-        const { isIntersecting: intersecting } = data[0];
-        setIsIntersecting(intersecting);
-        if (intersecting) {
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-        }
-        else {
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
-        }
-    }, []);
-    useEffect(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        const observer = new IntersectionObserver(callback, {
-            root: null,
-            threshold: 0.2,
-        });
-        observer.observe(current);
-        return () => observer.unobserve(current);
-    }, [callback]);
-    return (_jsxs("div", { ref: ref, className: 'flex flex-col-reverse lg:flex-row justify-start lg:justify-end lg:text-right items-start lg:items-center', children: [_jsx("div", { children: _jsx("video", { src: "/img/player-demo.mp4", autoPlay: true, muted: true, playsInline: true, loop: true, style: {
-                        animationPlayState: isIntersecting ? 'running' : 'paused',
-                        width: 500,
-                        maxWidth: '100%',
-                        borderRadius: 7,
-                        overflow: 'hidden',
-                    } }) }), _jsxs("div", { style: { flex: 1 }, children: [_jsxs("h2", { className: 'fontbrand text-4xl', children: ["Fast and ", _jsx("br", {}), " ", _jsx("span", { className: "text-brand", children: "delightful" }), " editing"] }), _jsxs("p", { className: "leading-relaxed", children: ["Preview your video in the browser. ", _jsx("br", {}), "Fast refresh while the video is playing. ", _jsx("br", {}), "Scrub through the timeline to get every frame perfect."] })] })] }));
-};

package/src/components/homepage/Editor.tsx

@@ -1,67 +0,0 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
-
-export const LightningFastEditor: React.FC = () => {
-	const ref = useRef<HTMLDivElement>(null);
-	const videoRef = useRef<HTMLVideoElement>(null);
-	const [isIntersecting, setIsIntersecting] = useState(false);
-
-	const callback: IntersectionObserverCallback = useCallback((data) => {
-		const {isIntersecting: intersecting} = data[0];
-		setIsIntersecting(intersecting);
-		if (intersecting) {
-			videoRef.current?.play();
-		} else {
-			videoRef.current?.pause();
-		}
-	}, []);
-
-	useEffect(() => {
-		const {current} = ref;
-		if (!current) {
-			return;
-		}
-
-		const observer = new IntersectionObserver(callback, {
-			root: null,
-			threshold: 0.2,
-		});
-		observer.observe(current);
-
-		return () => observer.unobserve(current);
-	}, [callback]);
-	return (
-		<div
-			ref={ref}
-			className={
-				'flex flex-col-reverse lg:flex-row justify-start lg:justify-end lg:text-right items-start lg:items-center'
-			}
-		>
-			<div>
-				<video
-					src="/img/player-demo.mp4"
-					autoPlay
-					muted
-					playsInline
-					loop
-					style={{
-						animationPlayState: isIntersecting ? 'running' : 'paused',
-						width: 500,
-						maxWidth: '100%',
-						borderRadius: 7,
-						overflow: 'hidden',
-					}}
-				/>
-			</div>
-			<div style={{flex: 1}}>
-				<h2 className={'fontbrand text-4xl'}>
-					Fast and <br /> <span className="text-brand">delightful</span> editing
-				</h2>
-				<p className="leading-relaxed">
-					Preview your video in the browser. <br />
-					Fast refresh while the video is playing. <br />
-					Scrub through the timeline to get every frame perfect.
-				</p>
-			</div>
-		</div>
-	);
-};