@remotion/promo-pages 4.0.259

package/dist/homepage/Pricing.js

@@ -0,0 +1,1963 @@
+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/homepage/FreePricing.tsx
+import React2, { useCallback, useMemo } from "react";
+
+// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// ../../node_modules/.pnpm/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
+var CLASS_PART_SEPARATOR = "-";
+var createClassGroupUtils = (config) => {
+  const classMap = createClassMap(config);
+  const {
+    conflictingClassGroups,
+    conflictingClassGroupModifiers
+  } = config;
+  const getClassGroupId = (className) => {
+    const classParts = className.split(CLASS_PART_SEPARATOR);
+    if (classParts[0] === "" && classParts.length !== 1) {
+      classParts.shift();
+    }
+    return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
+  };
+  const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
+    const conflicts = conflictingClassGroups[classGroupId] || [];
+    if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
+      return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
+    }
+    return conflicts;
+  };
+  return {
+    getClassGroupId,
+    getConflictingClassGroupIds
+  };
+};
+var getGroupRecursive = (classParts, classPartObject) => {
+  if (classParts.length === 0) {
+    return classPartObject.classGroupId;
+  }
+  const currentClassPart = classParts[0];
+  const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
+  const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : undefined;
+  if (classGroupFromNextClassPart) {
+    return classGroupFromNextClassPart;
+  }
+  if (classPartObject.validators.length === 0) {
+    return;
+  }
+  const classRest = classParts.join(CLASS_PART_SEPARATOR);
+  return classPartObject.validators.find(({
+    validator
+  }) => validator(classRest))?.classGroupId;
+};
+var arbitraryPropertyRegex = /^\[(.+)\]$/;
+var getGroupIdForArbitraryProperty = (className) => {
+  if (arbitraryPropertyRegex.test(className)) {
+    const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
+    const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(":"));
+    if (property) {
+      return "arbitrary.." + property;
+    }
+  }
+};
+var createClassMap = (config) => {
+  const {
+    theme,
+    prefix
+  } = config;
+  const classMap = {
+    nextPart: new Map,
+    validators: []
+  };
+  const prefixedClassGroupEntries = getPrefixedClassGroupEntries(Object.entries(config.classGroups), prefix);
+  prefixedClassGroupEntries.forEach(([classGroupId, classGroup]) => {
+    processClassesRecursively(classGroup, classMap, classGroupId, theme);
+  });
+  return classMap;
+};
+var processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
+  classGroup.forEach((classDefinition) => {
+    if (typeof classDefinition === "string") {
+      const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
+      classPartObjectToEdit.classGroupId = classGroupId;
+      return;
+    }
+    if (typeof classDefinition === "function") {
+      if (isThemeGetter(classDefinition)) {
+        processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
+        return;
+      }
+      classPartObject.validators.push({
+        validator: classDefinition,
+        classGroupId
+      });
+      return;
+    }
+    Object.entries(classDefinition).forEach(([key, classGroup2]) => {
+      processClassesRecursively(classGroup2, getPart(classPartObject, key), classGroupId, theme);
+    });
+  });
+};
+var getPart = (classPartObject, path) => {
+  let currentClassPartObject = classPartObject;
+  path.split(CLASS_PART_SEPARATOR).forEach((pathPart) => {
+    if (!currentClassPartObject.nextPart.has(pathPart)) {
+      currentClassPartObject.nextPart.set(pathPart, {
+        nextPart: new Map,
+        validators: []
+      });
+    }
+    currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
+  });
+  return currentClassPartObject;
+};
+var isThemeGetter = (func) => func.isThemeGetter;
+var getPrefixedClassGroupEntries = (classGroupEntries, prefix) => {
+  if (!prefix) {
+    return classGroupEntries;
+  }
+  return classGroupEntries.map(([classGroupId, classGroup]) => {
+    const prefixedClassGroup = classGroup.map((classDefinition) => {
+      if (typeof classDefinition === "string") {
+        return prefix + classDefinition;
+      }
+      if (typeof classDefinition === "object") {
+        return Object.fromEntries(Object.entries(classDefinition).map(([key, value]) => [prefix + key, value]));
+      }
+      return classDefinition;
+    });
+    return [classGroupId, prefixedClassGroup];
+  });
+};
+var createLruCache = (maxCacheSize) => {
+  if (maxCacheSize < 1) {
+    return {
+      get: () => {
+        return;
+      },
+      set: () => {
+      }
+    };
+  }
+  let cacheSize = 0;
+  let cache = new Map;
+  let previousCache = new Map;
+  const update = (key, value) => {
+    cache.set(key, value);
+    cacheSize++;
+    if (cacheSize > maxCacheSize) {
+      cacheSize = 0;
+      previousCache = cache;
+      cache = new Map;
+    }
+  };
+  return {
+    get(key) {
+      let value = cache.get(key);
+      if (value !== undefined) {
+        return value;
+      }
+      if ((value = previousCache.get(key)) !== undefined) {
+        update(key, value);
+        return value;
+      }
+    },
+    set(key, value) {
+      if (cache.has(key)) {
+        cache.set(key, value);
+      } else {
+        update(key, value);
+      }
+    }
+  };
+};
+var IMPORTANT_MODIFIER = "!";
+var createParseClassName = (config) => {
+  const {
+    separator,
+    experimentalParseClassName
+  } = config;
+  const isSeparatorSingleCharacter = separator.length === 1;
+  const firstSeparatorCharacter = separator[0];
+  const separatorLength = separator.length;
+  const parseClassName = (className) => {
+    const modifiers = [];
+    let bracketDepth = 0;
+    let modifierStart = 0;
+    let postfixModifierPosition;
+    for (let index = 0;index < className.length; index++) {
+      let currentCharacter = className[index];
+      if (bracketDepth === 0) {
+        if (currentCharacter === firstSeparatorCharacter && (isSeparatorSingleCharacter || className.slice(index, index + separatorLength) === separator)) {
+          modifiers.push(className.slice(modifierStart, index));
+          modifierStart = index + separatorLength;
+          continue;
+        }
+        if (currentCharacter === "/") {
+          postfixModifierPosition = index;
+          continue;
+        }
+      }
+      if (currentCharacter === "[") {
+        bracketDepth++;
+      } else if (currentCharacter === "]") {
+        bracketDepth--;
+      }
+    }
+    const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
+    const hasImportantModifier = baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER);
+    const baseClassName = hasImportantModifier ? baseClassNameWithImportantModifier.substring(1) : baseClassNameWithImportantModifier;
+    const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined;
+    return {
+      modifiers,
+      hasImportantModifier,
+      baseClassName,
+      maybePostfixModifierPosition
+    };
+  };
+  if (experimentalParseClassName) {
+    return (className) => experimentalParseClassName({
+      className,
+      parseClassName
+    });
+  }
+  return parseClassName;
+};
+var sortModifiers = (modifiers) => {
+  if (modifiers.length <= 1) {
+    return modifiers;
+  }
+  const sortedModifiers = [];
+  let unsortedModifiers = [];
+  modifiers.forEach((modifier) => {
+    const isArbitraryVariant = modifier[0] === "[";
+    if (isArbitraryVariant) {
+      sortedModifiers.push(...unsortedModifiers.sort(), modifier);
+      unsortedModifiers = [];
+    } else {
+      unsortedModifiers.push(modifier);
+    }
+  });
+  sortedModifiers.push(...unsortedModifiers.sort());
+  return sortedModifiers;
+};
+var createConfigUtils = (config) => ({
+  cache: createLruCache(config.cacheSize),
+  parseClassName: createParseClassName(config),
+  ...createClassGroupUtils(config)
+});
+var SPLIT_CLASSES_REGEX = /\s+/;
+var mergeClassList = (classList, configUtils) => {
+  const {
+    parseClassName,
+    getClassGroupId,
+    getConflictingClassGroupIds
+  } = configUtils;
+  const classGroupsInConflict = [];
+  const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
+  let result = "";
+  for (let index = classNames.length - 1;index >= 0; index -= 1) {
+    const originalClassName = classNames[index];
+    const {
+      modifiers,
+      hasImportantModifier,
+      baseClassName,
+      maybePostfixModifierPosition
+    } = parseClassName(originalClassName);
+    let hasPostfixModifier = Boolean(maybePostfixModifierPosition);
+    let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
+    if (!classGroupId) {
+      if (!hasPostfixModifier) {
+        result = originalClassName + (result.length > 0 ? " " + result : result);
+        continue;
+      }
+      classGroupId = getClassGroupId(baseClassName);
+      if (!classGroupId) {
+        result = originalClassName + (result.length > 0 ? " " + result : result);
+        continue;
+      }
+      hasPostfixModifier = false;
+    }
+    const variantModifier = sortModifiers(modifiers).join(":");
+    const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
+    const classId = modifierId + classGroupId;
+    if (classGroupsInConflict.includes(classId)) {
+      continue;
+    }
+    classGroupsInConflict.push(classId);
+    const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
+    for (let i = 0;i < conflictGroups.length; ++i) {
+      const group = conflictGroups[i];
+      classGroupsInConflict.push(modifierId + group);
+    }
+    result = originalClassName + (result.length > 0 ? " " + result : result);
+  }
+  return result;
+};
+function twJoin() {
+  let index = 0;
+  let argument;
+  let resolvedValue;
+  let string = "";
+  while (index < arguments.length) {
+    if (argument = arguments[index++]) {
+      if (resolvedValue = toValue(argument)) {
+        string && (string += " ");
+        string += resolvedValue;
+      }
+    }
+  }
+  return string;
+}
+var toValue = (mix) => {
+  if (typeof mix === "string") {
+    return mix;
+  }
+  let resolvedValue;
+  let string = "";
+  for (let k = 0;k < mix.length; k++) {
+    if (mix[k]) {
+      if (resolvedValue = toValue(mix[k])) {
+        string && (string += " ");
+        string += resolvedValue;
+      }
+    }
+  }
+  return string;
+};
+function createTailwindMerge(createConfigFirst, ...createConfigRest) {
+  let configUtils;
+  let cacheGet;
+  let cacheSet;
+  let functionToCall = initTailwindMerge;
+  function initTailwindMerge(classList) {
+    const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
+    configUtils = createConfigUtils(config);
+    cacheGet = configUtils.cache.get;
+    cacheSet = configUtils.cache.set;
+    functionToCall = tailwindMerge;
+    return tailwindMerge(classList);
+  }
+  function tailwindMerge(classList) {
+    const cachedResult = cacheGet(classList);
+    if (cachedResult) {
+      return cachedResult;
+    }
+    const result = mergeClassList(classList, configUtils);
+    cacheSet(classList, result);
+    return result;
+  }
+  return function callTailwindMerge() {
+    return functionToCall(twJoin.apply(null, arguments));
+  };
+}
+var fromTheme = (key) => {
+  const themeGetter = (theme) => theme[key] || [];
+  themeGetter.isThemeGetter = true;
+  return themeGetter;
+};
+var arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)\]$/i;
+var fractionRegex = /^\d+\/\d+$/;
+var stringLengths = /* @__PURE__ */ new Set(["px", "full", "screen"]);
+var tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
+var lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
+var colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/;
+var shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
+var imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
+var isLength = (value) => isNumber(value) || stringLengths.has(value) || fractionRegex.test(value);
+var isArbitraryLength = (value) => getIsArbitraryValue(value, "length", isLengthOnly);
+var isNumber = (value) => Boolean(value) && !Number.isNaN(Number(value));
+var isArbitraryNumber = (value) => getIsArbitraryValue(value, "number", isNumber);
+var isInteger = (value) => Boolean(value) && Number.isInteger(Number(value));
+var isPercent = (value) => value.endsWith("%") && isNumber(value.slice(0, -1));
+var isArbitraryValue = (value) => arbitraryValueRegex.test(value);
+var isTshirtSize = (value) => tshirtUnitRegex.test(value);
+var sizeLabels = /* @__PURE__ */ new Set(["length", "size", "percentage"]);
+var isArbitrarySize = (value) => getIsArbitraryValue(value, sizeLabels, isNever);
+var isArbitraryPosition = (value) => getIsArbitraryValue(value, "position", isNever);
+var imageLabels = /* @__PURE__ */ new Set(["image", "url"]);
+var isArbitraryImage = (value) => getIsArbitraryValue(value, imageLabels, isImage);
+var isArbitraryShadow = (value) => getIsArbitraryValue(value, "", isShadow);
+var isAny = () => true;
+var getIsArbitraryValue = (value, label, testValue) => {
+  const result = arbitraryValueRegex.exec(value);
+  if (result) {
+    if (result[1]) {
+      return typeof label === "string" ? result[1] === label : label.has(result[1]);
+    }
+    return testValue(result[2]);
+  }
+  return false;
+};
+var isLengthOnly = (value) => lengthUnitRegex.test(value) && !colorFunctionRegex.test(value);
+var isNever = () => false;
+var isShadow = (value) => shadowRegex.test(value);
+var isImage = (value) => imageRegex.test(value);
+var getDefaultConfig = () => {
+  const colors = fromTheme("colors");
+  const spacing = fromTheme("spacing");
+  const blur = fromTheme("blur");
+  const brightness = fromTheme("brightness");
+  const borderColor = fromTheme("borderColor");
+  const borderRadius = fromTheme("borderRadius");
+  const borderSpacing = fromTheme("borderSpacing");
+  const borderWidth = fromTheme("borderWidth");
+  const contrast = fromTheme("contrast");
+  const grayscale = fromTheme("grayscale");
+  const hueRotate = fromTheme("hueRotate");
+  const invert = fromTheme("invert");
+  const gap = fromTheme("gap");
+  const gradientColorStops = fromTheme("gradientColorStops");
+  const gradientColorStopPositions = fromTheme("gradientColorStopPositions");
+  const inset = fromTheme("inset");
+  const margin = fromTheme("margin");
+  const opacity = fromTheme("opacity");
+  const padding = fromTheme("padding");
+  const saturate = fromTheme("saturate");
+  const scale = fromTheme("scale");
+  const sepia = fromTheme("sepia");
+  const skew = fromTheme("skew");
+  const space = fromTheme("space");
+  const translate = fromTheme("translate");
+  const getOverscroll = () => ["auto", "contain", "none"];
+  const getOverflow = () => ["auto", "hidden", "clip", "visible", "scroll"];
+  const getSpacingWithAutoAndArbitrary = () => ["auto", isArbitraryValue, spacing];
+  const getSpacingWithArbitrary = () => [isArbitraryValue, spacing];
+  const getLengthWithEmptyAndArbitrary = () => ["", isLength, isArbitraryLength];
+  const getNumberWithAutoAndArbitrary = () => ["auto", isNumber, isArbitraryValue];
+  const getPositions = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"];
+  const getLineStyles = () => ["solid", "dashed", "dotted", "double", "none"];
+  const getBlendModes = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
+  const getAlign = () => ["start", "end", "center", "between", "around", "evenly", "stretch"];
+  const getZeroAndEmpty = () => ["", "0", isArbitraryValue];
+  const getBreaks = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
+  const getNumberAndArbitrary = () => [isNumber, isArbitraryValue];
+  return {
+    cacheSize: 500,
+    separator: ":",
+    theme: {
+      colors: [isAny],
+      spacing: [isLength, isArbitraryLength],
+      blur: ["none", "", isTshirtSize, isArbitraryValue],
+      brightness: getNumberAndArbitrary(),
+      borderColor: [colors],
+      borderRadius: ["none", "", "full", isTshirtSize, isArbitraryValue],
+      borderSpacing: getSpacingWithArbitrary(),
+      borderWidth: getLengthWithEmptyAndArbitrary(),
+      contrast: getNumberAndArbitrary(),
+      grayscale: getZeroAndEmpty(),
+      hueRotate: getNumberAndArbitrary(),
+      invert: getZeroAndEmpty(),
+      gap: getSpacingWithArbitrary(),
+      gradientColorStops: [colors],
+      gradientColorStopPositions: [isPercent, isArbitraryLength],
+      inset: getSpacingWithAutoAndArbitrary(),
+      margin: getSpacingWithAutoAndArbitrary(),
+      opacity: getNumberAndArbitrary(),
+      padding: getSpacingWithArbitrary(),
+      saturate: getNumberAndArbitrary(),
+      scale: getNumberAndArbitrary(),
+      sepia: getZeroAndEmpty(),
+      skew: getNumberAndArbitrary(),
+      space: getSpacingWithArbitrary(),
+      translate: getSpacingWithArbitrary()
+    },
+    classGroups: {
+      aspect: [{
+        aspect: ["auto", "square", "video", isArbitraryValue]
+      }],
+      container: ["container"],
+      columns: [{
+        columns: [isTshirtSize]
+      }],
+      "break-after": [{
+        "break-after": getBreaks()
+      }],
+      "break-before": [{
+        "break-before": getBreaks()
+      }],
+      "break-inside": [{
+        "break-inside": ["auto", "avoid", "avoid-page", "avoid-column"]
+      }],
+      "box-decoration": [{
+        "box-decoration": ["slice", "clone"]
+      }],
+      box: [{
+        box: ["border", "content"]
+      }],
+      display: ["block", "inline-block", "inline", "flex", "inline-flex", "table", "inline-table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group", "table-row-group", "table-row", "flow-root", "grid", "inline-grid", "contents", "list-item", "hidden"],
+      float: [{
+        float: ["right", "left", "none", "start", "end"]
+      }],
+      clear: [{
+        clear: ["left", "right", "both", "none", "start", "end"]
+      }],
+      isolation: ["isolate", "isolation-auto"],
+      "object-fit": [{
+        object: ["contain", "cover", "fill", "none", "scale-down"]
+      }],
+      "object-position": [{
+        object: [...getPositions(), isArbitraryValue]
+      }],
+      overflow: [{
+        overflow: getOverflow()
+      }],
+      "overflow-x": [{
+        "overflow-x": getOverflow()
+      }],
+      "overflow-y": [{
+        "overflow-y": getOverflow()
+      }],
+      overscroll: [{
+        overscroll: getOverscroll()
+      }],
+      "overscroll-x": [{
+        "overscroll-x": getOverscroll()
+      }],
+      "overscroll-y": [{
+        "overscroll-y": getOverscroll()
+      }],
+      position: ["static", "fixed", "absolute", "relative", "sticky"],
+      inset: [{
+        inset: [inset]
+      }],
+      "inset-x": [{
+        "inset-x": [inset]
+      }],
+      "inset-y": [{
+        "inset-y": [inset]
+      }],
+      start: [{
+        start: [inset]
+      }],
+      end: [{
+        end: [inset]
+      }],
+      top: [{
+        top: [inset]
+      }],
+      right: [{
+        right: [inset]
+      }],
+      bottom: [{
+        bottom: [inset]
+      }],
+      left: [{
+        left: [inset]
+      }],
+      visibility: ["visible", "invisible", "collapse"],
+      z: [{
+        z: ["auto", isInteger, isArbitraryValue]
+      }],
+      basis: [{
+        basis: getSpacingWithAutoAndArbitrary()
+      }],
+      "flex-direction": [{
+        flex: ["row", "row-reverse", "col", "col-reverse"]
+      }],
+      "flex-wrap": [{
+        flex: ["wrap", "wrap-reverse", "nowrap"]
+      }],
+      flex: [{
+        flex: ["1", "auto", "initial", "none", isArbitraryValue]
+      }],
+      grow: [{
+        grow: getZeroAndEmpty()
+      }],
+      shrink: [{
+        shrink: getZeroAndEmpty()
+      }],
+      order: [{
+        order: ["first", "last", "none", isInteger, isArbitraryValue]
+      }],
+      "grid-cols": [{
+        "grid-cols": [isAny]
+      }],
+      "col-start-end": [{
+        col: ["auto", {
+          span: ["full", isInteger, isArbitraryValue]
+        }, isArbitraryValue]
+      }],
+      "col-start": [{
+        "col-start": getNumberWithAutoAndArbitrary()
+      }],
+      "col-end": [{
+        "col-end": getNumberWithAutoAndArbitrary()
+      }],
+      "grid-rows": [{
+        "grid-rows": [isAny]
+      }],
+      "row-start-end": [{
+        row: ["auto", {
+          span: [isInteger, isArbitraryValue]
+        }, isArbitraryValue]
+      }],
+      "row-start": [{
+        "row-start": getNumberWithAutoAndArbitrary()
+      }],
+      "row-end": [{
+        "row-end": getNumberWithAutoAndArbitrary()
+      }],
+      "grid-flow": [{
+        "grid-flow": ["row", "col", "dense", "row-dense", "col-dense"]
+      }],
+      "auto-cols": [{
+        "auto-cols": ["auto", "min", "max", "fr", isArbitraryValue]
+      }],
+      "auto-rows": [{
+        "auto-rows": ["auto", "min", "max", "fr", isArbitraryValue]
+      }],
+      gap: [{
+        gap: [gap]
+      }],
+      "gap-x": [{
+        "gap-x": [gap]
+      }],
+      "gap-y": [{
+        "gap-y": [gap]
+      }],
+      "justify-content": [{
+        justify: ["normal", ...getAlign()]
+      }],
+      "justify-items": [{
+        "justify-items": ["start", "end", "center", "stretch"]
+      }],
+      "justify-self": [{
+        "justify-self": ["auto", "start", "end", "center", "stretch"]
+      }],
+      "align-content": [{
+        content: ["normal", ...getAlign(), "baseline"]
+      }],
+      "align-items": [{
+        items: ["start", "end", "center", "baseline", "stretch"]
+      }],
+      "align-self": [{
+        self: ["auto", "start", "end", "center", "stretch", "baseline"]
+      }],
+      "place-content": [{
+        "place-content": [...getAlign(), "baseline"]
+      }],
+      "place-items": [{
+        "place-items": ["start", "end", "center", "baseline", "stretch"]
+      }],
+      "place-self": [{
+        "place-self": ["auto", "start", "end", "center", "stretch"]
+      }],
+      p: [{
+        p: [padding]
+      }],
+      px: [{
+        px: [padding]
+      }],
+      py: [{
+        py: [padding]
+      }],
+      ps: [{
+        ps: [padding]
+      }],
+      pe: [{
+        pe: [padding]
+      }],
+      pt: [{
+        pt: [padding]
+      }],
+      pr: [{
+        pr: [padding]
+      }],
+      pb: [{
+        pb: [padding]
+      }],
+      pl: [{
+        pl: [padding]
+      }],
+      m: [{
+        m: [margin]
+      }],
+      mx: [{
+        mx: [margin]
+      }],
+      my: [{
+        my: [margin]
+      }],
+      ms: [{
+        ms: [margin]
+      }],
+      me: [{
+        me: [margin]
+      }],
+      mt: [{
+        mt: [margin]
+      }],
+      mr: [{
+        mr: [margin]
+      }],
+      mb: [{
+        mb: [margin]
+      }],
+      ml: [{
+        ml: [margin]
+      }],
+      "space-x": [{
+        "space-x": [space]
+      }],
+      "space-x-reverse": ["space-x-reverse"],
+      "space-y": [{
+        "space-y": [space]
+      }],
+      "space-y-reverse": ["space-y-reverse"],
+      w: [{
+        w: ["auto", "min", "max", "fit", "svw", "lvw", "dvw", isArbitraryValue, spacing]
+      }],
+      "min-w": [{
+        "min-w": [isArbitraryValue, spacing, "min", "max", "fit"]
+      }],
+      "max-w": [{
+        "max-w": [isArbitraryValue, spacing, "none", "full", "min", "max", "fit", "prose", {
+          screen: [isTshirtSize]
+        }, isTshirtSize]
+      }],
+      h: [{
+        h: [isArbitraryValue, spacing, "auto", "min", "max", "fit", "svh", "lvh", "dvh"]
+      }],
+      "min-h": [{
+        "min-h": [isArbitraryValue, spacing, "min", "max", "fit", "svh", "lvh", "dvh"]
+      }],
+      "max-h": [{
+        "max-h": [isArbitraryValue, spacing, "min", "max", "fit", "svh", "lvh", "dvh"]
+      }],
+      size: [{
+        size: [isArbitraryValue, spacing, "auto", "min", "max", "fit"]
+      }],
+      "font-size": [{
+        text: ["base", isTshirtSize, isArbitraryLength]
+      }],
+      "font-smoothing": ["antialiased", "subpixel-antialiased"],
+      "font-style": ["italic", "not-italic"],
+      "font-weight": [{
+        font: ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", isArbitraryNumber]
+      }],
+      "font-family": [{
+        font: [isAny]
+      }],
+      "fvn-normal": ["normal-nums"],
+      "fvn-ordinal": ["ordinal"],
+      "fvn-slashed-zero": ["slashed-zero"],
+      "fvn-figure": ["lining-nums", "oldstyle-nums"],
+      "fvn-spacing": ["proportional-nums", "tabular-nums"],
+      "fvn-fraction": ["diagonal-fractions", "stacked-fractons"],
+      tracking: [{
+        tracking: ["tighter", "tight", "normal", "wide", "wider", "widest", isArbitraryValue]
+      }],
+      "line-clamp": [{
+        "line-clamp": ["none", isNumber, isArbitraryNumber]
+      }],
+      leading: [{
+        leading: ["none", "tight", "snug", "normal", "relaxed", "loose", isLength, isArbitraryValue]
+      }],
+      "list-image": [{
+        "list-image": ["none", isArbitraryValue]
+      }],
+      "list-style-type": [{
+        list: ["none", "disc", "decimal", isArbitraryValue]
+      }],
+      "list-style-position": [{
+        list: ["inside", "outside"]
+      }],
+      "placeholder-color": [{
+        placeholder: [colors]
+      }],
+      "placeholder-opacity": [{
+        "placeholder-opacity": [opacity]
+      }],
+      "text-alignment": [{
+        text: ["left", "center", "right", "justify", "start", "end"]
+      }],
+      "text-color": [{
+        text: [colors]
+      }],
+      "text-opacity": [{
+        "text-opacity": [opacity]
+      }],
+      "text-decoration": ["underline", "overline", "line-through", "no-underline"],
+      "text-decoration-style": [{
+        decoration: [...getLineStyles(), "wavy"]
+      }],
+      "text-decoration-thickness": [{
+        decoration: ["auto", "from-font", isLength, isArbitraryLength]
+      }],
+      "underline-offset": [{
+        "underline-offset": ["auto", isLength, isArbitraryValue]
+      }],
+      "text-decoration-color": [{
+        decoration: [colors]
+      }],
+      "text-transform": ["uppercase", "lowercase", "capitalize", "normal-case"],
+      "text-overflow": ["truncate", "text-ellipsis", "text-clip"],
+      "text-wrap": [{
+        text: ["wrap", "nowrap", "balance", "pretty"]
+      }],
+      indent: [{
+        indent: getSpacingWithArbitrary()
+      }],
+      "vertical-align": [{
+        align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", isArbitraryValue]
+      }],
+      whitespace: [{
+        whitespace: ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"]
+      }],
+      break: [{
+        break: ["normal", "words", "all", "keep"]
+      }],
+      hyphens: [{
+        hyphens: ["none", "manual", "auto"]
+      }],
+      content: [{
+        content: ["none", isArbitraryValue]
+      }],
+      "bg-attachment": [{
+        bg: ["fixed", "local", "scroll"]
+      }],
+      "bg-clip": [{
+        "bg-clip": ["border", "padding", "content", "text"]
+      }],
+      "bg-opacity": [{
+        "bg-opacity": [opacity]
+      }],
+      "bg-origin": [{
+        "bg-origin": ["border", "padding", "content"]
+      }],
+      "bg-position": [{
+        bg: [...getPositions(), isArbitraryPosition]
+      }],
+      "bg-repeat": [{
+        bg: ["no-repeat", {
+          repeat: ["", "x", "y", "round", "space"]
+        }]
+      }],
+      "bg-size": [{
+        bg: ["auto", "cover", "contain", isArbitrarySize]
+      }],
+      "bg-image": [{
+        bg: ["none", {
+          "gradient-to": ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
+        }, isArbitraryImage]
+      }],
+      "bg-color": [{
+        bg: [colors]
+      }],
+      "gradient-from-pos": [{
+        from: [gradientColorStopPositions]
+      }],
+      "gradient-via-pos": [{
+        via: [gradientColorStopPositions]
+      }],
+      "gradient-to-pos": [{
+        to: [gradientColorStopPositions]
+      }],
+      "gradient-from": [{
+        from: [gradientColorStops]
+      }],
+      "gradient-via": [{
+        via: [gradientColorStops]
+      }],
+      "gradient-to": [{
+        to: [gradientColorStops]
+      }],
+      rounded: [{
+        rounded: [borderRadius]
+      }],
+      "rounded-s": [{
+        "rounded-s": [borderRadius]
+      }],
+      "rounded-e": [{
+        "rounded-e": [borderRadius]
+      }],
+      "rounded-t": [{
+        "rounded-t": [borderRadius]
+      }],
+      "rounded-r": [{
+        "rounded-r": [borderRadius]
+      }],
+      "rounded-b": [{
+        "rounded-b": [borderRadius]
+      }],
+      "rounded-l": [{
+        "rounded-l": [borderRadius]
+      }],
+      "rounded-ss": [{
+        "rounded-ss": [borderRadius]
+      }],
+      "rounded-se": [{
+        "rounded-se": [borderRadius]
+      }],
+      "rounded-ee": [{
+        "rounded-ee": [borderRadius]
+      }],
+      "rounded-es": [{
+        "rounded-es": [borderRadius]
+      }],
+      "rounded-tl": [{
+        "rounded-tl": [borderRadius]
+      }],
+      "rounded-tr": [{
+        "rounded-tr": [borderRadius]
+      }],
+      "rounded-br": [{
+        "rounded-br": [borderRadius]
+      }],
+      "rounded-bl": [{
+        "rounded-bl": [borderRadius]
+      }],
+      "border-w": [{
+        border: [borderWidth]
+      }],
+      "border-w-x": [{
+        "border-x": [borderWidth]
+      }],
+      "border-w-y": [{
+        "border-y": [borderWidth]
+      }],
+      "border-w-s": [{
+        "border-s": [borderWidth]
+      }],
+      "border-w-e": [{
+        "border-e": [borderWidth]
+      }],
+      "border-w-t": [{
+        "border-t": [borderWidth]
+      }],
+      "border-w-r": [{
+        "border-r": [borderWidth]
+      }],
+      "border-w-b": [{
+        "border-b": [borderWidth]
+      }],
+      "border-w-l": [{
+        "border-l": [borderWidth]
+      }],
+      "border-opacity": [{
+        "border-opacity": [opacity]
+      }],
+      "border-style": [{
+        border: [...getLineStyles(), "hidden"]
+      }],
+      "divide-x": [{
+        "divide-x": [borderWidth]
+      }],
+      "divide-x-reverse": ["divide-x-reverse"],
+      "divide-y": [{
+        "divide-y": [borderWidth]
+      }],
+      "divide-y-reverse": ["divide-y-reverse"],
+      "divide-opacity": [{
+        "divide-opacity": [opacity]
+      }],
+      "divide-style": [{
+        divide: getLineStyles()
+      }],
+      "border-color": [{
+        border: [borderColor]
+      }],
+      "border-color-x": [{
+        "border-x": [borderColor]
+      }],
+      "border-color-y": [{
+        "border-y": [borderColor]
+      }],
+      "border-color-t": [{
+        "border-t": [borderColor]
+      }],
+      "border-color-r": [{
+        "border-r": [borderColor]
+      }],
+      "border-color-b": [{
+        "border-b": [borderColor]
+      }],
+      "border-color-l": [{
+        "border-l": [borderColor]
+      }],
+      "divide-color": [{
+        divide: [borderColor]
+      }],
+      "outline-style": [{
+        outline: ["", ...getLineStyles()]
+      }],
+      "outline-offset": [{
+        "outline-offset": [isLength, isArbitraryValue]
+      }],
+      "outline-w": [{
+        outline: [isLength, isArbitraryLength]
+      }],
+      "outline-color": [{
+        outline: [colors]
+      }],
+      "ring-w": [{
+        ring: getLengthWithEmptyAndArbitrary()
+      }],
+      "ring-w-inset": ["ring-inset"],
+      "ring-color": [{
+        ring: [colors]
+      }],
+      "ring-opacity": [{
+        "ring-opacity": [opacity]
+      }],
+      "ring-offset-w": [{
+        "ring-offset": [isLength, isArbitraryLength]
+      }],
+      "ring-offset-color": [{
+        "ring-offset": [colors]
+      }],
+      shadow: [{
+        shadow: ["", "inner", "none", isTshirtSize, isArbitraryShadow]
+      }],
+      "shadow-color": [{
+        shadow: [isAny]
+      }],
+      opacity: [{
+        opacity: [opacity]
+      }],
+      "mix-blend": [{
+        "mix-blend": [...getBlendModes(), "plus-lighter", "plus-darker"]
+      }],
+      "bg-blend": [{
+        "bg-blend": getBlendModes()
+      }],
+      filter: [{
+        filter: ["", "none"]
+      }],
+      blur: [{
+        blur: [blur]
+      }],
+      brightness: [{
+        brightness: [brightness]
+      }],
+      contrast: [{
+        contrast: [contrast]
+      }],
+      "drop-shadow": [{
+        "drop-shadow": ["", "none", isTshirtSize, isArbitraryValue]
+      }],
+      grayscale: [{
+        grayscale: [grayscale]
+      }],
+      "hue-rotate": [{
+        "hue-rotate": [hueRotate]
+      }],
+      invert: [{
+        invert: [invert]
+      }],
+      saturate: [{
+        saturate: [saturate]
+      }],
+      sepia: [{
+        sepia: [sepia]
+      }],
+      "backdrop-filter": [{
+        "backdrop-filter": ["", "none"]
+      }],
+      "backdrop-blur": [{
+        "backdrop-blur": [blur]
+      }],
+      "backdrop-brightness": [{
+        "backdrop-brightness": [brightness]
+      }],
+      "backdrop-contrast": [{
+        "backdrop-contrast": [contrast]
+      }],
+      "backdrop-grayscale": [{
+        "backdrop-grayscale": [grayscale]
+      }],
+      "backdrop-hue-rotate": [{
+        "backdrop-hue-rotate": [hueRotate]
+      }],
+      "backdrop-invert": [{
+        "backdrop-invert": [invert]
+      }],
+      "backdrop-opacity": [{
+        "backdrop-opacity": [opacity]
+      }],
+      "backdrop-saturate": [{
+        "backdrop-saturate": [saturate]
+      }],
+      "backdrop-sepia": [{
+        "backdrop-sepia": [sepia]
+      }],
+      "border-collapse": [{
+        border: ["collapse", "separate"]
+      }],
+      "border-spacing": [{
+        "border-spacing": [borderSpacing]
+      }],
+      "border-spacing-x": [{
+        "border-spacing-x": [borderSpacing]
+      }],
+      "border-spacing-y": [{
+        "border-spacing-y": [borderSpacing]
+      }],
+      "table-layout": [{
+        table: ["auto", "fixed"]
+      }],
+      caption: [{
+        caption: ["top", "bottom"]
+      }],
+      transition: [{
+        transition: ["none", "all", "", "colors", "opacity", "shadow", "transform", isArbitraryValue]
+      }],
+      duration: [{
+        duration: getNumberAndArbitrary()
+      }],
+      ease: [{
+        ease: ["linear", "in", "out", "in-out", isArbitraryValue]
+      }],
+      delay: [{
+        delay: getNumberAndArbitrary()
+      }],
+      animate: [{
+        animate: ["none", "spin", "ping", "pulse", "bounce", isArbitraryValue]
+      }],
+      transform: [{
+        transform: ["", "gpu", "none"]
+      }],
+      scale: [{
+        scale: [scale]
+      }],
+      "scale-x": [{
+        "scale-x": [scale]
+      }],
+      "scale-y": [{
+        "scale-y": [scale]
+      }],
+      rotate: [{
+        rotate: [isInteger, isArbitraryValue]
+      }],
+      "translate-x": [{
+        "translate-x": [translate]
+      }],
+      "translate-y": [{
+        "translate-y": [translate]
+      }],
+      "skew-x": [{
+        "skew-x": [skew]
+      }],
+      "skew-y": [{
+        "skew-y": [skew]
+      }],
+      "transform-origin": [{
+        origin: ["center", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left", isArbitraryValue]
+      }],
+      accent: [{
+        accent: ["auto", colors]
+      }],
+      appearance: [{
+        appearance: ["none", "auto"]
+      }],
+      cursor: [{
+        cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", isArbitraryValue]
+      }],
+      "caret-color": [{
+        caret: [colors]
+      }],
+      "pointer-events": [{
+        "pointer-events": ["none", "auto"]
+      }],
+      resize: [{
+        resize: ["none", "y", "x", ""]
+      }],
+      "scroll-behavior": [{
+        scroll: ["auto", "smooth"]
+      }],
+      "scroll-m": [{
+        "scroll-m": getSpacingWithArbitrary()
+      }],
+      "scroll-mx": [{
+        "scroll-mx": getSpacingWithArbitrary()
+      }],
+      "scroll-my": [{
+        "scroll-my": getSpacingWithArbitrary()
+      }],
+      "scroll-ms": [{
+        "scroll-ms": getSpacingWithArbitrary()
+      }],
+      "scroll-me": [{
+        "scroll-me": getSpacingWithArbitrary()
+      }],
+      "scroll-mt": [{
+        "scroll-mt": getSpacingWithArbitrary()
+      }],
+      "scroll-mr": [{
+        "scroll-mr": getSpacingWithArbitrary()
+      }],
+      "scroll-mb": [{
+        "scroll-mb": getSpacingWithArbitrary()
+      }],
+      "scroll-ml": [{
+        "scroll-ml": getSpacingWithArbitrary()
+      }],
+      "scroll-p": [{
+        "scroll-p": getSpacingWithArbitrary()
+      }],
+      "scroll-px": [{
+        "scroll-px": getSpacingWithArbitrary()
+      }],
+      "scroll-py": [{
+        "scroll-py": getSpacingWithArbitrary()
+      }],
+      "scroll-ps": [{
+        "scroll-ps": getSpacingWithArbitrary()
+      }],
+      "scroll-pe": [{
+        "scroll-pe": getSpacingWithArbitrary()
+      }],
+      "scroll-pt": [{
+        "scroll-pt": getSpacingWithArbitrary()
+      }],
+      "scroll-pr": [{
+        "scroll-pr": getSpacingWithArbitrary()
+      }],
+      "scroll-pb": [{
+        "scroll-pb": getSpacingWithArbitrary()
+      }],
+      "scroll-pl": [{
+        "scroll-pl": getSpacingWithArbitrary()
+      }],
+      "snap-align": [{
+        snap: ["start", "end", "center", "align-none"]
+      }],
+      "snap-stop": [{
+        snap: ["normal", "always"]
+      }],
+      "snap-type": [{
+        snap: ["none", "x", "y", "both"]
+      }],
+      "snap-strictness": [{
+        snap: ["mandatory", "proximity"]
+      }],
+      touch: [{
+        touch: ["auto", "none", "manipulation"]
+      }],
+      "touch-x": [{
+        "touch-pan": ["x", "left", "right"]
+      }],
+      "touch-y": [{
+        "touch-pan": ["y", "up", "down"]
+      }],
+      "touch-pz": ["touch-pinch-zoom"],
+      select: [{
+        select: ["none", "text", "all", "auto"]
+      }],
+      "will-change": [{
+        "will-change": ["auto", "scroll", "contents", "transform", isArbitraryValue]
+      }],
+      fill: [{
+        fill: [colors, "none"]
+      }],
+      "stroke-w": [{
+        stroke: [isLength, isArbitraryLength, isArbitraryNumber]
+      }],
+      stroke: [{
+        stroke: [colors, "none"]
+      }],
+      sr: ["sr-only", "not-sr-only"],
+      "forced-color-adjust": [{
+        "forced-color-adjust": ["auto", "none"]
+      }]
+    },
+    conflictingClassGroups: {
+      overflow: ["overflow-x", "overflow-y"],
+      overscroll: ["overscroll-x", "overscroll-y"],
+      inset: ["inset-x", "inset-y", "start", "end", "top", "right", "bottom", "left"],
+      "inset-x": ["right", "left"],
+      "inset-y": ["top", "bottom"],
+      flex: ["basis", "grow", "shrink"],
+      gap: ["gap-x", "gap-y"],
+      p: ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"],
+      px: ["pr", "pl"],
+      py: ["pt", "pb"],
+      m: ["mx", "my", "ms", "me", "mt", "mr", "mb", "ml"],
+      mx: ["mr", "ml"],
+      my: ["mt", "mb"],
+      size: ["w", "h"],
+      "font-size": ["leading"],
+      "fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"],
+      "fvn-ordinal": ["fvn-normal"],
+      "fvn-slashed-zero": ["fvn-normal"],
+      "fvn-figure": ["fvn-normal"],
+      "fvn-spacing": ["fvn-normal"],
+      "fvn-fraction": ["fvn-normal"],
+      "line-clamp": ["display", "overflow"],
+      rounded: ["rounded-s", "rounded-e", "rounded-t", "rounded-r", "rounded-b", "rounded-l", "rounded-ss", "rounded-se", "rounded-ee", "rounded-es", "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl"],
+      "rounded-s": ["rounded-ss", "rounded-es"],
+      "rounded-e": ["rounded-se", "rounded-ee"],
+      "rounded-t": ["rounded-tl", "rounded-tr"],
+      "rounded-r": ["rounded-tr", "rounded-br"],
+      "rounded-b": ["rounded-br", "rounded-bl"],
+      "rounded-l": ["rounded-tl", "rounded-bl"],
+      "border-spacing": ["border-spacing-x", "border-spacing-y"],
+      "border-w": ["border-w-s", "border-w-e", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
+      "border-w-x": ["border-w-r", "border-w-l"],
+      "border-w-y": ["border-w-t", "border-w-b"],
+      "border-color": ["border-color-t", "border-color-r", "border-color-b", "border-color-l"],
+      "border-color-x": ["border-color-r", "border-color-l"],
+      "border-color-y": ["border-color-t", "border-color-b"],
+      "scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
+      "scroll-mx": ["scroll-mr", "scroll-ml"],
+      "scroll-my": ["scroll-mt", "scroll-mb"],
+      "scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
+      "scroll-px": ["scroll-pr", "scroll-pl"],
+      "scroll-py": ["scroll-pt", "scroll-pb"],
+      touch: ["touch-x", "touch-y", "touch-pz"],
+      "touch-x": ["touch"],
+      "touch-y": ["touch"],
+      "touch-pz": ["touch"]
+    },
+    conflictingClassGroupModifiers: {
+      "font-size": ["leading"]
+    }
+  };
+};
+var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
+
+// src/cn.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/homepage/Counter.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Triangle = ({ rotated }) => /* @__PURE__ */ jsx("svg", {
+  width: "12px",
+  height: "7px",
+  viewBox: "0 0 12 7",
+  fill: "none",
+  style: {
+    transform: rotated ? "rotate(180deg)" : "rotate(0deg)"
+  },
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentcolor",
+    d: "M7.17096 0.475588C6.73198 0.0764969 6.01906 0.0764969 5.58007 0.475588L1.08483 4.56228C0.761737 4.85601 0.666915 5.29341 0.84251 5.67654C1.01811 6.05966 1.42549 6.3087 1.88203 6.3087H10.8725C11.3255 6.3087 11.7364 6.05966 11.912 5.67654C12.0876 5.29341 11.9893 4.85601 11.6697 4.56228L7.17448 0.475588H7.17096Z"
+  })
+});
+var container = {
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "flex-end",
+  alignItems: "center",
+  borderRadius: 4,
+  height: 42,
+  overflow: "hidden",
+  flexShrink: 0
+};
+var buttonContainer = {
+  display: "flex",
+  width: 30,
+  padding: 2,
+  height: 20,
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: "inherit",
+  cursor: "pointer"
+};
+var Counter = ({
+  count,
+  setCount,
+  minCount = 0
+}) => {
+  const decrement = () => {
+    if (count > minCount) {
+      setCount(count - 1);
+    }
+  };
+  const increment = () => {
+    setCount(count + 1);
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    style: container,
+    className: cn("border-effect w-[110px]"),
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        className: "fontbrand text-2xl font-medium min-w-[60px] border-0 text-end bg-transparent outline-0",
+        type: "number",
+        onClick: (e) => e.currentTarget.select(),
+        value: count,
+        onChange: (e) => {
+          if (e.target.value.trim() === "") {
+            setCount(1);
+            return;
+          }
+          const max = Math.max(parseInt(e.target.value, 10), 1);
+          setCount(max);
+        }
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex flex-col ml-3 h-full",
+        children: [
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: "border-0 border-l-2 border-l-solid border-b-2 flex-1",
+            style: {
+              ...buttonContainer
+            },
+            onClick: increment,
+            children: /* @__PURE__ */ jsx(Triangle, {
+              rotated: false
+            })
+          }),
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: "border-0 border-l-2 border-l-solid flex-1",
+            style: {
+              ...buttonContainer
+            },
+            onClick: decrement,
+            children: /* @__PURE__ */ jsx(Triangle, {
+              rotated: true
+            })
+          })
+        ]
+      })
+    ]
+  });
+};
+
+// src/components/homepage/InfoTooltip.tsx
+import { useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var InfoTooltip = ({ text }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  return /* @__PURE__ */ jsxs2("span", {
+    className: "relative inline-block ml-1 text-gray-600 cursor-default",
+    onMouseEnter: () => setIsVisible(true),
+    onMouseLeave: () => setIsVisible(false),
+    children: [
+      /* @__PURE__ */ jsx2("span", {
+        style: { fontSize: "1rem" },
+        children: "ⓘ"
+      }),
+      isVisible && /* @__PURE__ */ jsxs2("span", {
+        className: "absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 text-white p-2 rounded text-xs whitespace-nowrap z-10 cursor-default",
+        children: [
+          text,
+          /* @__PURE__ */ jsx2("span", {
+            className: "absolute top-full left-1/2 transform -translate-x-1/2 border-5 border-solid border-gray-800 border-t-transparent border-r-transparent border-b-transparent border-l-transparent cursor-default"
+          })
+        ]
+      })
+    ]
+  });
+};
+
+// src/components/homepage/PricingBulletPoint.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var container2 = {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: "10px"
+};
+var greyCircle = {
+  width: 20,
+  height: 20,
+  borderRadius: 10,
+  backgroundColor: "var(--footer-border)"
+};
+var PricingBulletPoint = ({ text, checked, children }) => {
+  const checkmarkSVG = /* @__PURE__ */ jsxs3("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      flexShrink: 0
+    },
+    children: [
+      /* @__PURE__ */ jsx3("circle", {
+        cx: "10",
+        cy: "10",
+        r: "10",
+        fill: "#0B84F3"
+      }),
+      /* @__PURE__ */ jsx3("path", {
+        d: "M14.7908 7.20505C15.0697 7.47844 15.0697 7.92243 14.7908 8.19583L9.07711 13.795C8.79813 14.0683 8.34505 14.0683 8.06606 13.795L5.20924 10.9954C4.93025 10.722 4.93025 10.278 5.20924 10.0046C5.48823 9.73121 5.9413 9.73121 6.22029 10.0046L8.5727 12.3077L13.7819 7.20505C14.0609 6.93165 14.514 6.93165 14.793 7.20505H14.7908Z",
+        fill: "white"
+      })
+    ]
+  });
+  return /* @__PURE__ */ jsxs3("div", {
+    style: container2,
+    children: [
+      checked ? checkmarkSVG : /* @__PURE__ */ jsx3("div", {
+        style: greyCircle
+      }),
+      /* @__PURE__ */ jsxs3("div", {
+        className: "fontbrand text-lg\t",
+        children: [
+          text,
+          children
+        ]
+      })
+    ]
+  });
+};
+
+// src/components/homepage/FreePricing.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Container = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx4("div", {
+    className: "flex flex-col border-effect rounded-xl p-5 bg-pane",
+    children
+  });
+};
+var Title = ({ children }) => {
+  return /* @__PURE__ */ jsx4("div", {
+    className: "text-4xl font-bold leading-none fontbrand mt-2 mb-5",
+    children
+  });
+};
+var Audience = ({ children }) => {
+  return /* @__PURE__ */ jsx4("div", {
+    className: "fontbrand text-lg leading-none",
+    children
+  });
+};
+var BottomInfo = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx4("div", {
+    className: cn(className, "text-[var(--subtitle)] fontbrand text-sm"),
+    ...props,
+    children
+  });
+};
+var PriceTag = ({ children }) => {
+  return /* @__PURE__ */ jsx4("div", {
+    className: "fontbrand text-2xl font-bold min-w-[80px] w-auto text-right shrink-0 ml-4",
+    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",
+    children
+  });
+};
+var FreePricing = () => {
+  return /* @__PURE__ */ jsxs4(Container, {
+    children: [
+      /* @__PURE__ */ jsx4(Audience, {
+        children: "For individuals and companies of up to 3 people"
+      }),
+      /* @__PURE__ */ jsx4(Title, {
+        children: "Free License"
+      }),
+      /* @__PURE__ */ jsx4(PricingBulletPoint, {
+        text: "Unlimited videos",
+        checked: true
+      }),
+      /* @__PURE__ */ jsx4(PricingBulletPoint, {
+        text: "Commercial use allowed",
+        checked: true
+      }),
+      /* @__PURE__ */ jsx4(PricingBulletPoint, {
+        text: "Self-hosted cloud rendering allowed",
+        checked: true
+      }),
+      /* @__PURE__ */ jsx4(PricingBulletPoint, {
+        text: "Must upgrade when your team grows",
+        checked: false
+      })
+    ]
+  });
+};
+var textUnitWrapper = {
+  display: "flex",
+  flexDirection: "column"
+};
+var EnterpriseLicense = () => {
+  return /* @__PURE__ */ jsxs4(Container, {
+    children: [
+      /* @__PURE__ */ jsx4(Audience, {
+        children: "For advanced needs"
+      }),
+      /* @__PURE__ */ jsx4(Title, {
+        children: "Enterprise License"
+      }),
+      /* @__PURE__ */ jsx4(PricingBulletPoint, {
+        text: "Everything in Company License",
+        checked: true
+      }),
+      /* @__PURE__ */ jsx4(PricingBulletPoint, {
+        text: "Custom terms, billing and pricing",
+        checked: true
+      }),
+      /* @__PURE__ */ jsx4(PricingBulletPoint, {
+        text: "Compliance forms",
+        checked: true
+      }),
+      /* @__PURE__ */ jsx4(PricingBulletPoint, {
+        text: "Prioritized feature requests",
+        checked: true
+      }),
+      /* @__PURE__ */ jsx4(PricingBulletPoint, {
+        text: "Private support channel",
+        checked: true
+      }),
+      /* @__PURE__ */ jsx4(PricingBulletPoint, {
+        text: "Monthly consulting session",
+        checked: true
+      }),
+      /* @__PURE__ */ jsx4("div", {
+        style: { height: 30 }
+      }),
+      /* @__PURE__ */ jsx4("div", {
+        className: "flex flex-row justify-end",
+        children: /* @__PURE__ */ jsxs4("div", {
+          style: {
+            ...textUnitWrapper,
+            alignItems: "flex-end"
+          },
+          children: [
+            /* @__PURE__ */ jsx4(PriceTag, {
+              children: /* @__PURE__ */ jsx4("a", {
+                className: "cursor-pointer no-underline text-inherit hover:text-brand",
+                target: "_blank",
+                href: "https://www.remotion.pro/contact",
+                children: "Contact us"
+              })
+            }),
+            /* @__PURE__ */ jsx4("div", {
+              className: "text-[var(--subtitle)] fontbrand text-sm",
+              children: "Starting at $500 per month"
+            })
+          ]
+        })
+      })
+    ]
+  });
+};
+var SEAT_PRICE = 25;
+var RENDER_UNIT_PRICE = 10;
+var WEBCODECS_UNIT_PRICE = 10;
+var CompanyPricing = () => {
+  const [devSeatCount, setDevSeatCount] = React2.useState(1);
+  const [cloudUnitCount, setCloudUnitCount] = React2.useState(1);
+  const [webcodecsUnits, setWebcodecsUnits] = React2.useState(1);
+  const formatPrice = useCallback((price) => {
+    const formatter = new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 0
+    });
+    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]);
+  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, {
+        children: "For collaborations and companies of 4+ people"
+      }),
+      /* @__PURE__ */ jsx4(Title, {
+        children: "Company License"
+      }),
+      /* @__PURE__ */ jsx4(PricingBulletPoint, {
+        text: "Commercial use allowed",
+        checked: true
+      }),
+      /* @__PURE__ */ jsx4(PricingBulletPoint, {
+        text: "Self-hosted cloud rendering allowed",
+        checked: true
+      }),
+      /* @__PURE__ */ jsx4(PricingBulletPoint, {
+        text: "Prioritized Support",
+        checked: true
+      }),
+      /* @__PURE__ */ jsx4(PricingBulletPoint, {
+        text: /* @__PURE__ */ jsxs4("span", {
+          children: [
+            /* @__PURE__ */ jsx4("a", {
+              href: "https://remotion.dev/recorder",
+              className: "underline underline-offset-4 text-inherit",
+              children: "Remotion Recorder"
+            }),
+            " ",
+            "included"
+          ]
+        }),
+        checked: true
+      }),
+      /* @__PURE__ */ jsx4(PricingBulletPoint, {
+        text: "$250 Mux credits",
+        checked: true,
+        children: /* @__PURE__ */ jsx4(InfoTooltip, {
+          text: "Credits for Mux.com. Applies only to new Mux customers."
+        })
+      }),
+      /* @__PURE__ */ jsx4("div", {
+        style: { height: 30 }
+      }),
+      /* @__PURE__ */ jsxs4("div", {
+        className: "flex flex-row items-center",
+        children: [
+          /* @__PURE__ */ jsxs4("div", {
+            style: textUnitWrapper,
+            children: [
+              /* @__PURE__ */ jsx4("div", {
+                className: "fontbrand font-bold text-lg",
+                children: "Developer Seats"
+              }),
+              /* @__PURE__ */ jsx4("div", {
+                className: "text-muted fontbrand text-sm",
+                children: "Number of developers working with Remotion"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx4("div", {
+            style: { flex: 3 }
+          }),
+          /* @__PURE__ */ jsx4(Counter, {
+            count: devSeatCount,
+            setCount: setDevSeatCount,
+            minCount: 1
+          }),
+          /* @__PURE__ */ jsxs4(SmallPriceTag, {
+            children: [
+              "$",
+              new Intl.NumberFormat("en-US", {
+                maximumFractionDigits: 0
+              }).format(SEAT_PRICE * devSeatCount)
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx4("div", {
+        style: { height: 14 }
+      }),
+      /* @__PURE__ */ jsxs4("div", {
+        className: "flex flex-row items-center",
+        children: [
+          /* @__PURE__ */ jsxs4("div", {
+            style: textUnitWrapper,
+            children: [
+              /* @__PURE__ */ jsx4("div", {
+                className: "fontbrand font-bold text-lg",
+                children: "Cloud Rendering Units"
+              }),
+              /* @__PURE__ */ jsxs4("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"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx4("div", {
+            style: { flex: 3 }
+          }),
+          /* @__PURE__ */ jsx4(Counter, {
+            count: cloudUnitCount,
+            setCount: setCloudUnitCount,
+            minCount: 0
+          }),
+          /* @__PURE__ */ jsxs4(SmallPriceTag, {
+            children: [
+              "$",
+              new Intl.NumberFormat("en-US", {
+                maximumFractionDigits: 0
+              }).format(RENDER_UNIT_PRICE * cloudUnitCount)
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx4("div", {
+        style: { height: 14 }
+      }),
+      /* @__PURE__ */ jsxs4("div", {
+        className: "flex flex-row items-center",
+        children: [
+          /* @__PURE__ */ jsxs4("div", {
+            style: textUnitWrapper,
+            children: [
+              /* @__PURE__ */ jsx4("div", {
+                className: "fontbrand font-bold text-lg",
+                children: "WebCodec Conversion Units"
+              }),
+              /* @__PURE__ */ jsxs4("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 conversions",
+                      " "
+                    ]
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx4("div", {
+            style: { flex: 3 }
+          }),
+          /* @__PURE__ */ jsx4(Counter, {
+            count: webcodecsUnits,
+            setCount: setWebcodecsUnits,
+            minCount: 0
+          }),
+          /* @__PURE__ */ jsxs4(SmallPriceTag, {
+            children: [
+              "$",
+              new Intl.NumberFormat("en-US", {
+                maximumFractionDigits: 0
+              }).format(RENDER_UNIT_PRICE * webcodecsUnits)
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx4("div", {
+        style: { height: 20 }
+      }),
+      /* @__PURE__ */ jsx4("div", {
+        className: "flex flex-row justify-end",
+        children: /* @__PURE__ */ jsxs4("div", {
+          style: { ...textUnitWrapper, alignItems: "flex-end" },
+          children: [
+            /* @__PURE__ */ jsxs4(PriceTag, {
+              children: [
+                totalPriceString,
+                "/mo"
+              ]
+            }),
+            /* @__PURE__ */ jsx4(BottomInfo, {
+              "data-visible": totalPrice <= 100,
+              className: "opacity-0 data-[visible=true]:opacity-100 transition-opacity",
+              children: "The minimum is $100 per month"
+            })
+          ]
+        })
+      })
+    ]
+  });
+};
+
+// src/components/homepage/Pricing.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var Pricing = () => {
+  return /* @__PURE__ */ jsxs5("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 20,
+      marginBottom: 40
+    },
+    children: [
+      /* @__PURE__ */ jsx5(FreePricing, {}),
+      /* @__PURE__ */ jsx5(CompanyPricing, {}),
+      /* @__PURE__ */ jsx5(EnterpriseLicense, {}),
+      /* @__PURE__ */ jsx5("div", {
+        style: {
+          justifyContent: "center",
+          display: "flex"
+        },
+        children: /* @__PURE__ */ jsxs5("div", {
+          style: {
+            fontFamily: "GTPlanar"
+          },
+          children: [
+            "See our",
+            " ",
+            /* @__PURE__ */ jsx5("a", {
+              target: "_blank",
+              className: "bluelink",
+              href: "https://remotion.pro/faq",
+              children: "FAQ"
+            }),
+            " ",
+            "and",
+            " ",
+            /* @__PURE__ */ jsx5("a", {
+              target: "_blank",
+              className: "bluelink",
+              href: "https://www.remotion.pro/terms",
+              children: "Terms and Conditions"
+            }),
+            " ",
+            "for more details."
+          ]
+        })
+      })
+    ]
+  });
+};
+export {
+  Pricing
+};