@remotion/promo-pages 4.0.314 → 4.0.315

package/dist/components/homepage/BackgroundAnimation.js

@@ -44,7 +44,7 @@ export const BackgroundAnimation = () => {
         _style.innerHTML = css;
         document.head.appendChild(_style);
     }, [css]);
-    return (_jsx("div", { className: " 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", children: _jsxs("svg", { className: "translate-y-[-30%] lg:translate-y-[-50%]", viewBox: "0 0 1 1", style: {
+    return (_jsx("div", { className: " w-full h-full min-w-0 m-auto lg:relative lg:min-w-[700px] lg:max-w-[1200px] lg:ml-auto lg:left-auto pointer-events-none", children: _jsxs("svg", { className: "translate-y-[-30%] lg:translate-y-[-50%]", viewBox: "0 0 1 1", style: {
                 width: '100%',
                 position: 'absolute',
             }, children: [_jsx("path", { d: d, fill: "none", stroke: "var(--ifm-color-primary)", strokeLinecap: "round", className: "stroke-[0.04] lg:stroke-[0.035]", style: {

package/dist/components/homepage/CommunityStatsItems.js

@@ -30,7 +30,7 @@ export const PagesOfDocs = () => {
 };
 export const TemplatesAndExamples = () => (_jsxs(Pill, { className: "w-[30%] flex items-center flex-row", children: [_jsx(StatItemContent, { content: "35", width: "60px", fontSize: "2.7rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: "templates & examples", width: "135px", fontSize: "1.35rem", fontWeight: "bold" })] }));
 export const GitHubStars = () => {
-    return (_jsxs(Pill, { className: "w-[30%] flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 26 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.9951 0C13.4424 0 13.8507 0.24375 14.0451 0.632812L17.3799 7.25625L24.8271 8.31562C25.2646 8.37656 25.6292 8.67188 25.7653 9.07969C25.9014 9.4875 25.7896 9.92812 25.4785 10.2281L20.0778 15.3937L21.3514 22.6875C21.4243 23.1094 21.2444 23.5359 20.8799 23.7891C20.5153 24.0422 20.0389 24.0703 19.65 23.8688L12.9903 20.4375L6.34027 23.8641C5.94652 24.0656 5.47014 24.0375 5.11041 23.7844C4.75069 23.5312 4.56597 23.1047 4.63889 22.6828L5.9125 15.3891L0.511803 10.2281C0.195831 9.92812 0.0888863 9.48281 0.224997 9.07969C0.361108 8.67656 0.725692 8.38125 1.16319 8.31562L8.61041 7.25625L11.9451 0.632812C12.1444 0.24375 12.5479 0 12.9951 0ZM12.9951 3.70312L10.4431 8.775C10.2729 9.10781 9.94722 9.34219 9.56319 9.39844L3.8125 10.2141L7.98819 14.2031C8.25555 14.4609 8.38194 14.8266 8.31875 15.1875L7.33194 20.7984L12.4458 18.1641C12.791 17.9859 13.2042 17.9859 13.5444 18.1641L18.6583 20.7984L17.6764 15.1922C17.6132 14.8313 17.7347 14.4656 18.0069 14.2078L22.1826 10.2188L16.4319 9.39844C16.0528 9.34219 15.7222 9.1125 15.5521 8.775L12.9951 3.70312Z", fill: "var(--text-color)" }) }), width: "45px" }), _jsx(StatItemContent, { content: "21k", width: "80px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "GitHub stars", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));
+    return (_jsxs(Pill, { className: "w-[30%] flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 26 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.9951 0C13.4424 0 13.8507 0.24375 14.0451 0.632812L17.3799 7.25625L24.8271 8.31562C25.2646 8.37656 25.6292 8.67188 25.7653 9.07969C25.9014 9.4875 25.7896 9.92812 25.4785 10.2281L20.0778 15.3937L21.3514 22.6875C21.4243 23.1094 21.2444 23.5359 20.8799 23.7891C20.5153 24.0422 20.0389 24.0703 19.65 23.8688L12.9903 20.4375L6.34027 23.8641C5.94652 24.0656 5.47014 24.0375 5.11041 23.7844C4.75069 23.5312 4.56597 23.1047 4.63889 22.6828L5.9125 15.3891L0.511803 10.2281C0.195831 9.92812 0.0888863 9.48281 0.224997 9.07969C0.361108 8.67656 0.725692 8.38125 1.16319 8.31562L8.61041 7.25625L11.9451 0.632812C12.1444 0.24375 12.5479 0 12.9951 0ZM12.9951 3.70312L10.4431 8.775C10.2729 9.10781 9.94722 9.34219 9.56319 9.39844L3.8125 10.2141L7.98819 14.2031C8.25555 14.4609 8.38194 14.8266 8.31875 15.1875L7.33194 20.7984L12.4458 18.1641C12.791 17.9859 13.2042 17.9859 13.5444 18.1641L18.6583 20.7984L17.6764 15.1922C17.6132 14.8313 17.7347 14.4656 18.0069 14.2078L22.1826 10.2188L16.4319 9.39844C16.0528 9.34219 15.7222 9.1125 15.5521 8.775L12.9951 3.70312Z", fill: "var(--text-color)" }) }), width: "45px" }), _jsx(StatItemContent, { content: "22k", width: "80px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "GitHub stars", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));
 };
 export const DiscordMembers = () => {
     return (_jsx(Pill, { className: 'w-[30%]', children: _jsxs("div", { style: {

package/dist/components/homepage/Demo/DemoRender.d.ts

@@ -22,18 +22,18 @@ declare const data: z.ZodObject<{
             class: string;
         }[];
         countryLabel: string;
-        temperatureInCelsius: number;
-        date: string | number;
         repos: string[];
+        date: string | number;
+        temperatureInCelsius: number;
     }, {
         countryPaths: {
             d: string;
             class: string;
         }[];
         countryLabel: string;
-        temperatureInCelsius: number;
-        date: string | number;
         repos: string[];
+        date: string | number;
+        temperatureInCelsius: number;
     }>;
     location: z.ZodObject<{
         country: z.ZodString;
@@ -41,13 +41,13 @@ declare const data: z.ZodObject<{
         latitude: z.ZodUnion<[z.ZodNumber, z.ZodString]>;
         longitude: z.ZodUnion<[z.ZodNumber, z.ZodString]>;
     }, "strip", z.ZodTypeAny, {
-        city: string;
         country: string;
+        city: string;
         latitude: string | number;
         longitude: string | number;
     }, {
-        city: string;
         country: string;
+        city: string;
         latitude: string | number;
         longitude: string | number;
     }>;
@@ -55,44 +55,44 @@ declare const data: z.ZodObject<{
     theme: z.ZodEnum<["light", "dark"]>;
     cardOrder: z.ZodArray<z.ZodNumber, "many">;
 }, "strip", z.ZodTypeAny, {
-    theme: "light" | "dark";
-    emojiIndex: number;
+    theme: "dark" | "light";
     trending: {
         countryPaths: {
             d: string;
             class: string;
         }[];
         countryLabel: string;
-        temperatureInCelsius: number;
-        date: string | number;
         repos: string[];
+        date: string | number;
+        temperatureInCelsius: number;
     };
     location: {
-        city: string;
         country: string;
+        city: string;
         latitude: string | number;
         longitude: string | number;
     };
+    emojiIndex: number;
     cardOrder: number[];
 }, {
-    theme: "light" | "dark";
-    emojiIndex: number;
+    theme: "dark" | "light";
     trending: {
         countryPaths: {
             d: string;
             class: string;
         }[];
         countryLabel: string;
-        temperatureInCelsius: number;
-        date: string | number;
         repos: string[];
+        date: string | number;
+        temperatureInCelsius: number;
     };
     location: {
-        city: string;
         country: string;
+        city: string;
         latitude: string | number;
         longitude: string | number;
     };
+    emojiIndex: number;
     cardOrder: number[];
 }>;
 export declare const RenderButton: React.FC<{

package/dist/components/homepage/Demo/math.d.ts

@@ -7,4 +7,4 @@ export declare const cardHeight: number;
 export declare const cardWidth: number;
 export declare const getPositionForIndex: (index: number) => Position;
 export declare const getInitialPositions: () => Position[];
-export declare const getIndexFromPosition: (clientX: number, clientY: number) => 0 | 2 | 3 | 1 | undefined;
+export declare const getIndexFromPosition: (clientX: number, clientY: number) => 0 | 1 | 2 | 3 | undefined;

package/dist/components/homepage/FreePricing.js

@@ -74,7 +74,7 @@ export const CompanyPricing = () => {
                                 maximumFractionDigits: 0,
                             }).format(SEAT_PRICE * devSeatCount)] })] }), _jsx("div", { style: { height: 14 } }), _jsxs("div", { className: 'flex flex-row items-center', children: [_jsxs("div", { style: textUnitWrapper, children: [_jsx("div", { className: 'fontbrand font-bold text-lg', children: "Cloud Rendering Units" }), _jsxs("div", { className: 'text-muted fontbrand text-sm', children: ["Allows for ", rendersPerMonth, ' ', _jsx("a", { href: "https://www.remotion.dev/docs/compare-ssr", className: "underline underline-offset-4 text-inherit", children: "self-hosted renders per month" }), ' ', "each"] })] }), _jsx("div", { style: { flex: 3 } }), _jsx(Counter, { count: cloudUnitCount, setCount: setCloudUnitCount, minCount: 0 }), _jsxs(SmallPriceTag, { children: ["$", new Intl.NumberFormat('en-US', {
                                 maximumFractionDigits: 0,
-                            }).format(RENDER_UNIT_PRICE * cloudUnitCount)] })] }), _jsx("div", { style: { height: 14 } }), _jsxs("div", { className: 'flex flex-row items-center', children: [_jsxs("div", { style: textUnitWrapper, children: [_jsx("div", { className: 'fontbrand font-bold text-lg', children: "WebCodecs Conversion Units" }), _jsxs("div", { className: 'text-muted fontbrand text-sm', children: ["Allows for", ' ', _jsxs("a", { className: "underline underline-offset-4 text-inherit", href: "https://remotion.dev/webcodecs", children: [conversionsPerMonth, " client-side video conversions", ' '] })] })] }), _jsx("div", { style: { flex: 3 } }), _jsx(Counter, { count: webcodecsUnits, setCount: setWebcodecsUnits, minCount: 0 }), _jsxs(SmallPriceTag, { children: ["$", new Intl.NumberFormat('en-US', {
+                            }).format(RENDER_UNIT_PRICE * cloudUnitCount)] })] }), _jsx("div", { style: { height: 14 } }), _jsxs("div", { className: 'flex flex-row items-center', children: [_jsxs("div", { style: textUnitWrapper, children: [_jsx("div", { className: 'fontbrand font-bold text-lg', children: "WebCodecs Creation Units" }), _jsxs("div", { className: 'text-muted fontbrand text-sm', children: ["Allows for", ' ', _jsxs("a", { className: "underline underline-offset-4 text-inherit", href: "https://remotion.dev/webcodecs", children: [conversionsPerMonth, " client-side video creations", ' '] })] })] }), _jsx("div", { style: { flex: 3 } }), _jsx(Counter, { count: webcodecsUnits, setCount: setWebcodecsUnits, minCount: 0 }), _jsxs(SmallPriceTag, { children: ["$", new Intl.NumberFormat('en-US', {
                                 maximumFractionDigits: 0,
                             }).format(RENDER_UNIT_PRICE * webcodecsUnits)] })] }), _jsx("div", { style: { height: 20 } }), _jsx("div", { className: 'flex flex-row justify-end', children: _jsxs("div", { style: { ...textUnitWrapper, alignItems: 'flex-end' }, children: [_jsxs(PriceTag, { children: [totalPriceString, "/mo"] }), _jsx(BottomInfo, { "data-visible": totalPrice <= 100, className: "opacity-0 data-[visible=true]:opacity-100 transition-opacity", children: "The minimum is $100 per month" })] }) })] }));
 };

package/dist/components/homepage/GitHubButton.js

@@ -3,5 +3,5 @@ const GithubIcon = () => {
     return (_jsx("svg", { viewBox: "0 0 496 512", style: { height: 24, marginRight: 8 }, children: _jsx("path", { fill: "currentColor", d: "M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" }) }));
 };
 export const GithubButton = () => {
-    return (_jsxs("div", { className: "flex flex-row items-center text-base", children: [_jsx(GithubIcon, {}), " ", _jsx("span", { children: "GitHub" }), ' ', _jsx("div", { className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center", children: '21k' })] }));
+    return (_jsxs("div", { className: "flex flex-row items-center text-base", children: [_jsx(GithubIcon, {}), " ", _jsx("span", { children: "GitHub" }), ' ', _jsx("div", { className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center", children: '22k' })] }));
 };

package/dist/components/homepage/MoreVideoPowerSection.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MoreVideoPowerSection: React.FC;

package/dist/components/homepage/MoreVideoPowerSection.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StepTitle = ({ children }) => {
+    return (_jsx("div", { className: "text-left text-xl font-semibold fontbrand", children: children }));
+};
+const Subtitle = ({ children }) => {
+    return (_jsx("div", { className: "text-left text-base fontbrand text-[var(--subtitle)]", children: children }));
+};
+const Pane = ({ children, className }) => {
+    return (_jsx("div", { className: `border-effect bg-pane flex-1 flex flex-col ${className || ''}`, children: children }));
+};
+const FeatureCard = ({ title, subtitle, image, link }) => {
+    return (_jsxs("a", { href: link, className: "group lg:border-r-2 border-b lg:border-b-0 border-[var(--border)] cursor-pointer hover:bg-[var(--hover)] transition-colors no-underline text-inherit", children: [_jsx("div", { className: "relative", children: _jsx("img", { src: image, alt: title, className: "w-full h-auto" }) }), _jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(StepTitle, { children: title }), _jsx("svg", { width: "16", viewBox: "0 0 448 512", fill: "currentColor", className: "opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx("path", { d: "M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" }) })] }), _jsx(Subtitle, { children: subtitle }), _jsx("br", {}), _jsx("div", { className: "flex-1" })] })] }));
+};
+export const MoreVideoPowerSection = () => {
+    return (_jsx("div", { className: "w-full", children: _jsx(Pane, { className: "overflow-hidden", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 h-full", children: [_jsx(FeatureCard, { title: "Media Parser", subtitle: "A new multimedia library for the web", image: "/img/media-parser.png", link: "/media-parser" }), _jsx(FeatureCard, { title: "WebCodecs", subtitle: "Read, process, transform and create videos on the frontend", image: "/img/webcodecs.png", link: "/webcodecs" }), _jsx(FeatureCard, { title: "Recorder", subtitle: "Produce engaging screencasts end-to-end in JavaScript", image: "/img/recorder.png", link: "/recorder" })] }) }) }));
+};

package/dist/tailwind.css

@@ -264,6 +264,9 @@
   .h-\[600px\] {
     height: 600px;
   }
+  .h-auto {
+    height: auto;
+  }
   .h-full {
     height: 100%;
   }
@@ -362,6 +365,9 @@
   .grid-flow-col {
     grid-auto-flow: column;
   }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
   .grid-rows-1 {
     grid-template-rows: repeat(1, minmax(0, 1fr));
   }
@@ -474,6 +480,10 @@
     border-style: var(--tw-border-style);
     border-width: 5px;
   }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
   .border-b-2 {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
@@ -494,6 +504,9 @@
     --tw-border-style: solid;
     border-style: solid;
   }
+  .border-\[var\(--border\)\] {
+    border-color: var(--border);
+  }
   .border-black {
     border-color: var(--color-black);
   }
@@ -563,6 +576,9 @@
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
   .p-5 {
     padding: calc(var(--spacing) * 5);
   }
@@ -775,6 +791,20 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .group-hover\:opacity-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
+  .hover\:bg-\[var\(--hover\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--hover);
+      }
+    }
+  }
   .hover\:text-brand {
     &:hover {
       @media (hover: hover) {
@@ -892,6 +922,11 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .lg\:grid-cols-3 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .lg\:flex-row {
     @media (width >= 64rem) {
       flex-direction: row;
@@ -912,6 +947,18 @@
       justify-content: flex-end;
     }
   }
+  .lg\:border-r-2 {
+    @media (width >= 64rem) {
+      border-right-style: var(--tw-border-style);
+      border-right-width: 2px;
+    }
+  }
+  .lg\:border-b-0 {
+    @media (width >= 64rem) {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+  }
   .lg\:stroke-\[0\.035\] {
     @media (width >= 64rem) {
       stroke-width: 0.035;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/promo-pages",
-  "version": "4.0.314",
+  "version": "4.0.315",
   "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.314",
-    "@remotion/lambda": "4.0.314",
-    "@remotion/paths": "4.0.314",
-    "@remotion/player": "4.0.314",
-    "@remotion/shapes": "4.0.314",
-    "create-video": "4.0.314",
-    "@remotion/lottie": "4.0.314",
-    "remotion": "4.0.314"
+    "@remotion/lottie": "4.0.315",
+    "@remotion/lambda": "4.0.315",
+    "@remotion/player": "4.0.315",
+    "@remotion/animated-emoji": "4.0.315",
+    "@remotion/shapes": "4.0.315",
+    "@remotion/paths": "4.0.315",
+    "remotion": "4.0.315",
+    "create-video": "4.0.315"
   },
   "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.314"
+    "@remotion/eslint-config-internal": "4.0.315"
   },
   "repository": {
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/promo-pages"

package/src/components/Homepage.tsx

@@ -9,6 +9,7 @@ import EvaluateRemotionSection from './homepage/EvaluateRemotion';
 import {IfYouKnowReact} from './homepage/IfYouKnowReact';
 import type {ColorMode} from './homepage/layout/use-color-mode';
 import {ColorModeProvider} from './homepage/layout/use-color-mode';
+import {MoreVideoPowerSection} from './homepage/MoreVideoPowerSection';
 import {NewsletterButton} from './homepage/NewsletterButton';
 import {Pricing} from './homepage/Pricing';
 import {RealMP4Videos} from './homepage/RealMp4Videos';
@@ -69,6 +70,11 @@ export const NewLanding: React.FC<{
 						<br />
 						<br />
 						<br />
+						<SectionTitle>Even more video power to developers</SectionTitle>
+						<MoreVideoPowerSection />
+						<br />
+						<br />
+						<br />
 						<NewsletterButton />
 						<br />
 						<br />

package/src/components/homepage/MoreVideoPowerSection.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+const StepTitle: React.FC<{
+	readonly children: React.ReactNode;
+}> = ({children}) => {
+	return (
+		<div className="text-left text-xl font-semibold fontbrand">{children}</div>
+	);
+};
+
+const Subtitle: React.FC<{
+	readonly children: React.ReactNode;
+}> = ({children}) => {
+	return (
+		<div className="text-left text-base fontbrand text-[var(--subtitle)]">
+			{children}
+		</div>
+	);
+};
+
+const Pane: React.FC<{
+	readonly children: React.ReactNode;
+	readonly className?: string;
+}> = ({children, className}) => {
+	return (
+		<div
+			className={`border-effect bg-pane flex-1 flex flex-col ${className || ''}`}
+		>
+			{children}
+		</div>
+	);
+};
+
+const FeatureCard: React.FC<{
+	readonly title: string;
+	readonly subtitle: string;
+	readonly image: string;
+	readonly link: string;
+}> = ({title, subtitle, image, link}) => {
+	return (
+		<a
+			href={link}
+			className="group lg:border-r-2 border-b lg:border-b-0 border-[var(--border)] cursor-pointer hover:bg-[var(--hover)] transition-colors no-underline text-inherit"
+		>
+			<div className="relative">
+				<img src={image} alt={title} className="w-full h-auto" />
+			</div>
+			<div className="p-4">
+				<div className="flex items-center gap-2">
+					<StepTitle>{title}</StepTitle>
+					<svg
+						width="16"
+						viewBox="0 0 448 512"
+						fill="currentColor"
+						className="opacity-0 group-hover:opacity-100 transition-opacity"
+					>
+						<path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
+					</svg>
+				</div>
+				<Subtitle>{subtitle}</Subtitle>
+				<br />
+				<div className="flex-1" />
+			</div>
+		</a>
+	);
+};
+
+export const MoreVideoPowerSection: React.FC = () => {
+	return (
+		<div className="w-full">
+			<Pane className="overflow-hidden">
+				<div className="grid grid-cols-1 lg:grid-cols-3 h-full">
+					<FeatureCard
+						title="Media Parser"
+						subtitle="A new multimedia library for the web"
+						image="/img/media-parser.png"
+						link="/media-parser"
+					/>
+					<FeatureCard
+						title="WebCodecs"
+						subtitle="Read, process, transform and create videos on the frontend"
+						image="/img/webcodecs.png"
+						link="/webcodecs"
+					/>
+					<FeatureCard
+						title="Recorder"
+						subtitle="Produce engaging screencasts end-to-end in JavaScript"
+						image="/img/recorder.png"
+						link="/recorder"
+					/>
+				</div>
+			</Pane>
+		</div>
+	);
+};

package/src/components/homepage/NewsletterButton.tsx

@@ -44,7 +44,7 @@ export const NewsletterButton: React.FC<{}> = () => {
 		<div>
 			<div className="flex flex-col">
 				<div className={'w-full'}>
-					<div className={'border-effect bg-pane flex flex-col flex-1 p-5'}>
+					<div className={'flex flex-col flex-1'}>
 						<div className={'text-2xl font-bold fontbrand'}>Newsletter</div>
 						<form
 							onSubmit={handleSubmit}