@remotion/promo-pages 4.0.314 → 4.0.317

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"
+                })
+              })
+            ]
+          })
+        })
       })
     ]
   });