Dokploy/website
1
0
Fork 0
mirror of https://github.com/Dokploy/website.git synced 2026-06-15 20:25:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add new feature pages for Application Management, Audit Logs, Role-Based Access Control, Single Sign-On, and White Labeling

Browse Source 
- Introduced dedicated pages for Application Management Software, Audit Logs, Role-Based Access Control, Single Sign-On, and White Labeling, enhancing the documentation and user experience.
- Updated the footer and header components to include links to these new features, improving site navigation and accessibility for users.
- Each feature page includes detailed descriptions, core functionalities, and related features to provide comprehensive information for users.
This commit is contained in:
Mauricio Siu
2026-03-25 00:12:05 -06:00
parent 36ff149964
commit 13d1b6a911
7 changed files with 1286 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

451
apps/website/app/features/application-management-software/page.tsx Normal file
View File

@@ -0,0 +1,451 @@
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 {
Activity,
FileText,
RotateCcw,
Clock,
Eye,
Settings2,
Server,
Cloud,
Cpu,
Network,
Terminal,
HardDrive,
Lock,
CheckCircle2,
} from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Application Management Software and Solutions",
description:
"Monitor, control, and maintain your business applications from a single dashboard with Dokploy's application management software.",
};
const coreFeatures = [
{
icon: Activity,
title: "Real-time monitoring",
description:
"Track CPU, memory, disk, and network usage for every application in your portfolio. Catch performance issues before they affect users and make informed decisions based on live data, not guesswork.",
},
{
icon: FileText,
title: "Centralized logs",
description:
"Access real-time logs from any running application directly in the dashboard. When something breaks, you know exactly where to look.",
},
{
icon: RotateCcw,
title: "Rollback in seconds",
description:
"Recover fast when a release goes wrong. Dokploy supports Docker Swarm automatic rollback when health checks fail, as well as registry-based rollback to any previous deployment version when a Docker registry is configured.",
},
{
icon: Clock,
title: "Full deployment history",
description:
"View the last ten deployments for any application. Connect incidents to specific releases and resolve them faster, without sifting through unrelated logs.",
},
{
icon: Eye,
title: "Preview deployments",
description:
"Test application changes in isolated environments before they reach production. When configured, pull requests to your target branch trigger isolated preview builds automatically, so your team can validate functionality before merging.",
},
{
icon: Settings2,
title: "Environment variable management",
description:
"Manage shared and service-level environment variables across every application. Reduce configuration drift and keep sensitive data out of your codebase.",
},
];
const standardizationChecks = [
"Consistent deployment workflows across all applications",
"Shared and service-level environment variable management",
"Rollback capabilities built into every release",
"Deployment history tied to specific releases",
];
const applicationStatuses = [
{ name: "App-api", status: "Running" },
{ name: "App-frontend", status: "Running" },
{ name: "App-worker", status: "Deploying" },
{ name: "App-scheduler", status: "Running" },
{ name: "App-admin", status: "Rolled back" },
];
const controlFeatures = [
{
icon: Cpu,
title: "Resource controls",
description:
"Set CPU and memory limits per application to optimize performance and keep resource usage predictable as your application landscape grows.",
},
{
icon: Network,
title: "Cluster and scaling settings",
description:
"Configure replica counts and Docker Swarm settings to scale business applications across nodes without reworking your infrastructure.",
},
{
icon: Terminal,
title: "Custom run commands",
description:
"Execute shell commands directly inside any container for advanced management, debugging, or operational tasks that fall outside standard workflows.",
},
{
icon: HardDrive,
title: "Volume and storage management",
description:
"Set up persistent storage volumes so application data survives restarts and redeployments. Support for bind mounts, volume mounts, and file mounts is built in.",
},
{
icon: Lock,
title: "Access and security controls",
description:
"Add basic authentication to any application and configure port exposure with precision. Keep internal systems locked down while making the right surfaces accessible.",
},
{
icon: Clock,
title: "Scheduled jobs",
description:
"Run cron jobs to automate recurring tasks across your application portfolio, from data workflows to maintenance scripts, without adding external tooling.",
},
];
const selfHostedItems = [
"Full data sovereignty over sensitive data",
"No third-party dependencies",
"Fits hybrid environments and on-premise infrastructure",
"Supports digital transformation at your pace",
];
const cloudItems = [
"Managed infrastructure, zero maintenance overhead",
"Rapid setup for new business units and teams",
"Scale application usage without provisioning servers",
"Ideal for cloud migration and modernization initiatives",
];
const faqs = [
{
question: "What is application performance management software?",
answer:
"Application performance management software helps IT teams monitor application health, track resource usage, and identify performance issues before they affect users. Key features typically include real-time monitoring of CPU, memory, disk, and network usage, alongside log access and alerting. Dokploy covers the operational side of application performance management: giving teams live usage data, deployment history, and rollback capabilities from a single dashboard, without requiring specialist expertise or separate tooling.",
},
{
question: "What is the best application management software?",
answer:
"The best application management software depends on your business needs, team size, and technical expertise. Enterprise platforms often come with deep integration capabilities and reporting features, but they can require significant investment and a steeper learning curve. Dokploy is built for teams that want operational efficiency without that overhead. It covers the key processes of application management, including monitoring, rollbacks, environment configuration, and scheduled jobs, in a platform you can self-host or run in the cloud so that your IT team can run on your own infrastructure if they want. It\u2019s a strong fit for organizations that want to manage business applications with full control and without vendor lock-in.",
},
{
question: "What is application lifecycle management software?",
answer:
"Application lifecycle management (ALM) software supports the full lifecycle of a software application, from requirements and development through deployment, ongoing maintenance, and eventual retirement. It connects strategic planning and business objectives with day-to-day operational execution. Dokploy focuses on the operational slice of that lifecycle\u2014standardizing how applications are deployed, monitored, rolled back, and maintained\u2014which is where most teams experience the most friction. For organizations going through digital transformation or modernization initiatives, having that operational foundation in place is what makes broader lifecycle management sustainable.",
},
];
export default function ApplicationManagementSoftwarePage() {
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">
Application Management Software That Works
</h1>
<p className="mt-6 text-lg text-muted-foreground">
Monitor, control, and maintain your business applications from a
single dashboard. Dokploy gives your IT team the visibility and
tools to keep every application running at peak
performance&mdash;without the complexity.
</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"
>
Read our docs
</Link>
</Button>
</div>
</div>
</Container>
</section>
{/* Visibility across every application */}
<section className="border-b border-border/30 py-20 sm:py-32">
<Container>
<div className="mx-auto max-w-3xl text-center">
<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
Visibility across every application as you scale
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Bring your entire application landscape into one place with
Dokploy. Get a clear view of application health, resource usage,
and deployment history.
</p>
</div>
</Container>
</section>
{/* Everything your team needs in one 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 your team needs in one platform
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Improving visibility into your application portfolio is the first
step toward better application management. Dokploy surfaces the
signals your IT team needs, in real time, in one place.
</p>
</div>
<div className="mx-auto mt-16 grid max-w-6xl gap-8 sm:grid-cols-2 lg:grid-cols-3">
{coreFeatures.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>
{/* Standardize your management process */}
<section className="border-b border-border/30 py-20 sm:py-32">
<Container>
<div className="mx-auto max-w-5xl lg:grid lg:grid-cols-2 lg:gap-16">
<div>
<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
Standardize your management process
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Maintain consistent environments and standardized release
processes to keep operational efficiency at peak levels. When
every application is managed together, your IT team maintains
shared standards instead of tribal knowledge.
</p>
<p className="mt-4 text-sm text-muted-foreground">
Dokploy gives teams a consistent application management system
for deployments, environment configuration, and rollback
workflows, so reliability doesn&apos;t depend on who happens to
be on call.
</p>
<ul className="mt-8 space-y-3">
{standardizationChecks.map((item) => (
<li key={item} className="flex items-start gap-3">
<CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-green-500" />
<span className="text-sm text-muted-foreground">
{item}
</span>
</li>
))}
</ul>
</div>
<div className="mt-10 lg:mt-0">
<div className="rounded-xl border border-border/50 bg-card p-6">
<div className="space-y-3">
{applicationStatuses.map((app) => (
<div
key={app.name}
className="flex items-center justify-between rounded-lg border border-border/30 bg-background/50 px-4 py-3"
>
<span className="text-sm font-medium">{app.name}</span>
<span
className={`text-xs font-medium ${
app.status === "Running"
? "text-green-500"
: app.status === "Deploying"
? "text-yellow-500"
: "text-orange-500"
}`}
>
{app.status}
</span>
</div>
))}
</div>
</div>
</div>
</div>
</Container>
</section>
{/* Full control over your application portfolio */}
<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">
Full control over your application portfolio
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Manage business applications at the level your business goals
require, from resource allocation and scaling to security controls
and workflow automation.
</p>
</div>
<div className="mx-auto mt-16 grid max-w-6xl gap-8 sm:grid-cols-2 lg:grid-cols-3">
{controlFeatures.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>
{/* Run Dokploy where your business needs it */}
<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">
Run Dokploy where your business needs it
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Deploy Dokploy on your own infrastructure or ours. Both options
give you the same application management capabilities, and you
choose what fits your operational model and regulatory compliance
requirements.
</p>
</div>
<div className="mx-auto mt-16 grid max-w-4xl gap-8 sm:grid-cols-2">
<div 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">
<Server className="h-6 w-6" />
</div>
<h3 className="text-xl font-semibold">Self-hosted</h3>
<ul className="mt-4 space-y-2">
{selfHostedItems.map((item) => (
<li
key={item}
className="flex items-center gap-2 text-sm text-muted-foreground"
>
<CheckCircle2 className="h-4 w-4 shrink-0 text-green-500" />
{item}
</li>
))}
</ul>
</div>
<div 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">
<Cloud className="h-6 w-6" />
</div>
<h3 className="text-xl font-semibold">Dokploy Cloud</h3>
<ul className="mt-4 space-y-2">
{cloudItems.map((item) => (
<li
key={item}
className="flex items-center gap-2 text-sm text-muted-foreground"
>
<CheckCircle2 className="h-4 w-4 shrink-0 text-green-500" />
{item}
</li>
))}
</ul>
</div>
</div>
</Container>
</section>
{/* Take control of your application landscape */}
<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">
Take control of your application landscape
</h2>
<p className="mt-6 text-lg text-muted-foreground">
Dokploy gives your IT team the application management software it
needs to monitor, maintain, and scale business applications with
confidence. Create your account and get started in minutes.
</p>
<div className="mt-10">
<Button className="rounded-full" asChild>
<Link href="https://app.dokploy.com">Create your account</Link>
</Button>
</div>
</div>
</Container>
</section>
{/* 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 management software 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>
);
}

202
apps/website/app/features/audit-logs/page.tsx Normal file
View File

@@ -0,0 +1,202 @@
import { Container } from "@/components/Container";
import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
import { Button } from "@/components/ui/button";
import {
ScrollText,
Building2,
Search,
FileCheck,
AlertCircle,
Shield,
KeyRound,
Paintbrush,
} from "lucide-react";
import Link from "next/link";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Audit Logs for Enterprise Compliance",
description:
"Track every action across your Dokploy organization. Audit logs give enterprise teams the visibility they need for security and compliance.",
};
const coreFeatures = [
{
icon: Building2,
title: "Track actions across your whole organization",
description:
"Audit logs capture authentication events, user management changes, deployment activity, infrastructure updates, environment variable changes, backup configuration, and more. If it happened in Dokploy, it\u2019s recorded.",
},
{
icon: AlertCircle,
title: "Investigate issues quickly",
description:
"Each log entry includes a timestamp, the user who performed the action, the action type, the resource affected, and the user\u2019s role in Dokploy at the time. When something goes wrong, you have everything you need to trace it back to its source.",
},
{
icon: Search,
title: "Filter down to exactly what you need",
description:
"Search and filter audit logs by user, resource name, action type, or resource type so you can find the specific event you\u2019re looking for without scrolling through unrelated activity.",
},
{
icon: FileCheck,
title: "Meet compliance requirements with confidence",
description:
"Audit logs give you documented evidence of access control and change management, making it straightforward to satisfy requirements for SOC 2, GDPR, and internal security policies.",
},
];
const relatedFeatures = [
{
icon: Shield,
title: "RBAC",
description:
"Control who can perform the actions your audit logs record, with fine-grained permissions across projects and services.",
href: "/features/role-based-access-control",
},
{
icon: KeyRound,
title: "SSO",
description:
"Centralize authentication with your existing identity provider for secure, seamless access across your organization.",
href: "/features/single-sign-on",
},
{
icon: Paintbrush,
title: "White labeling",
description:
"Present Dokploy as your own product, with custom branding for your clients or organization.",
href: "/features/white-labeling",
},
];
export default function AuditLogsPage() {
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">
Full visibility into every action taken
</h1>
<p className="mt-6 text-lg text-muted-foreground">
Know exactly who did what, and when, across your entire Dokploy
organization.
</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>
{/* A complete record of every change */}
<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">
A complete record of every change
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Every create, update, delete, deployment, and configuration change
is logged&mdash;giving you a reliable trail for security,
compliance, and debugging.
</p>
</div>
<div className="mx-auto mt-16 grid max-w-5xl gap-8 sm:grid-cols-2">
{coreFeatures.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>
{/* Powerful features for growing teams */}
<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">
Powerful features for growing teams
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Dokploy scales with your team, with features and plans for when
you&apos;re ready to take the next step.
</p>
</div>
<div className="mx-auto mt-16 grid max-w-5xl gap-8 sm:grid-cols-3">
{relatedFeatures.map((feature) => (
<Link
key={feature.title}
href={feature.href}
className="rounded-xl border border-border/50 bg-card p-6 transition hover:border-border"
>
<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>
</Link>
))}
</div>
</Container>
</section>
{/* CTA */}
<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">
Ready to take control?
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Talk to us about audit logs and the rest of Dokploy&apos;s
higher-tier features.
</p>
<div className="mt-10">
<Button className="rounded-full" asChild>
<Link href="/contact">Schedule a call</Link>
</Button>
</div>
</div>
</Container>
</section>
</div>
);
}

202
apps/website/app/features/role-based-access-control/page.tsx Normal file
View File

@@ -0,0 +1,202 @@
import { Container } from "@/components/Container";
import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
import { Button } from "@/components/ui/button";
import {
Shield,
Users,
FolderLock,
SlidersHorizontal,
UserPlus,
KeyRound,
ScrollText,
Paintbrush,
} from "lucide-react";
import Link from "next/link";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Role-Based Access Control for Teams",
description:
"Control who can access what across your Dokploy projects. Fine-grained RBAC keeps your infrastructure secure as your team scales.",
};
const coreFeatures = [
{
icon: Users,
title: "Set organization-wide roles",
description:
"Assign owners, admins, and members across your organization, with each role scoping what that user can access and action within Dokploy.",
},
{
icon: FolderLock,
title: "Grant project-level access",
description:
"Go beyond top-level roles and give individual users access to specific projects, services, or environments\u2014keeping sensitive deployments off-limits to those who don\u2019t need them.",
},
{
icon: SlidersHorizontal,
title: "Manage permissions for every workflow",
description:
"Enable or restrict actions at a granular level: creating projects, deploying services, accessing Docker, managing SSH keys, running the CLI, and more. Build a permission set that reflects how your team actually works.",
},
{
icon: UserPlus,
title: "Scale access as your team grows",
description:
"As you add engineers, contractors, stakeholders, and third parties, RBAC makes it straightforward to onboard them with the right level of access from day one\u2014and to update or revoke permissions as roles change.",
},
];
const relatedFeatures = [
{
icon: KeyRound,
title: "SSO",
description:
"Centralize authentication with your existing identity provider for secure, seamless access across your organization.",
href: "/features/single-sign-on",
},
{
icon: ScrollText,
title: "Audit logs",
description:
"Keep a full record of every action taken across your Dokploy environment for compliance and accountability.",
href: "/features/audit-logs",
},
{
icon: Paintbrush,
title: "White labeling",
description:
"Present Dokploy as your own product, with custom branding for your clients or organization.",
href: "/features/white-labeling",
},
];
export default function RoleBasedAccessControlPage() {
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">
Secure access at every level
</h1>
<p className="mt-6 text-lg text-muted-foreground">
Give every team member the right permissions in your application
deployment solution with fine-grained role-based access
control&mdash;no more, no less.
</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>
{/* Control without compromise */}
<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">
Control without compromise
</h2>
<p className="mt-4 text-lg text-muted-foreground">
RBAC in Dokploy lets you define exactly what each person on your
team can see, create, control, and manage.
</p>
</div>
<div className="mx-auto mt-16 grid max-w-5xl gap-8 sm:grid-cols-2">
{coreFeatures.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>
{/* Powerful features for growing teams */}
<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">
Powerful features for growing teams
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Dokploy scales with your team, with features and plans for when
you&apos;re ready to take the next step.
</p>
</div>
<div className="mx-auto mt-16 grid max-w-5xl gap-8 sm:grid-cols-3">
{relatedFeatures.map((feature) => (
<Link
key={feature.title}
href={feature.href}
className="rounded-xl border border-border/50 bg-card p-6 transition hover:border-border"
>
<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>
</Link>
))}
</div>
</Container>
</section>
{/* CTA */}
<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">
Ready to take your business to the next level?
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Talk to us about fine-grained RBAC and the rest of
Dokploy&apos;s higher-tier feature set.
</p>
<div className="mt-10">
<Button className="rounded-full" asChild>
<Link href="/contact">Schedule a call</Link>
</Button>
</div>
</div>
</Container>
</section>
</div>
);
}

