diff --git a/packages/promo-pages/bundle.ts b/packages/promo-pages/bundle.ts index 9a1d985c7f0..a6632a8bfd3 100644 --- a/packages/promo-pages/bundle.ts +++ b/packages/promo-pages/bundle.ts @@ -5,7 +5,7 @@ await $`bunx tailwindcss -i src/index.css -o dist/tailwind.css`; const result = await Bun.build({ entrypoints: ['./src/components/Homepage.tsx'], experimentalCss: true, - format: 'cjs', + format: 'esm', external: ['react', 'react-dom', 'lottie-web', 'hls.js', 'plyr', 'zod'], }); diff --git a/packages/promo-pages/package.json b/packages/promo-pages/package.json index 54eab4d7ac4..239cf11528a 100644 --- a/packages/promo-pages/package.json +++ b/packages/promo-pages/package.json @@ -38,6 +38,8 @@ "@tailwindcss/cli": "4.0.0-beta.9", "@tailwindcss/vite": "4.0.0-beta.9", "tailwindcss-scoped-preflight": "3.4.10", - "@vitejs/plugin-react-swc": "^3.5.0" + "@vitejs/plugin-react-swc": "^3.5.0", + "tailwind-merge": "2.5.2", + "clsx": "2.1.1" } } diff --git a/packages/promo-pages/public/img/gt-planar-black.woff2 b/packages/promo-pages/public/img/gt-planar-black.woff2 new file mode 100644 index 00000000000..0696ffdd7cd Binary files /dev/null and b/packages/promo-pages/public/img/gt-planar-black.woff2 differ diff --git a/packages/promo-pages/public/gt-planar-bold.woff2 b/packages/promo-pages/public/img/gt-planar-bold.woff2 similarity index 100% rename from packages/promo-pages/public/gt-planar-bold.woff2 rename to packages/promo-pages/public/img/gt-planar-bold.woff2 diff --git a/packages/promo-pages/public/gt-planar-medium.woff2 b/packages/promo-pages/public/img/gt-planar-medium.woff2 similarity index 100% rename from packages/promo-pages/public/gt-planar-medium.woff2 rename to packages/promo-pages/public/img/gt-planar-medium.woff2 diff --git a/packages/promo-pages/public/gt-planar-regular.woff2 b/packages/promo-pages/public/img/gt-planar-regular.woff2 similarity index 100% rename from packages/promo-pages/public/gt-planar-regular.woff2 rename to packages/promo-pages/public/img/gt-planar-regular.woff2 diff --git a/packages/promo-pages/src/cn.ts b/packages/promo-pages/src/cn.ts new file mode 100644 index 00000000000..1faa41b4398 --- /dev/null +++ b/packages/promo-pages/src/cn.ts @@ -0,0 +1,6 @@ +import {clsx, type ClassValue} from 'clsx'; +import {twMerge} from 'tailwind-merge'; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/packages/promo-pages/src/components/homepage/GetStartedStrip.tsx b/packages/promo-pages/src/components/homepage/GetStartedStrip.tsx index 69a2530d72d..d9f11a400db 100644 --- a/packages/promo-pages/src/components/homepage/GetStartedStrip.tsx +++ b/packages/promo-pages/src/components/homepage/GetStartedStrip.tsx @@ -1,29 +1,28 @@ import React, {useState} from 'react'; -import styles from './get-started.module.css'; import {GithubButton} from './GitHubButton'; import {PlainButton} from './layout/Button'; -import {useMobileLayout} from './layout/use-mobile-layout'; export const GetStarted: React.FC = () => { const [clicked, setClicked] = useState(null); - const mobileLayout = useMobileLayout(); return ( -
-
-
+
+
+
{clicked ? ( -
+
Copied!
) : null}
{ navigator.clipboard.writeText('npx create-video@latest'); @@ -33,48 +32,46 @@ export const GetStarted: React.FC = () => { > $ npx create-video@latest
-
-
-
-
- - - Docs - - -
- - - Discord - - - +
+ +
+ + + Docs + + +
+ + + Discord + + + ); }; diff --git a/packages/promo-pages/src/components/homepage/GitHubButton.tsx b/packages/promo-pages/src/components/homepage/GitHubButton.tsx index ff2b9c80383..b285dce3a46 100644 --- a/packages/promo-pages/src/components/homepage/GitHubButton.tsx +++ b/packages/promo-pages/src/components/homepage/GitHubButton.tsx @@ -1,13 +1,8 @@ -import React, {useEffect, useState} from 'react'; -import styles from './github.module.css'; +import React from 'react'; const GithubIcon: React.FC = () => { return ( - + { }; export const GithubButton: React.FC = () => { - const [stars, setStars] = useState(null); - - useEffect(() => { - fetch(`https://api.github.com/repos/remotion-dev/remotion`) - .then((res) => res.json()) - .then((json) => json.watchers) - .then((w) => setStars(w)) - .catch((err) => { - console.log(err); - setStars(null); - }); - }, []); - return ( -
+
GitHub{' '} -
- {stars ? Math.floor(stars / 1000) + 'k' : null} +
+ {'21k'}
); diff --git a/packages/promo-pages/src/components/homepage/WriteInReact.tsx b/packages/promo-pages/src/components/homepage/WriteInReact.tsx index 69bfb8690d2..4a31316cdae 100644 --- a/packages/promo-pages/src/components/homepage/WriteInReact.tsx +++ b/packages/promo-pages/src/components/homepage/WriteInReact.tsx @@ -1,30 +1,33 @@ import React from 'react'; import {GetStarted} from './GetStartedStrip'; -import styles from './writeinreact.module.css'; export const WriteInReact: React.FC = () => { return (
-

Make videos programmatically.

-
+

+ Make videos programmatically. +

Create real MP4 videos with React.
Parametrize content, render server-side and build applications.


-
+


-
{/* */}
+ {/* */}
); }; diff --git a/packages/promo-pages/src/components/homepage/get-started.module.css b/packages/promo-pages/src/components/homepage/get-started.module.css deleted file mode 100644 index 313c390bae0..00000000000 --- a/packages/promo-pages/src/components/homepage/get-started.module.css +++ /dev/null @@ -1,62 +0,0 @@ -.myrow { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - text-align: center; - width: 100%; -} - -.partialrow { - display: flex; - flex-direction: row; -} - -.codeblock { - background-color: #333; - padding: 12px 16px; - border-radius: 8px; - color: white; - font: var(--ifm-code-font-size) / var(--ifm-pre-line-height) - var(--ifm-font-family-monospace); - cursor: pointer; -} - -.codeblock:hover { - background-color: #444; -} - -@keyframes click { - 0% { - transform: translateY(-18px); - opacity: 0; - } - - 30% { - opacity: 0.7; - } - 70% { - opacity: 0.7; - } - 100% { - transform: translateY(-23px); - opacity: 0; - } -} - -.a:hover { - text-decoration: none; -} - -.copied { - position: absolute; - animation: click 0.7s linear; - z-index: 0; - animation-fill-mode: forwards; - top: 0; - font: var(--ifm-code-font-size) / var(--ifm-pre-line-height) - var(--ifm-font-family-monospace); - font-size: 13px; - width: 100%; - text-align: center; -} diff --git a/packages/promo-pages/src/components/homepage/github.module.css b/packages/promo-pages/src/components/homepage/github.module.css deleted file mode 100644 index 946a28fa027..00000000000 --- a/packages/promo-pages/src/components/homepage/github.module.css +++ /dev/null @@ -1,22 +0,0 @@ -.container { - display: flex; - font-weight: bold; -} - -.stars { - font-size: 0.75em; - display: inline-block; - margin-left: 8px; - line-height: 1; - align-self: center; - margin-top: 3px; -} - -@media screen and (max-width: 900px) { - .githubicon { - display: none; - } - .stars { - display: none; - } -} diff --git a/packages/promo-pages/src/components/homepage/layout/Button.tsx b/packages/promo-pages/src/components/homepage/layout/Button.tsx index a074e111111..7e6e7af02e9 100644 --- a/packages/promo-pages/src/components/homepage/layout/Button.tsx +++ b/packages/promo-pages/src/components/homepage/layout/Button.tsx @@ -1,11 +1,11 @@ import {opacify} from 'polished'; import type {ButtonHTMLAttributes, DetailedHTMLProps} from 'react'; import React from 'react'; +import {cn} from '../../../cn'; import {RED, UNDERLAY_RED} from './colors'; type ExtraProps = { readonly size: Size; - readonly fullWidth: boolean; readonly background: string; readonly hoverColor?: string; readonly color: string; @@ -27,14 +27,17 @@ type PrestyledProps = DetailedHTMLProps< MandatoryProps; export const Button: React.FC = (props) => { - const {children, loading, hoverColor, fullWidth, color, size, ...other} = + const {children, loading, hoverColor, color, size, className, ...other} = props; const actualDisabled = other.disabled || loading; return (