From a0ec845c4ef86823d121c9a02a5522b19f1c1711 Mon Sep 17 00:00:00 2001 From: Mauricio Siu Date: Thu, 29 Jan 2026 17:46:14 -0600 Subject: [PATCH] feat: update pricing component layout and features - Introduced a new state for enterprise deployment options (cloud/self-hosted). - Redesigned the pricing section to include a "Hobby" plan with detailed features. - Improved layout with a grid system for better responsiveness. - Updated pricing display logic for clarity on annual vs monthly rates. --- apps/website/components/pricing.tsx | 462 +++++++++++++--------------- 1 file changed, 214 insertions(+), 248 deletions(-) diff --git a/apps/website/components/pricing.tsx b/apps/website/components/pricing.tsx index 7e77c617..89539248 100644 --- a/apps/website/components/pricing.tsx +++ b/apps/website/components/pricing.tsx @@ -88,7 +88,9 @@ export function Pricing() { const router = useRouter(); const [isAnnual, setIsAnnual] = useState(false); const [serverQuantity, setServerQuantity] = useState(1); - const featured = true; + const [enterpriseDeployment, setEnterpriseDeployment] = useState< + "cloud" | "self-hosted" + >("cloud"); const [openVideo, setOpenVideo] = useState(false); const [openContactModal, setOpenContactModal] = useState(false); @@ -141,281 +143,245 @@ export function Pricing() { Annual -
-
-
-
-

- Free -

- | -

- Open Source -

-
- -

- Dokploy Open Source -

-

- Install and manage Dokploy UI on your own server. -

- -
    - {[ - "Complete Flexibility: Install Dokploy UI on your own infrastructure", - "Self-hosted Infrastructure", - "Community Support", - "Access to Core Features", - "Access to All Updates", - "Unlimited Servers", - ].map((feature) => ( -
  • - - {feature} +
    +
    + {/* Hobby */} +
    +

    + Hobby +

    +
      + {[ + "Managed Hosting: No need to manage your own servers", + "Unlimited Deployments", + "Unlimited Databases", + "Unlimited Applications", + "Up to 1 user", + "1 environment", + "1 organization", + ].map((feature) => ( +
    • + + {feature} +
      • + ))} +
    • + + + Remote Servers Monitoring +
      • - ))} -
    • - - - Remote Servers Monitoring - -
      • -
    -
    -
    - - Unlimited Servers - - - Start deploying{" "} - - -
    -
    -
    -
    - {isAnnual && ( -
    - Recommended 🚀 -
    - )} +
  • + + Email Support +
    • +
- {isAnnual ? ( -
-

- $ {calculatePrice(serverQuantity, isAnnual).toFixed(2)}{" "} - USD -

- | -

- ${" "} - {(calculatePrice(serverQuantity, isAnnual) / 12).toFixed( - 2, - )}{" "} - / Month USD -

+
+
+

+ $ + {calculatePrice(1, isAnnual).toFixed(isAnnual ? 1 : 2)} + {isAnnual ? "/yr" : "/mo"} per server +

+
- ) : ( -

- $ {calculatePrice(serverQuantity, isAnnual).toFixed(2)} USD -

- )} -

- Dokploy Plan -

-

- We manage the Dokploy UI infrastructure, we take care of it - for you. -

+
-
    - {[ - "Managed Hosting: No need to manage your own servers", - "Unlimited Deployments", - "Unlimited Databases", - "Unlimited Applications", - "Unlimited Users", - "Remote Servers Monitoring", - "Priority Support", - ].map((feature, index) => ( -
  • - - {feature} -
    • - ))} -
-
-
- - No. of {serverQuantity} Servers (You bring the servers) - - - - setOpenVideo(true)}> - - - -
- setOpenVideo(false)} - className="flex size-4 cursor-pointer self-end text-muted-foreground transition-colors hover:text-primary" + {/* Startup */} +
+

+ Startup +

+
    + {[ + "All the features of Hobby, plus...", + "Audit Logs", + "Multiple Environments (3 included)", + "Unlimited users", + "3 servers included", + "3 organizations included", + ].map((feature) => ( +
  • + + {feature} +
    • + ))} +
+ +
+
+ + No. of {serverQuantity} Servers (You bring the servers) + + + + setOpenVideo(true)}> + + + +
+ setOpenVideo(false)} + className="flex size-4 cursor-pointer self-end text-muted-foreground transition-colors hover:text-primary" + /> +
+

+ We recommend you to watch the video to understand + the benefits of Dokploy Cloud +

+ + -
-

- We recommend you to watch the video to understand - the benefits of Dokploy Cloud -

+ + + +
- - - - -
+
+ + { + setServerQuantity( + e.target.value as unknown as number, + ); + }} + /> -
- +
- setServerQuantity(serverQuantity - 1); - }} - > - - - { - setServerQuantity(e.target.value as unknown as number); - }} - /> +
+

+ Starting @{" "} + {isAnnual + ? `$${(15 * 12).toFixed(0)}/yr` + : "$15/mo"} +

+
- + Subscribe +
-
-
- + + {/* Enterprise */} +
+
+

+ Enterprise +

+
+ + setEnterpriseDeployment( + v === "self-hosted" ? "self-hosted" : "cloud", + ) + } > - Subscribe - + + Cloud + + Self-Hosted + + +
-
- -
-
-
-
-

- Enterprise -

- - Premium ✨ - -
- -

- Enterprise Support & Services -

-

- Custom solutions and dedicated support for your organization. -

-
    +
      +
    • + + + All the features of Business, plus... + +
      • {[ - "SLA Guarantees / Priority Support", - "Aditional Security & Governance", - "Custom Solutions", - "Private Labeling", + "SSO", + "Role based access controls", + "Unlimited Environments", + "Priority Support", + "MSA/SLA", + "White Labeling", ].map((feature) => ( -
    • - +
    • + {feature}
      • ))} + {enterpriseDeployment === "self-hosted" && ( +
    • + + + Self-hosted deployment support + +
      • + )}
    -
    + +
    +
    +

    + Contact Sales +

    +
+ + {/* Agency */} +
+
+
+

+ Agency +

+ + Partner ✨ + +
+

+ Our Agency plan is uniquely tailored to the needs of agencies. + Please contact us to learn more about this option as well as + becoming a certified Dokploy partner. +

+ +
+