203
apps/website/app/features/single-sign-on/page.tsx Normal file
View File

@@ -0,0 +1,203 @@
import { Container } from "@/components/Container";
import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
import { Button } from "@/components/ui/button";
import {
KeyRound,
Link2,
Users,
ShieldCheck,
UserMinus,
Shield,
ScrollText,
Paintbrush,
} from "lucide-react";
import Link from "next/link";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Single Sign-On for Businesses and Enterprise Teams",
description:
"Connect Dokploy to your existing identity provider with SSO. Centralize access control and keep your organization secure at scale.",
};
const coreFeatures = [
{
icon: Link2,
title: "Connect your existing identity provider",
description:
"Dokploy supports SSO via OpenID Connect (OIDC) and SAML, with native integrations for Okta, Azure AD (Microsoft Entra ID), Auth0, and Keycloak. If you use a different provider, you can configure it manually using standard OIDC or SAML endpoints.",
},
{
icon: Users,
title: "Remove friction for your team",
description:
"With SSO enabled, your team signs in to Dokploy using the same credentials they use across the rest of your organization\u2014no extra passwords, no separate accounts to keep in sync.",
},
{
icon: ShieldCheck,
title: "Enforce centralized access policies",
description:
"Authentication flows through your identity provider, so you can apply your existing security policies\u2014MFA requirements, conditional access rules, session timeouts\u2014without configuring them separately in Dokploy.",
},
{
icon: UserMinus,
title: "Deprovision access instantly",
description:
"When a team member leaves or changes a role, revoking their access in your identity provider immediately removes their access to Dokploy\u2014no manual cleanup across multiple tools.",
},
];
const relatedFeatures = [
{
icon: Shield,
title: "RBAC",
description:
"Define exactly what each user can do once they\u2019re in Dokploy, with granular role and permission controls across projects, services, and features.",
href: "/features/role-based-access-control",
},
{
icon: ScrollText,
title: "Audit logs",
description:
"Keep a full record of every login, logout, and action taken across your Dokploy environment for compliance and accountability.",
href: "/features/audit-logs",
},
{
icon: Paintbrush,
title: "White labeling",
description:
"Present Dokploy as your own product, with custom branding for your clients or organization.",
href: "/features/white-labeling",
},
];
export default function SingleSignOnPage() {
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">
One login for your entire organization
</h1>
<p className="mt-6 text-lg text-muted-foreground">
Connect Dokploy to your identity provider and manage access from a
single place. Available to Enterprise plan users and as a one-off
additional feature.
</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>
{/* Authentication that scales with you */}
<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">
Authentication that scales with you
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Dokploy&apos;s SSO support means your team logs in through the
identity provider you already trust, so there are no separate
credentials to manage.
</p>
</div>
<div className="mx-auto mt-16 grid max-w-5xl gap-8 sm:grid-cols-2">
{coreFeatures.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>
{/* Powerful features for growing teams */}
<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">
Powerful features for growing teams
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Dokploy scales with your team, with features and plans for when
you&apos;re ready to take the next step.
</p>
</div>
<div className="mx-auto mt-16 grid max-w-5xl gap-8 sm:grid-cols-3">
{relatedFeatures.map((feature) => (
<Link
key={feature.title}
href={feature.href}
className="rounded-xl border border-border/50 bg-card p-6 transition hover:border-border"
>
<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>
</Link>
))}
</div>
</Container>
</section>
{/* CTA */}
<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">
Ready to simplify access for your team?
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Talk to us about SSO and the rest of Dokploy&apos;s security
features.
</p>
<div className="mt-10">
<Button className="rounded-full" asChild>
<Link href="/contact">Schedule a call</Link>
</Button>
</div>
</div>
</Container>
</section>
</div>
);
}

