@remotion/promo-pages 4.0.347 → 4.0.351

package/.turbo/turbo-make.log

@@ -1,8 +1,8 @@
 
 
-> @remotion/promo-pages@4.0.347 make /Users/jonathanburger/remotion/packages/promo-pages
+> @remotion/promo-pages@4.0.351 make /Users/jonathanburger/remotion/packages/promo-pages
 > bun --env-file=../.env.bundle bundle.ts
 
 ≈ tailwindcss v4.1.1
 
-Done in 26ms
+Done in 25ms

package/bundle.ts

@@ -26,6 +26,7 @@ const result = await Bun.build({
 	entrypoints: [
 		'./src/components/Homepage.tsx',
 		'./src/components/homepage/Pricing.tsx',
+		'./src/components/team.tsx',
 	],
 	format: 'esm',
 	external: [

package/dist/Homepage.js

@@ -19,7 +19,6 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 
 // ../core/dist/esm/index.mjs
 import { createContext } from "react";
-import React22 from "react";
 import React4 from "react";
 import { createContext as createContext2, useContext } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
@@ -33,11 +32,12 @@ import {
 import { forwardRef, useMemo as useMemo2 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 import { createContext as createContext3 } from "react";
-import React42, { useCallback as useCallback2, useMemo as useMemo22, useState as useState2 } from "react";
+import React32, { useCallback as useCallback2, useMemo as useMemo22, useState as useState2 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
 import { createContext as createContext4, useContext as useContext2, useEffect as useEffect2, useRef, useState as useState22 } from "react";
 import { createContext as createContext8, useContext as useContext6, useMemo as useMemo6 } from "react";
 import { useContext as useContext3, useState as useState3 } from "react";
+import React42 from "react";
 import { useContext as useContext5, useMemo as useMemo5 } from "react";
 import { createContext as createContext5 } from "react";
 import {
@@ -211,7 +211,7 @@ import React29 from "react";
 import React30, { createContext as createContext19 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import { jsx as jsx30 } from "react/jsx-runtime";
-import React32 from "react";
+import React322 from "react";
 import { useCallback as useCallback16 } from "react";
 import {
   useCallback as useCallback15,
@@ -709,7 +709,7 @@ var __defProp2, __export2 = (target, all) => {
     isReadOnlyStudio,
     isClientSideRendering: false
   };
-}, RemotionEnvironmentContext, originalCreateElement, componentsToAddStacksTo, enableSequenceStackTraces = () => {
+}, originalCreateElement, componentsToAddStacksTo, enableSequenceStackTraces = () => {
   if (!getRemotionEnvironment().isStudio) {
     return;
   }
@@ -726,7 +726,7 @@ var __defProp2, __export2 = (target, all) => {
       return Reflect.apply(target, thisArg, argArray);
     }
   });
-  React22.createElement = proxy;
+  React4.createElement = proxy;
 }, addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
   enableSequenceStackTraces();
@@ -739,7 +739,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.347", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.351", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -897,7 +897,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     setNonce(context.getNonce);
   }, [context]);
   return nonce;
-}, exports_timeline_position_state, useRemotionEnvironment = () => {
+}, exports_timeline_position_state, RemotionEnvironmentContext, useRemotionEnvironment = () => {
   const context = useContext3(RemotionEnvironmentContext);
   const [env] = useState3(() => getRemotionEnvironment());
   return context ?? env;
@@ -4149,6 +4149,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
   return useMemo19(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
+}, warnAboutTooHighVolume = (volume) => {
+  if (volume >= 100) {
+    throw new Error(`Volume was set to ${volume}, but regular volume is 1, not 100. Did you forget to divide by 100? Set a volume of less than 100 to dismiss this error.`);
+  }
 }, AudioForDevelopmentForwardRefFunction = (props, ref) => {
   const [initialShouldPreMountAudioElements] = useState14(props.shouldPreMountAudioTags);
   if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
@@ -4202,6 +4206,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     volume,
     mediaVolume
   });
+  warnAboutTooHighVolume(userPreferredVolume);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
     requestsVideoFrame: false
@@ -4345,6 +4350,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     frame: volumePropFrame,
     mediaVolume: 1
   });
+  warnAboutTooHighVolume(volume);
   useImperativeHandle6(ref, () => {
     return audioRef.current;
   }, []);
@@ -5358,6 +5364,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     volume,
     mediaVolume
   });
