@remotion/promo-pages 5.0.0-canary → 5.0.0-canary.3

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 (130) hide show
  1. package/dist/Homepage.js +1 -1
  2. package/dist/homepage/Pricing.js +1 -1
  3. package/package.json +15 -12
  4. package/.turbo/turbo-make.log +0 -8
  5. package/bundle.ts +0 -38
  6. package/eslint.config.mjs +0 -7
  7. package/index.html +0 -13
  8. package/public/fire.mp3 +0 -0
  9. package/public/img/cluster.png +0 -0
  10. package/public/img/code-sample-new.png +0 -0
  11. package/public/img/freelancers/alex.jpeg +0 -0
  12. package/public/img/freelancers/antoine.jpeg +0 -0
  13. package/public/img/freelancers/ayush.png +0 -0
  14. package/public/img/freelancers/benjamin.jpeg +0 -0
  15. package/public/img/freelancers/default.png +0 -0
  16. package/public/img/freelancers/florent.jpeg +0 -0
  17. package/public/img/freelancers/karel.jpeg +0 -0
  18. package/public/img/freelancers/lorenzo.jpeg +0 -0
  19. package/public/img/freelancers/mickael.jpeg +0 -0
  20. package/public/img/freelancers/mohit.jpeg +0 -0
  21. package/public/img/freelancers/pramod.jpg +0 -0
  22. package/public/img/freelancers/pranav.jpg +0 -0
  23. package/public/img/freelancers/rahul.png +0 -0
  24. package/public/img/freelancers/ray.jpeg +0 -0
  25. package/public/img/freelancers/stephen.png +0 -0
  26. package/public/img/freelancers/umungo.png +0 -0
  27. package/public/img/freelancers/yehor.jpeg +0 -0
  28. package/public/img/gt-planar-black.woff2 +0 -0
  29. package/public/img/gt-planar-bold.woff2 +0 -0
  30. package/public/img/gt-planar-medium.woff2 +0 -0
  31. package/public/img/gt-planar-regular.woff2 +0 -0
  32. package/public/img/logo-small.png +0 -0
  33. package/public/img/mp4.png +0 -0
  34. package/public/img/player-demo.mp4 +0 -0
  35. package/public/img/player-example-dark.png +0 -0
  36. package/public/img/player-example.png +0 -0
  37. package/public/img/writeinreact.png +0 -0
  38. package/public/partyhorn.mp3 +0 -0
  39. package/public/sad.mp3 +0 -0
  40. package/src/cn.ts +0 -6
  41. package/src/components/Homepage.tsx +0 -88
  42. package/src/components/homepage/BackgroundAnimation.tsx +0 -108
  43. package/src/components/homepage/ChooseTemplate.tsx +0 -57
  44. package/src/components/homepage/CodeExample.tsx +0 -89
  45. package/src/components/homepage/CommunityStats.tsx +0 -54
  46. package/src/components/homepage/CommunityStatsItems.tsx +0 -304
  47. package/src/components/homepage/Counter.tsx +0 -110
  48. package/src/components/homepage/Demo/Card.tsx +0 -273
  49. package/src/components/homepage/Demo/Cards.tsx +0 -129
  50. package/src/components/homepage/Demo/Comp.tsx +0 -157
  51. package/src/components/homepage/Demo/CurrentCountry.tsx +0 -97
  52. package/src/components/homepage/Demo/DemoError.tsx +0 -18
  53. package/src/components/homepage/Demo/DemoErrorIcon.tsx +0 -32
  54. package/src/components/homepage/Demo/DemoRender.tsx +0 -166
  55. package/src/components/homepage/Demo/DigitWheel.tsx +0 -179
  56. package/src/components/homepage/Demo/DisplayedEmoji.tsx +0 -81
  57. package/src/components/homepage/Demo/DoneCheckmark.tsx +0 -39
  58. package/src/components/homepage/Demo/DownloadNudge.tsx +0 -62
  59. package/src/components/homepage/Demo/DragAndDropNudge.tsx +0 -57
  60. package/src/components/homepage/Demo/EmojiCard.tsx +0 -198
  61. package/src/components/homepage/Demo/Minus.tsx +0 -21
  62. package/src/components/homepage/Demo/PlayPauseButton.tsx +0 -66
  63. package/src/components/homepage/Demo/PlayerControls.tsx +0 -48
  64. package/src/components/homepage/Demo/PlayerSeekBar.tsx +0 -325
  65. package/src/components/homepage/Demo/PlayerVolume.tsx +0 -83
  66. package/src/components/homepage/Demo/Progress.tsx +0 -38
  67. package/src/components/homepage/Demo/Spinner.tsx +0 -60
  68. package/src/components/homepage/Demo/Switcher.tsx +0 -54
  69. package/src/components/homepage/Demo/Temperature.tsx +0 -44
  70. package/src/components/homepage/Demo/TemperatureNumber.tsx +0 -68
  71. package/src/components/homepage/Demo/ThemeNudge.tsx +0 -72
  72. package/src/components/homepage/Demo/TimeDisplay.tsx +0 -43
  73. package/src/components/homepage/Demo/TrendingRepos.tsx +0 -106
  74. package/src/components/homepage/Demo/icons.tsx +0 -114
  75. package/src/components/homepage/Demo/index.tsx +0 -158
  76. package/src/components/homepage/Demo/math.ts +0 -43
  77. package/src/components/homepage/Demo/types.ts +0 -6
  78. package/src/components/homepage/Editor.tsx +0 -67
  79. package/src/components/homepage/EvaluateRemotion.tsx +0 -92
  80. package/src/components/homepage/FreePricing.tsx +0 -295
  81. package/src/components/homepage/GetStartedStrip.tsx +0 -77
  82. package/src/components/homepage/GitHubButton.tsx +0 -23
  83. package/src/components/homepage/IconForTemplate.tsx +0 -154
  84. package/src/components/homepage/IfYouKnowReact.tsx +0 -29
  85. package/src/components/homepage/InfoTooltip.tsx +0 -25
  86. package/src/components/homepage/MoreTemplatesButton.tsx +0 -29
  87. package/src/components/homepage/MuxVideo.tsx +0 -68
  88. package/src/components/homepage/NewsletterButton.tsx +0 -88
  89. package/src/components/homepage/Pricing.tsx +0 -49
  90. package/src/components/homepage/PricingBulletPoint.tsx +0 -50
  91. package/src/components/homepage/RealMp4Videos.tsx +0 -50
  92. package/src/components/homepage/Spacer.tsx +0 -5
  93. package/src/components/homepage/TemplateIcon.tsx +0 -36
  94. package/src/components/homepage/TextInput.tsx +0 -62
  95. package/src/components/homepage/TrustedByBanner.tsx +0 -194
  96. package/src/components/homepage/VideoApps.tsx +0 -231
  97. package/src/components/homepage/VideoAppsShowcase.tsx +0 -276
  98. package/src/components/homepage/VideoAppsTitle.tsx +0 -24
  99. package/src/components/homepage/VideoPlayerWithControls.tsx +0 -188
  100. package/src/components/homepage/WriteInReact.tsx +0 -34
  101. package/src/components/homepage/YouAreHere.tsx +0 -30
  102. package/src/components/homepage/custom.css +0 -57
  103. package/src/components/homepage/layout/Button.tsx +0 -93
  104. package/src/components/homepage/layout/colors.ts +0 -17
  105. package/src/components/homepage/layout/use-color-mode.tsx +0 -44
  106. package/src/components/homepage/layout/use-el-size.ts +0 -51
  107. package/src/components/homepage/layout/use-mobile-layout.ts +0 -8
  108. package/src/components/homepage/video-player.css +0 -24
  109. package/src/components/icons/blank.tsx +0 -13
  110. package/src/components/icons/clone.tsx +0 -10
  111. package/src/components/icons/code-hike.tsx +0 -15
  112. package/src/components/icons/cubes.tsx +0 -13
  113. package/src/components/icons/js.tsx +0 -17
  114. package/src/components/icons/next.tsx +0 -64
  115. package/src/components/icons/overlay.tsx +0 -24
  116. package/src/components/icons/remix.tsx +0 -24
  117. package/src/components/icons/skia.tsx +0 -13
  118. package/src/components/icons/stargazer.tsx +0 -13
  119. package/src/components/icons/still.tsx +0 -13
  120. package/src/components/icons/tailwind.tsx +0 -22
  121. package/src/components/icons/tiktok.tsx +0 -13
  122. package/src/components/icons/ts.tsx +0 -18
  123. package/src/components/icons/tts.tsx +0 -13
  124. package/src/components/icons/undo.tsx +0 -11
  125. package/src/components/icons/waveform.tsx +0 -13
  126. package/src/fonts.css +0 -30
  127. package/src/index.css +0 -74
  128. package/src/main.tsx +0 -12
  129. package/tsconfig.json +0 -15
  130. package/vite.config.ts +0 -9
