From fb78dba24450f9250fbe8bbd09fc15d09cc5c316 Mon Sep 17 00:00:00 2001
From: Advait <76993204+777advait@users.noreply.github.com>
Date: Tue, 19 Nov 2024 10:30:59 +0530
Subject: [PATCH 1/5] feat(features): add a pricing page

---
 apps/docs/content/features/pricing.mdx | 103 +++++++++++++++++++++++++
 apps/docs/sidebars.js                  |   9 +++
 2 files changed, 112 insertions(+)
 create mode 100644 apps/docs/content/features/pricing.mdx

diff --git a/apps/docs/content/features/pricing.mdx b/apps/docs/content/features/pricing.mdx
new file mode 100644
index 00000000..fe746863
--- /dev/null
+++ b/apps/docs/content/features/pricing.mdx
@@ -0,0 +1,103 @@
+---
+title: Pricing
+description: Detailed pricing description for deployment on zerops.
+---
+
+Zerops offers a usage based pricing model which can accommodate any **small-scale** or **high-availability** applications.
+
+## Projects
+
+A [project](/features/infrastructure#project) is the internal **infrastructure**, dedicated for your **services**. Think of it as a private network where you can deploy your services inside and interact with each other.
+
+You need a project even if you plan on spinning up a single small node.js service, as this internal infrastructure is what allows most of the functionalities on Zerops.
+
+Zerops offers two project core packages:
+
+### Lightweight project core package (Less RAM and CPU usage)
+
+- Core services (L3 balancer with firewall, logger, statistics), HTTP routing and load balancers all on single container
+- Proxy / Load balancer
+- Unique IPv6 address
+- 15 hours of build time
+- 5 GB space for automated backups
+- 100 GB of egress
+
+### Serious project core package (Highly available setup)
+
+- Highly available core services (L3 balancer with firewall, logger, statistics)
+- Highly available HTTP routing & load balancer
+- Proxy / Load balancer
+- Unique IPv6 address
+- 150 hours of build time
+- 25 GB space for automated backups
+- 3 TB of egress
+
+:::info
+Project core is refundable, for eg. if you create a serious project, pay $10 and then delete it after 15 days, you'll get $5 back
+:::
+
+## Resources & Costs
+
+The pricing model is based on the amount of resources allocated to your services inside a project.
+
+:::info
+Pricing is minute based, but credit is deducted once per hour based on the usage throughout the hour.
+:::
+
+### Resource pricing
+
+<table className="w-full rounded-md">
+  <thead>
+    <tr>
+      <th className="w-fit whitespace-nowrap"><strong>Resource</strong></th>
+      <th><strong>Cost</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td className="w-fit whitespace-nowrap"><strong>Shared CPU</strong></td>
+      <td><strong>$0.60</strong> per CPU / 30 days</td>
+    </tr>
+    <tr>
+      <td className="w-fit whitespace-nowrap"><strong>Dedicated CPU</strong></td>
+      <td><strong>$6.00</strong> per CPU / 30 days</td>
+    </tr>
+    <tr>
+      <td className="w-fit whitespace-nowrap"><strong>RAM</strong></td>
+      <td><strong>$0.75</strong> per 0.25 GB / 30 days</td>
+    </tr>
+    <tr>
+      <td className="w-fit whitespace-nowrap"><strong>Disk space</strong></td>
+      <td><strong>$0.05</strong> per 0.5 GB / 30 days</td>
+    </tr>
+  </tbody>
+</table>
+
+### Other features
+
+<table className="w-full rounded-md">
+  <thead>
+    <tr>
+      <th className="w-fit whitespace-nowrap"><strong>Feature</strong></th>
+      <th><strong>Cost</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td className="w-fit whitespace-nowrap"><strong>Unique IPv4 address</strong></td>
+      <td><strong>$3.00</strong> / 30 days</td>
+    </tr>
+    <tr>
+      <td className="w-fit whitespace-nowrap"><strong>Object Storage</strong></td>
+      <td><strong>$0.01</strong> / GB</td>
+    </tr>
+  </tbody>
+</table>
+
+## Hitting the limits
+
+If you hit the limits of **backup/build/egress** in a project you'll pay:
+
+- **$0.50** - per **5 GB** of backup space
+- **$0.50** - per **15 hours** of build time
+- **$0.10** - per **1 GB** of egress
diff --git a/apps/docs/sidebars.js b/apps/docs/sidebars.js
index 6a64e907..59461f9f 100644
--- a/apps/docs/sidebars.js
+++ b/apps/docs/sidebars.js
@@ -88,6 +88,15 @@ module.exports = {
       },
       className: 'homepage-sidebar-item',
     },
