Merge branch 'main' into feat/add-new-pricing

apps/website/app/dokploy-vs-coolify/page.tsx

@@ -0,0 +1,363 @@
+import { Container } from "@/components/Container";
+import { CallToAction } from "@/components/CallToAction";
+import { Testimonials } from "@/components/Testimonials";
+import { ComparisonStats } from "@/components/comparison-stats";
+import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
+import { Check, X, Zap, Cpu, Plug, LayoutDashboard, Bell } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import type { Metadata } from "next";
+import { Button } from "@/components/ui/button";
+
+export const metadata: Metadata = {
+	title: "Dokploy Vs. Coolify Comparison",
+	description:
+		"Dokploy vs. Coolify at a glance: How to choose the right self-hosted open deployment option for your applications.",
+};
+
+const featureComparisonRows = [
+	{ feature: "One-command installation", dokploy: true, coolify: true },
+	{ feature: "Installation feedback and progress logs", dokploy: true, coolify: true },
+	{ feature: "Works with firewall and TailScale out of the box", dokploy: true, coolify: false },
+	{ feature: "Lightweight CPU usage while idle", dokploy: true, coolify: false },
+	{ feature: "Low memory usage", dokploy: true, coolify: true },
+	{ feature: "Teams and organizations support", dokploy: true, coolify: true },
+	{ feature: "Projects grouping", dokploy: true, coolify: true },
+	{ feature: "Consistent, responsive UI", dokploy: true, coolify: false },
+	{ feature: "Built with Next.js / TypeScript", dokploy: true, coolify: false },
+	{ feature: "AI-assisted deployments", dokploy: true, coolify: false },
+	{ feature: "Deploy from custom Docker images", dokploy: true, coolify: true },
+	{ feature: "Database deployment (Postgres, MySQL, Redis, etc.)", dokploy: true, coolify: true },
+	{ feature: "Scheduled database backups (S3)", dokploy: true, coolify: true },
+	{ feature: "Back up arbitrary Docker volumes, not just databases", dokploy: true, coolify: false },
+	{ feature: "Preview deployments (review apps)", dokploy: true, coolify: true },
+	{ feature: "API and CLI tools for automation", dokploy: true, coolify: true },
+	{ feature: "Multi-server deployment", dokploy: true, coolify: true },
+	{ feature: "Docker Swarm clustering", dokploy: true, coolify: "limited" },
+	{ feature: "Cron jobs inside containers", dokploy: true, coolify: true },
+	{ feature: "Cron jobs on your host machine", dokploy: true, coolify: false },
+	{ feature: "Monitoring metrics (CPU, RAM, Disk)", dokploy: true, coolify: "limited" },
+	{ feature: "Metrics enabled by default", dokploy: true, coolify: false },
+	{ feature: "Automated alerts from metrics", dokploy: true, coolify: false },
+];
+
+const whyChooseItems = [
+	{
+		icon: Zap,
+		title: "Benefit from a fast, reliable setup",
+		description:
+			"Use a single command to deploy with Dokploy, which works seamlessly across firewalls, TailScale, and secure environments. Launch applications faster with Dokploy's optimized build system.",
+	},
+	{
+		icon: Cpu,
+		title: "Do more with less",
+		description:
+			"Keep your VPS fast and responsive with Dokploy's lightweight architecture, which uses minimal CPU and memory, even while idle. Automate builds, alerts, and scaling events effortlessly.",
+	},
+	{
+		icon: Plug,
+		title: "Integrate with your favorite platforms",
+		description:
+			"Connect Dokploy to GitHub, GitLab, and Bitbucket. Dokploy supports Docker, Compose, Nixpacks, and Buildpacks, and even lets you add APIs and use CLI automation.",
+	},
+	{
+		icon: LayoutDashboard,
+		title: "Experience an intuitive, polished UX",
+		description:
+			"Enjoy a clean, consistent UI in the cloud, powered by Next.js and TypeScript. Dokploy is the modern deployment dashboard, optimized for productivity and clarity, with smooth navigation and predictable save behavior.",
+	},
+	{
+		icon: Bell,
+		title: "Know what's happening before it's a problem",
+		description:
+			"Built-in metrics, automated alerting, and volume backups make Dokploy ideal for serious deployments. Monitor CPU, memory, and disk usage, automate notifications, and keep data safe with S3-compatible backups.",
+	},
+];
+
+const integrationRows = [
+	{
+		category: "Git providers",
+		dokploy: "GitHub, GitLab, Bitbucket, Gitea, Git Generic",
+		coolify: "GitHub, Git Generic",
+	},
+	{
+		category: "Build and deployment systems",
+		dokploy: "Docker, Docker Compose, Nixpacks, Heroku Buildpacks, Paketo Buildpacks, Railpack",
+		coolify: "Docker, Docker Compose, Nixpacks",
+	},
+	{
+		category: "Notifications and communication",
+		dokploy: "Slack, Telegram, Discord, Lark, Email (SMTP), Resend, Gotify, Ntfy, Pushover, Webhook",
+		coolify: "Slack, Discord, Telegram, Email (SMTP), Pushover, Resend, Teams",
+	},
+];
+
+export default function DokployVsCoolifyPage() {
+	return (
+		<div className="min-h-screen bg-background">
+			{/* Hero Section */}
+			<section className="relative overflow-hidden border-b border-border/30 bg-black py-20 sm:py-32">
+				<AnimatedGridPattern
+					numSquares={30}
+					maxOpacity={0.1}
+					height={40}
+					width={40}
+					duration={3}
+					repeatDelay={1}
+					className="[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 z-10">
+					<div className="mx-auto max-w-4xl text-center">
+						<h1 className="font-display text-4xl tracking-tight text-white sm:text-5xl lg:text-6xl">
+							Dokploy vs. Coolify
+						</h1>
+						<p className="mt-6 text-lg text-muted-foreground">
+							If you're looking for a self-hosted, open deployment solution that
+							lets you run applications on your own VPS or hardware, Dokploy and
+							Coolify are the two leading options. But which should you choose?
+						</p>
+
+						<div className="mt-16 grid gap-8 sm:grid-cols-2">
+							<div className="rounded-xl border border-border/50 bg-card p-6 text-left">
+								<h3 className="text-xl font-semibold text-white">Dokploy</h3>
+								<p className="mt-3 text-sm text-muted-foreground">
+									For a polished, intuitive, open deployment solution with
+									powerful automation, AI, monitoring and integration features –
+									designed for developers who want control without complexity –
+									choose Dokploy.
+								</p>
+							</div>
+							<div className="rounded-xl border border-border/50 bg-card p-6 text-left">
+								<h3 className="text-xl font-semibold text-white">Coolify</h3>
+								<p className="mt-3 text-sm text-muted-foreground">
+									For an open source deployment tool that's geared toward indie
+									devs and OSS hobbyists, with an accessible, less polished
+									approach that suits individuals over businesses, choose
+									Coolify.
+								</p>
+							</div>
+						</div>
+
+						<Button className="mt-10 rounded-full" asChild>
+							<Link
+								href="https://app.dokploy.com/register"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								Register now
+							</Link>
+						</Button>
+					</div>
+				</Container>
+			</section>
+
+			{/* Dokploy vs Coolify at a glance */}
+			<section className="border-b border-border/30 py-20 sm:py-32">
+				<Container>
+					<div className="mx-auto max-w-2xl text-center">
+						<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
+							Dokploy vs. Coolify at a glance
+						</h2>
+						<p className="mt-4 text-lg text-muted-foreground">
+							Read our comprehensive Coolify vs. Dokploy features comparison
+							before you make your decision.
+						</p>
+					</div>
+
+					<div className="mx-auto mt-12 max-w-5xl overflow-x-auto">
+						<table className="w-full border-collapse">
+							<thead>
+								<tr className="border-b border-border">
+									<th className="px-4 py-4 text-left font-semibold">Feature</th>
+									<th className="px-4 py-4 text-center font-semibold">Dokploy</th>
+									<th className="px-4 py-4 text-center font-semibold">Coolify</th>
+								</tr>
+							</thead>
+							<tbody>
+								{featureComparisonRows.map((row) => (
+									<tr
+										key={row.feature}
+										className="border-b border-border/50 hover:bg-muted/30"
+									>
+										<td className="px-4 py-3 text-sm">{row.feature}</td>
+										<td className="px-4 py-3 text-center">
+											{row.dokploy ? (
+												<Check className="mx-auto h-5 w-5 text-green-500" />
+											) : (
+												<X className="mx-auto h-5 w-5 text-muted-foreground/50" />
+											)}
+										</td>
+										<td className="px-4 py-3 text-center">
+											{row.coolify === true ? (
+												<Check className="mx-auto h-5 w-5 text-green-500" />
+											) : row.coolify === "limited" ? (
+												<span className="text-xs text-amber-500">Limited</span>
+											) : (
+												<X className="mx-auto h-5 w-5 text-muted-foreground/50" />
+											)}
+										</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
+				</Container>
+			</section>
+
+			{/* Why you should choose Dokploy */}
+			<section className="border-b border-border/30 bg-black py-20 sm:py-32">
+				<Container>
+					<div className="mx-auto max-w-2xl text-center">
+						<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
+							Why you should choose Dokploy
+						</h2>
+					</div>
+
+					<div className="mx-auto mt-16 max-w-6xl space-y-20">
+						{whyChooseItems.map((item, index) => (
+							<div
+								key={item.title}
+								className={`flex flex-col gap-8 md:flex-row md:items-center ${
+									index % 2 === 1 ? "md:flex-row-reverse" : ""
+								}`}
+							>
+								<div className="flex-1">
+									<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/20 text-primary">
+										<item.icon className="h-6 w-6" />
+									</div>
+									<h3 className="text-xl font-semibold text-white">
+										{item.title}
+									</h3>
+									<p className="mt-3 text-muted-foreground">{item.description}</p>
+								</div>
+								<div className="flex-1">
+									{index === 0 ? (
+										<div className="relative aspect-video overflow-hidden rounded-xl border border-border/50">
+											<Image
+												src="/images/dokploy-deployment-log.png"
+												alt="Dokploy deployment panel showing build and deployment logs"
+												fill
+												className="object-cover object-top"
+												sizes="(max-width: 768px) 100vw, 50vw"
+											/>
+										</div>
+									) : index === 1 ? (
+										<div className="relative aspect-video overflow-hidden rounded-xl border border-border/50">
+											<Image
+												src="/images/dokploy-monitoring-dashboard.png"
+												alt="Dokploy monitoring dashboard showing CPU, memory, disk and I/O metrics"
+												fill
+												className="object-cover object-top"
+												sizes="(max-width: 768px) 100vw, 50vw"
+											/>
+										</div>
+									) : index === 2 ? (
+										<div className="relative aspect-video overflow-hidden rounded-xl border border-border/50">
+											<Image
+												src="/images/dokploy-provider-settings.png"
+												alt="Dokploy deploy settings with GitHub, GitLab, Bitbucket and other providers"
+												fill
+												className="object-cover object-top"
+												sizes="(max-width: 768px) 100vw, 50vw"
+											/>
+										</div>
+									) : index === 3 ? (
+										<div className="relative aspect-video overflow-hidden rounded-xl border border-border/50">
+											<Image
+												src="/images/dokploy-projects-dashboard.png"
+												alt="Dokploy projects dashboard with services grid and environment selector"
+												fill
+												className="object-cover object-top"
+												sizes="(max-width: 768px) 100vw, 50vw"
+											/>
+										</div>
+									) : index === 4 ? (
+										<div className="relative aspect-video overflow-hidden rounded-xl border border-border/50">
+											<Image
+												src="/images/dokploy-create-backup.png"
+												alt="Dokploy Create Backup modal for database and volume backups"
+												fill
+												className="object-cover object-top"
+												sizes="(max-width: 768px) 100vw, 50vw"
+											/>
+										</div>
+									) : (
+										<div className="aspect-video rounded-xl border border-border/50 bg-muted/30" />
+									)}
+								</div>
+							</div>
+						))}
+					</div>
+				</Container>
+			</section>
+
+			{/* Dokploy integrates with the leading solutions */}
+			<section className="border-b border-border/30 py-20 sm:py-32">
+				<Container>
+					<div className="mx-auto max-w-2xl text-center">
+						<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
+							Dokploy integrates with the leading solutions
+						</h2>
+					</div>
+
+					<div className="mx-auto mt-12 max-w-4xl overflow-x-auto">
+						<table className="w-full border-collapse">
+							<thead>
+								<tr className="border-b border-border">
+									<th className="px-4 py-4 text-left font-semibold">Category</th>
+									<th className="px-4 py-4 text-left font-semibold">Dokploy</th>
+									<th className="px-4 py-4 text-left font-semibold">Coolify</th>
+								</tr>
+							</thead>
+							<tbody>
+								{integrationRows.map((row) => (
+									<tr
+										key={row.category}
+										className="border-b border-border/50"
+									>
+										<td className="px-4 py-3 font-medium">{row.category}</td>
+										<td className="px-4 py-3 text-sm text-muted-foreground">
+											{row.dokploy}
+										</td>
+										<td className="px-4 py-3 text-sm text-muted-foreground">
+											{row.coolify}
+										</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
+				</Container>
+			</section>
+
+			{/* Why Dokploy is perfect for teams */}
+			<section className="border-b border-border/30 bg-black py-20 sm:py-32">
+				<Container>
+					<div className="mx-auto max-w-3xl text-center">
+						<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
+							Why Dokploy is perfect for teams of any size
+						</h2>
+						<p className="mt-6 text-lg text-muted-foreground">
+							Empower every team, from solo developers to enterprise engineering
+							squads, with a deployment platform built for collaboration and
+							control. Dokploy's organizational and project structuring features
+							make it simple for you to manage users, permissions, and
+							environments, while its automation and monitoring tools scale
+							seamlessly as your team grows. Whether you're running one app or
+							hundreds, Dokploy adapts to your needs without adding complexity.
+						</p>
+					</div>
+				</Container>
+			</section>
+
+			{/* Thousands have chosen Dokploy - Stats */}
+			<ComparisonStats />
+
+			{/* Testimonials */}
+			<Testimonials />
+
+			{/* Final CTA */}
+			<CallToAction />
+		</div>
+	);
+}

apps/website/app/features/application-deployment-platform/page.tsx

@@ -0,0 +1,443 @@
+import { Container } from "@/components/Container";
+import { CallToAction } from "@/components/CallToAction";
+import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+	Code2,
+	Layers,
+	Wrench,
+	GitBranch,
+	Webhook,
+	Eye,
+	FolderInput,
+	Server,
+	Cloud,
+	LayoutTemplate,
+	Workflow,
+	FileCode,
+	RotateCcw,
+	LayoutDashboard,
+	CloudCog,
+	Clock,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Application & Software Deployment Platform",
+	description:
+		"Dokploy's flexible, powerful application and software deployment platform enables you to put code written in Node.js, PHP, Python, Go, and Ruby live.",
+};
+
+const professionalFeatures = [
+	{
+		icon: Code2,
+		title: "Support for multiple languages",
+		description:
+			"Deploy apps written in Node, PHP, Python, Go, Ruby, and more. Dokploy does not restrict programming languages.",
+	},
+	{
+		icon: Layers,
+		title: "Deploy any app with any stack",
+		description:
+			"Dokploy supports single services and multi-service apps. Deploy from Git, a container registry, or Docker Compose.",
+	},
+	{
+		icon: Wrench,
+		title: "Your build, your way",
+		description:
+			"Choose Nixpacks, Buildpacks, or a Dockerfile. Switch strategies per project without reworking your pipeline.",
+	},
+];
+
+const automationFeatures = [
+	{
+		icon: Webhook,
+		title: "Use webhooks to auto-deploy",
+		description:
+			"Trigger deployments automatically by git push if you're a GitHub user.",
+	},
+	{
+		icon: Eye,
+		title: "Test changes before they go live",
+		description:
+			"Preview and test applications in isolated environments before production.",
+	},
+	{
+		icon: FolderInput,
+		title: "Set up automated watch paths",
+		description:
+			"Monitor directories or files for changes and trigger actions when they're modified.",
+	},
+];
+
+const deploymentOptions = [
+	{
+		icon: Server,
+		title: "On-Premise Deployment",
+		items: [
+			"Complete data sovereignty",
+			"Maximum security control",
+			"Compliance with strict regulations",
+			"No external dependencies",
+		],
+	},
+	{
+		icon: Cloud,
+		title: "Cloud Deployment",
+		items: [
+			"Rapid scaling capabilities",
+			"Reduced infrastructure overhead",
+			"Global availability",
+			"Managed infrastructure",
+		],
+	},
+];
+
+const platformFeatures = [
+	{
+		icon: Workflow,
+		title: "Automate deployments with CI/CD",
+		description:
+			"Build and publish your applications in any continuous integration, continuous delivery pipeline.",
+	},
+	{
+		icon: FileCode,
+		title: "Configuration-first setup",
+		description:
+			"Use configuration files to maintain consistency in setup, configuration, and build across teams.",
+	},
+	{
+		icon: RotateCcw,
+		title: "Rollback capabilities built in",
+		description:
+			"Rollback capabilities help teams recover quickly when new features impact production.",
+	},
+	{
+		icon: LayoutDashboard,
+		title: "Single dashboard with analytics",
+		description:
+			"Manage deployment tools, environments, infrastructure, and analytics from a single dashboard as you scale.",
+	},
+	{
+		icon: CloudCog,
+		title: "Simplify infrastructure management",
+		description:
+			"Utilize infrastructure as code across cloud providers and AWS services.",
+	},
+	{
+		icon: Clock,
+		title: "Automation beyond deployments",
+		description:
+			"Run cron jobs to automate recurring tasks for apps, services, and data workflows.",
+	},
+];
+
+const faqs = [
+	{
+		question: "Can I deploy Docker Compose apps with Dokploy?",
+		answer:
+			"Yes. Dokploy supports deploying applications with Docker Compose, which is ideal when your implementation spans multiple services, data stores, and supporting tools. You can deploy a Compose stack as part of your deployment workflows, keep configuration in configuration files, and manage environments without increasing complexity as you scale.",
+	},
+	{
+		question: "Which Git providers can I deploy from?",
+		answer:
+			"Dokploy integrates seamlessly with popular version control systems and workflows, including GitHub and other git providers such as GitLab, Gitea, Bitbucket, and other Atlassian tools. You can connect repos from these version control systems, automate deployments on code changes, and align deployment workflows with CI/CD practices. If your team already uses GitHub Actions or Atlassian tools, Dokploy fits into that process without forcing a new way of working.",
+	},
+	{
+		question: "Can I deploy from a Docker registry?",
+		answer:
+			"Yes. You can deploy a Docker image directly from a registry, which is useful when you already build artifacts elsewhere or want tighter control over technologies and build tooling. This approach supports consistent deployments across environments and production, especially when combined with automation and rollback capabilities for safer releases.",
+	},
+	{
+		question: "How do preview deployments work in Dokploy?",
+		answer:
+			"Preview deployments create environments for testing code changes before they reach production environments. When a pull request or branch updates, Dokploy can trigger automated deployments and deployment workflows so developers can validate functionality, reliability, and security in an isolated environment. This setup supports multiple environments, speeds up testing for new features, and helps teams reduce errors before customers and users see changes in production.",
+	},
+	{
+		question: "What is a deployment platform?",
+		answer:
+			"A deployment platform helps developers and teams deploy apps and services through a repeatable deployment process. It brings software deployment tools and deployment workflows into one place so you can manage setup, configuration, build, deployment, and infrastructure management from a single dashboard. The goal is speed and reliability: automate routine steps, reduce errors from manual work, and keep production environments secure as applications evolve and ship new features.",
+	},
+	{
+		question:
+			"What's the difference between a deployment platform and a software deployment platform?",
+		answer:
+			"In practice, they overlap. A deployment platform often focuses on the mechanics of deployment tools and infrastructure, while a software deployment platform emphasizes end-to-end software delivery, including CI/CD, continuous integration, and continuous delivery. A software deployment platform typically ties deployment workflows to version control systems, configuration files, and multiple environments, so teams can maintain consistency from development to production, with rollback capabilities when code changes introduce issues.",
+	},
+];
+
+export default function ApplicationDeploymentPlatformPage() {
+	return (
+		<div className="min-h-screen bg-background">
+			{/* Hero Section */}
+			<section className="relative overflow-hidden border-b border-border/30 bg-black py-20 sm:py-32">
+				<AnimatedGridPattern
+					numSquares={30}
+					maxOpacity={0.1}
+					height={40}
+					width={40}
+					duration={3}
+					repeatDelay={1}
+					className="[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 z-10">
+					<div className="mx-auto max-w-4xl text-center">
+						<h1 className="font-display text-4xl tracking-tight text-white sm:text-5xl lg:text-6xl">
+							The Ultimate Application Deployment Platform
+						</h1>
+						<p className="mt-6 text-lg text-muted-foreground">
+							Deploy any type of application with our straightforward solution.
+							Benefit from multiple build types, Docker Compose support, and our
+							native Git integration.
+						</p>
+						<div className="mt-10 flex flex-wrap items-center justify-center gap-4">
+							<Button className="rounded-full" asChild>
+								<Link href="/contact">Contact sales</Link>
+							</Button>
+							<Button variant="outline" className="rounded-full" asChild>
+								<Link
+									href="https://docs.dokploy.com/docs/core"
+									target="_blank"
+									rel="noopener noreferrer"
+								>
+									View documentation
+								</Link>
+							</Button>
+						</div>
+					</div>
+				</Container>
+			</section>
+
+			{/* Professional features for every developer */}
+			<section className="border-b border-border/30 py-20 sm:py-32">
+				<Container>
+					<div className="mx-auto max-w-2xl text-center">
+						<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
+							Professional features for every developer
+						</h2>
+						<p className="mt-4 text-lg text-muted-foreground">
+							Take advantage of flexible features that empower everyone, no
+							matter your build strategy or the size of your team.
+						</p>
+					</div>
+					<div className="mx-auto mt-16 grid max-w-5xl gap-8 sm:grid-cols-2 lg:grid-cols-3">
+						{professionalFeatures.map((feature) => (
+							<div
+								key={feature.title}
+								className="rounded-xl border border-border/50 bg-card p-6"
+							>
+								<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/20 text-primary">
+									<feature.icon className="h-6 w-6" />
+								</div>
+								<h3 className="text-xl font-semibold">{feature.title}</h3>
+								<p className="mt-3 text-sm text-muted-foreground">
+									{feature.description}
+								</p>
+							</div>
+						))}
+					</div>
+				</Container>
+			</section>
+
+			{/* Ship from GitHub, Bitbucket, and more */}
+			<section className="border-b border-border/30 bg-black py-20 sm:py-32">
+				<Container>
+					<div className="mx-auto max-w-3xl text-center">
+						<div className="mb-6 flex justify-center">
+							<div className="flex h-14 w-14 items-center justify-center rounded-xl bg-primary/20 text-primary">
+								<GitBranch className="h-7 w-7" />
+							</div>
+						</div>
+						<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
+							Ship from GitHub, Bitbucket, and more
+						</h2>
+						<p className="mt-6 text-lg text-muted-foreground">
+							Connect your repo and deploy on push with webhooks. We support
+							GitHub, GitLab, Gitea, Bitbucket, Docker registry, and Git generic
+							provider. Control exactly what changes trigger a release, including
+							monorepos.
+						</p>
+					</div>
+				</Container>
+			</section>
+
+			{/* Automate deployments and test changes */}
+			<section className="border-b border-border/30 py-20 sm:py-32">
+				<Container>
+					<div className="mx-auto max-w-2xl text-center">
+						<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
+							Automate deployments and test changes
+						</h2>
+						<p className="mt-4 text-lg text-muted-foreground">
+							Keep application deployments hands-off, while still staying in
+							control of what ships and when.
+						</p>
+					</div>
+					<div className="mx-auto mt-16 grid max-w-4xl gap-8 sm:grid-cols-3">
+						{automationFeatures.map((feature) => (
+							<div
+								key={feature.title}
+								className="rounded-xl border border-border/50 bg-card p-6 text-center"
+							>
+								<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/20 text-primary">
+									<feature.icon className="h-6 w-6" />
+								</div>
+								<h3 className="text-lg font-semibold">{feature.title}</h3>
+								<p className="mt-3 text-sm text-muted-foreground">
+									{feature.description}
+								</p>
+							</div>
+						))}
+					</div>
+				</Container>
+			</section>
+
+			{/* Host Dokploy where your business needs it */}
+			<section className="border-b border-border/30 bg-black py-20 sm:py-32">
+				<Container>
+					<div className="mx-auto max-w-2xl text-center">
+						<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
+							Host Dokploy where your business needs it
+						</h2>
+						<p className="mt-4 text-lg text-muted-foreground">
+							Choose a deployment option that suits your business–on your
+							infrastructure or ours.
+						</p>
+					</div>
+					<div className="mx-auto mt-16 grid max-w-4xl gap-8 sm:grid-cols-2">
+						{deploymentOptions.map((option) => (
+							<div
+								key={option.title}
+								className="rounded-xl border border-border/50 bg-card p-8"
+							>
+								<div className="mb-6 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/20 text-primary">
+									<option.icon className="h-6 w-6" />
+								</div>
+								<h3 className="text-xl font-semibold text-white">
+									{option.title}
+								</h3>
+								<ul className="mt-4 space-y-2">
+									{option.items.map((item) => (
+										<li
+											key={item}
+											className="flex items-center gap-2 text-sm text-muted-foreground"
+										>
+											<span className="h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
+											{item}
+										</li>
+									))}
+								</ul>
+							</div>
+						))}
+					</div>
+				</Container>
+			</section>
+
+			{/* Hundreds of templates */}
+			<section className="border-b border-border/30 py-20 sm:py-32">
+				<Container>
+					<div className="mx-auto max-w-3xl text-center">
+						<div className="mb-6 flex justify-center">
+							<div className="flex h-14 w-14 items-center justify-center rounded-xl bg-primary/20 text-primary">
+								<LayoutTemplate className="h-7 w-7" />
+							</div>
+						</div>
+						<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
+							Hundreds of templates to get started
+						</h2>
+						<p className="mt-6 text-lg text-muted-foreground">
+							Deploy popular open-source apps in one click with Dokploy Templates,
+							a ready-to-run library of pre-configured apps you can deploy fast,
+							without rebuilding the same stack from scratch.
+						</p>
+					</div>
+				</Container>
+			</section>
+
+			{/* Dashboard screenshot */}
+			<section className="border-b border-border/30 py-12 sm:py-16">
+				<Container>
+					<div className="mx-auto max-w-6xl overflow-hidden rounded-xl border border-border/50 shadow-2xl">
+						<Image
+							src="/dashboard.png"
+							alt="Dokploy dashboard showing projects and deployed services"
+							width={1200}
+							height={750}
+							className="w-full object-cover"
+							sizes="(max-width: 768px) 100vw, 1200px"
+							priority={false}
+						/>
+					</div>
+				</Container>
+			</section>
+
+			{/* Everything you need in a deployment platform */}
+			<section className="border-b border-border/30 bg-black py-20 sm:py-32">
+				<Container>
+					<div className="mx-auto max-w-2xl text-center">
+						<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
+							Everything you need in a deployment platform
+						</h2>
+						<p className="mt-4 text-lg text-muted-foreground">
+							Dokploy is the software deployment platform for shipping anything
+							from a single service to a full multi-container stack.
+						</p>
+					</div>
+					<div className="mx-auto mt-16 grid max-w-6xl gap-8 sm:grid-cols-2 lg:grid-cols-3">
+						{platformFeatures.map((feature) => (
+							<div
+								key={feature.title}
+								className="rounded-xl border border-border/50 bg-card p-6"
+							>
+								<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/20 text-primary">
+									<feature.icon className="h-6 w-6" />
+								</div>
+								<h3 className="text-lg font-semibold text-white">
+									{feature.title}
+								</h3>
+								<p className="mt-3 text-sm text-muted-foreground">
+									{feature.description}
+								</p>
+							</div>
+						))}
+					</div>
+				</Container>
+			</section>
+
+			{/* Application deployment FAQs */}
+			<section className="border-b border-border/30 py-20 sm:py-32">
+				<Container>
+					<div className="mx-auto max-w-2xl text-center">
+						<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
+							Application deployment FAQs
+						</h2>
+					</div>
+					<Accordion
+						type="single"
+						collapsible
+						className="mx-auto mt-12 w-full max-w-3xl"
+					>
+						{faqs.map((faq, index) => (
+							<AccordionItem value={`faq-${index}`} key={index}>
+								<AccordionTrigger className="text-left">
+									{faq.question}
+								</AccordionTrigger>
+								<AccordionContent>{faq.answer}</AccordionContent>
+							</AccordionItem>
+						))}
+					</Accordion>
+				</Container>
+			</section>
+
+			<CallToAction />
+		</div>
+	);
+}

apps/website/components/Footer.tsx

@@ -1,63 +1,115 @@
 "use client";
 
 import Link from "next/link";
-import type { SVGProps } from "react";
 import { Container } from "./Container";
 import { NavLink } from "./NavLink";
 import { Logo } from "./shared/Logo";
-import { buttonVariants } from "./ui/button";
 
-const I18nIcon = (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width={24}
-		height={24}
-		fill="currentColor"
-		stroke="currentColor"
-		strokeWidth={0}
-		viewBox="0 0 512 512"
-		{...props}
-	>
-		<path
-			stroke="none"
-			d="m478.33 433.6-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362 368 281.65 401.17 362zm-66.99-19.08a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73 39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93.92 1.19 1.83 2.35 2.74 3.51-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59 22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"
-		/>
-	</svg>
-);
+const footerSections = [
+	{
+		title: "Product",
+		ariaLabel: "Product and features",
+		links: [
+			{ href: "/", label: "Home" },
+			{ href: "/#features", label: "Features" },
+			{ href: "/#pricing", label: "Pricing" },
+			{
+				href: "/features/application-deployment-platform",
+				label: "Application Deployment Platform",
+			},
+			{ href: "/contact", label: "Contact" },
+		],
+	},
+	{
+		title: "Compare & Learn",
+		ariaLabel: "Comparisons and guides",
+		links: [
+			{
+				href: "/dokploy-vs-coolify",
+				label: "Dokploy vs. Coolify",
+			},
+			{ href: "/blog", label: "Blog" },
+			{
+				href: "https://docs.dokploy.com/docs/core",
+				label: "Documentation",
+				external: true,
+			},
+		],
+	},
+	{
+		title: "Legal",
+		ariaLabel: "Legal and policies",
+		links: [
+			{ href: "/terms-of-service", label: "Terms of Service" },
+			{ href: "/privacy", label: "Privacy Policy" },
+		],
+	},
+] as const;
 
 export function Footer() {
 	return (
-		<footer className="bg-black">
+		<footer className="bg-black" role="contentinfo">
 			<Container>
-				<div className="py-16">
-					<div className="flex flex-col items-center gap-2">
-						<Logo className="mx-auto h-10 w-auto" />
-						<span className="text-center text-sm font-medium text-primary">
-							Dokploy
+				<div className="py-12 md:py-16">
+					{/* Logo + name + tagline */}
+					<div className="flex flex-col items-center gap-2 text-center md:items-start">
+						<Link
+							href="/"
+							aria-label="Dokploy - Home"
+							className="flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-black rounded"
+						>
+							<Logo className="h-10 w-auto" />
+							<span className="text-xl font-semibold text-primary">Dokploy</span>
+						</Link>
+						<span className="text-sm font-medium text-muted-foreground">
+							Deploy your applications with ease
 						</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>
-						<NavLink href="/terms-of-service">Terms of Service</NavLink>
-						<NavLink href="/privacy">Privacy Policy</NavLink>
+					{/* Link columns - SEO-friendly grouping */}
+					<div className="mt-10 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+						{footerSections.map((section) => (
+							<nav
+								key={section.title}
+								aria-label={section.ariaLabel}
+								className="flex flex-col"
+							>
+								<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+									{section.title}
+								</h3>
+								<ul className="mt-4 space-y-3">
+									{section.links.map((item) => (
+										<li key={item.href + item.label}>
+											{"external" in item && item.external ? (
+												<NavLink
+													href={item.href}
+													target="_blank"
+												>
+													{item.label}
+												</NavLink>
+											) : (
+												<NavLink href={item.href}>{item.label}</NavLink>
+											)}
+										</li>
+									))}
+								</ul>
+							</nav>
+						))}
 					</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">
+
+				{/* Bottom bar: social + copyright */}
+				<div className="flex flex-col items-center border-t border-slate-400/10 py-8 sm:flex-row sm:justify-between sm:items-center gap-6">
+					<p className="text-sm text-muted-foreground order-2 sm:order-1">
+						© {new Date().getFullYear()} Dokploy. All rights reserved.
+					</p>
+					<div className="flex items-center gap-6 order-1 sm:order-2" aria-label="Social links">
 						<Link
 							href="https://x.com/getdokploy"
-							className="group"
-							aria-label="Dokploy on Twitter"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="text-muted-foreground hover:text-muted-foreground/80 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-black rounded"
+							aria-label="Dokploy on X (Twitter)"
 						>
 							<svg
 								stroke="currentColor"
@@ -65,27 +117,27 @@ export function Footer() {
 								strokeWidth="0"
 								viewBox="0 0 512 512"
 								xmlns="http://www.w3.org/2000/svg"
-								className="h-5 w-5 fill-muted-foreground group-hover:fill-muted-foreground/70"
+								className="h-5 w-5"
 							>
 								<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
 							</svg>
 						</Link>
 						<Link
 							href="https://github.com/dokploy/dokploy"
-							className="group"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="text-muted-foreground hover:text-muted-foreground/80 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-black rounded"
 							aria-label="Dokploy on GitHub"
 						>
 							<svg
 								aria-hidden="true"
-								className="h-6 w-6 fill-muted-foreground group-hover:fill-muted-foreground/70"
+								className="h-6 w-6 fill-current"
+								viewBox="0 0 24 24"
 							>
 								<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
 							</svg>
 						</Link>
 					</div>
-					<p className="mt-6 text-sm text-muted-foreground sm:mt-0">
-						{`Copyright © ${new Date().getFullYear()} Dokploy. All rights reserved.`}
-					</p>
 				</div>
 			</Container>
 		</footer>

apps/website/components/comparison-stats.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Container } from "@/components/Container";
+import NumberTicker from "@/components/ui/number-ticker";
+import { Grid } from "@/components/stats";
+
+const statsValues = {
+	githubStars: 26000,
+	dockerDownloads: 6500000,
+	contributors: 200,
+	sponsors: 50,
+};
+
+export function ComparisonStats() {
+	const [githubStars, setGithubStars] = useState(statsValues.githubStars);
+
+	useEffect(() => {
+		const fetchGitHubStars = async () => {
+			try {
+				const response = await fetch(
+					"/api/github-stars?owner=dokploy&repo=dokploy",
+				);
+
+				if (response.ok) {
+					const data = await response.json();
+					setGithubStars(data.stargazers_count);
+				}
+			} catch (error) {
+				console.error("Error fetching GitHub stars:", error);
+			}
+		};
+
+		fetchGitHubStars();
+	}, []);
+
+	return (
+		<section className="border-b border-border/30 py-20 sm:py-32">
+			<Container>
+				<div className="mx-auto max-w-2xl text-center">
+					<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
+						Thousands have chosen Dokploy
+					</h2>
+					<p className="mt-4 text-lg text-muted-foreground">
+						Just a few numbers to show we're not completely making this up.
+						Turns out, Dokploy has actually helped a few people – who knew?
+					</p>
+				</div>
+
+				<div className="mx-auto mt-16 grid max-w-5xl grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+					<div className="relative overflow-hidden rounded-xl border border-border/50 bg-gradient-to-b from-neutral-900 to-neutral-950 p-6 text-center">
+						<Grid size={20} />
+						<p className="relative z-20 text-sm font-medium text-muted-foreground">
+							GitHub Stars
+						</p>
+						<p className="relative z-20 mt-2 text-3xl font-bold">
+							<NumberTicker value={githubStars} />+
+						</p>
+						<p className="relative z-20 mt-2 text-sm text-muted-foreground">
+							Trusted by developers worldwide
+						</p>
+					</div>
+					<div className="relative overflow-hidden rounded-xl border border-border/50 bg-gradient-to-b from-neutral-900 to-neutral-950 p-6 text-center">
+						<Grid size={20} />
+						<p className="relative z-20 text-sm font-medium text-muted-foreground">
+							DockerHub Downloads
+						</p>
+						<p className="relative z-20 mt-2 text-3xl font-bold">
+							<NumberTicker value={statsValues.dockerDownloads} />+
+						</p>
+						<p className="relative z-20 mt-2 text-sm text-muted-foreground">
+							Go-to solution for deployments
+						</p>
+					</div>
+					<div className="relative overflow-hidden rounded-xl border border-border/50 bg-gradient-to-b from-neutral-900 to-neutral-950 p-6 text-center">
+						<Grid size={20} />
+						<p className="relative z-20 text-sm font-medium text-muted-foreground">
+							Community Contributors
+						</p>
+						<p className="relative z-20 mt-2 text-3xl font-bold">
+							<NumberTicker value={statsValues.contributors} />+
+						</p>
+						<p className="relative z-20 mt-2 text-sm text-muted-foreground">
+							Thriving open source community
+						</p>
+					</div>
+					<div className="relative overflow-hidden rounded-xl border border-border/50 bg-gradient-to-b from-neutral-900 to-neutral-950 p-6 text-center">
+						<Grid size={20} />
+						<p className="relative z-20 text-sm font-medium text-muted-foreground">
+							Sponsors
+						</p>
+						<p className="relative z-20 mt-2 text-3xl font-bold">
+							<NumberTicker value={statsValues.sponsors} />+
+						</p>
+						<p className="relative z-20 mt-2 text-sm text-muted-foreground">
+							Supporting the project
+						</p>
+					</div>
+				</div>
+			</Container>
+		</section>
+	);
+}

apps/website/components/stats.tsx

@@ -7,7 +7,7 @@ import NumberTicker from "./ui/number-ticker";
 
 const statsValues = {
 	githubStars: 26000,
-	dockerDownloads: 4000000,
+	dockerDownloads: 6500000,
 	contributors: 200,
 	sponsors: 50,
 };