@remotion/promo-pages 4.0.476 → 4.0.477
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Homepage.js +984 -587
- package/dist/components/Homepage.js +3 -3
- package/dist/components/homepage/CommunityStatsItems.js +1 -1
- package/dist/components/homepage/Demo/Comp.js +1 -1
- package/dist/components/homepage/Demo/DownloadNudge.js +2 -2
- package/dist/components/homepage/Demo/DragAndDropNudge.js +1 -1
- package/dist/components/homepage/Demo/ThemeNudge.js +6 -6
- package/dist/components/homepage/Demo/index.js +9 -9
- package/dist/components/homepage/EditorStarterSection.d.ts +3 -0
- package/dist/components/homepage/EditorStarterSection.js +8 -0
- package/dist/components/homepage/GitHubButton.js +1 -1
- package/dist/components/homepage/VideoAppsShowcase.d.ts +2 -1
- package/dist/components/homepage/VideoAppsShowcase.js +5 -5
- package/dist/components/team/TrustSection.js +1 -1
- package/dist/design.js +591 -214
- package/dist/experts.js +130 -66
- package/dist/homepage/Pricing.js +585 -208
- package/dist/prompts/PromptsGallery.js +587 -210
- package/dist/prompts/PromptsShow.js +591 -214
- package/dist/prompts/PromptsSubmit.js +593 -216
- package/dist/team.js +583 -206
- package/dist/template-modal-content.js +590 -213
- package/dist/templates.js +583 -206
- package/package.json +13 -13
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import AutomationsSection from './homepage/AutomationsSection';
|
|
4
3
|
import { BackgroundAnimation } from './homepage/BackgroundAnimation';
|
|
5
4
|
import CommunityStats from './homepage/CommunityStats';
|
|
6
5
|
import { Demo } from './homepage/Demo';
|
|
6
|
+
import EditorStarterSection from './homepage/EditorStarterSection';
|
|
7
7
|
import EvaluateRemotionSection from './homepage/EvaluateRemotion';
|
|
8
8
|
import { IfYouKnowReact } from './homepage/IfYouKnowReact';
|
|
9
9
|
import { ColorModeProvider } from './homepage/layout/use-color-mode';
|
|
@@ -12,9 +12,9 @@ import { ParameterizeAndEdit } from './homepage/ParameterizeAndEdit';
|
|
|
12
12
|
import { Pricing } from './homepage/Pricing';
|
|
13
13
|
import { RealMP4Videos } from './homepage/RealMp4Videos';
|
|
14
14
|
import TrustedByBanner from './homepage/TrustedByBanner';
|
|
15
|
-
import
|
|
15
|
+
import VideoAppsShowcase from './homepage/VideoAppsShowcase';
|
|
16
16
|
import { SectionTitle } from './homepage/VideoAppsTitle';
|
|
17
17
|
import { WriteInReact } from './homepage/WriteInReact';
|
|
18
18
|
export const NewLanding = ({ colorMode, setColorMode }) => {
|
|
19
|
-
return (_jsx(ColorModeProvider, { colorMode: colorMode, setColorMode: setColorMode, children: _jsx("div", { className: "w-full relative", children: _jsxs("div", { style: { overflow: 'hidden' }, children: [_jsx("div", { children: _jsx(BackgroundAnimation, {}) }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsxs("div", { className: "max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 overflow-x-clip md:overflow-x-visible relative", children: [_jsx(WriteInReact, {}), _jsx("br", {}), _jsx(IfYouKnowReact, {}), _jsx(ParameterizeAndEdit, {}), _jsx(RealMP4Videos, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(
|
|
19
|
+
return (_jsx(ColorModeProvider, { colorMode: colorMode, setColorMode: setColorMode, children: _jsx("div", { className: "w-full relative", children: _jsxs("div", { style: { overflow: 'hidden' }, children: [_jsx("div", { children: _jsx(BackgroundAnimation, {}) }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsxs("div", { className: "max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 overflow-x-clip md:overflow-x-visible relative", children: [_jsx(WriteInReact, {}), _jsx("br", {}), _jsx(IfYouKnowReact, {}), _jsx(ParameterizeAndEdit, {}), _jsx(RealMP4Videos, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(VideoAppsShowcase, {}), _jsx("br", {}), _jsx("br", {}), _jsx(Demo, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(SectionTitle, { children: "Pricing" }), _jsx(Pricing, {}), _jsx(TrustedByBanner, {}), _jsx("br", {}), _jsx(EvaluateRemotionSection, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(CommunityStats, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(EditorStarterSection, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(NewsletterButton, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {})] })] }) }) }));
|
|
20
20
|
};
|
|
@@ -30,7 +30,7 @@ export const PagesOfDocs = () => {
|
|
|
30
30
|
};
|
|
31
31
|
export const TemplatesAndExamples = () => (_jsxs(Pill, { className: "w-[30%] flex items-center flex-row", children: [_jsx(StatItemContent, { content: "35", width: "60px", fontSize: "2.7rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: "templates & examples", width: "135px", fontSize: "1.35rem", fontWeight: "bold" })] }));
|
|
32
32
|
export const GitHubStars = () => {
|
|
33
|
-
return (_jsxs(Pill, { className: "w-[30%] flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 26 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.9951 0C13.4424 0 13.8507 0.24375 14.0451 0.632812L17.3799 7.25625L24.8271 8.31562C25.2646 8.37656 25.6292 8.67188 25.7653 9.07969C25.9014 9.4875 25.7896 9.92812 25.4785 10.2281L20.0778 15.3937L21.3514 22.6875C21.4243 23.1094 21.2444 23.5359 20.8799 23.7891C20.5153 24.0422 20.0389 24.0703 19.65 23.8688L12.9903 20.4375L6.34027 23.8641C5.94652 24.0656 5.47014 24.0375 5.11041 23.7844C4.75069 23.5312 4.56597 23.1047 4.63889 22.6828L5.9125 15.3891L0.511803 10.2281C0.195831 9.92812 0.0888863 9.48281 0.224997 9.07969C0.361108 8.67656 0.725692 8.38125 1.16319 8.31562L8.61041 7.25625L11.9451 0.632812C12.1444 0.24375 12.5479 0 12.9951 0ZM12.9951 3.70312L10.4431 8.775C10.2729 9.10781 9.94722 9.34219 9.56319 9.39844L3.8125 10.2141L7.98819 14.2031C8.25555 14.4609 8.38194 14.8266 8.31875 15.1875L7.33194 20.7984L12.4458 18.1641C12.791 17.9859 13.2042 17.9859 13.5444 18.1641L18.6583 20.7984L17.6764 15.1922C17.6132 14.8313 17.7347 14.4656 18.0069 14.2078L22.1826 10.2188L16.4319 9.39844C16.0528 9.34219 15.7222 9.1125 15.5521 8.775L12.9951 3.70312Z", fill: "var(--text-color)" }) }), width: "45px" }), _jsx(StatItemContent, { content: "
|
|
33
|
+
return (_jsxs(Pill, { className: "w-[30%] flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 26 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.9951 0C13.4424 0 13.8507 0.24375 14.0451 0.632812L17.3799 7.25625L24.8271 8.31562C25.2646 8.37656 25.6292 8.67188 25.7653 9.07969C25.9014 9.4875 25.7896 9.92812 25.4785 10.2281L20.0778 15.3937L21.3514 22.6875C21.4243 23.1094 21.2444 23.5359 20.8799 23.7891C20.5153 24.0422 20.0389 24.0703 19.65 23.8688L12.9903 20.4375L6.34027 23.8641C5.94652 24.0656 5.47014 24.0375 5.11041 23.7844C4.75069 23.5312 4.56597 23.1047 4.63889 22.6828L5.9125 15.3891L0.511803 10.2281C0.195831 9.92812 0.0888863 9.48281 0.224997 9.07969C0.361108 8.67656 0.725692 8.38125 1.16319 8.31562L8.61041 7.25625L11.9451 0.632812C12.1444 0.24375 12.5479 0 12.9951 0ZM12.9951 3.70312L10.4431 8.775C10.2729 9.10781 9.94722 9.34219 9.56319 9.39844L3.8125 10.2141L7.98819 14.2031C8.25555 14.4609 8.38194 14.8266 8.31875 15.1875L7.33194 20.7984L12.4458 18.1641C12.791 17.9859 13.2042 17.9859 13.5444 18.1641L18.6583 20.7984L17.6764 15.1922C17.6132 14.8313 17.7347 14.4656 18.0069 14.2078L22.1826 10.2188L16.4319 9.39844C16.0528 9.34219 15.7222 9.1125 15.5521 8.775L12.9951 3.70312Z", fill: "var(--text-color)" }) }), width: "45px" }), _jsx(StatItemContent, { content: "47k", width: "80px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "GitHub stars", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));
|
|
34
34
|
};
|
|
35
35
|
export const DiscordMembers = () => {
|
|
36
36
|
return (_jsx(Pill, { className: 'w-[30%]', children: _jsxs("div", { style: {
|
|
@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
|
4
4
|
import { AbsoluteFill, prefetch, staticFile, } from 'remotion';
|
|
5
5
|
import { Cards } from './Cards';
|
|
6
6
|
export const getDataAndProps = async () => {
|
|
7
|
-
const location = (await fetch('https://
|
|
7
|
+
const location = (await fetch('https://bugs-five.vercel.app/api/location').then((res) => res.json()));
|
|
8
8
|
const trending = await fetch(`https://bugs.remotion.dev/trending?lat=${location.latitude}&lng=${location.longitude}&country=${location.country}`)
|
|
9
9
|
.then((res) => res.json())
|
|
10
10
|
.then((data) => {
|
|
@@ -14,8 +14,8 @@ export const DownloadNudge = () => {
|
|
|
14
14
|
display: 'flex',
|
|
15
15
|
justifyContent: 'flex-end',
|
|
16
16
|
textAlign: 'right',
|
|
17
|
-
paddingRight:
|
|
18
|
-
paddingTop:
|
|
17
|
+
paddingRight: 22,
|
|
18
|
+
paddingTop: 20,
|
|
19
19
|
}, children: _jsxs("div", { children: [_jsx(Icon, {}), _jsx("div", { style: {
|
|
20
20
|
fontFamily: FONTS.GTPLANAR,
|
|
21
21
|
fontSize: 15,
|
|
@@ -15,7 +15,7 @@ export const DragAndDropNudge = () => {
|
|
|
15
15
|
display: 'flex',
|
|
16
16
|
justifyContent: 'flex-start',
|
|
17
17
|
paddingBottom: 5,
|
|
18
|
-
marginTop:
|
|
18
|
+
marginTop: 50,
|
|
19
19
|
}, className: 'ml-4 lg:-ml-5', children: _jsxs("div", { children: [_jsx("div", { style: {
|
|
20
20
|
fontFamily: FONTS.GTPLANAR,
|
|
21
21
|
fontSize: 15,
|
|
@@ -2,13 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { FONTS } from '../layout/colors';
|
|
4
4
|
import { useColorMode } from '../layout/use-color-mode';
|
|
5
|
-
const origWidth =
|
|
5
|
+
const origWidth = 21;
|
|
6
6
|
const scale = 0.4;
|
|
7
7
|
export const Icon = () => {
|
|
8
8
|
return (_jsx("svg", { style: {
|
|
9
9
|
width: origWidth * scale,
|
|
10
|
-
|
|
11
|
-
}, viewBox: "0 0 37 59", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M32 5C32 36.5 21 44 5 54", stroke: "currentColor", strokeWidth: "8", strokeLinecap: "round" }) }));
|
|
10
|
+
}, viewBox: "0 0 21 161", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5 5C23 59.5 14.5 120.5 5.00005 156", stroke: "currentColor", strokeWidth: "8", strokeLinecap: "round" }) }));
|
|
12
11
|
};
|
|
13
12
|
export const ThemeNudge = () => {
|
|
14
13
|
const { colorMode, setColorMode } = useColorMode();
|
|
@@ -20,15 +19,16 @@ export const ThemeNudge = () => {
|
|
|
20
19
|
flexDirection: 'row',
|
|
21
20
|
display: 'flex',
|
|
22
21
|
justifyContent: 'flex-start',
|
|
23
|
-
paddingBottom:
|
|
22
|
+
paddingBottom: 5,
|
|
24
23
|
textAlign: 'right',
|
|
25
24
|
position: 'absolute',
|
|
26
|
-
|
|
25
|
+
right: 0,
|
|
26
|
+
}, children: _jsxs("div", { children: [_jsxs("div", { style: {
|
|
27
27
|
fontFamily: FONTS.GTPLANAR,
|
|
28
28
|
fontSize: 15,
|
|
29
29
|
width: 280,
|
|
30
30
|
paddingBottom: 8,
|
|
31
|
-
marginLeft:
|
|
31
|
+
marginLeft: -15,
|
|
32
32
|
textWrap: 'balance',
|
|
33
33
|
marginTop: 5,
|
|
34
34
|
}, children: [_jsxs("a", { href: "#", onClick: toggleTheme, className: "bluelink", children: ["Switch to ", colorMode === 'dark' ? 'light' : 'dark', " mode"] }), ' ', "and see the video adjust!", ' '] }), _jsx(Icon, {})] }) }));
|
|
@@ -83,13 +83,13 @@ export const Demo = () => {
|
|
|
83
83
|
const onError = useCallback(() => {
|
|
84
84
|
setError(true);
|
|
85
85
|
}, []);
|
|
86
|
-
return (_jsxs("div", {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
86
|
+
return (_jsxs("div", { children: [_jsx("br", {}), _jsx("br", {}), _jsx(SectionTitle, { children: "Demo" }), _jsxs("div", { style: { height: 140, position: 'relative' }, children: [_jsx(DragAndDropNudge, {}), _jsx(ThemeNudge, {})] }), _jsxs("div", { style: playerWrapper, children: [_jsx(Player, { ref: ref, component: HomepageVideoComp, compositionWidth: 640, compositionHeight: 360, durationInFrames: 120, fps: 30, autoPlay: true, controls: isFullscreen, clickToPlay: false, style: style, initiallyMuted: true, inputProps: props, acknowledgeRemotionLicense: true, numberOfSharedAudioTags: 0, loop: true }), _jsx(PlayerControls, { playerRef: ref, durationInFrames: 120, fps: 30, children: _jsx(RenderButton, { onError: onError, renderData: data
|
|
87
|
+
? {
|
|
88
|
+
cardOrder,
|
|
89
|
+
emojiIndex,
|
|
90
|
+
location: data.location,
|
|
91
|
+
theme: colorMode,
|
|
92
|
+
trending: data.trending,
|
|
93
|
+
}
|
|
94
|
+
: null, playerRef: ref }) })] }), error ? _jsx(DemoError, {}) : null, _jsx(DownloadNudge, {})] }));
|
|
95
95
|
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { BlueButton, ClearButton } from './layout/Button';
|
|
3
|
+
import { MuxVideo } from './MuxVideo';
|
|
4
|
+
import { SectionTitle } from './VideoAppsTitle';
|
|
5
|
+
const EditorStarterSection = () => {
|
|
6
|
+
return (_jsxs("div", { children: [_jsx(SectionTitle, { children: "Build your own video editor" }), _jsx("br", {}), _jsx("div", { className: 'card flex p-0 overflow-hidden', children: _jsxs("div", { className: 'flex-1 flex flex-col lg:flex-row justify-center', children: [_jsx("div", { className: 'w-full max-w-[500px] aspect-square relative overflow-hidden bg-[#eee]', children: _jsx(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: true, autoPlay: true, playsInline: true, muted: true }) }), _jsxs("div", { className: 'p-6 flex-1 flex flex-col h-full', children: [_jsx("div", { className: "text-4xl font-bold fontbrand mt-0", children: "Editor Starter" }), _jsx("div", { className: "text-muted mt-4 text-base fontbrand", children: "A comprehensive template that includes everything you need to create custom video editing applications with React and TypeScript." }), _jsx("div", { className: "h-5" }), _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("a", { href: "https://www.remotion.pro/editor-starter?ref=remotion.dev", target: "_blank", className: "no-underline", children: _jsx(BlueButton, { size: "sm", loading: false, children: "Purchase" }) }), _jsx("a", { href: "https://editor-starter.remotion.dev?ref=remotion.dev", target: "_blank", className: "no-underline", children: _jsx(ClearButton, { size: "sm", loading: false, children: "Demo" }) }), ' ', _jsx("a", { href: "https://remotion.dev/editor-starter", className: "no-underline", children: _jsx(ClearButton, { size: "sm", loading: false, children: "Docs" }) })] }), _jsx("br", {})] })] }) })] }));
|
|
7
|
+
};
|
|
8
|
+
export default EditorStarterSection;
|
|
@@ -3,5 +3,5 @@ const GithubIcon = () => {
|
|
|
3
3
|
return (_jsx("svg", { viewBox: "0 0 496 512", style: { height: 24, marginRight: 8 }, children: _jsx("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" }) }));
|
|
4
4
|
};
|
|
5
5
|
export const GithubButton = () => {
|
|
6
|
-
return (_jsxs("div", { className: "flex flex-row items-center text-base", children: [_jsx(GithubIcon, {}), " ", _jsx("span", { children: "GitHub" }), ' ', _jsx("div", { className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center", children: '
|
|
6
|
+
return (_jsxs("div", { className: "flex flex-row items-center text-base", children: [_jsx(GithubIcon, {}), " ", _jsx("span", { children: "GitHub" }), ' ', _jsx("div", { className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center", children: '47k' })] }));
|
|
7
7
|
};
|
|
@@ -53,8 +53,7 @@ const icon = {
|
|
|
53
53
|
height: 16,
|
|
54
54
|
marginLeft: 10,
|
|
55
55
|
};
|
|
56
|
-
const
|
|
57
|
-
export const BuiltWithRemotionShowcase = () => {
|
|
56
|
+
const VideoAppsShowcase = () => {
|
|
58
57
|
const [activeTab, setActiveTab] = useState(0);
|
|
59
58
|
const [isMuted, setIsMuted] = useState(true);
|
|
60
59
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
@@ -105,7 +104,7 @@ export const BuiltWithRemotionShowcase = () => {
|
|
|
105
104
|
setIsMuted(newMutedState);
|
|
106
105
|
}
|
|
107
106
|
};
|
|
108
|
-
return (_jsxs("div", { ref: containerRef, children: [_jsx(SectionTitle, { children: "
|
|
107
|
+
return (_jsxs("div", { ref: containerRef, children: [_jsx(SectionTitle, { children: "Use Cases" }), _jsx("div", { className: 'grid justify-center grid-flow-col grid-rows-1 gap-2.5 justify-self-center mb-4 w-[90vw] md:w-auto -mt-4', children: tabs.map((tab, index) => (_jsx("button", { type: "button", "data-active": index === activeTab, className: `bg-transparent border-none m-0 p-0 lg:mx-3 my-4 cursor-pointer text-base fontbrand font-bold transition-colors text-muted data-[active=true]:text-brand`, onClick: () => handleTabChange(index), children: tab }, tab))) }), _jsx("div", { className: 'card flex p-0 overflow-hidden', "data-nosnippet": true, children: _jsxs("div", { className: 'flex-1 flex flex-col lg:flex-row justify-center', children: [_jsxs("div", { className: 'w-full max-w-[500px] aspect-square relative overflow-hidden bg-[#eee] cursor-pointer', onClick: handlePlayPause, children: [videoLoaded ? (_jsx(MuxVideo, { ref: videoRef, muxId: videoApps[activeTab].muxId, className: 'absolute left-0 top-0 w-full h-full object-contain rounded-sm rounded-tr-none rounded-br-none', loop: true, playsInline: true, muted: isMuted, autoPlay: true, onPlay: () => setIsPlaying(true) })) : (_jsx("img", { src: `https://image.mux.com/${videoApps[activeTab].muxId}/thumbnail.png?time=1`, className: 'absolute left-0 top-0 w-full h-full object-contain rounded-sm rounded-tr-none rounded-br-none', alt: videoApps[activeTab].title })), _jsx("button", { type: "button", className: 'absolute bottom-2.5 left-2.5 bg-white text-black rounded-full w-8 h-8 flex justify-center items-center text-base cursor-pointer transition-colors border-2 border-black border-solid', onClick: (e) => {
|
|
109
108
|
e.stopPropagation();
|
|
110
109
|
handlePlayPause();
|
|
111
110
|
}, children: isPlaying ? (_jsx(PlayingIcon, { style: {
|
|
@@ -129,11 +128,12 @@ export const BuiltWithRemotionShowcase = () => {
|
|
|
129
128
|
width: 16,
|
|
130
129
|
height: 16,
|
|
131
130
|
marginTop: '1px',
|
|
132
|
-
} })) })] }), _jsxs("div", { className: 'p-6
|
|
131
|
+
} })) })] }), _jsxs("div", { className: 'p-6 flex-1 flex flex-col h-full', children: [_jsx("div", { className: "text-4xl font-bold fontbrand mt-0", children: videoApps[activeTab].title }), _jsx("div", { className: "text-muted mt-4 text-base fontbrand", children: videoApps[activeTab].description }), videoApps[activeTab].additionalInfo ? (_jsx("div", { className: "text-muted mt-4 text-base fontbrand", children: videoApps[activeTab].additionalInfo })) : null, _jsx("div", { className: "h-5" }), _jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: videoApps[activeTab].link, children: [videoApps[activeTab].buttonText, _jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("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" }) })] })] })] }) }), _jsx("div", { style: {
|
|
133
132
|
marginTop: '1rem',
|
|
134
133
|
justifyContent: 'center',
|
|
135
134
|
display: 'flex',
|
|
136
135
|
}, children: _jsxs("div", { style: {
|
|
137
136
|
fontFamily: 'GTPlanar',
|
|
138
|
-
}, children: ["For more examples
|
|
137
|
+
}, children: ["For more examples see our", ' ', _jsx("a", { href: "/showcase", className: "bluelink", children: "Showcase page" }), "."] }) })] }));
|
|
139
138
|
};
|
|
139
|
+
export default VideoAppsShowcase;
|
|
@@ -55,5 +55,5 @@ const StarIcon = () => {
|
|
|
55
55
|
}, children: _jsx("path", { className: "fill-brand stroke-black dark:stroke-white", strokeWidth: 36, d: "M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.6 329l104.2-103.1c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" }) }));
|
|
56
56
|
};
|
|
57
57
|
export const TrustSection = () => {
|
|
58
|
-
return (_jsxs("div", { className: "mt-10", children: [_jsxs("div", { className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap", children: [_jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(SwissIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Swiss quality" }), _jsxs("div", { className: "font-brand", children: ["We are a company based in Zurich, Switzerland. We", "'", "re far away from the craziness that is Silicon Valley."] })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(ProfitableIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Sustainable business" }), _jsxs("div", { className: "font-brand", children: ["Remotion is profitable. Aside from our", ' ', _jsx("a", { href: "/
|
|
58
|
+
return (_jsxs("div", { className: "mt-10", children: [_jsxs("div", { className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap", children: [_jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(SwissIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Swiss quality" }), _jsxs("div", { className: "font-brand", children: ["We are a company based in Zurich, Switzerland. We", "'", "re far away from the craziness that is Silicon Valley."] })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(ProfitableIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Sustainable business" }), _jsxs("div", { className: "font-brand", children: ["Remotion is profitable. Aside from our", ' ', _jsx("a", { href: "/investors", className: "text-brand hover:underline underline-offset-4", children: "early investors" }), ", we don", "'", "t need outside investment to sustain the business."] })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(KeyIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Founder-owned" }), _jsx("div", { className: "font-brand", children: "Us founders own the company. And we just want one thing: Make programmatic video glorious." })] })] }), _jsx("div", { className: "h-4" }), _jsxs("div", { className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap", children: [_jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(ClockIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "5 years and counting" }), _jsx("div", { className: "font-brand", children: "Making Remotion since 2021. No plans to change our business model or sell the company." })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(ShieldIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Succession plan" }), _jsxs("div", { className: "font-brand", children: ["If something happens to us, the project will fall under", ' ', _jsx("a", { href: "https://github.com/wcandillon", target: "_blank", className: "text-brand hover:underline underline-offset-4", children: "William Candillon" }), "'s", " supervision."] })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(UsersIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "200+ customers" }), _jsx("div", { className: "font-brand", children: "More than 200 companies trust Remotion, from small businesses to FAANG." })] })] }), _jsx("div", { className: "h-4" }), _jsxs("div", { className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap", children: [_jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(CodeIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Source-available" }), _jsx("div", { className: "font-brand", children: "Our code is publicly available on GitHub. You can inspect, fork, and self-host it. Full transparency, no black boxes." })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(VideoIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "1M+ videos/month" }), _jsx("div", { className: "font-brand", children: "More than one million videos are rendered with Remotion every month. Battle-tested at scale." })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(StarIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "40,000+ GitHub stars" }), _jsx("div", { className: "font-brand", children: "One of the most popular media projects on GitHub. Trusted by the developer community." })] })] })] }));
|
|
59
59
|
};
|