+    {
+      type: 'doc',
+      id: 'features/pricing',
+      label: 'Pricing',
+      customProps: {
+        sidebar_icon: 'currency-dollar',
+      },
+      className: 'homepage-sidebar-item',
+    },
     // {
     //   type: 'doc',
     //   id: 'features/remote-dev',

From 46c77fc49dd9030ccfd3917b5fae325c578f7feb Mon Sep 17 00:00:00 2001
From: Advait <76993204+777advait@users.noreply.github.com>
Date: Sun, 24 Nov 2024 11:26:05 +0530
Subject: [PATCH 2/5] feat(features): add a calculator on the pricing page

---
 apps/docs/content/features/pricing.mdx        |   6 +
 .../components/PricingCalculator/index.tsx    | 278 ++++++++++++++++++
 2 files changed, 284 insertions(+)
 create mode 100644 apps/docs/src/components/PricingCalculator/index.tsx

diff --git a/apps/docs/content/features/pricing.mdx b/apps/docs/content/features/pricing.mdx
index fe746863..73a4be60 100644
--- a/apps/docs/content/features/pricing.mdx
+++ b/apps/docs/content/features/pricing.mdx
@@ -3,6 +3,8 @@ title: Pricing
 description: Detailed pricing description for deployment on zerops.
 ---
 
+import PricingCalculator from "@site/src/components/PricingCalculator"
+
 Zerops offers a usage based pricing model which can accommodate any **small-scale** or **high-availability** applications.
 
 ## Projects
@@ -94,6 +96,10 @@ Pricing is minute based, but credit is deducted once per hour based on the usage
   </tbody>
 </table>
 
+## Pricing Calculator
+
+<PricingCalculator />
+
 ## Hitting the limits
 
 If you hit the limits of **backup/build/egress** in a project you'll pay:
