@remotion/promo-pages 4.0.477 → 4.0.479
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 +898 -619
- package/dist/components/Homepage.js +3 -3
- package/dist/components/homepage/CommunityStatsItems.js +4 -4
- 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/GitHubButton.js +1 -1
- package/dist/components/homepage/VideoAppsShowcase.d.ts +1 -2
- package/dist/components/homepage/VideoAppsShowcase.js +5 -5
- package/dist/components/team/TrustSection.js +1 -1
- package/dist/design.js +476 -195
- package/dist/experts.js +234 -163
- package/dist/homepage/Pricing.js +476 -195
- package/dist/prompts/PromptsGallery.js +476 -195
- package/dist/prompts/PromptsShow.js +476 -195
- package/dist/prompts/PromptsSubmit.js +476 -195
- package/dist/team.js +481 -200
- package/dist/template-modal-content.js +476 -195
- package/dist/templates.js +476 -195
- package/package.json +17 -17
- package/dist/components/homepage/EditorStarterSection.d.ts +0 -3
- package/dist/components/homepage/EditorStarterSection.js +0 -8
|
@@ -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';
|
|
3
4
|
import { BackgroundAnimation } from './homepage/BackgroundAnimation';
|
|
4
5
|
import CommunityStats from './homepage/CommunityStats';
|
|
5
6
|
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 { BuiltWithRemotionShowcase } 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("div", { className: "pt-6 md:pt-8", children: _jsx(AutomationsSection, {}) }), _jsx("br", {}), _jsx("br", {}), _jsx(Demo, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(BuiltWithRemotionShowcase, {}), _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("br", {}), _jsx(NewsletterButton, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {})] })] }) }) }));
|
|
20
20
|
};
|
|
@@ -23,14 +23,14 @@ export const InstallsPerMonth = () => {
|
|
|
23
23
|
display: 'flex',
|
|
24
24
|
alignItems: 'center',
|
|
25
25
|
justifyContent: 'center',
|
|
26
|
-
}, children: [_jsx(StatItemContent, { content: "3M", width: "100px", fontSize: "2.5rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.6367 2.47534C12.5488 2.44116 12.4512 2.44116 12.3584 2.47534L3.10547 5.98608L12.5 9.67749L21.8945 5.98608L12.6367 2.47534ZM2.34375 18.4519C2.34375 18.613 2.44629 18.7595 2.59766 18.8181L11.3281 22.1287V11.738L2.34375 8.20776V18.4519ZM13.6719 22.1287L22.4023 18.8181C22.5537 18.7595 22.6562 18.613 22.6562 18.4519V8.20776L13.6719 11.738V22.1287ZM11.5283 0.287842C12.1533 0.048584 12.8418 0.048584 13.4668 0.287842L23.2324 3.9939C24.2969 4.39429 25 5.40991 25 6.54761V18.4519C25 19.5896 24.2969 20.6052 23.2373 21.0105L13.4717 24.7166C12.8467 24.9558 12.1582 24.9558 11.5332 24.7166L1.76758 21.0105C0.703125 20.6052 0 19.5896 0 18.4519V6.54761C0 5.40991 0.703125 4.39429 1.7627 3.98901L11.5283 0.282959V0.287842Z", fill: "var(--text-color)" }) }), width: "50px" })] }), _jsx(StatItemContent, { content: "installs", width: "75%", fontSize: "1.0rem", fontWeight: "bold" })] }));
|
|
26
|
+
}, children: [_jsx(StatItemContent, { content: "3M+", width: "100px", fontSize: "2.5rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.6367 2.47534C12.5488 2.44116 12.4512 2.44116 12.3584 2.47534L3.10547 5.98608L12.5 9.67749L21.8945 5.98608L12.6367 2.47534ZM2.34375 18.4519C2.34375 18.613 2.44629 18.7595 2.59766 18.8181L11.3281 22.1287V11.738L2.34375 8.20776V18.4519ZM13.6719 22.1287L22.4023 18.8181C22.5537 18.7595 22.6562 18.613 22.6562 18.4519V8.20776L13.6719 11.738V22.1287ZM11.5283 0.287842C12.1533 0.048584 12.8418 0.048584 13.4668 0.287842L23.2324 3.9939C24.2969 4.39429 25 5.40991 25 6.54761V18.4519C25 19.5896 24.2969 20.6052 23.2373 21.0105L13.4717 24.7166C12.8467 24.9558 12.1582 24.9558 11.5332 24.7166L1.76758 21.0105C0.703125 20.6052 0 19.5896 0 18.4519V6.54761C0 5.40991 0.703125 4.39429 1.7627 3.98901L11.5283 0.282959V0.287842Z", fill: "var(--text-color)" }) }), width: "50px" })] }), _jsx(StatItemContent, { content: "installs", width: "75%", fontSize: "1.0rem", fontWeight: "bold" })] }));
|
|
27
27
|
};
|
|
28
28
|
export const PagesOfDocs = () => {
|
|
29
|
-
return (_jsxs(Pill, { className: "flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "28", height: "40", viewBox: "0 0 18 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 3.60938C0 1.61602 1.58304 0 3.53571 0H17.0357H18V0.984375V15.4219V16.4062H17.0357H16.7143V19.0312H17.0357H18V21H17.0357H3.21429C1.43839 21 0 19.5316 0 17.7188C0 17.608 0.00401786 17.4973 0.0160714 17.3906H0V3.60938ZM3.21429 16.4062C2.50312 16.4062 1.92857 16.9928 1.92857 17.7188C1.92857 18.4447 2.50312 19.0312 3.21429 19.0312H14.7857V16.4062H3.21429ZM1.92857 14.7123C2.32232 14.5359 2.75625 14.4375 3.21429 14.4375H16.0714V1.96875H3.53571C2.64777 1.96875 1.92857 2.70293 1.92857 3.60938V14.7123ZM6.10714 4.59375H13.1786H14.1429V6.5625H13.1786H6.10714H5.14286V4.59375H6.10714ZM6.10714 7.875H13.1786H14.1429V9.84375H13.1786H6.10714H5.14286V7.875H6.10714Z", fill: "var(--text-color)" }) }), width: "40px" }), _jsx(StatItemContent, { content: "
|
|
29
|
+
return (_jsxs(Pill, { className: "flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "28", height: "40", viewBox: "0 0 18 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 3.60938C0 1.61602 1.58304 0 3.53571 0H17.0357H18V0.984375V15.4219V16.4062H17.0357H16.7143V19.0312H17.0357H18V21H17.0357H3.21429C1.43839 21 0 19.5316 0 17.7188C0 17.608 0.00401786 17.4973 0.0160714 17.3906H0V3.60938ZM3.21429 16.4062C2.50312 16.4062 1.92857 16.9928 1.92857 17.7188C1.92857 18.4447 2.50312 19.0312 3.21429 19.0312H14.7857V16.4062H3.21429ZM1.92857 14.7123C2.32232 14.5359 2.75625 14.4375 3.21429 14.4375H16.0714V1.96875H3.53571C2.64777 1.96875 1.92857 2.70293 1.92857 3.60938V14.7123ZM6.10714 4.59375H13.1786H14.1429V6.5625H13.1786H6.10714H5.14286V4.59375H6.10714ZM6.10714 7.875H13.1786H14.1429V9.84375H13.1786H6.10714H5.14286V7.875H6.10714Z", fill: "var(--text-color)" }) }), width: "40px" }), _jsx(StatItemContent, { content: "900", width: "85px", maxWidth: "100px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "pages of docs", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));
|
|
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: "50K", 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: {
|
|
@@ -43,7 +43,7 @@ export const DiscordMembers = () => {
|
|
|
43
43
|
flexDirection: 'column',
|
|
44
44
|
alignItems: 'center',
|
|
45
45
|
justifyContent: 'center',
|
|
46
|
-
}, children: [_jsx(StatItemContent, { content: "
|
|
46
|
+
}, children: [_jsx(StatItemContent, { content: "10K+", width: "142px", fontSize: "2.5rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: "Discord members", width: "142px", fontSize: "1rem", fontWeight: "bold" })] }), _jsx("div", { style: {
|
|
47
47
|
display: 'flex',
|
|
48
48
|
justifyContent: 'center',
|
|
49
49
|
}, children: _jsx(StatItemContent, { content: _jsx("svg", { width: "61", height: "47", viewBox: "0 0 46 35", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M38.9978 2.95533C38.9843 2.93009 38.962 2.91064 38.9352 2.90065C35.955 1.53492 32.8101 0.560692 29.5791 0.00230404C29.55 -0.00300893 29.5201 0.00092017 29.4934 0.0135365C29.4667 0.0261528 29.4447 0.0468187 29.4304 0.0726144C29.0019 0.84938 28.6129 1.64724 28.2648 2.46316C24.7802 1.93495 21.2356 1.93495 17.7509 2.46316C17.4015 1.64523 17.0072 0.847165 16.5697 0.0726144C16.5546 0.0475873 16.5324 0.0275657 16.506 0.0150584C16.4795 0.00255114 16.45 -0.00188563 16.421 0.00230404C13.1844 0.558177 10.034 1.53248 7.04927 2.90065C7.0231 2.91173 7.00116 2.93089 6.98669 2.95533C1.02568 11.8535 -0.609293 20.5251 0.188637 29.0951C0.190896 29.1167 0.197628 29.1376 0.208402 29.1564C0.219177 29.1752 0.233759 29.1916 0.25122 29.2045C3.7235 31.7693 7.60667 33.7268 11.7352 34.9934C11.7648 35.0025 11.7966 35.0022 11.8261 34.9924C11.8556 34.9826 11.8812 34.9638 11.8994 34.9387C12.7852 33.7344 13.5702 32.4593 14.2463 31.1263C14.2553 31.108 14.2604 31.088 14.2613 31.0676C14.2622 31.0471 14.2589 31.0268 14.2516 31.0077C14.2442 30.9886 14.233 30.9713 14.2186 30.9567C14.2043 30.9422 14.1871 30.9308 14.1681 30.9232C12.9278 30.4486 11.7271 29.8765 10.5774 29.2123C10.5571 29.1999 10.54 29.1828 10.5277 29.1624C10.5154 29.142 10.5082 29.119 10.5067 29.0953C10.5051 29.0715 10.5093 29.0478 10.5189 29.026C10.5285 29.0042 10.5432 28.985 10.5617 28.9701C10.8042 28.7904 11.0468 28.6029 11.2736 28.4155C11.2936 28.3979 11.3182 28.3864 11.3445 28.3822C11.3708 28.3781 11.3978 28.3815 11.4222 28.392C18.9478 31.8216 27.0992 31.8216 34.5388 28.392C34.5625 28.3804 34.589 28.3757 34.6153 28.3785C34.6416 28.3813 34.6666 28.3914 34.6874 28.4076C34.9143 28.5951 35.1568 28.7904 35.3993 28.9701C35.4178 28.985 35.4325 29.0042 35.4421 29.026C35.4517 29.0478 35.4559 29.0715 35.4543 29.0953C35.4528 29.119 35.4456 29.142 35.4333 29.1624C35.421 29.1828 35.4039 29.1999 35.3836 29.2123C34.2369 29.8799 33.0357 30.4496 31.7929 30.9154C31.7739 30.923 31.7567 30.9344 31.7424 30.9489C31.728 30.9635 31.7168 30.9808 31.7095 30.9999C31.7021 31.019 31.6988 31.0393 31.6997 31.0597C31.7006 31.0801 31.7057 31.1001 31.7147 31.1185C32.4026 32.4449 33.187 33.7191 34.0616 34.9309C34.0798 34.956 34.1054 34.9748 34.1349 34.9846C34.1644 34.9944 34.1962 34.9947 34.2258 34.9856C38.3663 33.7246 42.2606 31.7669 45.7411 29.1967C45.7589 29.1841 45.7737 29.1679 45.7846 29.149C45.7954 29.1301 45.8019 29.109 45.8037 29.0873C46.758 19.1892 44.1922 10.5879 38.9978 2.95533ZM15.3728 23.8765C13.1042 23.8765 11.2423 21.7985 11.2423 19.2517C11.2423 16.7049 13.0729 14.619 15.3728 14.619C17.6962 14.619 19.5424 16.7127 19.5032 19.2439C19.5032 21.7985 17.6727 23.8765 15.3728 23.8765ZM30.6586 23.8765C28.39 23.8765 26.5282 21.7985 26.5282 19.2517C26.5282 16.7049 28.3509 14.619 30.6586 14.619C32.982 14.619 34.8282 16.7127 34.7891 19.2439C34.7891 21.7985 32.9742 23.8765 30.6586 23.8765Z", fill: "var(--text-color)" }) }), width: "45px" }) })] }) }));
|
|
@@ -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://utils.remotion.dev/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: 24,
|
|
18
|
+
paddingTop: 18,
|
|
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: 18,
|
|
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,12 +2,13 @@ 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 = 37;
|
|
6
6
|
const scale = 0.4;
|
|
7
7
|
export const Icon = () => {
|
|
8
8
|
return (_jsx("svg", { style: {
|
|
9
9
|
width: origWidth * scale,
|
|
10
|
-
|
|
10
|
+
overflow: 'visible',
|
|
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" }) }));
|
|
11
12
|
};
|
|
12
13
|
export const ThemeNudge = () => {
|
|
13
14
|
const { colorMode, setColorMode } = useColorMode();
|
|
@@ -19,16 +20,15 @@ export const ThemeNudge = () => {
|
|
|
19
20
|
flexDirection: 'row',
|
|
20
21
|
display: 'flex',
|
|
21
22
|
justifyContent: 'flex-start',
|
|
22
|
-
paddingBottom:
|
|
23
|
+
paddingBottom: 0,
|
|
23
24
|
textAlign: 'right',
|
|
24
25
|
position: 'absolute',
|
|
25
|
-
|
|
26
|
-
}, children: _jsxs("div", { children: [_jsxs("div", { style: {
|
|
26
|
+
}, className: "lg:top-3 lg:-right-6 right-0 top-0", 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: 20,
|
|
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", { children: [_jsx("br", {}), _jsx("br", {}), _jsx(SectionTitle, { children: "
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
86
|
+
return (_jsxs("div", { id: "demo", children: [_jsx("br", {}), _jsx("br", {}), _jsx(SectionTitle, { children: "Interactive demo" }), _jsxs("div", { className: "max-w-[760px] mx-auto", children: [_jsxs("div", { className: "h-[105px] 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
|
};
|
|
@@ -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: '50k' })] }));
|
|
7
7
|
};
|
|
@@ -53,7 +53,8 @@ const icon = {
|
|
|
53
53
|
height: 16,
|
|
54
54
|
marginLeft: 10,
|
|
55
55
|
};
|
|
56
|
-
const
|
|
56
|
+
const Arrow = () => (_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" }) }));
|
|
57
|
+
export const BuiltWithRemotionShowcase = () => {
|
|
57
58
|
const [activeTab, setActiveTab] = useState(0);
|
|
58
59
|
const [isMuted, setIsMuted] = useState(true);
|
|
59
60
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
@@ -104,7 +105,7 @@ const VideoAppsShowcase = () => {
|
|
|
104
105
|
setIsMuted(newMutedState);
|
|
105
106
|
}
|
|
106
107
|
};
|
|
107
|
-
return (_jsxs("div", { ref: containerRef, children: [_jsx(SectionTitle, { children: "
|
|
108
|
+
return (_jsxs("div", { ref: containerRef, children: [_jsx(SectionTitle, { children: "Built with Remotion" }), _jsx("div", { className: "flex flex-wrap justify-center gap-x-8 gap-y-3 mb-6 mt-1", children: tabs.map((tab, index) => (_jsx("button", { type: "button", "data-active": index === activeTab, className: `bg-transparent border-none m-0 p-0 cursor-pointer text-sm 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 grid grid-cols-1 lg:grid-cols-2', children: [_jsxs("div", { className: 'w-full aspect-video lg: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) => {
|
|
108
109
|
e.stopPropagation();
|
|
109
110
|
handlePlayPause();
|
|
110
111
|
}, children: isPlaying ? (_jsx(PlayingIcon, { style: {
|
|
@@ -128,12 +129,11 @@ const VideoAppsShowcase = () => {
|
|
|
128
129
|
width: 16,
|
|
129
130
|
height: 16,
|
|
130
131
|
marginTop: '1px',
|
|
131
|
-
} })) })] }), _jsxs("div", { className: 'p-6
|
|
132
|
+
} })) })] }), _jsxs("div", { className: 'p-6 lg:p-10 flex min-w-0 flex-col justify-center', children: [_jsx("div", { className: "text-3xl font-bold fontbrand mt-0", children: videoApps[activeTab].title }), _jsx("div", { className: "text-muted mt-3 text-base fontbrand leading-relaxed", 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(Arrow, {})] })] })] }) }), _jsx("div", { style: {
|
|
132
133
|
marginTop: '1rem',
|
|
133
134
|
justifyContent: 'center',
|
|
134
135
|
display: 'flex',
|
|
135
136
|
}, children: _jsxs("div", { style: {
|
|
136
137
|
fontFamily: 'GTPlanar',
|
|
137
|
-
}, children: ["For more examples see our", ' ', _jsx("a", { href: "/showcase", className: "bluelink", children: "Showcase page" }), "."] }) })] }));
|
|
138
|
+
}, children: ["For more examples of products and workflows, see our", ' ', _jsx("a", { href: "/showcase", className: "bluelink", children: "Showcase page" }), "."] }) })] }));
|
|
138
139
|
};
|
|
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: "/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: "
|
|
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: "/docs/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: "We, the 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: "300+ customers" }), _jsx("div", { className: "font-brand", children: "More than 300 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: "2M+ 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: "50,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
|
};
|