add tailwind to promo pages

remotion-dev · Jan 11, 2025 · 7278319 · 7278319
1 parent 3e84a29
commit 7278319
Show file tree

Hide file tree

Showing 15 changed files with 86 additions and 654 deletions.
diff --git a/packages/promo-pages/index.html b/packages/promo-pages/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite + React + TS</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>
diff --git a/packages/promo-pages/out.css b/packages/promo-pages/out.css
diff --git a/packages/promo-pages/package.json b/packages/promo-pages/package.json
@@ -4,8 +4,10 @@
 	"private": true,
 	"scripts": {
 		"make": "bun bundle.ts",
-		"lint": "tsc"
+		"lint": "tsc",
+		"dev": "vite"
 	},
+	"type": "module",
 	"dependencies": {
 		"@remotion/animated-emoji": "workspace:*",
 		"@remotion/lambda": "workspace:*",
@@ -34,6 +36,8 @@
 		"postcss": "8.4.47",
 		"tailwindcss": "4.0.0-beta.9",
 		"@tailwindcss/cli": "4.0.0-beta.9",
-		"tailwindcss-scoped-preflight": "3.4.10"
+		"@tailwindcss/vite": "4.0.0-beta.9",
+		"tailwindcss-scoped-preflight": "3.4.10",
+		"@vitejs/plugin-react-swc": "^3.5.0"
 	}
 }
diff --git a/packages/promo-pages/src/components/homepage/CompanyPricing.tsx b/packages/promo-pages/src/components/homepage/CompanyPricing.tsx
@@ -48,7 +48,7 @@ export const CompanyPricing: React.FC = () => {
 			<div className={styles.audience}>
 				For collaborations and companies of 4+ people
 			</div>
-			<h2 className={styles.pricingtitle}>Company License</h2>
+			<h2 className="pricingtitle">Company License</h2>
 			<PricingBulletPoint text="Everything in Free License" checked />
 			<PricingBulletPoint text="Prioritized Support" checked />
 			<PricingBulletPoint text="Remotion Recorder included" checked />

diff --git a/packages/promo-pages/src/components/homepage/Counter.tsx b/packages/promo-pages/src/components/homepage/Counter.tsx
@@ -85,6 +85,7 @@ export const Counter: React.FC<CounterProps> = ({
 			<div style={{display: 'flex', flexDirection: 'column', marginLeft: 10}}>
 				<button
 					type="button"
+					className="brand"
 					style={{
 						...buttonContainer,
 						borderLeft: '1px solid #EAEAEA',

diff --git a/packages/promo-pages/src/components/homepage/Editor.tsx b/packages/promo-pages/src/components/homepage/Editor.tsx
@@ -51,7 +51,7 @@ export const LightningFastEditor: React.FC = () => {
 			</div>
 			<div style={{flex: 1}}>
 				<h2 className={styles.title}>
-					Fast and <br /> <span className={styles.mp4}>delightful</span> editing
+					Fast and <br /> <span className="text-brand">delightful</span> editing
 				</h2>
 				<p>
 					Preview your video in the browser. <br />

diff --git a/packages/promo-pages/src/components/homepage/EnterpriseLicense.tsx b/packages/promo-pages/src/components/homepage/EnterpriseLicense.tsx
@@ -11,7 +11,7 @@ export const EnterpriseLicense: React.FC = () => {
 	return (
 		<div className={styles.pricingcontainer}>
 			<div className={styles.audience}>For advanced needs</div>
-			<h2 className={styles.pricingtitle}>Enterprise License</h2>
+			<h2 className="pricingtitle">Enterprise License</h2>
 			<PricingBulletPoint text="Everything in Company License" checked />
 			<PricingBulletPoint text="Custom terms, billing and pricing" checked />
 			<PricingBulletPoint text="Compliance forms" checked />

diff --git a/packages/promo-pages/src/components/homepage/FreePricing.tsx b/packages/promo-pages/src/components/homepage/FreePricing.tsx
@@ -8,7 +8,7 @@ export const FreePricing: React.FC = () => {
 			<div className={styles.audience}>
 				For individuals and companies of up to 3 people
 			</div>
-			<h2 className={styles.pricingtitle}>Free License</h2>
+			<h2 className="pricingtitle">Free License</h2>
 			<PricingBulletPoint text="Unlimited videos" checked />
 			<PricingBulletPoint text="Commercial use allowed" checked />
 			<PricingBulletPoint

diff --git a/packages/promo-pages/src/components/homepage/layout/Button.tsx b/packages/promo-pages/src/components/homepage/layout/Button.tsx
@@ -1,7 +1,6 @@
 import {opacify} from 'polished';
 import type {ButtonHTMLAttributes, DetailedHTMLProps} from 'react';
 import React from 'react';
-import styles from './button.module.css';
 import {RED, UNDERLAY_RED} from './colors';
 
 type ExtraProps = {
@@ -35,7 +34,7 @@ export const Button: React.FC<Props> = (props) => {
 	return (
 		<button
 			type="button"
-			className={styles.buttoncontainer}
+			className="rounded font-bold appearance-none border-2 border-solid border-black border-b-4 font-sans flex flex-row items-center justify-center "
 			disabled={actualDisabled}
 			{...other}
 			style={{
@@ -46,8 +45,6 @@ export const Button: React.FC<Props> = (props) => {
 				color: props.color,
 				cursor: props.disabled ? 'default' : 'pointer',
 				backgroundColor: props.background,
-				// @ts-expect-error
-				'--hover-color': props.hoverColor ?? props.background,
 				...(props.fullWidth ? {width: '100%'} : {}),
 				opacity: props.disabled ? 0.7 : 1,
 			}}

diff --git a/packages/promo-pages/src/components/homepage/layout/button.module.css b/packages/promo-pages/src/components/homepage/layout/button.module.css
diff --git a/packages/promo-pages/src/components/homepage/pricing.module.css b/packages/promo-pages/src/components/homepage/pricing.module.css
@@ -1,14 +1,3 @@
-.pricingtitle {
-	font-size: 2.5em;
-	font-weight: 700;
-	line-height: 1.1;
-	font-family: 'GTPlanar', sans-serif;
-}
-
-.mp4 {
-	color: var(--ifm-color-primary);
-}
-
 .countercontainer {
 	width: 110px;
 }

diff --git a/packages/promo-pages/src/index.css b/packages/promo-pages/src/index.css
@@ -7,3 +7,10 @@
 	--font-brand: 'GTPlanar', -apple-system, BlinkMacSystemFont, 'Segoe UI',
 		Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
+
+@utility pricingtitle {
+	font-size: 2.5em;
+	font-weight: 700;
+	line-height: 1.1;
+	font-family: 'GTPlanar', sans-serif;
+}
diff --git a/packages/promo-pages/src/main.tsx b/packages/promo-pages/src/main.tsx
@@ -0,0 +1,10 @@
+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import NewLanding from './components/Homepage';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+	<StrictMode>
+		<NewLanding />
+	</StrictMode>,
+);
diff --git a/packages/promo-pages/vite.config.ts b/packages/promo-pages/vite.config.ts
@@ -0,0 +1,9 @@
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react-swc';
+
+import {defineConfig} from 'vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+	plugins: [react(), tailwindcss()],
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml