From 4501b700a256ce5c36fa1a046e2c7761fcafaeb9 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Tue, 10 Mar 2026 11:30:09 -0600
Subject: [PATCH] feat: restructure pricing section and create dedicated
 pricing page

- Removed the Pricing component from the homepage and created a new dedicated Pricing page.
- Updated navigation links to point to the new Pricing page instead of the homepage section.
- Enhanced the Pricing component with an animated grid pattern for improved visual appeal.
---
 apps/docs/content/docs/core/cloud.mdx |  2 +-
 apps/website/app/page.tsx             |  4 ----
 apps/website/app/pricing/page.tsx     | 16 +++++++++++++
 apps/website/components/Footer.tsx    |  2 +-
 apps/website/components/Header.tsx    |  4 ++--
 apps/website/components/pricing.tsx   | 33 ++++++++++++---------------
 6 files changed, 35 insertions(+), 26 deletions(-)
 create mode 100644 apps/website/app/pricing/page.tsx

diff --git a/apps/docs/content/docs/core/cloud.mdx b/apps/docs/content/docs/core/cloud.mdx
index c8ce9f2..b6cb2d5 100644
--- a/apps/docs/content/docs/core/cloud.mdx
+++ b/apps/docs/content/docs/core/cloud.mdx
@@ -13,7 +13,7 @@ UI is installed, which can be a challenge if you don't have the resources to do
 
 Dokploy cloud starts from $4.50 per month per server, the next is 3.50$, and you can deploy as many applications you want to your remote server connected to a dokploy cloud, multi server feature is recommended for HA and scalability projects.
 
-You can start by registering on the [Dokploy Cloud](https://app.dokploy.com) website and follow the steps to deploy your apps, see the [Pricing](https://dokploy.com#pricing) page for more information.
+You can start by registering on the [Dokploy Cloud](https://app.dokploy.com) website and follow the steps to deploy your apps, see the [Pricing](https://dokploy.com/pricing) page for more information.
 
 
 
diff --git a/apps/website/app/page.tsx b/apps/website/app/page.tsx
index bf7c2d7..364ee91 100644
--- a/apps/website/app/page.tsx
+++ b/apps/website/app/page.tsx
@@ -3,7 +3,6 @@ import { Faqs } from "@/components/Faqs";
 import { Hero } from "@/components/Hero";
 import { Testimonials } from "@/components/Testimonials";
 import { FirstFeaturesSection } from "@/components/first-features";
-import { Pricing } from "@/components/pricing";
 import { SecondaryFeaturesSections } from "@/components/secondary-features";
 import { Sponsors } from "@/components/sponsors";
 import { StatsSection } from "@/components/stats";
@@ -26,9 +25,6 @@ export default function Home() {
 				<SecondaryFeaturesSections />
 				<StatsSection />
 				<Testimonials />
-				<div className="relative w-full">
-					<Pricing />
-				</div>
 				<Faqs />
 				{/* <Sponsors /> */}
 				<CallToAction />
diff --git a/apps/website/app/pricing/page.tsx b/apps/website/app/pricing/page.tsx
new file mode 100644
index 0000000..7a8a910
--- /dev/null
+++ b/apps/website/app/pricing/page.tsx
@@ -0,0 +1,16 @@
+import { Pricing } from "@/components/pricing";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Pricing",
+	description:
+		"Simple, affordable pricing for Dokploy. Choose the plan that fits your needs.",
+};
+
+export default function PricingPage() {
+	return (
+		<div className="relative w-full">
+			<Pricing />
+		</div>
+	);
+}
diff --git a/apps/website/components/Footer.tsx b/apps/website/components/Footer.tsx
index f26ef16..f36facb 100644
--- a/apps/website/components/Footer.tsx
+++ b/apps/website/components/Footer.tsx
@@ -12,7 +12,7 @@ const footerSections = [
 		links: [
 			{ href: "/", label: "Home" },
 			{ href: "/#features", label: "Features" },
-			{ href: "/#pricing", label: "Pricing" },
+			{ href: "/pricing", label: "Pricing" },
 			{
 				href: "/features/application-deployment-platform",
 				label: "Application Deployment Platform",
diff --git a/apps/website/components/Header.tsx b/apps/website/components/Header.tsx
index 1062641..ab74bf9 100644
--- a/apps/website/components/Header.tsx
+++ b/apps/website/components/Header.tsx
@@ -118,7 +118,7 @@ function MobileNavigation() {
 						as="div"
 						className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-2xl border border-border bg-background p-4 text-lg tracking-tight  text-primary shadow-xl ring-1 ring-border/5"
 					>
-						<MobileNavLink href="/#pricing">Pricing</MobileNavLink>
+						<MobileNavLink href="/pricing">Pricing</MobileNavLink>
 						<MobileNavLink href="/#faqs">FAQ</MobileNavLink>
 						<MobileNavLink
 							href="https://docs.dokploy.com/docs/core"
@@ -162,7 +162,7 @@ export function Header() {
 							<Logo className="h-10 w-auto" />
 						</Link>
 						<div className="hidden md:flex md:gap-x-6">
-							<NavLink href="/#pricing">Pricing</NavLink>
+							<NavLink href="/pricing">Pricing</NavLink>
 							<NavLink href="/#faqs">FAQ</NavLink>
 							<NavLink
 								href="https://docs.dokploy.com/docs/core"
diff --git a/apps/website/components/pricing.tsx b/apps/website/components/pricing.tsx
index a57a37e..106eaf2 100644
--- a/apps/website/components/pricing.tsx
+++ b/apps/website/components/pricing.tsx
@@ -10,6 +10,8 @@ import { Badge } from "./ui/badge";
 import { Button, buttonVariants } from "./ui/button";
 import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
 import { PricingFeatureTable } from "./pricing/PricingFeatureTable";
+import AnimatedGridPattern from "./ui/animated-grid-pattern";
+import { cn } from "@/lib/utils";
 
 const CLOUD_APP_URL = "https://app.dokploy.com";
 
@@ -86,25 +88,20 @@ export function Pricing() {
 		<section
 			id="pricing"
 			aria-label="Pricing"
-			className="border-t border-border/30 bg-black py-20 sm:py-32"
+			className="relative border-t border-border/30 bg-black py-20 sm:py-32 overflow-hidden"
 		>
-			<div className="absolute inset-0 pointer-events-none">
-				<svg viewBox="0 0 2000 1000" xmlns="http://www.w3.org/2000/svg">
-					<mask id="b" x="0" y="0" width="2000" height="1000">
-						<path fill="url(#a)" d="M0 0h2000v1000H0z" />
-					</mask>
-					<path d="M0 0h2000v1000H0z" />
-					<g stroke="#22222233" strokeWidth=".4" fill="none" mask="url(#b)">
-						<path d="M0 0h50v50H0z" />
-					</g>
-					<defs>
-						<radialGradient id="a">
-							<stop offset="50%" stopColor="#fff" stopOpacity="0" />
-							<stop offset="1" stopColor="#fff" stopOpacity="1" />
-						</radialGradient>
-					</defs>
-				</svg>
-			</div>
+			<AnimatedGridPattern
+				numSquares={30}
+				maxOpacity={0.1}
+				height={40}
+				width={40}
+				duration={3}
+				repeatDelay={1}
+				className={cn(
+					"[mask-image:radial-gradient(800px_circle_at_center,white,transparent)]",
+					"absolute inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
+				)}
+			/>
 			<Container className="relative">
 				<div className="text-center">
 					<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">