@remotion/promo-pages 4.0.259

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.
Files changed (134) hide show
  1. package/.turbo/turbo-make.log +8 -0
  2. package/LICENSE.md +49 -0
  3. package/README.md +5 -0
  4. package/bundle.ts +38 -0
  5. package/dist/Homepage.css +88 -0
  6. package/dist/Homepage.js +20805 -0
  7. package/dist/homepage/Pricing.js +1963 -0
  8. package/dist/tailwind.css +1364 -0
  9. package/eslint.config.mjs +7 -0
  10. package/index.html +13 -0
  11. package/package.json +50 -0
  12. package/public/fire.mp3 +0 -0
  13. package/public/img/cluster.png +0 -0
  14. package/public/img/code-sample-new.png +0 -0
  15. package/public/img/freelancers/alex.jpeg +0 -0
  16. package/public/img/freelancers/antoine.jpeg +0 -0
  17. package/public/img/freelancers/ayush.png +0 -0
  18. package/public/img/freelancers/benjamin.jpeg +0 -0
  19. package/public/img/freelancers/default.png +0 -0
  20. package/public/img/freelancers/florent.jpeg +0 -0
  21. package/public/img/freelancers/karel.jpeg +0 -0
  22. package/public/img/freelancers/lorenzo.jpeg +0 -0
  23. package/public/img/freelancers/mickael.jpeg +0 -0
  24. package/public/img/freelancers/mohit.jpeg +0 -0
  25. package/public/img/freelancers/pramod.jpg +0 -0
  26. package/public/img/freelancers/pranav.jpg +0 -0
  27. package/public/img/freelancers/rahul.png +0 -0
  28. package/public/img/freelancers/ray.jpeg +0 -0
  29. package/public/img/freelancers/stephen.png +0 -0
  30. package/public/img/freelancers/umungo.png +0 -0
  31. package/public/img/freelancers/yehor.jpeg +0 -0
  32. package/public/img/gt-planar-black.woff2 +0 -0
  33. package/public/img/gt-planar-bold.woff2 +0 -0
  34. package/public/img/gt-planar-medium.woff2 +0 -0
  35. package/public/img/gt-planar-regular.woff2 +0 -0
  36. package/public/img/logo-small.png +0 -0
  37. package/public/img/mp4.png +0 -0
  38. package/public/img/player-demo.mp4 +0 -0
  39. package/public/img/player-example-dark.png +0 -0
  40. package/public/img/player-example.png +0 -0
  41. package/public/img/writeinreact.png +0 -0
  42. package/public/partyhorn.mp3 +0 -0
  43. package/public/sad.mp3 +0 -0
  44. package/src/cn.ts +6 -0
  45. package/src/components/Homepage.tsx +88 -0
  46. package/src/components/homepage/BackgroundAnimation.tsx +108 -0
  47. package/src/components/homepage/ChooseTemplate.tsx +57 -0
  48. package/src/components/homepage/CodeExample.tsx +89 -0
  49. package/src/components/homepage/CommunityStats.tsx +54 -0
  50. package/src/components/homepage/CommunityStatsItems.tsx +304 -0
  51. package/src/components/homepage/Counter.tsx +110 -0
  52. package/src/components/homepage/Demo/Card.tsx +273 -0
  53. package/src/components/homepage/Demo/Cards.tsx +129 -0
  54. package/src/components/homepage/Demo/Comp.tsx +157 -0
  55. package/src/components/homepage/Demo/CurrentCountry.tsx +97 -0
  56. package/src/components/homepage/Demo/DemoError.tsx +18 -0
  57. package/src/components/homepage/Demo/DemoErrorIcon.tsx +32 -0
  58. package/src/components/homepage/Demo/DemoRender.tsx +166 -0
  59. package/src/components/homepage/Demo/DigitWheel.tsx +179 -0
  60. package/src/components/homepage/Demo/DisplayedEmoji.tsx +81 -0
  61. package/src/components/homepage/Demo/DoneCheckmark.tsx +39 -0
  62. package/src/components/homepage/Demo/DownloadNudge.tsx +62 -0
  63. package/src/components/homepage/Demo/DragAndDropNudge.tsx +57 -0
  64. package/src/components/homepage/Demo/EmojiCard.tsx +198 -0
  65. package/src/components/homepage/Demo/Minus.tsx +21 -0
  66. package/src/components/homepage/Demo/PlayPauseButton.tsx +66 -0
  67. package/src/components/homepage/Demo/PlayerControls.tsx +48 -0
  68. package/src/components/homepage/Demo/PlayerSeekBar.tsx +325 -0
  69. package/src/components/homepage/Demo/PlayerVolume.tsx +83 -0
  70. package/src/components/homepage/Demo/Progress.tsx +38 -0
  71. package/src/components/homepage/Demo/Spinner.tsx +60 -0
  72. package/src/components/homepage/Demo/Switcher.tsx +54 -0
  73. package/src/components/homepage/Demo/Temperature.tsx +44 -0
  74. package/src/components/homepage/Demo/TemperatureNumber.tsx +68 -0
  75. package/src/components/homepage/Demo/ThemeNudge.tsx +72 -0
  76. package/src/components/homepage/Demo/TimeDisplay.tsx +43 -0
  77. package/src/components/homepage/Demo/TrendingRepos.tsx +106 -0
  78. package/src/components/homepage/Demo/icons.tsx +114 -0
  79. package/src/components/homepage/Demo/index.tsx +158 -0
  80. package/src/components/homepage/Demo/math.ts +43 -0
  81. package/src/components/homepage/Demo/types.ts +6 -0
  82. package/src/components/homepage/Editor.tsx +67 -0
  83. package/src/components/homepage/EvaluateRemotion.tsx +92 -0
  84. package/src/components/homepage/FreePricing.tsx +295 -0
  85. package/src/components/homepage/GetStartedStrip.tsx +77 -0
  86. package/src/components/homepage/GitHubButton.tsx +23 -0
  87. package/src/components/homepage/IconForTemplate.tsx +154 -0
  88. package/src/components/homepage/IfYouKnowReact.tsx +29 -0
  89. package/src/components/homepage/InfoTooltip.tsx +25 -0
  90. package/src/components/homepage/MoreTemplatesButton.tsx +29 -0
  91. package/src/components/homepage/MuxVideo.tsx +68 -0
  92. package/src/components/homepage/NewsletterButton.tsx +88 -0
  93. package/src/components/homepage/Pricing.tsx +49 -0
  94. package/src/components/homepage/PricingBulletPoint.tsx +50 -0
  95. package/src/components/homepage/RealMp4Videos.tsx +50 -0
  96. package/src/components/homepage/Spacer.tsx +5 -0
  97. package/src/components/homepage/TemplateIcon.tsx +36 -0
  98. package/src/components/homepage/TextInput.tsx +62 -0
  99. package/src/components/homepage/TrustedByBanner.tsx +194 -0
  100. package/src/components/homepage/VideoApps.tsx +231 -0
  101. package/src/components/homepage/VideoAppsShowcase.tsx +276 -0
  102. package/src/components/homepage/VideoAppsTitle.tsx +24 -0
  103. package/src/components/homepage/VideoPlayerWithControls.tsx +188 -0
  104. package/src/components/homepage/WriteInReact.tsx +34 -0
  105. package/src/components/homepage/YouAreHere.tsx +30 -0
  106. package/src/components/homepage/custom.css +57 -0
  107. package/src/components/homepage/layout/Button.tsx +93 -0
  108. package/src/components/homepage/layout/colors.ts +17 -0
  109. package/src/components/homepage/layout/use-color-mode.tsx +44 -0
  110. package/src/components/homepage/layout/use-el-size.ts +51 -0
  111. package/src/components/homepage/layout/use-mobile-layout.ts +8 -0
  112. package/src/components/homepage/video-player.css +24 -0
  113. package/src/components/icons/blank.tsx +13 -0
  114. package/src/components/icons/clone.tsx +10 -0
  115. package/src/components/icons/code-hike.tsx +15 -0
  116. package/src/components/icons/cubes.tsx +13 -0
  117. package/src/components/icons/js.tsx +17 -0
  118. package/src/components/icons/next.tsx +64 -0
  119. package/src/components/icons/overlay.tsx +24 -0
  120. package/src/components/icons/remix.tsx +24 -0
  121. package/src/components/icons/skia.tsx +13 -0
  122. package/src/components/icons/stargazer.tsx +13 -0
  123. package/src/components/icons/still.tsx +13 -0
  124. package/src/components/icons/tailwind.tsx +22 -0
  125. package/src/components/icons/tiktok.tsx +13 -0
  126. package/src/components/icons/ts.tsx +18 -0
  127. package/src/components/icons/tts.tsx +13 -0
  128. package/src/components/icons/undo.tsx +11 -0
  129. package/src/components/icons/waveform.tsx +13 -0
  130. package/src/fonts.css +30 -0
  131. package/src/index.css +74 -0
  132. package/src/main.tsx +12 -0
  133. package/tsconfig.json +15 -0
  134. package/vite.config.ts +9 -0
