@remotion/promo-pages 4.0.314 → 4.0.317

package/dist/tailwind.css

@@ -70,6 +70,7 @@
     --font-weight-black: 900;
     --leading-snug: 1.375;
     --leading-relaxed: 1.625;
+    --radius-sm: 0.25rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -153,32 +154,38 @@
   .-mt-2 {
     margin-top: calc(var(--spacing) * -2);
   }
-  .-mt-10 {
-    margin-top: calc(var(--spacing) * -10);
+  .-mt-4 {
+    margin-top: calc(var(--spacing) * -4);
   }
   .-mt-20 {
     margin-top: calc(var(--spacing) * -20);
   }
-  .mt-1 {
-    margin-top: calc(var(--spacing) * 1);
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
   }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
   .mt-20 {
     margin-top: calc(var(--spacing) * 20);
   }
+  .mt-40 {
+    margin-top: calc(var(--spacing) * 40);
+  }
   .mt-\[3px\] {
     margin-top: 3px;
   }
-  .-mb-20 {
-    margin-bottom: calc(var(--spacing) * -20);
-  }
-  .-mb-50 {
-    margin-bottom: calc(var(--spacing) * -50);
+  .-mb-40 {
+    margin-bottom: calc(var(--spacing) * -40);
   }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
@@ -243,26 +250,20 @@
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
-  .h-7 {
-    height: calc(var(--spacing) * 7);
-  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
-  .h-10 {
-    height: calc(var(--spacing) * 10);
-  }
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
-  .h-\[550px\] {
-    height: 550px;
-  }
-  .h-\[600px\] {
-    height: 600px;
+  .h-auto {
+    height: auto;
   }
   .h-full {
     height: 100%;
@@ -294,15 +295,15 @@
   .w-\[90vw\] {
     width: 90vw;
   }
-  .w-\[110px\] {
-    width: 110px;
+  .w-\[140px\] {
+    width: 140px;
+  }
+  .w-\[500px\] {
+    width: 500px;
   }
   .w-\[550px\] {
     width: 550px;
   }
-  .w-\[600px\] {
-    width: 600px;
-  }
   .w-auto {
     width: auto;
   }
@@ -321,9 +322,6 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
-  .min-w-\[60px\] {
-    min-width: 60px;
-  }
   .min-w-\[80px\] {
     min-width: 80px;
   }
@@ -362,15 +360,15 @@
   .grid-flow-col {
     grid-auto-flow: column;
   }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
   .grid-rows-1 {
     grid-template-rows: repeat(1, minmax(0, 1fr));
   }
   .flex-col {
     flex-direction: column;
   }
-  .flex-col-reverse {
-    flex-direction: column-reverse;
-  }
   .flex-row {
     flex-direction: row;
   }
@@ -401,6 +399,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -413,6 +414,9 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
@@ -449,6 +453,9 @@
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -474,6 +481,10 @@
     border-style: var(--tw-border-style);
     border-width: 5px;
   }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
   .border-b-2 {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
@@ -494,6 +505,9 @@
     --tw-border-style: solid;
     border-style: solid;
   }
+  .border-\[var\(--border\)\] {
+    border-color: var(--border);
+  }
   .border-black {
     border-color: var(--color-black);
   }
@@ -563,9 +577,15 @@
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
   .p-5 {
     padding: calc(var(--spacing) * 5);
   }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -578,8 +598,8 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
-  .pt-8 {
-    padding-top: calc(var(--spacing) * 8);
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
   }
   .pt-20 {
     padding-top: calc(var(--spacing) * 20);
@@ -590,9 +610,6 @@
   .pr-5 {
     padding-right: calc(var(--spacing) * 5);
   }
-  .pb-6 {
-    padding-bottom: calc(var(--spacing) * 6);
-  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -615,6 +632,9 @@
     font-family: 'GTPlanar', sans-serif;
     font-feature-settings: 'ss03' on;
   }
+  .font-brand {
+    font-family: 'GTPlanar', sans-serif;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -653,6 +673,10 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .leading-6 {
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -775,6 +799,20 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .group-hover\:opacity-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
+  .hover\:bg-\[var\(--hover\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--hover);
+      }
+    }
+  }
   .hover\:text-brand {
     &:hover {
       @media (hover: hover) {
@@ -804,11 +842,31 @@
       opacity: 100%;
     }
   }
+  .md\:mt-0 {
+    @media (width >= 48rem) {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
+  .md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
   .md\:w-auto {
     @media (width >= 48rem) {
       width: auto;
     }
   }
+  .md\:flex-row {
+    @media (width >= 48rem) {
+      flex-direction: row;
+    }
+  }
+  .md\:items-center {
+    @media (width >= 48rem) {
+      align-items: center;
+    }
+  }
   .md\:overflow-x-visible {
     @media (width >= 48rem) {
       overflow-x: visible;
@@ -834,6 +892,11 @@
       margin-top: calc(var(--spacing) * 0);
     }
   }
+  .lg\:mt-30 {
+    @media (width >= 64rem) {
+      margin-top: calc(var(--spacing) * 30);
+    }
+  }
   .lg\:mb-0 {
     @media (width >= 64rem) {
       margin-bottom: calc(var(--spacing) * 0);
@@ -869,11 +932,6 @@
       min-width: 700px;
     }
   }
-  .lg\:flex-1 {
-    @media (width >= 64rem) {
-      flex: 1;
-    }
-  }
   .lg\:-translate-x-8 {
     @media (width >= 64rem) {
       --tw-translate-x: calc(var(--spacing) * -8);
@@ -892,39 +950,41 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .lg\:flex-row {
+  .lg\:grid-cols-3 {
     @media (width >= 64rem) {
-      flex-direction: row;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
-  .lg\:flex-row-reverse {
+  .lg\:flex-row {
     @media (width >= 64rem) {
-      flex-direction: row-reverse;
+      flex-direction: row;
     }
   }
-  .lg\:items-center {
+  .lg\:justify-end {
     @media (width >= 64rem) {
-      align-items: center;
+      justify-content: flex-end;
     }
   }
-  .lg\:justify-end {
+  .lg\:justify-start {
     @media (width >= 64rem) {
-      justify-content: flex-end;
+      justify-content: flex-start;
     }
   }
-  .lg\:stroke-\[0\.035\] {
+  .lg\:border-r-2 {
     @media (width >= 64rem) {
-      stroke-width: 0.035;
+      border-right-style: var(--tw-border-style);
+      border-right-width: 2px;
     }
   }
-  .lg\:pl-4 {
+  .lg\:border-b-0 {
     @media (width >= 64rem) {
-      padding-left: calc(var(--spacing) * 4);
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
     }
   }
-  .lg\:text-right {
+  .lg\:stroke-\[0\.035\] {
     @media (width >= 64rem) {
-      text-align: right;
+      stroke-width: 0.035;
     }
   }
   .lg\:text-\[5em\] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/promo-pages",
-  "version": "4.0.314",
+  "version": "4.0.317",
   "publishConfig": {
     "access": "public"
   },
@@ -10,14 +10,14 @@
     "polished": "4.3.1",
     "zod": "3.22.3",
     "bun-plugin-tailwind": "0.0.15",
-    "@remotion/animated-emoji": "4.0.314",
-    "@remotion/lambda": "4.0.314",
-    "@remotion/paths": "4.0.314",
-    "@remotion/player": "4.0.314",
-    "@remotion/shapes": "4.0.314",
-    "create-video": "4.0.314",
-    "@remotion/lottie": "4.0.314",
-    "remotion": "4.0.314"
+    "@remotion/lambda": "4.0.317",
+    "@remotion/lottie": "4.0.317",
+    "@remotion/player": "4.0.317",
+    "@remotion/animated-emoji": "4.0.317",
+    "create-video": "4.0.317",
+    "remotion": "4.0.317",
+    "@remotion/shapes": "4.0.317",
+    "@remotion/paths": "4.0.317"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.1.0",
@@ -34,7 +34,7 @@
     "tailwind-merge": "2.5.2",
     "bun-plugin-tailwind": "0.0.13",
     "clsx": "2.1.1",
-    "@remotion/eslint-config-internal": "4.0.314"
+    "@remotion/eslint-config-internal": "4.0.317"
   },
   "repository": {
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/promo-pages"

package/src/components/Homepage.tsx

@@ -4,18 +4,18 @@ import React from 'react';
 import {BackgroundAnimation} from './homepage/BackgroundAnimation';
 import CommunityStats from './homepage/CommunityStats';
 import {Demo} from './homepage/Demo';
-import {LightningFastEditor} from './homepage/Editor';
 import EvaluateRemotionSection from './homepage/EvaluateRemotion';
 import {IfYouKnowReact} from './homepage/IfYouKnowReact';
 import type {ColorMode} from './homepage/layout/use-color-mode';
 import {ColorModeProvider} from './homepage/layout/use-color-mode';
+import {MoreVideoPowerSection} from './homepage/MoreVideoPowerSection';
 import {NewsletterButton} from './homepage/NewsletterButton';
+import {ParameterizeAndEdit} from './homepage/ParameterizeAndEdit';
 import {Pricing} from './homepage/Pricing';
 import {RealMP4Videos} from './homepage/RealMp4Videos';
 import TrustedByBanner from './homepage/TrustedByBanner';
-import {VideoApps} from './homepage/VideoApps';
 import VideoAppsShowcase from './homepage/VideoAppsShowcase';
-import {SectionTitle, VideoAppsTitle} from './homepage/VideoAppsTitle';
+import {SectionTitle} from './homepage/VideoAppsTitle';
 import {WriteInReact} from './homepage/WriteInReact';
 
 export const NewLanding: React.FC<{
@@ -37,19 +37,11 @@ export const NewLanding: React.FC<{
 						<WriteInReact />
 						<br />
 						<IfYouKnowReact />
+						<ParameterizeAndEdit />
 						<RealMP4Videos />
 						<br />
 						<br />
 						<br />
-						<br />
-						<LightningFastEditor />
-						<br />
-						<br />
-						<br />
-						<VideoAppsTitle />
-						<VideoApps active="remotion" />
-						<br />
-						<br />
 						<VideoAppsShowcase />
 						<br />
 						<br />
@@ -69,6 +61,14 @@ export const NewLanding: React.FC<{
 						<br />
 						<br />
 						<br />
+						<SectionTitle>Even more power to developers</SectionTitle>
+						<div className={'fontbrand text-center mb-10 -mt-4'}>
+							Innovative video products that you might enjoy.
+						</div>
+						<MoreVideoPowerSection />
+						<br />
+						<br />
+						<br />
 						<NewsletterButton />
 						<br />
 						<br />

package/src/components/homepage/CommunityStats.tsx

@@ -25,7 +25,7 @@ const SectionLink: React.FC<{
 const CommunityStats: React.FC = () => (
 	<div className={'m-auto max-w-[700px] text-center'}>
 		<SectionTitle>Never build alone</SectionTitle>
-		<div className={'fontbrand text-center mb-10'}>
+		<div className={'fontbrand text-center mb-10 -mt-4'}>
 			Join a thriving community of developers.
 		</div>
 		<div className={'flex flex-wrap justify-between gap-4 w-full items-center'}>

package/src/components/homepage/Counter.tsx

@@ -47,40 +47,50 @@ interface CounterProps {
 	readonly count: number;
 	readonly setCount: (count: number) => void;
 	readonly minCount?: number;
+	readonly step?: number;
 }
 
 export const Counter: React.FC<CounterProps> = ({
 	count,
 	setCount,
 	minCount = 0,
+	step = 1,
 }) => {
 	const decrement = () => {
 		if (count > minCount) {
-			setCount(count - 1);
+			setCount(Math.max(minCount, count - step));
 		}
 	};
 
 	const increment = () => {
-		setCount(count + 1);
+		setCount(count + step);
 	};
 
 	return (
-		<div style={container} className={cn('border-effect w-[110px] text-text')}>
+		<div style={container} className={cn('border-effect w-[140px] text-text')}>
 			<input
 				className={
-					'fontbrand text-2xl font-medium min-w-[60px] border-0 text-end bg-transparent outline-0 text-text'
+					'fontbrand text-2xl font-medium min-w-[80px] border-0 text-end bg-transparent outline-0 text-text'
 				}
 				type="number"
 				onClick={(e) => e.currentTarget.select()}
 				value={count}
 				onChange={(e: ChangeEvent<HTMLInputElement>) => {
 					if (e.target.value.trim() === '') {
-						setCount(1);
+						setCount(step === 1 ? 1 : minCount);
 						return;
 					}
 
-					const max = Math.max(parseInt(e.target.value, 10), 1);
-					setCount(max);
+					const inputValue = parseInt(e.target.value, 10);
+					const validValue = Math.max(inputValue, minCount);
+					
+					// For steps > 1, round to the nearest valid step
+					if (step > 1) {
+						const roundedValue = Math.round(validValue / step) * step;
+						setCount(Math.max(roundedValue, minCount));
+					} else {
+						setCount(validValue);
+					}
 				}}
 			/>
 			<div className="flex flex-col ml-3 h-full">

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

@@ -1,6 +1,5 @@
 import type {EmojiName} from '@remotion/animated-emoji';
-import type {LottieAnimationData} from '@remotion/lottie';
-import {Lottie, getLottieMetadata} from '@remotion/lottie';
+import type {Lottie, LottieAnimationData} from '@remotion/lottie';
 import React, {useEffect, useMemo, useState} from 'react';
 import {
 	cancelRender,
@@ -20,6 +19,9 @@ export const DisplayedEmoji: React.FC<{
 }> = ({emoji}) => {
 	const [data, setData] = useState<Data | null>(null);
 	const {durationInFrames, fps} = useVideoConfig();
+	const [browser, setBrowser] = useState<boolean>(
+		typeof document !== 'undefined',
+	);
 
 	const src = useMemo(() => {
 		if (emoji === 'melting') {
@@ -40,8 +42,14 @@ export const DisplayedEmoji: React.FC<{
 	const [handle] = useState(() => delayRender());
 
 	useEffect(() => {
-		Promise.all([fetch(src).then((res) => res.json())])
-			.then(([json]) => {
+		Promise.all([
+			fetch(src).then((res) => res.json()),
+			import('@remotion/lottie').then(({Lottie, getLottieMetadata}) => ({
+				Lottie,
+				getLottieMetadata,
+			})),
+		])
+			.then(([json, {Lottie, getLottieMetadata}]) => {
 				setData({
 					Lottie,
 					duration: getLottieMetadata(json)?.durationInSeconds as number,
@@ -54,6 +62,16 @@ export const DisplayedEmoji: React.FC<{
 			});
 	}, [handle, src]);
 
+	useEffect(() => {
+		if (typeof document !== 'undefined') {
+			setBrowser(true);
+		}
+	}, []);
+
+	if (!browser) {
+		return null;
+	}
+
 	if (!data) {
 		return null;
 	}