@remotion/promo-pages 4.0.315 → 4.0.318

package/dist/homepage/Pricing.js

@@ -1,3 +1,14 @@
+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) {
@@ -1384,32 +1395,39 @@ var buttonContainer = {
 var Counter = ({
   count,
   setCount,
-  minCount = 0
+  minCount = 0,
+  step = 1
 }) => {
   const decrement = () => {
     if (count > minCount) {
-      setCount(count - 1);
+      setCount(Math.max(minCount, count - step));
     }
   };
   const increment = () => {
-    setCount(count + 1);
+    setCount(count + step);
   };
   return /* @__PURE__ */ jsxs("div", {
     style: container,
-    className: cn("border-effect w-[110px] text-text"),
+    className: cn("border-effect w-[140px] text-text"),
     children: [
       /* @__PURE__ */ jsx("input", {
-        className: "fontbrand text-2xl font-medium min-w-[60px] border-0 text-end bg-transparent outline-0 text-text",
+        className: "fontbrand text-2xl font-medium min-w-[80px] border-0 text-end bg-transparent outline-0 text-text",
         type: "number",
         onClick: (e) => e.currentTarget.select(),
         value: count,
         onChange: (e) => {
           if (e.target.value.trim() === "") {
-            setCount(1);
+            setCount(step === 1 ? 1 : minCount);
             return;
           }
-          const max = Math.max(parseInt(e.target.value, 10), 1);
-          setCount(max);
+          const inputValue = parseInt(e.target.value, 10);
+          const validValue = Math.max(inputValue, minCount);
+          if (step > 1) {
+            const roundedValue = Math.round(validValue / step) * step;
+            setCount(Math.max(roundedValue, minCount));
+          } else {
+            setCount(validValue);
+          }
         }
       }),
       /* @__PURE__ */ jsxs("div", {
@@ -1565,7 +1583,7 @@ var PriceTag = ({ children }) => {
 };
 var SmallPriceTag = ({ children }) => {
   return /* @__PURE__ */ jsx4("div", {
-    className: "fontbrand text-2xl font-medium  w-auto min-w-[80px] text-right shrink-0 ml-4",
+    className: "fontbrand text-2xl font-medium  w-auto min-w-[80px] text-right shrink-0",
     children
   });
 };
@@ -1666,10 +1684,14 @@ var EnterpriseLicense = () => {
 var SEAT_PRICE = 25;
 var RENDER_UNIT_PRICE = 10;
 var WEBCODECS_UNIT_PRICE = 10;
+var icon = {
+  height: 16,
+  marginLeft: 4
+};
 var CompanyPricing = () => {
   const [devSeatCount, setDevSeatCount] = React2.useState(1);
-  const [cloudUnitCount, setCloudUnitCount] = React2.useState(1);
-  const [webcodecsUnits, setWebcodecsUnits] = React2.useState(1);
+  const [cloudRenders, setCloudRenders] = React2.useState(1000);
+  const [creations, setCreations] = React2.useState(1000);
   const formatPrice = useCallback((price) => {
     const formatter = new Intl.NumberFormat("en-US", {
       style: "currency",
@@ -1679,23 +1701,11 @@ var CompanyPricing = () => {
     return formatter.format(price);
   }, []);
   const totalPrice = useMemo(() => {
-    return Math.max(100, devSeatCount * SEAT_PRICE + cloudUnitCount * RENDER_UNIT_PRICE + webcodecsUnits * WEBCODECS_UNIT_PRICE);
-  }, [cloudUnitCount, devSeatCount, webcodecsUnits]);
+    return Math.max(100, devSeatCount * SEAT_PRICE + cloudRenders / 1000 * RENDER_UNIT_PRICE + creations / 1000 * WEBCODECS_UNIT_PRICE);
+  }, [cloudRenders, devSeatCount, creations]);
   const totalPriceString = useMemo(() => {
     return formatPrice(totalPrice);
   }, [formatPrice, totalPrice]);
-  const rendersPerMonth = useMemo(() => {
-    const formatter = new Intl.NumberFormat("en-US", {
-      maximumFractionDigits: 0
-    });
-    return formatter.format(cloudUnitCount * 1000);
-  }, [cloudUnitCount]);
-  const conversionsPerMonth = useMemo(() => {
-    const formatter = new Intl.NumberFormat("en-US", {
-      maximumFractionDigits: 0
-    });
-    return formatter.format(webcodecsUnits * 1000);
-  }, [webcodecsUnits]);
   return /* @__PURE__ */ jsxs4(Container, {
     children: [
       /* @__PURE__ */ jsx4(Audience, {
@@ -1727,7 +1737,7 @@ var CompanyPricing = () => {
         style: { height: 30 }
       }),
       /* @__PURE__ */ jsxs4("div", {
-        className: "flex flex-row items-center",
+        className: "flex flex-col md:flex-row md:items-center",
         children: [
           /* @__PURE__ */ jsxs4("div", {
             style: textUnitWrapper,
@@ -1743,19 +1753,25 @@ var CompanyPricing = () => {
             ]
           }),
           /* @__PURE__ */ jsx4("div", {
-            style: { flex: 3 }
-          }),
-          /* @__PURE__ */ jsx4(Counter, {
-            count: devSeatCount,
-            setCount: setDevSeatCount,
-            minCount: 1
+            style: { flex: 3 },
+            className: "hidden md:block"
           }),
-          /* @__PURE__ */ jsxs4(SmallPriceTag, {
+          /* @__PURE__ */ jsxs4("div", {
+            className: "flex flex-row items-center justify-between mt-3 md:mt-0",
             children: [
-              "$",
-              new Intl.NumberFormat("en-US", {
-                maximumFractionDigits: 0
-              }).format(SEAT_PRICE * devSeatCount)
+              /* @__PURE__ */ jsx4(Counter, {
+                count: devSeatCount,
+                setCount: setDevSeatCount,
+                minCount: 1
+              }),
+              /* @__PURE__ */ jsxs4(SmallPriceTag, {
+                children: [
+                  "$",
+                  new Intl.NumberFormat("en-US", {
+                    maximumFractionDigits: 0
+                  }).format(SEAT_PRICE * devSeatCount)
+                ]
+              })
             ]
           })
         ]
@@ -1764,46 +1780,46 @@ var CompanyPricing = () => {
         style: { height: 14 }
       }),
       /* @__PURE__ */ jsxs4("div", {
-        className: "flex flex-row items-center",
+        className: "flex flex-col md:flex-row md:items-center",
         children: [
           /* @__PURE__ */ jsxs4("div", {
             style: textUnitWrapper,
             children: [
               /* @__PURE__ */ jsx4("div", {
                 className: "fontbrand font-bold text-lg",
-                children: "Cloud Rendering Units"
+                children: "Server renders"
               }),
-              /* @__PURE__ */ jsxs4("div", {
+              /* @__PURE__ */ jsx4("div", {
                 className: "text-muted fontbrand text-sm",
-                children: [
-                  "Allows for ",
-                  rendersPerMonth,
-                  " ",
-                  /* @__PURE__ */ jsx4("a", {
-                    href: "https://www.remotion.dev/docs/compare-ssr",
-                    className: "underline underline-offset-4 text-inherit",
-                    children: "self-hosted renders per month"
-                  }),
-                  " ",
-                  "each"
-                ]
+                children: /* @__PURE__ */ jsx4("a", {
+                  href: "https://www.remotion.dev/docs/compare-ssr",
+                  className: "underline underline-offset-4 text-inherit",
+                  children: "Renders per month (self-hosted)"
+                })
               })
             ]
           }),
           /* @__PURE__ */ jsx4("div", {
-            style: { flex: 3 }
-          }),
-          /* @__PURE__ */ jsx4(Counter, {
-            count: cloudUnitCount,
-            setCount: setCloudUnitCount,
-            minCount: 0
+            style: { flex: 3 },
+            className: "hidden md:block"
           }),
-          /* @__PURE__ */ jsxs4(SmallPriceTag, {
+          /* @__PURE__ */ jsxs4("div", {
+            className: "flex flex-row items-center justify-between mt-3 md:mt-0",
             children: [
-              "$",
-              new Intl.NumberFormat("en-US", {
-                maximumFractionDigits: 0
-              }).format(RENDER_UNIT_PRICE * cloudUnitCount)
+              /* @__PURE__ */ jsx4(Counter, {
+                count: cloudRenders,
+                setCount: setCloudRenders,
+                minCount: 0,
+                step: 1000
+              }),
+              /* @__PURE__ */ jsxs4(SmallPriceTag, {
+                children: [
+                  "$",
+                  new Intl.NumberFormat("en-US", {
+                    maximumFractionDigits: 0
+                  }).format(cloudRenders / 1000 * RENDER_UNIT_PRICE)
+                ]
+              })
             ]
           })
         ]
@@ -1812,47 +1828,46 @@ var CompanyPricing = () => {
         style: { height: 14 }
       }),
       /* @__PURE__ */ jsxs4("div", {
-        className: "flex flex-row items-center",
+        className: "flex flex-col md:flex-row md:items-center",
         children: [
           /* @__PURE__ */ jsxs4("div", {
             style: textUnitWrapper,
             children: [
               /* @__PURE__ */ jsx4("div", {
                 className: "fontbrand font-bold text-lg",
-                children: "WebCodecs Creation Units"
+                children: "WebCodecs video creations"
               }),
-              /* @__PURE__ */ jsxs4("div", {
+              /* @__PURE__ */ jsx4("div", {
                 className: "text-muted fontbrand text-sm",
-                children: [
-                  "Allows for",
-                  " ",
-                  /* @__PURE__ */ jsxs4("a", {
-                    className: "underline underline-offset-4 text-inherit",
-                    href: "https://remotion.dev/webcodecs",
-                    children: [
-                      conversionsPerMonth,
-                      " client-side video creations",
-                      " "
-                    ]
-                  })
-                ]
+                children: /* @__PURE__ */ jsx4("a", {
+                  className: "underline underline-offset-4 text-inherit",
+                  href: "https://remotion.dev/webcodecs",
+                  children: "Client-side video creations per month"
+                })
               })
             ]
           }),
           /* @__PURE__ */ jsx4("div", {
-            style: { flex: 3 }
-          }),
-          /* @__PURE__ */ jsx4(Counter, {
-            count: webcodecsUnits,
-            setCount: setWebcodecsUnits,
-            minCount: 0
+            style: { flex: 3 },
+            className: "hidden md:block"
           }),
-          /* @__PURE__ */ jsxs4(SmallPriceTag, {
+          /* @__PURE__ */ jsxs4("div", {
+            className: "flex flex-row items-center justify-between mt-3 md:mt-0",
             children: [
-              "$",
-              new Intl.NumberFormat("en-US", {
-                maximumFractionDigits: 0
-              }).format(RENDER_UNIT_PRICE * webcodecsUnits)
+              /* @__PURE__ */ jsx4(Counter, {
+                count: creations,
+                setCount: setCreations,
+                minCount: 0,
+                step: 1000
+              }),
+              /* @__PURE__ */ jsxs4(SmallPriceTag, {
+                children: [
+                  "$",
+                  new Intl.NumberFormat("en-US", {
+                    maximumFractionDigits: 0
+                  }).format(creations / 1000 * WEBCODECS_UNIT_PRICE)
+                ]
+              })
             ]
           })
         ]
@@ -1878,6 +1893,32 @@ var CompanyPricing = () => {
             })
           ]
         })
+      }),
+      /* @__PURE__ */ jsx4("div", {
+        className: "flex flex-row justify-end mt-4",
+        children: /* @__PURE__ */ jsx4("div", {
+          style: {
+            ...textUnitWrapper,
+            alignItems: "flex-end"
+          },
+          children: /* @__PURE__ */ jsxs4("a", {
+            href: "https://remotion.pro/dashboard",
+            className: "font-brand text-brand flex flex-row items-center gap-1 no-underline",
+            children: [
+              "Buy now",
+              " ",
+              /* @__PURE__ */ jsx4("svg", {
+                style: icon,
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 448 512",
+                children: /* @__PURE__ */ jsx4("path", {
+                  fill: "currentColor",
+                  d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"
+                })
+              })
+            ]
+          })
+        })
       })
     ]
   });

package/dist/tailwind.css

@@ -70,6 +70,7 @@
     --font-weight-black: 900;
     --leading-snug: 1.375;
     --leading-relaxed: 1.625;
+    --radius-sm: 0.25rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -153,32 +154,38 @@
   .-mt-2 {
     margin-top: calc(var(--spacing) * -2);
   }
-  .-mt-10 {
-    margin-top: calc(var(--spacing) * -10);
+  .-mt-4 {
+    margin-top: calc(var(--spacing) * -4);
   }
   .-mt-20 {
     margin-top: calc(var(--spacing) * -20);
   }
-  .mt-1 {
-    margin-top: calc(var(--spacing) * 1);
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
   }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
   .mt-20 {
     margin-top: calc(var(--spacing) * 20);
   }
+  .mt-40 {
+    margin-top: calc(var(--spacing) * 40);
+  }
   .mt-\[3px\] {
     margin-top: 3px;
   }
-  .-mb-20 {
-    margin-bottom: calc(var(--spacing) * -20);
-  }
-  .-mb-50 {
-    margin-bottom: calc(var(--spacing) * -50);
+  .-mb-40 {
+    margin-bottom: calc(var(--spacing) * -40);
   }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
@@ -243,27 +250,18 @@
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
-  .h-7 {
-    height: calc(var(--spacing) * 7);
-  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
-  .h-10 {
-    height: calc(var(--spacing) * 10);
-  }
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
-  .h-\[550px\] {
-    height: 550px;
-  }
-  .h-\[600px\] {
-    height: 600px;
-  }
   .h-auto {
     height: auto;
   }
@@ -297,15 +295,15 @@
   .w-\[90vw\] {
     width: 90vw;
   }
-  .w-\[110px\] {
-    width: 110px;
+  .w-\[140px\] {
+    width: 140px;
+  }
+  .w-\[500px\] {
+    width: 500px;
   }
   .w-\[550px\] {
     width: 550px;
   }
-  .w-\[600px\] {
-    width: 600px;
-  }
   .w-auto {
     width: auto;
   }
@@ -324,9 +322,6 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
-  .min-w-\[60px\] {
-    min-width: 60px;
-  }
   .min-w-\[80px\] {
     min-width: 80px;
   }
@@ -374,9 +369,6 @@
   .flex-col {
     flex-direction: column;
   }
-  .flex-col-reverse {
-    flex-direction: column-reverse;
-  }
   .flex-row {
     flex-direction: row;
   }
@@ -407,6 +399,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -419,6 +414,9 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
@@ -455,6 +453,9 @@
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -582,6 +583,9 @@
   .p-5 {
     padding: calc(var(--spacing) * 5);
   }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -594,8 +598,8 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
-  .pt-8 {
-    padding-top: calc(var(--spacing) * 8);
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
   }
   .pt-20 {
     padding-top: calc(var(--spacing) * 20);
@@ -606,9 +610,6 @@
   .pr-5 {
     padding-right: calc(var(--spacing) * 5);
   }
-  .pb-6 {
-    padding-bottom: calc(var(--spacing) * 6);
-  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -631,6 +632,9 @@
     font-family: 'GTPlanar', sans-serif;
     font-feature-settings: 'ss03' on;
   }
+  .font-brand {
+    font-family: 'GTPlanar', sans-serif;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -669,6 +673,10 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .leading-6 {
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -834,11 +842,31 @@
       opacity: 100%;
     }
   }
+  .md\:mt-0 {
+    @media (width >= 48rem) {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
+  .md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
   .md\:w-auto {
     @media (width >= 48rem) {
       width: auto;
     }
   }
+  .md\:flex-row {
+    @media (width >= 48rem) {
+      flex-direction: row;
+    }
+  }
+  .md\:items-center {
+    @media (width >= 48rem) {
+      align-items: center;
+    }
+  }
   .md\:overflow-x-visible {
     @media (width >= 48rem) {
       overflow-x: visible;
@@ -864,6 +892,11 @@
       margin-top: calc(var(--spacing) * 0);
     }
   }
+  .lg\:mt-30 {
+    @media (width >= 64rem) {
+      margin-top: calc(var(--spacing) * 30);
+    }
+  }
   .lg\:mb-0 {
     @media (width >= 64rem) {
       margin-bottom: calc(var(--spacing) * 0);
@@ -899,11 +932,6 @@
       min-width: 700px;
     }
   }
-  .lg\:flex-1 {
-    @media (width >= 64rem) {
-      flex: 1;
-    }
-  }
   .lg\:-translate-x-8 {
     @media (width >= 64rem) {
       --tw-translate-x: calc(var(--spacing) * -8);
@@ -932,19 +960,14 @@
       flex-direction: row;
     }
   }
-  .lg\:flex-row-reverse {
-    @media (width >= 64rem) {
-      flex-direction: row-reverse;
-    }
-  }
-  .lg\:items-center {
+  .lg\:justify-end {
     @media (width >= 64rem) {
-      align-items: center;
+      justify-content: flex-end;
     }
   }
-  .lg\:justify-end {
+  .lg\:justify-start {
     @media (width >= 64rem) {
-      justify-content: flex-end;
+      justify-content: flex-start;
     }
   }
   .lg\:border-r-2 {
@@ -964,16 +987,6 @@
       stroke-width: 0.035;
     }
   }
-  .lg\:pl-4 {
-    @media (width >= 64rem) {
-      padding-left: calc(var(--spacing) * 4);
-    }
-  }
-  .lg\:text-right {
-    @media (width >= 64rem) {
-      text-align: right;
-    }
-  }
   .lg\:text-\[5em\] {
     @media (width >= 64rem) {
       font-size: 5em;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/promo-pages",
-  "version": "4.0.315",
+  "version": "4.0.318",
   "publishConfig": {
     "access": "public"
   },
@@ -10,14 +10,14 @@
     "polished": "4.3.1",
     "zod": "3.22.3",
     "bun-plugin-tailwind": "0.0.15",
-    "@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"
+    "@remotion/animated-emoji": "4.0.318",
+    "@remotion/paths": "4.0.318",
+    "@remotion/lottie": "4.0.318",
+    "@remotion/shapes": "4.0.318",
+    "@remotion/lambda": "4.0.318",
+    "remotion": "4.0.318",
+    "@remotion/player": "4.0.318",
+    "create-video": "4.0.318"
   },
   "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.315"
+    "@remotion/eslint-config-internal": "4.0.318"
   },
   "repository": {
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/promo-pages"