package/dist/Homepage.js CHANGED
@@ -7880,7 +7880,7 @@ var CompanyPricing = () => {
7880
7880
  children: [
7881
7881
  /* @__PURE__ */ jsx4("div", {
7882
7882
  className: "fontbrand font-bold text-lg",
7883
- children: "WebCodec Conversion Units"
7883
+ children: "WebCodecs Conversion Units"
7884
7884
  }),
7885
7885
  /* @__PURE__ */ jsxs4("div", {
7886
7886
  className: "text-muted fontbrand text-sm",
package/dist/homepage/Pricing.js CHANGED
@@ -1845,7 +1845,7 @@ var CompanyPricing = () => {
1845
1845
  children: [
1846
1846
  /* @__PURE__ */ jsx4("div", {
1847
1847
  className: "fontbrand font-bold text-lg",
1848
- children: "WebCodec Conversion Units"
1848
+ children: "WebCodecs Conversion Units"
1849
1849
  }),
1850
1850
  /* @__PURE__ */ jsxs4("div", {
1851
1851
  className: "text-muted fontbrand text-sm",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remotion/promo-pages",
3
- "version": "5.0.0-canary",
3
+ "version": "5.0.0-canary.3",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -9,25 +9,26 @@
9
9
  "lint": "tsc && eslint src",
10
10
  "dev": "vite"
11
11
  },
12
+ "files": [
13
+ "dist"
14
+ ],
12
15
  "type": "module",
13
16
  "dependencies": {
14
- "@remotion/animated-emoji": "workspace:*",
15
- "@remotion/lambda": "workspace:*",
16
- "@remotion/lottie": "workspace:*",
17
- "@remotion/paths": "workspace:*",
18
- "@remotion/player": "workspace:*",
19
- "@remotion/shapes": "workspace:*",
20
- "create-video": "workspace:*",
17
+ "@remotion/animated-emoji": "4.0.259",
18
+ "@remotion/lambda": "4.0.259",
19
+ "@remotion/lottie": "4.0.259",
20
+ "@remotion/paths": "4.0.259",
21
+ "@remotion/player": "4.0.259",
22
+ "@remotion/shapes": "4.0.259",
23
+ "create-video": "4.0.259",
21
24
  "hls.js": "1.5.19",
22
25
  "polished": "4.3.1",
23
- "react": "19.0.0",
24
- "react-dom": "19.0.0",
25
- "remotion": "workspace:*",
26
+ "remotion": "4.0.259",
26
27
  "vite": "^5.4.12",
27
28
  "zod": "3.22.3"
28
29
  },
29
30
  "devDependencies": {
30
- "@remotion/eslint-config-internal": "workspace:*",
31
+ "@remotion/eslint-config-internal": "4.0.259",
31
32
  "@eslint/eslintrc": "3.1.0",
32
33
  "@types/react": "19.0.0",
33
34
  "@types/react-dom": "19.0.0",
@@ -38,6 +39,8 @@
38
39
  "tailwindcss": "4.0.0",
39
40
  "@tailwindcss/cli": "4.0.0",
40
41
  "@tailwindcss/vite": "4.0.0",
42
+ "react": "19.0.0",
43
+ "react-dom": "19.0.0",
41
44
  "tailwindcss-scoped-preflight": "3.4.10",
42
45
  "@vitejs/plugin-react-swc": "^3.5.0",
43
46
  "tailwind-merge": "2.5.2",
package/.turbo/turbo-make.log DELETED
@@ -1,8 +0,0 @@
1
-
2
- 
3
- > @remotion/promo-pages@4.0.258 make /Users/jonathanburger/remotion/packages/promo-pages
4
- > bun --env-file=../.env.bundle bundle.ts
5
-
6
- ≈ tailwindcss v4.0.0
7
-
8
- Done in 53ms
package/bundle.ts DELETED
@@ -1,38 +0,0 @@
1
- import {$} from 'bun';
2
- import {NoReactInternals} from 'remotion/no-react';
3
-
4
- if (process.env.NODE_ENV !== 'production') {
5
- throw new Error('This script must be run using NODE_ENV=production');
6
- }
7
-
8
- const nodeVersion =
9
- await $`node -e "console.log(typeof structuredClone)"`.text();
10
- if (nodeVersion.trim() === 'undefined') {
11
- if (NoReactInternals.ENABLE_V5_BREAKING_CHANGES) {
12
- throw new Error(
13
- 'Error: You are using Node.js without structuredClone. Please upgrade to Node.js 17 or newer.',
14
- );
15
- } else {
16
- console.log(
17
- 'Node does not have structuredClone. Passing because we are not building the site.',
18
- );
19
- process.exit(0);
20
- }
21
- }
22
-
23
- await $`bunx tailwindcss -i src/index.css -o dist/tailwind.css`;
24
-
25
- const result = await Bun.build({
26
- entrypoints: [
27
- './src/components/Homepage.tsx',
28
- './src/components/homepage/Pricing.tsx',
29
- ],
30
- format: 'esm',
31
- external: ['react', 'react-dom', 'lottie-web', 'hls.js', 'plyr', 'zod'],
32
- });
33
-
34
- for (const output of result.outputs) {
35
- await Bun.write('dist/' + output.path, await output.text());
36
- }
37
-
38
- export {};
package/eslint.config.mjs DELETED
@@ -1,7 +0,0 @@
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 DELETED
@@ -1,13 +0,0 @@
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/public/fire.mp3 DELETED
Binary file
package/public/img/cluster.png DELETED
Binary file
package/public/img/code-sample-new.png DELETED
Binary file
package/public/img/freelancers/alex.jpeg DELETED
Binary file
package/public/img/freelancers/antoine.jpeg DELETED
Binary file
package/public/img/freelancers/ayush.png DELETED
Binary file
package/public/img/freelancers/default.png DELETED
Binary file
package/public/img/freelancers/florent.jpeg DELETED
Binary file
package/public/img/freelancers/karel.jpeg DELETED
Binary file
package/public/img/freelancers/lorenzo.jpeg DELETED
Binary file
package/public/img/freelancers/mickael.jpeg DELETED
Binary file
package/public/img/freelancers/mohit.jpeg DELETED
Binary file
package/public/img/freelancers/pramod.jpg DELETED
Binary file
package/public/img/freelancers/pranav.jpg DELETED
Binary file
package/public/img/freelancers/rahul.png DELETED
Binary file
package/public/img/freelancers/ray.jpeg DELETED
Binary file
package/public/img/freelancers/stephen.png DELETED
Binary file
package/public/img/freelancers/umungo.png DELETED
Binary file
package/public/img/freelancers/yehor.jpeg DELETED
Binary file
package/public/img/gt-planar-black.woff2 DELETED
Binary file
package/public/img/gt-planar-bold.woff2 DELETED
Binary file
package/public/img/gt-planar-medium.woff2 DELETED
Binary file
package/public/img/gt-planar-regular.woff2 DELETED
Binary file
package/public/img/logo-small.png DELETED
Binary file
package/public/img/mp4.png DELETED
Binary file
package/public/img/player-demo.mp4 DELETED
Binary file
package/public/img/player-example-dark.png DELETED
Binary file
package/public/img/player-example.png DELETED
Binary file
package/public/img/writeinreact.png DELETED
Binary file
package/public/partyhorn.mp3 DELETED
Binary file
package/public/sad.mp3 DELETED
Binary file
package/src/cn.ts DELETED
@@ -1,6 +0,0 @@
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 DELETED
@@ -1,88 +0,0 @@
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 DELETED
@@ -1,108 +0,0 @@
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 DELETED
@@ -1,57 +0,0 @@
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 DELETED
@@ -1,89 +0,0 @@
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 DELETED
@@ -1,54 +0,0 @@
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;