diff --git a/apps/docs/src/components/PricingCalculator/index.tsx b/apps/docs/src/components/PricingCalculator/index.tsx
new file mode 100644
index 00000000..93e0b731
--- /dev/null
+++ b/apps/docs/src/components/PricingCalculator/index.tsx
@@ -0,0 +1,278 @@
+import React from 'react';
+import { Button, InputText } from 'docs-ui';
+
+type ResourcesType = {
+  cpu: number;
+  cpuType: 'shared' | 'dedicated';
+  ram: number;
+  disk: number;
+  storage: number;
+  ipv4_addr: boolean;
+  core: 'lightweight' | 'serious';
+};
+
+export default function PricingCalculator() {
+  const [resources, setResources] = React.useState<ResourcesType>({
+    cpu: 1,
+    cpuType: 'shared',
+    ram: 0.25,
+    disk: 0.5,
+    storage: 0,
+    ipv4_addr: false,
+    core: 'lightweight',
+  });
+
+  const price = {
+    cpu: resources.cpuType === 'shared' ? 0.6 : 6,
+    ram: 0.75,
+    disk: 0.05,
+    storage: 0.01,
+    ipv4_addr: 3,
+    core: resources.core === 'lightweight' ? 0.0 : 10.0,
+  };
+
+  const handleAdjust = (name: string, amount: number) => {
+    setResources((prev) => {
+      const newValue = Number(
+        ((prev[name as keyof typeof prev] as number) + amount).toFixed(2)
+      );
+      const minValue = name === 'cpu' ? 1 : 0;
+      return {
+        ...prev,
+        [name]: Math.max(minValue, newValue),
+      };
+    });
+  };
+
+  const handleChange = (name: string, value: number | string | boolean) => {
+    setResources((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const calculateTotal = () => {
+    const total =
+      resources.cpu * price.cpu +
+      resources.ram * price.ram +
+      resources.disk * price.disk +
+      resources.storage * price.storage +
+      (resources.ipv4_addr ? price.ipv4_addr : 0) +
+      price.core;
+
+    return total.toFixed(2);
+  };
+
+  const isMinValue = (name: string, value: number) => {
+    const minValues = {
+      cpu: 1,
+      ram: 0.25,
+      disk: 0.5,
+      storage: 0,
+    };
+    return value <= minValues[name as keyof typeof minValues];
+  };
+
+  return (
+    <div className="p-1.5 space-y-4 bg-ui-bg-base rounded-lg">
+      <form className="grid grid-cols-2 gap-2">
+        <div className="space-y-0.25">
+          <label htmlFor="cpu" className="font-semibold text-lg">
+            No. of CPUs
+          </label>
+          <div className="flex items-center space-x-0.5">
+            <Button
+              onClick={(e) => {
+                e.preventDefault();
+                handleAdjust('cpu', -1);
+              }}
+              variant="secondary"
+              disabled={isMinValue('cpu', resources.cpu)}
+            >
+              -
+            </Button>
+            <InputText
+              type="number"
+              min="1"
+              id="cpu"
+              name="cpu"
+              value={resources.cpu}
+              className="text-center"
+              readOnly
+            />
+            <Button
+              onClick={(e) => {
+                e.preventDefault();
+                handleAdjust('cpu', 1);
+              }}
+              variant="secondary"
+            >
+              +
+            </Button>
+          </div>
+        </div>
+        <div className="space-y-0.25">
+          <label htmlFor="cpuType" className="font-semibold text-lg">
+            CPU type
+          </label>
+          <select
+            name="cpuType"
+            id="cpuType"
+            value={resources.cpuType}
+            onChange={(e) => handleChange('cpuType', e.target.value)}
+            className="w-full rounded-sm border-ui-border-base p-0.5"
+          >
+            <option value="shared">Shared CPU</option>
+            <option value="dedicated">Dedicated CPU</option>
+          </select>
+        </div>
+        <div className="space-y-0.25">
+          <label htmlFor="ram" className="font-semibold text-lg">
+            RAM (in GB)
+          </label>
+          <div className="flex items-center space-x-0.5">
+            <Button
+              onClick={(e) => {
+                e.preventDefault();
+                handleAdjust('ram', -0.25);
+              }}
+              variant="secondary"
+              disabled={isMinValue('ram', resources.ram)}
+            >
+              -
+            </Button>
+            <InputText
+              type="number"
+              min="0.25"
+              id="ram"
+              name="ram"
+              value={resources.ram}
+              className="text-center"
+              readOnly
+            />
+            <Button
+              onClick={(e) => {
+                e.preventDefault();
+                handleAdjust('ram', 0.25);
+              }}
+              variant="secondary"
+            >
+              +
+            </Button>
+          </div>
+        </div>
+        <div className="space-y-0.25">
+          <label htmlFor="disk" className="font-semibold text-lg">
+            Disk space (in GB)
+          </label>
+          <div className="flex items-center space-x-0.5">
+            <Button
+              onClick={(e) => {
+                e.preventDefault();
+                handleAdjust('disk', -0.5);
+              }}
+              variant="secondary"
+              disabled={isMinValue('disk', resources.disk)}
+            >
+              -
+            </Button>
+            <InputText
+              type="number"
+              min="0.5"
+              id="disk"
+              name="disk"
+              value={resources.disk}
+              className="text-center"
+              readOnly
+            />
+            <Button
+              onClick={(e) => {
+                e.preventDefault();
+                handleAdjust('disk', 0.5);
+              }}
+              variant="secondary"
+            >
+              +
+            </Button>
+          </div>
+        </div>
+        <div className="space-y-0.25">
+          <label htmlFor="storage" className="font-semibold text-lg">
+            Object storage (in GB)
+          </label>
+          <div className="flex items-center space-x-0.5">
+            <Button
+              onClick={(e) => {
+                e.preventDefault();
+                handleAdjust('storage', -1);
+              }}
+              variant="secondary"
+              disabled={isMinValue('storage', resources.storage)}
+            >
+              -
+            </Button>
+            <InputText
+              type="number"
+              min="0"
+              id="storage"
+              name="storage"
+              value={resources.storage}
+              className="text-center"
+              readOnly
+            />
+            <Button
+              onClick={(e) => {
+                e.preventDefault();
+                handleAdjust('storage', 1);
+              }}
+              variant="secondary"
+            >
+              +
+            </Button>
+          </div>
+        </div>
+
+        <div className="space-y-0.25">
+          <label htmlFor="core" className="font-semibold text-lg">
+            Project core package
+          </label>
+          <select
+            name="core"
+            id="core"
+            value={resources.core}
+            onChange={(e) => handleChange('core', e.target.value)}
+            className="w-full rounded-sm border-ui-border-base p-0.5"
+          >
+            <option value="lightweight">Lightweight</option>
+            <option value="serious">Serious</option>
+          </select>
+        </div>
+        <div className="space-y-0.25 col-span-2 flex items-center">
+          <label
+            htmlFor="ipv4_addr"
+            className="font-semibold text-lg flex items-center gap-0.5"
+          >
+            <input
+              type="checkbox"
+              id="ipv4_addr"
+              name="ipv4_addr"
+              checked={resources.ipv4_addr}
+              onChange={(e) =>
+                setResources((prev) => ({
+                  ...prev,
+                  ipv4_addr: e.target.checked,
+                }))
+              }
+              className="rounded border-ui-border-base"
+            />
+            Unique IPv4 Address
+          </label>
+        </div>
+      </form>
+      <p className="text-2xl">
+        <span className="font-bold">Total price:</span> ${calculateTotal()} / 30
+        days (approx.)
+      </p>
+    </div>
+  );
+}

From 94d6a0ea7da821f96f26cfc1775416637de3f8fc Mon Sep 17 00:00:00 2001
From: Advait <76993204+777advait@users.noreply.github.com>
Date: Mon, 25 Nov 2024 13:42:56 +0530
Subject: [PATCH 3/5] improve(features): update the project description add a
 table to differentiate lightweight and serious core

---
 apps/docs/content/features/pricing.mdx | 83 +++++++++++++++++---------
 1 file changed, 55 insertions(+), 28 deletions(-)

diff --git a/apps/docs/content/features/pricing.mdx b/apps/docs/content/features/pricing.mdx
index 73a4be60..2ba3e082 100644
--- a/apps/docs/content/features/pricing.mdx
+++ b/apps/docs/content/features/pricing.mdx
@@ -4,35 +4,62 @@ description: Detailed pricing description for deployment on zerops.
 ---
 
 import PricingCalculator from "@site/src/components/PricingCalculator"
+import { CheckCircleSolid } from "@medusajs/icons";
 
-Zerops offers a usage based pricing model which can accommodate any **small-scale** or **high-availability** applications.
+Zerops offers a usage based pricing model which can accommodate any **small-scale** or **high-availability** applications. The total price of hosting a application is equal to the project's **core package cost** + the **cost of the resources** of the services inside a project(+ extra costs if any).
 
 ## Projects
 
-A [project](/features/infrastructure#project) is the internal **infrastructure**, dedicated for your **services**. Think of it as a private network where you can deploy your services inside and interact with each other.
+A [project](/features/infrastructure#project) is mandatory for any deployment as it provides fundamental functionality for services inside it to work properly. You can have one or more projects.
 
-You need a project even if you plan on spinning up a single small node.js service, as this internal infrastructure is what allows most of the functionalities on Zerops.
+Zerops offers two project core packages - **Lightweight** ($0 / 30 days per project) which is ideal for **small-scale** applications and **Serious** ($10 / 30 days per project) for **high-availability** applications. Below is a brief differentitation between the two core packages:
 
-Zerops offers two project core packages:
-
-### Lightweight project core package (Less RAM and CPU usage)
-
-- Core services (L3 balancer with firewall, logger, statistics), HTTP routing and load balancers all on single container
-- Proxy / Load balancer
-- Unique IPv6 address
-- 15 hours of build time
-- 5 GB space for automated backups
-- 100 GB of egress
-
-### Serious project core package (Highly available setup)
-
-- Highly available core services (L3 balancer with firewall, logger, statistics)
-- Highly available HTTP routing & load balancer
-- Proxy / Load balancer
-- Unique IPv6 address
-- 150 hours of build time
-- 25 GB space for automated backups
-- 3 TB of egress
+<table className="w-full rounded-lg">
+  <thead>
+    <tr>
+      <th><strong>Features</strong></th>
+      <th><strong>Lightweight ($0/30d)</strong></th>
+      <th><strong>Serious ($10/30d)</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Core Services</td>
+      <td>Single container</td>
+      <td>Highly available</td>
+    </tr>
+    <tr>
+      <td>HTTP Routing & Load Balancer</td>
+      <td>Single container</td>
+      <td>Highly available</td>
+    </tr>
+    <tr>
+      <td>Proxy / Load Balancer</td>
+      <td><CheckCircleSolid /></td>
+      <td><CheckCircleSolid /></td>
+    </tr>
+    <tr>
+      <td>IPv6 Address</td>
+      <td><CheckCircleSolid /></td>
+      <td><CheckCircleSolid /></td>
+    </tr>
+    <tr>
+      <td>Build Time</td>
+      <td>15 hours</td>
+      <td>150 hours</td>
+    </tr>
+    <tr>
+      <td>Backup Space</td>
+      <td>5 GB</td>
+      <td>25 GB</td>
+    </tr>
+    <tr>
+      <td>Egress</td>
+      <td>100 GB</td>
+      <td>3 TB</td>
+    </tr>
+  </tbody>
+</table>
 
 :::info
 Project core is refundable, for eg. if you create a serious project, pay $10 and then delete it after 15 days, you'll get $5 back
@@ -48,7 +75,7 @@ Pricing is minute based, but credit is deducted once per hour based on the usage
 
 ### Resource pricing
 
-<table className="w-full rounded-md">
+<table className="w-full rounded-lg">
   <thead>
     <tr>
       <th className="w-fit whitespace-nowrap"><strong>Resource</strong></th>
@@ -77,7 +104,7 @@ Pricing is minute based, but credit is deducted once per hour based on the usage
 
 ### Other features
 
-<table className="w-full rounded-md">
+<table className="w-full rounded-lg">
   <thead>
     <tr>
       <th className="w-fit whitespace-nowrap"><strong>Feature</strong></th>
@@ -104,6 +131,6 @@ Pricing is minute based, but credit is deducted once per hour based on the usage
 
 If you hit the limits of **backup/build/egress** in a project you'll pay:
 
-- **$0.50** - per **5 GB** of backup space
-- **$0.50** - per **15 hours** of build time
-- **$0.10** - per **1 GB** of egress
+- **$0.50** - per **5 GB** of extra backup space
+- **$0.50** - per **15 hours** of extra build time
+- **$0.10** - per **1 GB** of extra egress

From 50b10f2ef55533b6409b25788596ffc536a098fb Mon Sep 17 00:00:00 2001
From: Advait <76993204+777advait@users.noreply.github.com>
Date: Mon, 25 Nov 2024 13:45:38 +0530
Subject: [PATCH 4/5] fix(features): add `per 30 days` in object storage row

---
 apps/docs/content/features/pricing.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/docs/content/features/pricing.mdx b/apps/docs/content/features/pricing.mdx
index 2ba3e082..f389ab9e 100644
--- a/apps/docs/content/features/pricing.mdx
+++ b/apps/docs/content/features/pricing.mdx
@@ -6,7 +6,7 @@ description: Detailed pricing description for deployment on zerops.
 import PricingCalculator from "@site/src/components/PricingCalculator"
 import { CheckCircleSolid } from "@medusajs/icons";
 
-Zerops offers a usage based pricing model which can accommodate any **small-scale** or **high-availability** applications. The total price of hosting a application is equal to the project's **core package cost** + the **cost of the resources** of the services inside a project(+ extra costs if any).
+Zerops offers a usage based pricing model which can accommodate any **small-scale** or **high-availability** applications. The total price of hosting a application is equal to the project's **core package cost** + the **cost of the resources** of the services inside a project**(+ extra costs if any)**.
 
 ## Projects
 
@@ -118,7 +118,7 @@ Pricing is minute based, but credit is deducted once per hour based on the usage
     </tr>
     <tr>
       <td className="w-fit whitespace-nowrap"><strong>Object Storage</strong></td>
-      <td><strong>$0.01</strong> / GB</td>
+      <td><strong>$0.01</strong> / GB per 30 days</td>
     </tr>
   </tbody>
 </table>

From ab0d393c8eba10f9286735cbff4b27770718a47b Mon Sep 17 00:00:00 2001
From: Arjun Aditya <meow@nermalcat69.dev>
Date: Tue, 26 Nov 2024 15:30:16 +0530
Subject: [PATCH 5/5] chore: improve pricing page & calc

---
 apps/docs/content/features/pricing.mdx        |  87 +++++++++----
 apps/docs/sidebars.js                         |   2 +-
 .../PricingCalculator/calculator.css          |  86 +++++++++++++
 .../components/PricingCalculator/index.tsx    | 116 +++++++++++-------
 4 files changed, 223 insertions(+), 68 deletions(-)
 create mode 100644 apps/docs/src/components/PricingCalculator/calculator.css

diff --git a/apps/docs/content/features/pricing.mdx b/apps/docs/content/features/pricing.mdx
index f389ab9e..0661c575 100644
--- a/apps/docs/content/features/pricing.mdx
+++ b/apps/docs/content/features/pricing.mdx
@@ -1,24 +1,44 @@
 ---
-title: Pricing
+title: Pricing Plans & Usage
 description: Detailed pricing description for deployment on zerops.
 ---
 
 import PricingCalculator from "@site/src/components/PricingCalculator"
 import { CheckCircleSolid } from "@medusajs/icons";
 
-Zerops offers a usage based pricing model which can accommodate any **small-scale** or **high-availability** applications. The total price of hosting a application is equal to the project's **core package cost** + the **cost of the resources** of the services inside a project**(+ extra costs if any)**.
+:::tip Calculate Your Costs
+Use our basic [pricing calculator](#pricing-calculator) below to estimate your monthly costs based on your specific needs.
+:::
+
+Zerops offers a usage based pricing model which can accommodate any **small-scale** or **high-availability** applications. The total price of hosting a application is equal to the project's **core package cost** + the **cost of the resources** of the services inside a project **(+ extra costs if any)**.
+
+## Project Plans
+
+Every deployment on Zerops requires a project, which provides essential infrastructure and functionality. Projects are the foundation of your application, handling core services like load balancing, routing, and container orchestration.
 
-## Projects
+### Lightweight Plan
+- **Cost:** Free
+- **Best for:** Development, testing, and small-scale applications
+- **Infrastructure:** Single container setup
+- **Limitations:** Shared IPv4 address, no high availability
 
-A [project](/features/infrastructure#project) is mandatory for any deployment as it provides fundamental functionality for services inside it to work properly. You can have one or more projects.
+### Serious Plan
+- **Cost:** $10 / 30 days
+- **Best for:** Production and high-availability applications
+- **Infrastructure:** Multi-container, highly available setup
+- **Benefits:** Ready for production workloads with automatic failover
 
-Zerops offers two project core packages - **Lightweight** ($0 / 30 days per project) which is ideal for **small-scale** applications and **Serious** ($10 / 30 days per project) for **high-availability** applications. Below is a brief differentitation between the two core packages:
+:::info Billing
+Project costs are calculated based on actual usage. You're only charged for the time your project is active, calculated down to the minute.
+:::
+
+### Plan Comparison
 
 <table className="w-full rounded-lg">
   <thead>
     <tr>
       <th><strong>Features</strong></th>
-      <th><strong>Lightweight ($0/30d)</strong></th>
+      <th><strong>Lightweight (Free)</strong></th>
       <th><strong>Serious ($10/30d)</strong></th>
     </tr>
   </thead>
@@ -61,19 +81,39 @@ Zerops offers two project core packages - **Lightweight** ($0 / 30 days per proj
   </tbody>
 </table>
 
-:::info
-Project core is refundable, for eg. if you create a serious project, pay $10 and then delete it after 15 days, you'll get $5 back
-:::
+### Additional Costs
+
+The following costs apply when you exceed the plan limits of a project:
+
+<table className="w-full rounded-lg">
+  <thead>
+    <tr>
+      <th className="w-fit whitespace-nowrap"><strong>Resource</strong></th>
+      <th><strong>Cost</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td className="w-fit whitespace-nowrap"><strong>Backup Space</strong></td>
+      <td><strong>$0.50</strong> per 5 GB</td>
+    </tr>
+    <tr>
+      <td className="w-fit whitespace-nowrap"><strong>Build Time</strong></td>
+      <td><strong>$0.50</strong> per 15 hours</td>
+    </tr>
+    <tr>
+      <td className="w-fit whitespace-nowrap"><strong>Egress Traffic</strong></td>
+      <td><strong>$0.10</strong> per 1 GB</td>
+    </tr>
+  </tbody>
+</table>
 
-## Resources & Costs
 
-The pricing model is based on the amount of resources allocated to your services inside a project.
+## Service Resources
 
-:::info
-Pricing is minute based, but credit is deducted once per hour based on the usage throughout the hour.
-:::
+Resources are allocated per service and billed by the minute, though credit is deducted hourly based on actual usage.
 
-### Resource pricing
+### Resource Pricing
 
 <table className="w-full rounded-lg">
   <thead>
@@ -102,7 +142,7 @@ Pricing is minute based, but credit is deducted once per hour based on the usage
   </tbody>
 </table>
 
-### Other features
+### Additional Features
 
 <table className="w-full rounded-lg">
   <thead>
@@ -123,14 +163,15 @@ Pricing is minute based, but credit is deducted once per hour based on the usage
   </tbody>
 </table>
 
-## Pricing Calculator
+:::info IPv4 and Cloudflare
+By default, projects start with a shared IPv4 address. If you plan to use Cloudflare's proxy features, you'll need to purchase a unique IPv4 address for your project.
+:::
 
-<PricingCalculator />
+:::info Object Storage
+External storage solution ideal for storing files, backups, and static assets outside your main storage. Perfect for scalable content delivery and backup strategies.
+:::
 
-## Hitting the limits
+## Pricing Calculator
 
-If you hit the limits of **backup/build/egress** in a project you'll pay:
+<PricingCalculator />
 
-- **$0.50** - per **5 GB** of extra backup space
-- **$0.50** - per **15 hours** of extra build time
-- **$0.10** - per **1 GB** of extra egress
diff --git a/apps/docs/sidebars.js b/apps/docs/sidebars.js
index 59461f9f..db321e9a 100644
--- a/apps/docs/sidebars.js
+++ b/apps/docs/sidebars.js
@@ -91,7 +91,7 @@ module.exports = {
     {
       type: 'doc',
       id: 'features/pricing',
-      label: 'Pricing',
+      label: 'Pricing Plans & Usage',
       customProps: {
         sidebar_icon: 'currency-dollar',
       },
diff --git a/apps/docs/src/components/PricingCalculator/calculator.css b/apps/docs/src/components/PricingCalculator/calculator.css
new file mode 100644
index 00000000..bd1f5f83
--- /dev/null
+++ b/apps/docs/src/components/PricingCalculator/calculator.css
@@ -0,0 +1,86 @@
+.calculator {
+    border: 1px solid #e2e8f0;
+}
+
+.calculator-select {
+    appearance: none;
+    background-color: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 0.5rem;
+    padding: 0.5rem 2rem 0.5rem 1rem;
+    width: 100%;
+    font-size: 1rem;
+    line-height: 1.5;
+    background-image: url("data:image/svg+xml,...");
+    /* Add dropdown arrow icon */
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 1rem;
+}
+
+.calculator-select:focus {
+    outline: none;
+    border-color: #3182ce;
+    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
+}
+
+
+.number-input {
+    /* Remove spinner arrows for all browsers */
+    -moz-appearance: textfield;
+    /* Firefox */
+    appearance: textfield;
+}
+
+.number-input::-webkit-outer-spin-button,
+.number-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* Rest of input styling */
+.number-input {
+    width: 100%;
+    padding: 0.5rem 1rem;
+    border: 1px solid #e2e8f0;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    background-color: #ffffff;
+}
+
+.number-input:focus {
+    outline: none;
+    border-color: #3182ce;
+    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
+}
+
+input[type="checkbox"] {
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 1px solid #e2e8f0;
+    border-radius: 0.5rem;
+    background-color: #ffffff;
+    cursor: pointer;
+}
+
+input[type="checkbox"]:checked {
+    background-color: #3182ce;
+    border-color: #3182ce;
+    padding: 0.25rem;
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+    background-size: 1.25rem;
+}
+
+input[type="checkbox"]:focus {
+    outline: none;
+    border-color: #3182ce;
+    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
+}
+
+.calculator-label {
+    padding-bottom: 1rem;
+    display: block;
+    font-weight: 500;
+    color: #4A5568;
+}
\ No newline at end of file
diff --git a/apps/docs/src/components/PricingCalculator/index.tsx b/apps/docs/src/components/PricingCalculator/index.tsx
index 93e0b731..5c2f5010 100644
--- a/apps/docs/src/components/PricingCalculator/index.tsx
+++ b/apps/docs/src/components/PricingCalculator/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Button, InputText } from 'docs-ui';
+import './calculator.css';
 
 type ResourcesType = {
   cpu: number;
@@ -24,7 +25,7 @@ export default function PricingCalculator() {
 
   const price = {
     cpu: resources.cpuType === 'shared' ? 0.6 : 6,
-    ram: 0.75,
+    ram: 3,
     disk: 0.05,
     storage: 0.01,
     ipv4_addr: 3,
@@ -33,9 +34,8 @@ export default function PricingCalculator() {
 
   const handleAdjust = (name: string, amount: number) => {
     setResources((prev) => {
-      const newValue = Number(
-        ((prev[name as keyof typeof prev] as number) + amount).toFixed(2)
-      );
+      const currentValue = Number(prev[name as keyof typeof prev]);
+      const newValue = Number((currentValue + amount).toFixed(2));
       const minValue = name === 'cpu' ? 1 : 0;
       return {
         ...prev,
@@ -74,10 +74,10 @@ export default function PricingCalculator() {
   };
 
   return (
-    <div className="p-1.5 space-y-4 bg-ui-bg-base rounded-lg">
-      <form className="grid grid-cols-2 gap-2">
-        <div className="space-y-0.25">
-          <label htmlFor="cpu" className="font-semibold text-lg">
+    <div className="p-2.5 space-y-4 bg-[#F9FAFB] rounded-lg my-2 calculator">
+      <form className="grid grid-cols-1 xl:grid-cols-2 gap-2">
+        <div className="space-y-0.25 select-none">
+          <label htmlFor="cpu" className="font-semibold text-lg calculator-label">
             No. of CPUs
           </label>
           <div className="flex items-center space-x-0.5">
@@ -93,12 +93,19 @@ export default function PricingCalculator() {
             </Button>
             <InputText
               type="number"
-              min="1"
-              id="cpu"
-              name="cpu"
+              className="number-input"
               value={resources.cpu}
-              className="text-center"
-              readOnly
+              onChange={(e) => {
+                const value = e.target.value;
+                if (value >= 0) {
+                  setResources((prev) => ({
+                    ...prev,
+                    cpu: value,
+                  }));
+                }
+              }}
+              min="1"
+              step="1"
             />
             <Button
               onClick={(e) => {
@@ -111,8 +118,8 @@ export default function PricingCalculator() {
             </Button>
           </div>
         </div>
-        <div className="space-y-0.25">
-          <label htmlFor="cpuType" className="font-semibold text-lg">
+        <div className="select-none">
+          <label htmlFor="cpuType" className="font-semibold text-lg calculator-label">
             CPU type
           </label>
           <select
@@ -120,14 +127,14 @@ export default function PricingCalculator() {
             id="cpuType"
             value={resources.cpuType}
             onChange={(e) => handleChange('cpuType', e.target.value)}
-            className="w-full rounded-sm border-ui-border-base p-0.5"
+            className="calculator-select"
           >
             <option value="shared">Shared CPU</option>
             <option value="dedicated">Dedicated CPU</option>
           </select>
         </div>
-        <div className="space-y-0.25">
-          <label htmlFor="ram" className="font-semibold text-lg">
+        <div className="select-none">
+          <label htmlFor="ram" className="font-semibold text-lg calculator-label">
             RAM (in GB)
           </label>
           <div className="flex items-center space-x-0.5">
@@ -143,12 +150,19 @@ export default function PricingCalculator() {
             </Button>
             <InputText
               type="number"
-              min="0.25"
-              id="ram"
-              name="ram"
+              className="number-input"
               value={resources.ram}
-              className="text-center"
-              readOnly
+              onChange={(e) => {
+                const value = e.target.value;
+                if (value >= 0) {
+                  setResources((prev) => ({
+                    ...prev,
+                    ram: value,
+                  }));
+                }
+              }}
+              min="0.25"
+              step="0.25"
             />
             <Button
               onClick={(e) => {
@@ -161,8 +175,8 @@ export default function PricingCalculator() {
             </Button>
           </div>
         </div>
-        <div className="space-y-0.25">
-          <label htmlFor="disk" className="font-semibold text-lg">
+        <div className="select-none">
+          <label htmlFor="disk" className="font-semibold text-lg calculator-label">
             Disk space (in GB)
           </label>
           <div className="flex items-center space-x-0.5">
@@ -178,12 +192,19 @@ export default function PricingCalculator() {
             </Button>
             <InputText
               type="number"
-              min="0.5"
-              id="disk"
-              name="disk"
+              className="number-input"
               value={resources.disk}
-              className="text-center"
-              readOnly
+              onChange={(e) => {
+                const value = e.target.value;
+                if (value >= 0) {
+                  setResources((prev) => ({
+                    ...prev,
+                    disk: value,
+                  }));
+                }
+              }}
+              min="0.5"
+              step="0.5"
             />
             <Button
               onClick={(e) => {
@@ -196,8 +217,8 @@ export default function PricingCalculator() {
             </Button>
           </div>
         </div>
-        <div className="space-y-0.25">
-          <label htmlFor="storage" className="font-semibold text-lg">
+        <div className="select-none">
+          <label htmlFor="storage" className="font-semibold text-lg calculator-label">
             Object storage (in GB)
           </label>
           <div className="flex items-center space-x-0.5">
@@ -213,12 +234,19 @@ export default function PricingCalculator() {
             </Button>
             <InputText
               type="number"
-              min="0"
-              id="storage"
-              name="storage"
+              className="number-input"
               value={resources.storage}
-              className="text-center"
-              readOnly
+              onChange={(e) => {
+                const value = e.target.value;
+                if (value >= 0) {
+                  setResources((prev) => ({
+                    ...prev,
+                    storage: value,
+                  }));
+                }
+              }}
+              min="0"
+              step="1"
             />
             <Button
               onClick={(e) => {
@@ -232,8 +260,8 @@ export default function PricingCalculator() {
           </div>
         </div>
 
-        <div className="space-y-0.25">
-          <label htmlFor="core" className="font-semibold text-lg">
+        <div className="select-none">
+          <label htmlFor="core" className="font-semibold text-lg calculator-label">
             Project core package
           </label>
           <select
@@ -241,13 +269,13 @@ export default function PricingCalculator() {
             id="core"
             value={resources.core}
             onChange={(e) => handleChange('core', e.target.value)}
-            className="w-full rounded-sm border-ui-border-base p-0.5"
+            className="calculator-select"
           >
             <option value="lightweight">Lightweight</option>
             <option value="serious">Serious</option>
           </select>
         </div>
-        <div className="space-y-0.25 col-span-2 flex items-center">
+        <div className="select-none">
           <label
             htmlFor="ipv4_addr"
             className="font-semibold text-lg flex items-center gap-0.5"
@@ -269,10 +297,10 @@ export default function PricingCalculator() {
           </label>
         </div>
       </form>
-      <p className="text-2xl">
+      <div className="text-2xl">
         <span className="font-bold">Total price:</span> ${calculateTotal()} / 30
-        days (approx.)
-      </p>
+        days
+      </div>
     </div>
   );
 }