@remotion/promo-pages 4.0.363 → 4.0.365

package/src/components/icons/undo.tsx

@@ -1,11 +0,0 @@
-import type {SVGProps} from 'react';
-import React from 'react';
-
-export const UndoIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => (
-	<svg viewBox="0 0 512 512" {...props}>
-		<path
-			fill="currentcolor"
-			d="M48.5 224L40 224c-13.3 0-24-10.7-24-24L16 72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8L48.5 224z"
-		/>
-	</svg>
-);

package/src/components/icons/waveform.tsx

@@ -1,13 +0,0 @@
-import type {SVGProps} from 'react';
-import React from 'react';
-
-export const Waveform: React.FC<SVGProps<SVGSVGElement>> = (props) => {
-	return (
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" {...props}>
-			<path
-				fill="currentColor"
-				d="M224 96C215.2 96 208 103.2 208 111.1v288C208 408.8 215.2 416 223.1 416C232.8 416 240 408.8 240 400V111.1C240 103.2 232.8 96 224 96zM128 192C119.2 192 112 199.2 112 207.1V304C112 312.8 119.2 320 127.1 320S144 312.8 144 304V207.1C144 199.2 136.8 192 128 192zM32 224C23.2 224 16 231.2 16 239.1V272C16 280.8 23.2 288 31.1 288S48 280.8 48 272V239.1C48 231.2 40.8 224 32 224zM416 128C407.2 128 400 135.2 400 143.1v224C400 376.8 407.2 384 415.1 384S432 376.8 432 368V143.1C432 135.2 424.8 128 416 128zM608 224c-8.8 0-16 7.2-16 15.1V272C592 280.8 599.2 288 608 288s16-7.2 16-15.1V239.1C624 231.2 616.8 224 608 224zM512 64c-8.8 0-16 7.2-16 15.1V432C496 440.8 503.2 448 511.1 448C520.8 448 528 440.8 528 432V79.1C528 71.2 520.8 64 512 64zM320 0C311.2 0 304 7.2 304 15.1V496C304 504.8 311.2 512 319.1 512S336 504.8 336 496V15.1C336 7.2 328.8 0 320 0z"
-			/>
-		</svg>
-	);
-};

package/src/components/team/TeamCards.tsx

