alright

Author: JonnyBurger

packages/promo-pages/public/img/logo-small.png

@@ -8,7 +8,6 @@ import {Demo} from './homepage/Demo';
 import {LightningFastEditor} from './homepage/Editor';
 import EvaluateRemotionSection from './homepage/EvaluateRemotion';
 import {IfYouKnowReact} from './homepage/IfYouKnowReact';
-import styles from './homepage/landing.module.css';
 import {ColorModeProvider} from './homepage/layout/use-color-mode';
 import {NewsletterButton} from './homepage/NewsletterButton';
 import {Pricing} from './homepage/Pricing';
@@ -28,7 +27,7 @@ const NewLanding: React.FC = () => {
 				<br />
 				<br />
 				<br />
-				<div className={styles.content}>
+				<div className="max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5">
 					<WriteInReact />
 					<br />
 					<IfYouKnowReact />

packages/promo-pages/src/components/Homepage.tsx

@@ -2,7 +2,6 @@
 
 import {getLength} from '@remotion/paths';
 import React, {useEffect} from 'react';
-import styles from './bg-anim.module.css';
 
 const rx = 0.2;
 const ry = 0.45;
@@ -53,9 +52,9 @@ export const BackgroundAnimation: React.FC = () => {
 	}, [css]);
 
 	return (
-		<div className={styles.bganimcontainer}>
+		<div className="absolute 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">
 			<svg
-				className={styles.svg}
+				className="translate-y-[-30%] lg:translate-y-[-50%]"
 				viewBox="0 0 1 1"
 				style={{
 					width: '100%',
@@ -68,7 +67,7 @@ export const BackgroundAnimation: React.FC = () => {
 					fill="none"
 					stroke="var(--ifm-color-primary)"
 					strokeLinecap="round"
-					className={styles.p}
+					className="stroke-[0.04] lg:stroke-[0.035]"
 					style={{
 						transformOrigin: 'center center',
 						transform: `rotate(120deg)`,
@@ -82,7 +81,7 @@ export const BackgroundAnimation: React.FC = () => {
 					stroke="var(--ifm-color-primary)"
 					strokeLinecap="round"
 					strokeWidth={strokeWidth}
-					className={styles.p}
+					className="stroke-[0.04] lg:stroke-[0.035]"
 					style={{
 						transformOrigin: 'center center',
 						transform: `rotate(0deg)`,
@@ -96,7 +95,7 @@ export const BackgroundAnimation: React.FC = () => {
 					stroke="var(--ifm-color-primary)"
 					strokeLinecap="round"
 					strokeWidth={strokeWidth}
-					className={styles.p}
+					className="stroke-[0.04] lg:stroke-[0.035]"
 					style={{
 						transformOrigin: 'center center',
 						transform: `rotate(240deg)`,

packages/promo-pages/src/components/homepage/BackgroundAnimation.tsx

@@ -79,7 +79,7 @@ export const CodeExample: React.FC = () => {
 			<div>
 				{tab === 'code' && (
 					<div style={container}>
-						<img src="/img/code-sample-new.png" />
+						<img src="/img/code-sample-new.png" className="w-full" />
 					</div>
 				)}
 				{tab === 'preview' && <Preview />}

packages/promo-pages/src/components/homepage/CodeExample.tsx

@@ -54,7 +54,7 @@ const EvaluateRemotionSection: React.FC = () => {
 					href="https://cal.com/remotion/evaluate"
 					style={{textDecoration: 'none'}}
 				>
-					<BlueButton size="sm" fullWidth={false} loading={false}>
+					<BlueButton size="sm" loading={false}>
 						Schedule a call
 					</BlueButton>
 				</a>
@@ -72,7 +72,7 @@ const EvaluateRemotionSection: React.FC = () => {
 						href="/experts"
 						style={{textDecoration: 'none'}}
 					>
-						<BlueButton size="sm" fullWidth={false} loading={false}>
+						<BlueButton size="sm" loading={false}>
 							Remotion Experts
 						</BlueButton>
 					</a>

packages/promo-pages/src/components/homepage/EvaluateRemotion.tsx

@@ -1,28 +1,25 @@
 import React from 'react';
 import {CodeExample} from './CodeExample';
-import styles from './ifyouknowreact.module.css';
 import {BlueButton} from './layout/Button';
-import {Spacer} from './Spacer';
 
 export const IfYouKnowReact: React.FC = () => {
 	return (
-		<div className={styles.ifyouknowrow}>
+		<div className="flex flex-col-reverse lg:flex-row text-left lg:text-right justify-start lg:justify-end items-start lg:items-center">
 			<CodeExample />
-			<div style={{width: 40}} />
-			<div>
-				<h2 className={styles.ifyouknowtitle}>
-					Leverage <span className={styles.rea}>React</span> <br />
+			<div className="h-10 lg:w-10" />
+			<div className="lg:text-right">
+				<h2 className="text-4xl font-brand">
+					Leverage <span className="text-brand">React</span> <br />
 					to express yourself.
 				</h2>
-				<p>
+				<p className="leading-relaxed">
 					Remotion gives you the tools for video creation, <br /> but the rules
 					of React stay the same. <br />
 				</p>
 				Learn the fundamentals in just a few minutes.
-				<Spacer />
-				<Spacer />
-				<a className={styles.aknow} href="/docs/the-fundamentals">
-					<BlueButton size="sm" fullWidth={false} loading={false}>
+				<div className="h-7" />
+				<a className="no-underline inline-block" href="/docs/the-fundamentals">
+					<BlueButton size="sm" loading={false}>
 						Learn Remotion
 					</BlueButton>
 				</a>