+  warnAboutTooHighVolume(userPreferredVolume);
   useMediaInTimeline({
     mediaRef: videoRef,
     volume,
@@ -5887,6 +5894,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     frame: volumePropsFrame,
     mediaVolume: 1
   });
+  warnAboutTooHighVolume(volume);
   useEffect21(() => {
     if (!props2.src) {
       throw new Error("No src passed");
@@ -6168,13 +6176,12 @@ var init_esm = __esm(() => {
     throw new Error(err.join(`
 `));
   }
-  RemotionEnvironmentContext = React4.createContext(null);
-  originalCreateElement = React22.createElement;
+  originalCreateElement = React4.createElement;
   componentsToAddStacksTo = [];
   IsPlayerContext = createContext2(false);
   AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);
   SequenceContext = createContext3(null);
-  SequenceManager = React42.createContext({
+  SequenceManager = React32.createContext({
     registerSequence: () => {
       throw new Error("SequenceManagerContext not initialized");
     },
@@ -6183,7 +6190,7 @@ var init_esm = __esm(() => {
     },
     sequences: []
   });
-  SequenceVisibilityToggleContext = React42.createContext({
+  SequenceVisibilityToggleContext = React32.createContext({
     hidden: {},
     setHidden: () => {
       throw new Error("SequenceVisibilityToggle not initialized");
@@ -6208,6 +6215,7 @@ var init_esm = __esm(() => {
     TimelineContext: () => TimelineContext,
     SetTimelineContext: () => SetTimelineContext
   });
+  RemotionEnvironmentContext = React42.createContext(null);
   CompositionManager = createContext5({
     compositions: [],
     folders: [],
@@ -6588,7 +6596,9 @@ var init_esm = __esm(() => {
     playbackLogging,
     timeValueRef,
     compositionSelectorRef,
-    RemotionEnvironmentContext
+    RemotionEnvironmentContext,
+    warnAboutTooHighVolume,
+    AudioForPreview
   };
   PERCENTAGE = NUMBER + "%";
   IsInsideSeriesContext = createContext19(false);
@@ -11784,7 +11794,7 @@ init_esm();
 init_esm();
 import { jsx as jsx35, jsxs as jsxs10 } from "react/jsx-runtime";
 import { jsx as jsx210, jsxs as jsxs23, Fragment } from "react/jsx-runtime";
-import React8 from "react";
+import React6 from "react";
 import { useContext as useContext210, useEffect as useEffect23, useState as useState20 } from "react";
 import { useContext as useContext33, useEffect as useEffect24 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
@@ -11836,7 +11846,7 @@ import { useMemo as useMemo72 } from "react";
 import { jsxs as jsxs72 } from "react/jsx-runtime";
 import { useMemo as useMemo82 } from "react";
 import { jsx as jsx93, jsxs as jsxs82, Fragment as Fragment2 } from "react/jsx-runtime";
-import React82 from "react";
+import React8 from "react";
 import { jsx as jsx103 } from "react/jsx-runtime";
 import React92, { useEffect as useEffect122 } from "react";
 import { jsx as jsx112 } from "react/jsx-runtime";
@@ -11847,7 +11857,6 @@ import { useCallback as useCallback122, useMemo as useMemo132, useState as useSt
 import { jsx as jsx132 } from "react/jsx-runtime";
 
 // ../core/dist/esm/no-react.mjs
-import React6 from "react";
 function interpolateFunction2(input, inputRange, outputRange, options) {
   const { extrapolateLeft, extrapolateRight, easing } = options;
   let result = input;
@@ -11947,7 +11956,6 @@ function interpolate2(input, inputRange, outputRange, options) {
     extrapolateRight
   });
 }
-var RemotionEnvironmentContext2 = React6.createContext(null);
 function truthy2(value) {
   return Boolean(value);
 }
@@ -12806,8 +12814,8 @@ var calculateOuter = ({
     overflow: overflowVisible ? "visible" : "hidden"
   };
 };
-var PlayerEventEmitterContext = React8.createContext(undefined);
-var ThumbnailEmitterContext = React8.createContext(undefined);
+var PlayerEventEmitterContext = React6.createContext(undefined);
+var ThumbnailEmitterContext = React6.createContext(undefined);
 
 class PlayerEmitter {
   listeners = {
@@ -14487,7 +14495,7 @@ var errorStyle = {
   width: "100%"
 };
 
-class ErrorBoundary extends React82.Component {
+class ErrorBoundary extends React8.Component {
   state = { hasError: null };
   static getDerivedStateFromError(error) {
     return { hasError: error };
@@ -20395,7 +20403,7 @@ var listOfRemotionPackages = [
   "@remotion/compositor",
   "@remotion/example-videos",
   "@remotion/whisper-web",
-  "@remotion/video",
+  "@remotion/media",
   "@remotion/web-renderer"
 ];
 function truthy3(value) {

package/dist/tailwind.css

@@ -60,6 +60,8 @@
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
     --text-5xl: 3rem;
@@ -68,7 +70,9 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --font-weight-black: 900;
+    --leading-tight: 1.25;
     --leading-snug: 1.375;
+    --leading-normal: 1.5;
     --leading-relaxed: 1.625;
     --radius-sm: 0.25rem;
     --radius-lg: 0.5rem;
@@ -127,6 +131,9 @@
   .z-10 {
     z-index: 10;
   }
+  .float-left {
+    float: left;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -175,6 +182,9 @@
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
@@ -187,9 +197,18 @@
   .mt-\[3px\] {
     margin-top: 3px;
   }
+  .mr-3 {
+    margin-right: calc(var(--spacing) * 3);
+  }
   .-mb-40 {
     margin-bottom: calc(var(--spacing) * -40);
   }
+  .mb-0 {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
@@ -259,12 +278,18 @@
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
+  .h-\[250px\] {
+    height: 250px;
+  }
   .h-auto {
     height: auto;
   }
@@ -295,12 +320,21 @@
   .w-\[30\%\] {
     width: 30%;
   }
+  .w-\[30px\] {
+    width: 30px;
+  }
+  .w-\[32px\] {
+    width: 32px;
+  }
   .w-\[90vw\] {
     width: 90vw;
   }
   .w-\[140px\] {
     width: 140px;
   }
+  .w-\[250px\] {
+    width: 250px;
+  }
   .w-\[500px\] {
     width: 500px;
   }
@@ -322,6 +356,9 @@
   .max-w-\[700px\] {
     max-width: 700px;
   }
+  .max-w-\[1000px\] {
+    max-width: 1000px;
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -423,6 +460,9 @@
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
+  .gap-12 {
+    gap: calc(var(--spacing) * 12);
+  }
   .self-center {
     align-self: center;
   }
@@ -450,6 +490,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-\[15px\] {
+    border-radius: 15px;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -616,6 +659,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-10 {
+    padding-top: calc(var(--spacing) * 10);
+  }
   .pt-20 {
     padding-top: calc(var(--spacing) * 20);
   }
@@ -647,6 +693,9 @@
     font-family: 'GTPlanar', sans-serif;
     font-feature-settings: 'ss03' on;
   }
+  .font-\[\'GTPlanar\'\] {
+    font-family: 'GTPlanar';
+  }
   .font-brand {
     font-family: 'GTPlanar', sans-serif;
   }
@@ -660,6 +709,10 @@
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
   .text-4xl {
     font-size: var(--text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height));
@@ -696,6 +749,10 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .leading-normal {
+    --tw-leading: var(--leading-normal);
+    line-height: var(--leading-normal);
+  }
   .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
@@ -704,6 +761,10 @@
     --tw-leading: var(--leading-snug);
     line-height: var(--leading-snug);
   }
+  .leading-tight {
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
   .font-black {
     --tw-font-weight: var(--font-weight-black);
     font-weight: var(--font-weight-black);
@@ -720,6 +781,9 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .text-balance {
+    text-wrap: balance;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -733,6 +797,9 @@
       }
     }
   }
+  .text-\[var\(--ifm-color-primary\)\] {
+    color: var(--ifm-color-primary);
+  }
   .text-\[var\(--subtitle\)\] {
     color: var(--subtitle);
   }
@@ -862,16 +929,31 @@
       margin-top: calc(var(--spacing) * 0);
     }
   }
+  .md\:mr-6 {
+    @media (width >= 48rem) {
+      margin-right: calc(var(--spacing) * 6);
+    }
+  }
   .md\:block {
     @media (width >= 48rem) {
       display: block;
     }
   }
+  .md\:h-8 {
+    @media (width >= 48rem) {
+      height: calc(var(--spacing) * 8);
+    }
+  }
   .md\:w-auto {
     @media (width >= 48rem) {
       width: auto;
     }
   }
+  .md\:flex-col {
+    @media (width >= 48rem) {
+      flex-direction: column;
+    }
+  }
   .md\:flex-row {
     @media (width >= 48rem) {
       flex-direction: row;
@@ -882,11 +964,22 @@
       align-items: center;
     }
   }
+  .md\:gap-4 {
+    @media (width >= 48rem) {
+      gap: calc(var(--spacing) * 4);
+    }
+  }
   .md\:overflow-x-visible {
     @media (width >= 48rem) {
       overflow-x: visible;
     }
   }
+  .md\:text-5xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-5xl);
+      line-height: var(--tw-leading, var(--text-5xl--line-height));
+    }
+  }
   .lg\:relative {
     @media (width >= 64rem) {
       position: relative;
@@ -917,6 +1010,11 @@
       margin-bottom: calc(var(--spacing) * 0);
     }
   }
+  .lg\:mb-4 {
+    @media (width >= 64rem) {
+      margin-bottom: calc(var(--spacing) * 4);
+    }
+  }
   .lg\:-ml-5 {
     @media (width >= 64rem) {
       margin-left: calc(var(--spacing) * -5);

package/dist/team.js

@@ -0,0 +1,277 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/TeamPicture.tsx
+import { jsx } from "react/jsx-runtime";
+var TeamPicture = () => {
+  return /* @__PURE__ */ jsx("div", {
+    className: "border-effect overflow-hidden mb-10 lg:mb-4",
+    children: /* @__PURE__ */ jsx("img", {
+      src: "/img/team/team.jpeg",
+      style: { aspectRatio: "1024 / 616" },
+      className: "w-full mb-0 float-left "
+    })
+  });
+};
+
+// src/components/team/TeamCards.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var LinkedInLogo = () => {
+  return /* @__PURE__ */ jsx2("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1000 1000",
+    className: "w-[30px]",
+    children: /* @__PURE__ */ jsx2("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"
+    })
+  });
+};
+var TwitterLogo = () => {
+  return /* @__PURE__ */ jsx2("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 530 570",
+    className: "w-[32px]",
+    children: /* @__PURE__ */ jsx2("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"
+    })
+  });
+};
+var GitHubLogo = () => {
+  return /* @__PURE__ */ jsx2("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1084 1084",
+    className: "w-[30px]",
+    children: /* @__PURE__ */ jsx2("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"
+    })
+  });
+};
+var EmailLogo = () => {
+  return /* @__PURE__ */ jsx2("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1299 1299",
+    className: "w-[30px]",
+    children: /* @__PURE__ */ jsx2("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"
+    })
+  });
+};
+var TeamMemberCard = ({
+  name,
+  title,
+  description,
+  image,
+  twitter,
+  linkedin,
+  github,
+  email
+}) => {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "flex-1 rounded-[15px] flex flex-col md:flex-row gap-2 md:gap-4",
+    children: [
+      /* @__PURE__ */ jsx2("img", {
+        src: image,
+        className: "w-[250px] h-[250px] rounded-xl border-effect"
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex flex-col border-effect px-4 py-3 bg-pane",
+        children: [
+          /* @__PURE__ */ jsx2("h2", {
+            className: "ext-[1.6em] mb-1 mt-3 text-[var(--ifm-color-primary)] font-brand",
+            children: name
+          }),
+          /* @__PURE__ */ jsx2("strong", {
+            className: "font-brand",
+            children: title
+          }),
+          /* @__PURE__ */ jsx2("div", {
+            className: "mt-5 mb-5 leading-normal font-brand",
+            children: description
+          }),
+          /* @__PURE__ */ jsx2("div", {
+            className: "flex-1"
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "gap-3 flex flex-row",
+            children: [
+              /* @__PURE__ */ jsx2("a", {
+                className: "no-underline text-inherit",
+                target: "_blank",
+                href: twitter,
+                children: /* @__PURE__ */ jsx2(TwitterLogo, {})
+              }),
+              /* @__PURE__ */ jsx2("a", {
+                className: "no-underline text-inherit",
+                target: "_blank",
+                href: linkedin,
+                children: /* @__PURE__ */ jsx2(LinkedInLogo, {})
+              }),
+              /* @__PURE__ */ jsx2("a", {
+                className: "no-underline text-inherit",
+                target: "_blank",
+                href: github,
+                children: /* @__PURE__ */ jsx2(GitHubLogo, {})
+              }),
+              /* @__PURE__ */ jsx2("a", {
+                className: "no-underline text-inherit",
+                target: "_blank",
+                href: `mailto:${email}`,
+                children: /* @__PURE__ */ jsx2(EmailLogo, {})
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+};
+var TeamCardsLayout = () => {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "flex flex-col gap-12 md:gap-4",
+    children: [
+      /* @__PURE__ */ jsx2(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"
+      }),
+      /* @__PURE__ */ jsx2(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"
+      }),
+      /* @__PURE__ */ jsx2(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"
+      })
+    ]
+  });
+};
+
+// src/components/team/TitleTeamCards.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var TitleTeamCards = () => {
+  return /* @__PURE__ */ jsxs2("div", {
+    children: [
+      /* @__PURE__ */ jsx3("h1", {
+        className: "font-brand",
+        children: "Team"
+      }),
+      /* @__PURE__ */ jsx3(TeamPicture, {}),
+      /* @__PURE__ */ jsx3(TeamCardsLayout, {}),
+      /* @__PURE__ */ jsx3("h1", {
+        className: "font-brand mt-8",
+        children: "Company"
+      }),
+      /* @__PURE__ */ jsxs2("p", {
+        className: "font-brand leading-normal",
+        children: [
+          "Wonder how we operate? If we are stable? Who is backing us? ",
+          /* @__PURE__ */ jsx3("br", {}),
+          "Check our our",
+          " ",
+          /* @__PURE__ */ jsx3("a", {
+            href: "/investors",
+            className: "font-brand no-underline text-brand",
+            children: "investors page"
+          }),
+          "!"
+        ]
+      })
+    ]
+  });
+};
+
+// src/components/team.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var AboutUsHeader = () => {
+  return /* @__PURE__ */ jsx4("div", {
+    className: "flex flex-row items-center md:flex-col pt-10",
+    children: /* @__PURE__ */ jsxs3("div", {
+      className: "flex-1",
+      children: [
+        /* @__PURE__ */ jsxs3("h1", {
+          className: "text-3xl font-bold font-['GTPlanar'] leading-tight max-w-[1000px] md:text-5xl",
+          children: [
+            /* @__PURE__ */ jsx4("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",
+              children: /* @__PURE__ */ jsx4("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"
+              })
+            }),
+            "The programmatic video dream",
+            " "
+          ]
+        }),
+        /* @__PURE__ */ jsx4("p", {
+          className: "leading-relaxed text-balance font-brand",
+          children: "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!"
+        })
+      ]
+    })
+  });
+};
+var container = {
+  maxWidth: 1000,
+  margin: "auto",
+  paddingLeft: 16,
+  paddingRight: 16
+};
+var TeamPage = () => {
+  return /* @__PURE__ */ jsx4("div", {
+    className: "bg-[var(--background)]",
+    children: /* @__PURE__ */ jsxs3("div", {
+      style: container,
+      children: [
+        /* @__PURE__ */ jsx4("br", {}),
+        /* @__PURE__ */ jsx4(AboutUsHeader, {}),
+        /* @__PURE__ */ jsx4("br", {}),
+        /* @__PURE__ */ jsx4(TitleTeamCards, {}),
+        /* @__PURE__ */ jsx4("br", {})
+      ]
+    })
+  });
+};
+export {
+  TeamPage,
+  AboutUsHeader
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/promo-pages",
-  "version": "4.0.347",
+  "version": "4.0.351",
   "publishConfig": {
     "access": "public"
   },
@@ -10,14 +10,14 @@
     "polished": "4.3.1",
     "zod": "3.22.3",
     "bun-plugin-tailwind": "0.0.15",
-    "@remotion/animated-emoji": "4.0.347",
-    "@remotion/lambda": "4.0.347",
-    "@remotion/lottie": "4.0.347",
-    "@remotion/paths": "4.0.347",
-    "create-video": "4.0.347",
-    "@remotion/shapes": "4.0.347",
-    "remotion": "4.0.347",
-    "@remotion/player": "4.0.347"
+    "@remotion/lottie": "4.0.351",
+    "@remotion/lambda": "4.0.351",
+    "@remotion/animated-emoji": "4.0.351",
+    "@remotion/player": "4.0.351",
+    "@remotion/shapes": "4.0.351",
+    "create-video": "4.0.351",
+    "remotion": "4.0.351",
+    "@remotion/paths": "4.0.351"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.1.0",
@@ -34,7 +34,7 @@
     "tailwind-merge": "2.5.2",
     "bun-plugin-tailwind": "0.0.13",
     "clsx": "2.1.1",
-    "@remotion/eslint-config-internal": "4.0.347"
+    "@remotion/eslint-config-internal": "4.0.351"
   },
   "repository": {
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/promo-pages"

package/server.ts

@@ -1,9 +1,11 @@
 import {serve} from 'bun';
-import homepage from './index.html';
+import homepage from './homepage.html';
+import team from './team.html';
 
 const server = serve({
 	routes: {
 		'/': homepage,
+		'/about': team,
 	},
 	development: true,
 	async fetch(req) {

package/src/components/TeamPicture.tsx

@@ -0,0 +1,11 @@
+export const TeamPicture = () => {
+	return (
+		<div className="border-effect overflow-hidden mb-10 lg:mb-4">
+			<img
+				src="/img/team/team.jpeg"
+				style={{aspectRatio: '1024 / 616'}}
+				className="w-full mb-0 float-left "
+			/>
+		</div>
+	);
+};

package/src/components/team/TeamCards.tsx

@@ -0,0 +1,167 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,22 @@
+.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

@@ -0,0 +1,51 @@
+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/team.tsx

@@ -0,0 +1,12 @@
+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/team.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Promo Pages</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/team.tsx"></script>
+	</body>
+</html>