mirror of
https://github.com/Dokploy/website.git
synced 2026-06-15 20:25:25 +02:00
feat: add pricing page and update sitemap
- Introduced a new pricing page with dynamic pricing calculations based on billing frequency and server count. - Added a pricing layout component to manage the page structure and metadata. - Updated the sitemap to include the new pricing page URL for better SEO.
This commit is contained in:
Mauricio Siu
16
apps/website/app/pricing/layout.tsx
Normal file
16
apps/website/app/pricing/layout.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Pricing - Dokploy',
|
||||
description:
|
||||
'Start for Free, Scale Pricing as You Build. Pricing plans for all your deployment and development needs.',
|
||||
}
|
||||
|
||||
export default function PricingLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
279
apps/website/app/pricing/page.tsx
Normal file
279
apps/website/app/pricing/page.tsx
Normal file
@@ -0,0 +1,279 @@
|
||||
'use client'
|
||||
|
||||
import { Container } from '@/components/Container'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { cn } from '@/lib/utils'
|
||||
import AnimatedGridPattern from '@/components/ui/animated-grid-pattern'
|
||||
import { Check } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function PricingPage() {
|
||||
const [billing, setBilling] = useState<'monthly' | 'annual'>('monthly')
|
||||
const [servers, setServers] = useState(1)
|
||||
|
||||
const calculatePrice = () => {
|
||||
const basePrice = 0
|
||||
const serverPrice = 3.5
|
||||
const additionalServers = Math.max(0, servers - 1)
|
||||
const monthlyTotal = basePrice + additionalServers * serverPrice
|
||||
|
||||
if (billing === 'annual') {
|
||||
return (monthlyTotal * 12 * 0.8).toFixed(2) // 20% discount
|
||||
}
|
||||
return monthlyTotal.toFixed(2)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-black">
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden bg-black px-4 py-20 lg:py-32">
|
||||
<div className="bottom-0 flex w-full items-center justify-center overflow-hidden rounded-lg bg-background md:shadow-xl">
|
||||
<div className="relative px-4">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<h1 className="font-display text-4xl font-medium tracking-tight text-white sm:text-6xl">
|
||||
Start for Free, Scale Pricing as You Build
|
||||
</h1>
|
||||
<p className="mt-6 text-lg tracking-tight text-muted-foreground">
|
||||
Pricing plans for all your deployment and
|
||||
development needs.
|
||||
</p>
|
||||
|
||||
{/* Billing Toggle */}
|
||||
<div className="mt-10 flex items-center justify-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBilling('monthly')}
|
||||
className={cn(
|
||||
'rounded-full px-6 py-2 text-sm font-medium transition-colors',
|
||||
billing === 'monthly'
|
||||
? 'bg-primary text-black'
|
||||
: 'text-muted-foreground hover:text-white',
|
||||
)}
|
||||
>
|
||||
Monthly
|
||||
</button>
|
||||
<span className="text-muted-foreground">|</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBilling('annual')}
|
||||
className={cn(
|
||||
'rounded-full px-6 py-2 text-sm font-medium transition-colors',
|
||||
billing === 'annual'
|
||||
? 'bg-primary text-black'
|
||||
: 'text-muted-foreground hover:text-white',
|
||||
)}
|
||||
>
|
||||
Annual
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</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',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Cards */}
|
||||
<section className="py-20">
|
||||
<Container>
|
||||
<div className="mx-auto grid max-w-6xl gap-8 md:grid-cols-2">
|
||||
{/* Open Source Plan */}
|
||||
<div className="relative overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-b from-muted/10 to-transparent p-8">
|
||||
<div className="relative z-10">
|
||||
<div className="mb-6">
|
||||
<h3 className="text-2xl font-bold text-white">
|
||||
Open source
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Free Forever
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="mb-8 text-muted-foreground">
|
||||
Install and manage Dokploy UI on your own
|
||||
server.
|
||||
</p>
|
||||
|
||||
<div className="mb-8 space-y-4">
|
||||
{openSourceFeatures.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-3"
|
||||
>
|
||||
<Check className="h-5 w-5 shrink-0 text-primary" />
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{feature}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Button className="w-full rounded-full" asChild>
|
||||
<Link
|
||||
href="https://docs.dokploy.com/docs/core/get-started/installation"
|
||||
target="_blank"
|
||||
>
|
||||
Start deploying →
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Scale Plan */}
|
||||
<div className="relative overflow-hidden rounded-2xl border-2 border-primary/50 bg-gradient-to-b from-primary/10 to-transparent p-8">
|
||||
<div className="absolute right-4 top-4 rounded-full bg-primary px-3 py-1 text-xs font-semibold text-black">
|
||||
Popular
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<div className="mb-6">
|
||||
<h3 className="text-2xl font-bold text-primary">
|
||||
Plan
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-white">
|
||||
Scale as You Build
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="mb-8 text-muted-foreground">
|
||||
The same features as OSS, just managed by us.
|
||||
</p>
|
||||
|
||||
<div className="mb-8 space-y-4">
|
||||
{scaleFeatures.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-3"
|
||||
>
|
||||
<Check className="h-5 w-5 shrink-0 text-primary" />
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{feature}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Server Selector */}
|
||||
<div className="mb-6 rounded-xl border border-border/30 bg-black/20 p-6">
|
||||
<label
|
||||
htmlFor="servers"
|
||||
className="mb-4 block text-sm font-medium text-white"
|
||||
>
|
||||
No. of Servers (You bring the servers)
|
||||
</label>
|
||||
<input
|
||||
id="servers"
|
||||
type="range"
|
||||
min="1"
|
||||
max="20"
|
||||
value={servers}
|
||||
onChange={(e) =>
|
||||
setServers(Number(e.target.value))
|
||||
}
|
||||
className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-muted-foreground/20"
|
||||
style={{
|
||||
background: `linear-gradient(to right, hsl(var(--primary)) 0%, hsl(var(--primary)) ${((servers - 1) / 19) * 100}%, rgb(255 255 255 / 0.2) ${((servers - 1) / 19) * 100}%, rgb(255 255 255 / 0.2) 100%)`,
|
||||
}}
|
||||
/>
|
||||
<div className="mt-2 flex items-center justify-between text-sm text-muted-foreground">
|
||||
<span>1 server</span>
|
||||
<span className="font-semibold text-white">
|
||||
{servers}{' '}
|
||||
{servers === 1 ? 'server' : 'servers'}
|
||||
</span>
|
||||
<span>20 servers</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 border-t border-border/30 pt-6">
|
||||
<div className="flex items-baseline justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{billing === 'annual'
|
||||
? 'Annual'
|
||||
: 'Monthly'}{' '}
|
||||
total
|
||||
</span>
|
||||
<div className="text-right">
|
||||
<span className="text-3xl font-bold text-white">
|
||||
${calculatePrice()}
|
||||
</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
/{billing === 'annual' ? 'year' : 'month'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{billing === 'annual' && (
|
||||
<p className="mt-2 text-xs text-primary">
|
||||
Save 20% with annual billing
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
$3.50 per additional server
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full rounded-full bg-primary hover:bg-primary/90"
|
||||
asChild
|
||||
>
|
||||
<Link href="/contact">Contact sales</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* FAQ or Additional Info Section */}
|
||||
<section className="border-t border-border/30 py-20">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
|
||||
Questions about pricing?
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-muted-foreground">
|
||||
Our team is here to help you choose the right plan for
|
||||
your needs.
|
||||
</p>
|
||||
<Button className="mt-8 rounded-full" asChild>
|
||||
<Link href="/contact">Get in touch</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Data
|
||||
const openSourceFeatures = [
|
||||
'Self-hosted Infrastructure',
|
||||
'Community support',
|
||||
'Access to core features',
|
||||
'Access to all updates',
|
||||
'Unlimited servers',
|
||||
]
|
||||
|
||||
const scaleFeatures = [
|
||||
'Managed hosting',
|
||||
'Unlimited deployments',
|
||||
'Unlimited databases',
|
||||
'Unlimited applications',
|
||||
'Unlimited users',
|
||||
'Remote servers monitoring',
|
||||
'Priority support',
|
||||
]
|
||||
|
||||
@@ -16,6 +16,12 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: 'https://dokploy.com/pricing',
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.9,
|
||||
},
|
||||
...posts.map((post) => ({
|
||||
url: `https://dokploy.com/blog/${post.slug}`,
|
||||
lastModified: new Date(post.published_at),
|
||||
|
||||
@@ -37,18 +37,19 @@ export function Footer() {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<nav className="mt-10 text-sm" aria-label="quick links">
|
||||
<div className="-my-1 flex flex-wrap justify-center gap-6">
|
||||
<NavLink href="/#features">Features</NavLink>
|
||||
<NavLink href="/#faqs">FAQ</NavLink>
|
||||
<NavLink
|
||||
href="https://docs.dokploy.com/docs/core"
|
||||
target="_blank"
|
||||
>
|
||||
Docs
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
<nav className="mt-10 text-sm" aria-label="quick links">
|
||||
<div className="-my-1 flex flex-wrap justify-center gap-6">
|
||||
<NavLink href="/#features">Features</NavLink>
|
||||
<NavLink href="/pricing">Pricing</NavLink>
|
||||
<NavLink href="/#faqs">FAQ</NavLink>
|
||||
<NavLink
|
||||
href="https://docs.dokploy.com/docs/core"
|
||||
target="_blank"
|
||||
>
|
||||
Docs
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="flex flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
|
||||
<div className="flex items-center gap-x-6">
|
||||
|
||||
@@ -121,7 +121,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"
|
||||
@@ -165,7 +165,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"
|
||||
|
||||
Reference in New Issue
Block a user