Merge pull request #136 from Dokploy/feat/add-application-deployment-platform-software-landing

Feat/add application deployment platform software landing
This commit is contained in:
Mauricio Siu
2026-02-18 23:05:11 -06:00
committed by GitHub
3 changed files with 549 additions and 49 deletions

View File

@@ -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 businesson 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>
);
}

View File

@@ -1,64 +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="/dokploy-vs-coolify">Dokploy vs. Coolify</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"
@@ -66,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>

View File

@@ -119,6 +119,9 @@ function MobileNavigation() {
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="/features/application-deployment-platform">
Application Deployment
</MobileNavLink>
<MobileNavLink href="/#faqs">FAQ</MobileNavLink>
<MobileNavLink
href="https://docs.dokploy.com/docs/core"
@@ -163,6 +166,9 @@ export function Header() {
</Link>
<div className="hidden md:flex md:gap-x-6">
<NavLink href="/#pricing">Pricing</NavLink>
<NavLink href="/features/application-deployment-platform">
Application Deployment
</NavLink>
<NavLink href="/#faqs">FAQ</NavLink>
<NavLink
href="https://docs.dokploy.com/docs/core"