201
apps/website/app/features/white-labeling/page.tsx Normal file
View File

@@ -0,0 +1,201 @@
import { Container } from "@/components/Container";
import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
import { Button } from "@/components/ui/button";
import {
Paintbrush,
Type,
Palette,
Link2,
MonitorCheck,
Shield,
KeyRound,
ScrollText,
} from "lucide-react";
import Link from "next/link";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "White Label Deployment Platform",
description:
"Rebrand Dokploy as your own product. Customize the name, logo, colors and more to deliver a seamless experience under your own brand.",
};
const coreFeatures = [
{
icon: Type,
title: "Customize your name and logo",
description:
"Replace Dokploy across the entire interface with your own application name. Upload your logo for the sidebar, header, and login page, and set a custom favicon so your branding carries through to the browser tab.",
},
{
icon: Palette,
title: "Style the interface to match your brand",
description:
"The custom CSS editor gives you direct control over the look and feel of the platform. Load the default theme variables as a starting point, then adjust colors, backgrounds, and button styles to match your brand guidelines.",
},
{
icon: Link2,
title: "Control the metadata and support links",
description:
"Set your own page title, footer text, sidebar links, and more for documentation and support, so users are always directed to your resources, not Dokploy\u2019s.",
},
{
icon: MonitorCheck,
title: "Preview changes before you ship them",
description:
"The live preview panel shows how your branding will look across key parts of the interface before you save anything, reducing the risk of pushing changes that break your user experience.",
},
];
const relatedFeatures = [
{
icon: Shield,
title: "RBAC",
description:
"Define exactly what each user can do once they\u2019re in Dokploy, with fine-grained permissions across projects, features, and services.",
href: "/features/role-based-access-control",
},
{
icon: KeyRound,
title: "SSO",
description:
"Centralize authentication with your existing identity provider for secure, seamless access across your organization.",
href: "/features/single-sign-on",
},
{
icon: ScrollText,
title: "Audit logs",
description:
"Keep a full record of every action taken across your environment for compliance and accountability.",
href: "/features/audit-logs",
},
];
export default function WhiteLabelingPage() {
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">
Deploy applications under your own brand
</h1>
<p className="mt-6 text-lg text-muted-foreground">
Replace every Dokploy mention with your own name, logo, branding,
and visual identity.
</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>
{/* Your product, your brand */}
<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">
Your product, your brand
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Dokploy&apos;s white labeling lets enterprise teams and agencies
deliver a fully branded, professional deployment platform.
</p>
</div>
<div className="mx-auto mt-16 grid max-w-5xl gap-8 sm:grid-cols-2">
{coreFeatures.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>
{/* Powerful features for growing teams */}
<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">
Powerful features for growing teams
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Dokploy scales with your team, with features and plans for when
you&apos;re ready to take the next step.
</p>
</div>
<div className="mx-auto mt-16 grid max-w-5xl gap-8 sm:grid-cols-3">
{relatedFeatures.map((feature) => (
<Link
key={feature.title}
href={feature.href}
className="rounded-xl border border-border/50 bg-card p-6 transition hover:border-border"
>
<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>
</Link>
))}
</div>
</Container>
</section>
{/* CTA */}
<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">
Ready to launch your own platform?
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Talk to us about white labeling and the rest of Dokploy&apos;s
higher-tier features.
</p>
<div className="mt-10">
<Button className="rounded-full" asChild>
<Link href="/contact">Schedule a call</Link>
</Button>
</div>
</div>
</Container>
</section>
</div>
);
}