package/eslint.config.mjs ADDED
@@ -0,0 +1,7 @@
1
+ import {remotionFlatConfig} from '@remotion/eslint-config-internal';
2
+
3
+ const config = remotionFlatConfig({react: true});
4
+
5
+ export default {
6
+ ...config,
7
+ };
package/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Vite + React + TS</title>
8
+ </head>
9
+ <body>
10
+ <div id="root"></div>
11
+ <script type="module" src="/src/main.tsx"></script>
12
+ </body>
13
+ </html>
package/package.json ADDED
@@ -0,0 +1,50 @@
1
+ {
2
+ "name": "@remotion/promo-pages",
3
+ "version": "4.0.259",
4
+ "publishConfig": {
5
+ "access": "public"
6
+ },
7
+ "type": "module",
8
+ "dependencies": {
9
+ "hls.js": "1.5.19",
10
+ "polished": "4.3.1",
11
+ "react": "19.0.0",
12
+ "react-dom": "19.0.0",
13
+ "vite": "^5.4.12",
14
+ "zod": "3.22.3",
15
+ "@remotion/animated-emoji": "4.0.259",
16
+ "@remotion/lottie": "4.0.259",
17
+ "@remotion/shapes": "4.0.259",
18
+ "@remotion/player": "4.0.259",
19
+ "@remotion/lambda": "4.0.259",
20
+ "@remotion/eslint-config-internal": "4.0.259",
21
+ "create-video": "4.0.259",
22
+ "remotion": "4.0.259",
23
+ "@remotion/paths": "4.0.259"
24
+ },
25
+ "devDependencies": {
26
+ "@eslint/eslintrc": "3.1.0",
27
+ "@types/react": "19.0.0",
28
+ "@types/react-dom": "19.0.0",
29
+ "eslint": "9.14.0",
30
+ "eslint-config-next": "15.0.4",
31
+ "plyr": "^3.7.3",
32
+ "postcss": "8.4.47",
33
+ "tailwindcss": "4.0.0",
34
+ "@tailwindcss/cli": "4.0.0",
35
+ "@tailwindcss/vite": "4.0.0",
36
+ "tailwindcss-scoped-preflight": "3.4.10",
37
+ "@vitejs/plugin-react-swc": "^3.5.0",
38
+ "tailwind-merge": "2.5.2",
39
+ "bun-plugin-tailwind": "0.0.13",
40
+ "clsx": "2.1.1"
41
+ },
42
+ "repository": {
43
+ "url": "https://github.com/remotion-dev/remotion/tree/main/packages/promo-pages"
44
+ },
45
+ "scripts": {
46
+ "make": "bun --env-file=../.env.bundle bundle.ts",
47
+ "lint": "tsc && eslint src",
48
+ "dev": "vite"
49
+ }
50
+ }
package/public/fire.mp3 ADDED
Binary file
package/public/img/cluster.png ADDED
Binary file
package/public/img/code-sample-new.png ADDED
Binary file
package/public/img/freelancers/alex.jpeg ADDED
Binary file
package/public/img/freelancers/ayush.png ADDED
Binary file
package/public/img/freelancers/rahul.png ADDED
Binary file
package/public/img/freelancers/ray.jpeg ADDED
Binary file
package/public/img/gt-planar-black.woff2 ADDED
Binary file
package/public/img/gt-planar-bold.woff2 ADDED
Binary file
package/public/img/logo-small.png ADDED
Binary file
package/public/img/mp4.png ADDED
Binary file
package/public/img/player-demo.mp4 ADDED
Binary file
package/public/img/player-example.png ADDED
Binary file
package/public/img/writeinreact.png ADDED
Binary file
package/public/partyhorn.mp3 ADDED
Binary file
package/public/sad.mp3 ADDED
Binary file
package/src/cn.ts ADDED
@@ -0,0 +1,6 @@
1
+ import {clsx, type ClassValue} from 'clsx';
2
+ import {twMerge} from 'tailwind-merge';
3
+
4
+ export function cn(...inputs: ClassValue[]) {
5
+ return twMerge(clsx(inputs));
6
+ }
package/src/components/Homepage.tsx ADDED
@@ -0,0 +1,88 @@
1
+ 'use client';
2
+
3
+ import React from 'react';
4
+ import {BackgroundAnimation} from './homepage/BackgroundAnimation';
5
+ import CommunityStats from './homepage/CommunityStats';
6
+ import './homepage/custom.css';
7
+ import {Demo} from './homepage/Demo';
8
+ import {LightningFastEditor} from './homepage/Editor';
9
+ import EvaluateRemotionSection from './homepage/EvaluateRemotion';
10
+ import {IfYouKnowReact} from './homepage/IfYouKnowReact';
11
+ import type {ColorMode} from './homepage/layout/use-color-mode';
12
+ import {ColorModeProvider} from './homepage/layout/use-color-mode';
13
+ import {NewsletterButton} from './homepage/NewsletterButton';
14
+ import {Pricing} from './homepage/Pricing';
15
+ import {RealMP4Videos} from './homepage/RealMp4Videos';
16
+ import TrustedByBanner from './homepage/TrustedByBanner';
17
+ import {VideoApps} from './homepage/VideoApps';
18
+ import VideoAppsShowcase from './homepage/VideoAppsShowcase';
19
+ import {SectionTitle, VideoAppsTitle} from './homepage/VideoAppsTitle';
20
+ import {WriteInReact} from './homepage/WriteInReact';
21
+
22
+ export const NewLanding: React.FC<{
23
+ readonly colorMode: ColorMode;
24
+ readonly setColorMode: (colorMode: ColorMode) => void;
25
+ }> = ({colorMode, setColorMode}) => {
26
+ return (
27
+ <ColorModeProvider colorMode={colorMode} setColorMode={setColorMode}>
28
+ <div className="bg-[var(--background)] relative">
29
+ <div>
30
+ <div>
31
+ <BackgroundAnimation />
32
+ </div>
33
+ <br />
34
+ <br />
35
+ <br />
36
+ <br />
37
+ <div className="max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 relative">
38
+ <WriteInReact />
39
+ <br />
40
+ <IfYouKnowReact />
41
+ <br />
42
+ <br />
43
+ <br />
44
+ <br />
45
+ <br />
46
+ <br />
47
+ <RealMP4Videos />
48
+ <br />
49
+ <br />
50
+ <br />
51
+ <br />
52
+ <LightningFastEditor />
53
+ <br />
54
+ <br />
55
+ <br />
56
+ <VideoAppsTitle />
57
+ <VideoApps active="remotion" />
58
+ <br />
59
+ <br />
60
+ <VideoAppsShowcase />
61
+ <br />
62
+ <br />
63
+ <Demo />
64
+ <br />
65
+ <br />
66
+ <br />
67
+ <SectionTitle>Pricing</SectionTitle>
68
+ <Pricing />
69
+ <TrustedByBanner />
70
+ <br />
71
+ <EvaluateRemotionSection />
72
+ <br />
73
+ <br />
74
+ <br />
75
+ <CommunityStats />
76
+ <br />
77
+ <br />
78
+ <br />
79
+ <NewsletterButton />
80
+ <br />
81
+ <br />
82
+ <br />
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </ColorModeProvider>
87
+ );
88
+ };
package/src/components/homepage/BackgroundAnimation.tsx ADDED
@@ -0,0 +1,108 @@
1
+ 'use client';
2
+
3
+ import {getLength} from '@remotion/paths';
4
+ import React, {useEffect} from 'react';
5
+
6
+ const rx = 0.2;
7
+ const ry = 0.45;
8
+
9
+ function ellipseToPath(cx: number, cy: number): string {
10
+ let output = 'M' + (cx - rx).toString() + ',' + cy.toString();
11
+ output +=
12
+ 'a' +
13
+ rx.toString() +
14
+ ',' +
15
+ ry.toString() +
16
+ ' 0 1,0 ' +
17
+ (2 * rx).toString() +
18
+ ',0';
19
+ output +=
20
+ 'a' +
21
+ rx.toString() +
22
+ ',' +
23
+ ry.toString() +
24
+ ' 0 1,0 ' +
25
+ (-2 * rx).toString() +
26
+ ',0';
27
+ return output;
28
+ }
29
+
30
+ const strokeWidth = 0.035;
31
+
32
+ export const BackgroundAnimation: React.FC = () => {
33
+ const d = ellipseToPath(0.5, 0.5);
34
+ const length = getLength(d);
35
+
36
+ const css = `
37
+ @keyframes bganimation {
38
+ from {
39
+ stroke-dashoffset: 0
40
+ }
41
+
42
+ to {
43
+ stroke-dashoffset: ${length};
44
+ }
45
+ }
46
+ `;
47
+
48
+ useEffect(() => {
49
+ const _style = document.createElement('style');
50
+ _style.innerHTML = css;
51
+ document.head.appendChild(_style);
52
+ }, [css]);
53
+
54
+ return (
55
+ <div className=" w-full h-full left-[50%] ml-[-50%] min-w-0 lg:m-auto lg:relative lg:min-w-[700px] lg:max-w-[1200px] lg:ml-auto lg:left-auto pointer-events-none">
56
+ <svg
57
+ className="translate-y-[-30%] lg:translate-y-[-50%]"
58
+ viewBox="0 0 1 1"
59
+ style={{
60
+ width: '100%',
61
+ position: 'absolute',
62
+ }}
63
+ >
64
+ <path
65
+ d={d}
66
+ fill="none"
67
+ stroke="var(--ifm-color-primary)"
68
+ strokeLinecap="round"
69
+ className="stroke-[0.04] lg:stroke-[0.035]"
70
+ style={{
71
+ transformOrigin: 'center center',
72
+ transform: `rotate(120deg)`,
73
+ animation: `bganimation 20s linear infinite`,
74
+ strokeDasharray: `${length * 0.2} ${length * 0.8}`,
75
+ }}
76
+ />
77
+ <path
78
+ d={d}
79
+ fill="none"
80
+ stroke="var(--ifm-color-primary)"
81
+ strokeLinecap="round"
82
+ strokeWidth={strokeWidth}
83
+ className="stroke-[0.04] lg:stroke-[0.035]"
84
+ style={{
85
+ transformOrigin: 'center center',
86
+ transform: `rotate(0deg)`,
87
+ animation: `bganimation 20s linear infinite`,
88
+ strokeDasharray: `${length * 0.2} ${length * 0.8}`,
89
+ }}
90
+ />
91
+ <path
92
+ d={d}
93
+ fill="none"
94
+ stroke="var(--ifm-color-primary)"
95
+ strokeLinecap="round"
96
+ strokeWidth={strokeWidth}
97
+ className="stroke-[0.04] lg:stroke-[0.035]"
98
+ style={{
99
+ transformOrigin: 'center center',
100
+ transform: `rotate(240deg)`,
101
+ animation: `bganimation 20s linear infinite`,
102
+ strokeDasharray: `${length * 0.2} ${length * 0.8}`,
103
+ }}
104
+ />
105
+ </svg>
106
+ </div>
107
+ );
108
+ };
package/src/components/homepage/ChooseTemplate.tsx ADDED
@@ -0,0 +1,57 @@
1
+ import {CreateVideoInternals} from 'create-video';
2
+ import React from 'react';
3
+
4
+ import {IconForTemplate} from './IconForTemplate';
5
+ import {MoreTemplatesButton} from './MoreTemplatesButton';
6
+ import {TemplateIcon} from './TemplateIcon';
7
+
8
+ export const ChooseTemplate: React.FC = () => {
9
+ return (
10
+ <div
11
+ style={{
12
+ display: 'flex',
13
+ flexDirection: 'column',
14
+ }}
15
+ >
16
+ <div
17
+ style={{
18
+ position: 'relative',
19
+ textAlign: 'center',
20
+ }}
21
+ >
22
+ <div
23
+ className="no-scroll-bar"
24
+ style={{
25
+ backgroundColor: 'var(--background)',
26
+ display: 'inline-flex',
27
+ flexDirection: 'row',
28
+ justifyContent: 'space-around',
29
+ boxShadow: '0 0 4px 0px var(--ifm-color-emphasis-200)',
30
+ borderRadius: 50,
31
+ alignItems: 'center',
32
+ padding: 8,
33
+ width: '100%',
34
+ maxWidth: '550px',
35
+ }}
36
+ >
37
+ {CreateVideoInternals.FEATURED_TEMPLATES.filter(
38
+ (f) => f.featuredOnHomePage,
39
+ ).map((template) => {
40
+ return (
41
+ <a
42
+ key={template.cliId}
43
+ className="text-inherit no-underline"
44
+ href={`/templates/${template.cliId}`}
45
+ >
46
+ <TemplateIcon label={template.featuredOnHomePage!}>
47
+ <IconForTemplate scale={0.7} template={template} />
48
+ </TemplateIcon>
49
+ </a>
50
+ );
51
+ })}
52
+ <MoreTemplatesButton />
53
+ </div>
54
+ </div>
55
+ </div>
56
+ );
57
+ };
package/src/components/homepage/CodeExample.tsx ADDED
@@ -0,0 +1,89 @@
1
+ 'use client';
2
+
3
+ import {Player} from '@remotion/player';
4
+ import React, {useState} from 'react';
5
+ import {interpolate, useCurrentFrame} from 'remotion';
6
+
7
+ const IMG_WIDTH = 1120;
8
+ const IMG_HEIGHT = 760;
9
+ const ASPECT = IMG_WIDTH / IMG_HEIGHT;
10
+
11
+ const Demo: React.FC = () => {
12
+ const frame = useCurrentFrame();
13
+ const scale = interpolate(frame, [0, 10, 40, 49], [0, 1, 1, 0]);
14
+ return (
15
+ <div
16
+ style={{
17
+ display: 'flex',
18
+ justifyContent: 'center',
19
+ alignItems: 'center',
20
+ flex: 1,
21
+ backgroundColor: 'black',
22
+ }}
23
+ >
24
+ <img style={{transform: `scale(${scale})`}} src="/img/logo-small.png" />
25
+ </div>
26
+ );
27
+ };
28
+
29
+ const container = {
30
+ maxWidth: 500,
31
+ height: (1 / ASPECT) * 500,
32
+ position: 'relative' as const,
33
+ };
34
+
35
+ const Preview: React.FC = () => {
36
+ return (
37
+ <Player
38
+ component={Demo}
39
+ compositionHeight={IMG_HEIGHT}
40
+ compositionWidth={IMG_WIDTH}
41
+ durationInFrames={50}
42
+ style={container}
43
+ controls
44
+ fps={30}
45
+ />
46
+ );
47
+ };
48
+
49
+ const tabStyle = {
50
+ appearance: 'none',
51
+ backgroundColor: 'transparent',
52
+ fontFamily: 'inherit',
53
+ border: 'none',
54
+ cursor: 'pointer',
55
+ color: 'var(--text-color)',
56
+ } as const;
57
+
58
+ type Tab = 'code' | 'preview';
59
+
60
+ export const CodeExample: React.FC = () => {
61
+ const [tab, setTab] = useState<Tab>('code');
62
+ return (
63
+ <div style={{flex: 1, textAlign: 'left', maxWidth: 700}}>
64
+ <button
65
+ type="button"
66
+ style={{...tabStyle, opacity: tab === 'code' ? 1 : 0.5}}
67
+ onClick={() => setTab('code')}
68
+ >
69
+ Code
70
+ </button>
71
+ |
72
+ <button
73
+ type="button"
74
+ style={{...tabStyle, opacity: tab === 'preview' ? 1 : 0.5}}
75
+ onClick={() => setTab('preview')}
76
+ >
77
+ Preview
78
+ </button>
79
+ <div>
80
+ {tab === 'code' && (
81
+ <div style={container}>
82
+ <img src="/img/code-sample-new.png" className="w-full" />
83
+ </div>
84
+ )}
85
+ {tab === 'preview' && <Preview />}
86
+ </div>
87
+ </div>
88
+ );
89
+ };
package/src/components/homepage/CommunityStats.tsx ADDED
@@ -0,0 +1,54 @@
1
+ import React from 'react';
2
+ import {
3
+ Contributors,
4
+ DiscordMembers,
5
+ GitHubStars,
6
+ InstallsPerMonth,
7
+ PagesOfDocs,
8
+ TemplatesAndExamples,
9
+ } from './CommunityStatsItems';
10
+ import {SectionTitle} from './VideoAppsTitle';
11
+
12
+ const SectionLink: React.FC<{
13
+ readonly href: string;
14
+ readonly children: React.ReactNode;
15
+ }> = ({href, children}) => (
16
+ <a
17
+ target="_blank"
18
+ href={href}
19
+ className={'no-underline text-inherit contents'}
20
+ >
21
+ {children}
22
+ </a>
23
+ );
24
+
25
+ const CommunityStats: React.FC = () => (
26
+ <div className={'m-auto max-w-[700px] text-center'}>
27
+ <SectionTitle>Never build alone</SectionTitle>
28
+ <div className={'fontbrand text-center mb-10'}>
29
+ Join a thriving community of developers.
30
+ </div>
31
+ <div className={'flex flex-wrap justify-between gap-4 w-full items-center'}>
32
+ <SectionLink href="https://www.npmjs.com/package/remotion">
33
+ <InstallsPerMonth />
34
+ </SectionLink>
35
+ <SectionLink href="https://www.remotion.dev/docs/">
36
+ <PagesOfDocs />
37
+ </SectionLink>
38
+ <SectionLink href="https://www.remotion.dev/templates">
39
+ <TemplatesAndExamples />
40
+ </SectionLink>
41
+ <SectionLink href="https://github.com/remotion-dev/remotion">
42
+ <GitHubStars />
43
+ </SectionLink>
44
+ <SectionLink href="https://remotion.dev/discord">
45
+ <DiscordMembers />
46
+ </SectionLink>
47
+ <SectionLink href="https://github.com/remotion-dev/remotion/graphs/contributors">
48
+ <Contributors />
49
+ </SectionLink>
50
+ </div>
51
+ </div>
52
+ );
53
+
54
+ export default CommunityStats;