@@ -1,167 +0,0 @@
-import React from 'react';
-
-export const LinkedInLogo: React.FC = () => {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 1000 1000"
-			className="w-[30px]"
-		>
-			<path
-				fill="currentcolor"
-				d="M195.877 0C88.16 0 0 88.158 0 195.877V803.718C0 911.435 88.158 999.563 195.877 999.563H803.718C911.436 999.563 999.563 911.436 999.563 803.718V195.877C999.563 88.16 911.436 0 803.718 0H195.877ZM245.143 164.948C296.791 164.948 328.604 198.854 329.586 243.423C329.586 287.008 296.789 321.867 244.144 321.867H243.175C192.51 321.867 159.763 287.01 159.763 243.423C159.763 198.855 193.501 164.948 245.142 164.948H245.143ZM690.223 373.258C789.552 373.258 864.013 438.18 864.013 577.694V838.143H713.06V595.156C713.06 534.096 691.213 492.438 636.584 492.438C594.88 492.438 570.022 520.516 559.108 547.64C555.121 557.344 554.141 570.897 554.141 584.472V838.143H403.188C403.188 838.143 405.169 426.53 403.188 383.91H554.172V448.234C574.232 417.284 610.114 373.257 690.223 373.257V373.258ZM168.667 383.943H319.62V838.145H168.667V383.943V383.943Z"
-			/>
-		</svg>
-	);
-};
-
-export const TwitterLogo: React.FC = () => {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 530 570"
-			className="w-[32px]"
-		>
-			<path
-				fill="currentcolor"
-				d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
-			/>
-		</svg>
-	);
-};
-
-export const GitHubLogo: React.FC = () => {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 1084 1084"
-			className="w-[30px]"
-		>
-			<path
-				fill="currentcolor"
-				d="M542 0C242.545 0 0 242.545 0 542C0 781.835 155.147 984.408 370.592 1056.22C397.692 1060.97 407.855 1044.71 407.855 1030.48C407.855 1017.61 407.178 974.923 407.178 929.53C271 954.598 235.77 896.332 224.93 865.845C218.832 850.262 192.41 802.16 169.375 789.287C150.405 779.125 123.305 754.057 168.698 753.38C211.38 752.702 241.868 792.675 252.03 808.935C300.81 890.912 378.723 867.878 409.888 853.65C414.63 818.42 428.857 794.707 444.44 781.157C323.845 767.607 197.83 720.86 197.83 513.545C197.83 454.602 218.833 405.822 253.385 367.882C247.965 354.332 228.995 298.777 258.805 224.252C258.805 224.252 304.198 210.025 407.855 279.808C451.215 267.613 497.285 261.515 543.355 261.515C589.425 261.515 635.495 267.613 678.855 279.808C782.513 209.348 827.905 224.252 827.905 224.252C857.715 298.777 838.745 354.332 833.325 367.882C867.878 405.822 888.88 453.925 888.88 513.545C888.88 721.537 762.188 767.607 641.593 781.157C661.24 798.095 678.178 830.615 678.178 881.428C678.178 953.92 677.5 1012.19 677.5 1030.48C677.5 1044.71 687.663 1061.64 714.763 1056.22C822.365 1019.91 915.868 950.759 982.106 858.512C1048.34 766.264 1083.98 655.565 1084 542C1084 242.545 841.455 0 542 0Z"
-			/>
-		</svg>
-	);
-};
-
-export const EmailLogo: React.FC = () => {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 1299 1299"
-			className="w-[30px]"
-		>
-			<path
-				fill="currentcolor"
-				d="M1177.22 202.969H121.781C99.3278 202.969 81.1875 221.109 81.1875 243.562V1055.44C81.1875 1077.89 99.3278 1096.03 121.781 1096.03H1177.22C1199.67 1096.03 1217.81 1077.89 1217.81 1055.44V243.562C1217.81 221.109 1199.67 202.969 1177.22 202.969ZM1126.48 343.525V1004.7H172.523V343.525L137.511 316.251L187.366 252.189L241.66 294.432H1057.47L1111.76 252.189L1161.62 316.251L1126.48 343.525V343.525ZM1057.47 294.305L649.5 611.443L241.533 294.305L187.239 252.062L137.384 316.124L172.397 343.398L605.735 680.326C618.197 690.008 633.529 695.263 649.31 695.263C665.091 695.263 680.422 690.008 692.885 680.326L1126.48 343.525L1161.49 316.251L1111.63 252.189L1057.47 294.305Z"
-			/>
-		</svg>
-	);
-};
-
-type TeamMemberProps = {
-	readonly name: string;
-	readonly title: string;
-	readonly description: string;
-	readonly image: string;
-	readonly twitter: string;
-	readonly linkedin: string;
-	readonly github: string;
-	readonly email: string;
-};
-
-const TeamMemberCard: React.FC<TeamMemberProps> = ({
-	name,
-	title,
-	description,
-	image,
-	twitter,
-	linkedin,
-	github,
-	email,
-}) => {
-	return (
-		<div className="flex-1 rounded-[15px] flex flex-col md:flex-row gap-2 md:gap-4">
-			<img
-				src={image}
-				className="w-[250px] h-[250px] rounded-xl border-effect"
-			/>
-			<div className="flex flex-col border-effect px-4 py-3 bg-pane">
-				<h2 className="ext-[1.6em] mb-1 mt-3 text-[var(--ifm-color-primary)] font-brand">
-					{name}
-				</h2>
-				<strong className="font-brand">{title}</strong>
-				<div className="mt-5 mb-5 leading-normal font-brand">{description}</div>
-				<div className="flex-1" />
-				<div className="gap-3 flex flex-row">
-					<a
-						className="no-underline text-inherit"
-						target="_blank"
-						href={twitter}
-					>
-						<TwitterLogo />
-					</a>
-					<a
-						className="no-underline text-inherit"
-						target="_blank"
-						href={linkedin}
-					>
-						<LinkedInLogo />
-					</a>
-					<a
-						className="no-underline text-inherit"
-						target="_blank"
-						href={github}
-					>
-						<GitHubLogo />
-					</a>
-					<a
-						className="no-underline text-inherit"
-						target="_blank"
-						href={`mailto:${email}`}
-					>
-						<EmailLogo />
-					</a>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export const TeamCardsLayout: React.FC = () => {
-	return (
-		<div className="flex flex-col gap-12 md:gap-4">
-			<TeamMemberCard
-				name="Jonny Burger"
-				title="Chief Hacker"
-				description="Making cool software for myself and others and getting to know all kinds of different people - that's what makes Remotion my dream job!"
-				image="/img/team/jonny.png"
-				twitter="https://twitter.com/JNYBGR"
-				linkedin="https://ch.linkedin.com/in/jonny-burger-4115109b"
-				github="https://github.com/JonnyBurger"
-				email="jonny@remotion.dev"
-			/>
-			<TeamMemberCard
-				name="Mehmet Ademi"
-				title="Business Manager"
-				description="Transitioning from traditional business, Remotion allowed me to merge my passion for technology and business in a distinctive way."
-				image="/img/team/mehmet.png"
-				twitter="https://twitter.com/mehmetademi"
-				linkedin="https://www.linkedin.com/in/mehmetademi"
-				github="https://github.com/MehmetAdemi"
-				email="mehmet@remotion.dev"
-			/>
-			<TeamMemberCard
-				name="Igor Samokhovets"
-				title="Product Engineer"
-				description="With a background in music industry and a passion for coding, I've been building tools to help musicians create. Remotion is the perfect place to blend my tech skills and creativity."
-				image="/img/team/igor.jpg"
-				twitter="https://x.com/tequilafunks"
-				linkedin="https://www.linkedin.com/in/samohovets/"
-				github="https://github.com/samohovets"
-				email="igor@remotion.dev"
-			/>
-		</div>
-	);
-};

package/src/components/team/TitleTeamCards.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import {TeamPicture} from '../TeamPicture';
-import {TeamCardsLayout} from './TeamCards';
-
-export const TitleTeamCards: React.FC = () => {
-	return (
-		<div>
-			<h1 className="font-brand">Team</h1>
-			<TeamPicture />
-			<TeamCardsLayout />
-			<h1 className="font-brand mt-8">Company</h1>
-			<p className="font-brand leading-normal">
-				Wonder how we operate? If we are stable? Who is backing us? <br />
-				Check our our{' '}
-				<a href="/investors" className="font-brand no-underline text-brand">
-					investors page
-				</a>
-				!
-			</p>
-		</div>
-	);
-};

package/src/components/team.css

@@ -1,22 +0,0 @@
-.writeincss {
-	flex-direction: row;
-	display: flex;
-	align-items: center;
-}
-
-.writeincsstitle {
-	font-size: 4em;
-	font-family: GTPlanar;
-	font-weight: 700;
-	line-height: 1.2;
-	max-width: 1000px;
-}
-
-@media screen and (max-width: 900px) {
-	.writeincss {
-		flex-direction: column;
-	}
-	.writeincsstitle {
-		font-size: 3.5em;
-	}
-}

package/src/components/team.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import {TitleTeamCards} from './team/TitleTeamCards';
-
-export const AboutUsHeader: React.FC = () => {
-	return (
-		<div className="flex flex-row items-center md:flex-col pt-10">
-			<div className="flex-1">
-				<h1 className="text-3xl font-bold font-['GTPlanar'] leading-tight max-w-[1000px] md:text-5xl">
-					<svg
-						className="h-6 md:h-8 mr-3 md:mr-6"
-						viewBox="0 0 105 107"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M24.0635 0.00717926C21.8217 0.12886 20.0152 0.48455 18.1946 1.17721C17.2867 1.51886 15.7984 2.26301 14.9794 2.77782C11.5535 4.926 8.94203 8.15529 7.58011 11.9134C7.30866 12.6576 6.57388 15.0304 6.10119 16.6638C2.95146 27.5825 1.16365 39.5215 0.779884 52.1579C0.719043 54.1703 0.719043 58.9628 0.779884 60.9425C1.03729 69.3199 1.83759 76.883 3.28843 84.5958C3.87813 87.7175 4.82352 91.9109 5.37109 93.8157C6.48964 97.6861 8.77354 100.981 12.0216 103.396C14.1978 105.015 16.6689 106.101 19.4068 106.635C20.7266 106.892 22.4676 107.009 23.75 106.925C25.5237 106.808 29.0432 106.335 31.9027 105.825C44.7918 103.527 56.6981 99.4131 67.4951 93.5255C74.3328 89.7954 80.1783 85.7565 85.8178 80.8564C91.4386 75.9797 96.2311 70.7333 100.448 64.8457C101.426 63.4838 101.917 62.6881 102.409 61.6866C103.673 59.1032 104.267 56.5338 104.262 53.6602C104.262 50.9831 103.757 48.6056 102.666 46.172C102.142 44.9973 101.641 44.1548 100.518 42.5542C96.3809 36.662 91.7897 31.5278 86.1922 26.5388C77.5153 18.8073 67.2096 12.4657 55.7012 7.77151C53.2067 6.75593 50.7496 5.86202 47.7918 4.89323C41.5298 2.84802 33.7795 1.07425 27.2226 0.189705C26.193 0.0493011 24.7936 -0.0302582 24.0635 0.00717926Z"
-							fill="#0B84F3"
-						/>
-					</svg>
-					The programmatic video dream{' '}
-				</h1>
-				<p className="leading-relaxed text-balance font-brand">
-					Started as a side project in 2021, we are now a company in Zurich,
-					Switzerland and are pushing to combine the powers of video editing and
-					programming!
-				</p>
-			</div>
-		</div>
-	);
-};
-
-const container: React.CSSProperties = {
-	maxWidth: 1000,
-	margin: 'auto',
-	paddingLeft: 16,
-	paddingRight: 16,
-};
-
-export const TeamPage = () => {
-	return (
-		<div className="bg-[var(--background)]">
-			<div style={container}>
-				<br />
-				<AboutUsHeader />
-				<br />
-				<TitleTeamCards />
-				<br />
-			</div>
-		</div>
-	);
-};

package/src/fonts.css

@@ -1,30 +0,0 @@
-@font-face {
-	font-family: 'GTPlanar';
-	src: url('../public/img/gt-planar-regular.woff2') format('woff2');
-	font-weight: 400;
-	font-style: normal;
-	font-feature-settings: 'ss03' on;
-}
-
-@font-face {
-	font-family: 'GTPlanar';
-	src: url('../public/img/gt-planar-medium.woff2') format('woff2');
-	font-weight: 500;
-	font-style: normal;
-	font-feature-settings: 'ss03' on;
-}
-@font-face {
-	font-family: 'GTPlanar';
-	src: url('../public/img/gt-planar-bold.woff2') format('woff2');
-	font-weight: 700;
-	font-style: normal;
-	font-feature-settings: 'ss03' on;
-}
-
-@font-face {
-	font-family: 'GTPlanar';
-	src: url('../public/img/gt-planar-black.woff2') format('woff2');
-	font-weight: 900;
-	font-style: normal;
-	font-feature-settings: 'ss03' on;
-}

package/src/index.css

@@ -1,140 +0,0 @@
-@import 'tailwindcss/theme' layer(theme);
-@import 'tailwindcss/utilities' layer(utilities);
-@import './fonts.css';
-
-@layer theme, base, components, utilities;
-
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
-
-:root {
-	--ifm-color-primary: #0b84f3;
-	--ifm-color-primary-dark: #0a77db;
-	--ifm-color-primary-darker: #0970cf;
-	--ifm-color-primary-darkest: #085caa;
-	--ifm-color-primary-light: #2290f5;
-	--ifm-color-primary-lighter: #2f96f6;
-	--ifm-color-primary-lightest: #53a9f7;
-	--ifm-code-font-size: 100%;
-	--ifm-font-family-base:
-		system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans,
-		sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
-		'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-	--ifm-font-size-base: 16px;
-	--ifm-font-family-monospace:
-		SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-		monospace;
-	--ifm-color-emphasis-200: #ebedf0;
-}
-
-[data-theme='light'] {
-	--background: #f8fafc;
-	--footer-background: #fcfcfc;
-	--footer-border: #eaeaea;
-	--text-color: #000;
-	--blue-button-color: #084696;
-	--blue-underlay: var(--ifm-color-primary);
-	--plain-button: #fff;
-	--blue-underlay-hover: #d5e5fd;
-	--light-text-color: #777;
-	--subtitle: #666;
-	--clear-hover: rgba(0, 0, 0, 0.04);
-	--border-color: rgb(234, 234, 234);
-	--box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-	--ifm-out-of-focus: #eaeaea;
-	--box-stroke: #000;
-	--ifm-background-surface-color: #fff;
-	--ifm-color-emphasis-200: #ebedf0;
-	color: var(--text-color);
-}
-
-[data-theme='dark'] {
-	--background: #18191a;
-	--footer-background: #1f1f1f;
-	--footer-border: #2f2f2f;
-	--text-color: #fff;
-	--plain-button: var(--blue-underlay);
-	--blue-underlay: #424243;
-	--blue-underlay-hover: #5b5c5e;
-	--clear-hover: rgba(255, 255, 255, 0.06);
-	--blue-button-color: white;
-	--light-text-color: #aaa;
-	--subtitle: #8d8d8d;
-	--border-color: rgb(42, 42, 42);
-	--box-shadow: 0 1px 8px rgba(255, 255, 255, 0.2);
-	--ifm-out-of-focus: #505050;
-	--box-stroke: gray;
-	--ifm-background-surface-color: #242526;
-	--ifm-color-emphasis-200: #444950;
-	color: var(--text-color);
-}
-
-html {
-	font-family:
-		ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-		'Segoe UI Symbol', 'Noto Color Emoji';
-}
-body {
-	margin: 0;
-}
-
-@keyframes click {
-	0% {
-		transform: translateY(-18px);
-		opacity: 0;
-	}
-
-	30% {
-		opacity: 0.7;
-	}
-	70% {
-		opacity: 0.7;
-	}
-	100% {
-		transform: translateY(-23px);
-		opacity: 0;
-	}
-}
-
-@keyframes jump {
-	from {
-		transform: scale(0);
-	}
-	to {
-		transform: scale(1);
-	}
-}
-
-@layer base {
-	input[type='number']::-webkit-inner-spin-button,
-	input[type='number']::-webkit-outer-spin-button {
-		-webkit-appearance: none;
-		margin: 0;
-	}
-}
-
-@theme inline {
-	--color-brand: #0b84f3;
-	--font-brand: 'GTPlanar', sans-serif;
-	--color-pane: var(--ifm-background-surface-color);
-	--color-muted: var(--subtitle);
-	--color-text: var(--text-color);
-}
-
-@utility border-effect {
-	border: 2px solid var(--box-stroke);
-	border-bottom: 4px solid var(--box-stroke);
-	border-radius: var(--radius-lg);
-}
-
-@utility bluelink {
-	@apply text-brand no-underline hover:underline underline-offset-2;
-}
-
-@utility card {
-	@apply border-effect bg-pane p-5;
-}
-
-@utility fontbrand {
-	@apply font-brand;
-	font-feature-settings: 'ss03' on;
-}

package/src/main.tsx

@@ -1,12 +0,0 @@
-import {StrictMode} from 'react';
-import {createRoot} from 'react-dom/client';
-import {NewLanding} from './components/Homepage';
-import './index.css';
-
-createRoot(document.getElementById('root')!).render(
-	<StrictMode>
-		<div data-theme="light">
-			<NewLanding colorMode="light" setColorMode={() => {}} />
-		</div>
-	</StrictMode>,
-);

package/src/team.tsx

@@ -1,12 +0,0 @@
-import {StrictMode} from 'react';
-import {createRoot} from 'react-dom/client';
-import {TeamPage} from './components/team';
-import './index.css';
-
-createRoot(document.getElementById('root')!).render(
-	<StrictMode>
-		<div data-theme="light">
-			<TeamPage />
-		</div>
-	</StrictMode>,
-);

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-	"extends": "../tsconfig.settings.json",
-	"compilerOptions": {
-		"rootDir": "src",
-		"outDir": "dist",
-		"module": "Preserve",
-		"lib": ["ES2021", "DOM"],
-		"moduleResolution": "Bundler"
-	},
-	"include": ["src"]
-}

package/vite.config.ts

@@ -1,9 +0,0 @@
-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()],
-});