24
apps/website/components/Footer.tsx
View File

@@ -22,7 +22,29 @@ const footerSections = [
label: "Databases",
},
{ href: "/enterprise", label: "Enterprise" },
{ href: "/contact", label: "Contact" },
{ href: "/contact", label: "Contact" },
],
},
{
title: "Enterprise Features",
ariaLabel: "Enterprise features",
links: [
{
href: "/features/role-based-access-control",
label: "RBAC",
},
{
href: "/features/single-sign-on",
label: "SSO",
},
{
href: "/features/audit-logs",
label: "Audit Logs",
},
{
href: "/features/white-labeling",
label: "White Labeling",
},
],
},
{

4
apps/website/components/Header.tsx
View File

@@ -118,6 +118,7 @@ function MobileNavigation() {
</p>
<MobileNavLink href="/features/application-deployment-platform">Application Deployment</MobileNavLink>
<MobileNavLink href="/features/database-management-tool">Databases</MobileNavLink>
<MobileNavLink href="/features/application-management-software">Application Management</MobileNavLink>
<hr className="m-2 border-border" />
<MobileNavLink href="/pricing">Pricing</MobileNavLink>
<hr className="m-2 border-border" />
@@ -228,6 +229,9 @@ export function Header() {
<ListItem href="/features/database-management-tool" title="Databases">
Manage your databases effortlessly
</ListItem>
<ListItem href="/features/application-management-software" title="Application Management">
Monitor and control your applications
</ListItem>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>