-
-
- 🚀 {t("hero.cloud")}
-
-
+
+
+
+
+ 🎉
{" "}
+
+ Introducing Dokploy Cloud
+
+
+
-
+
-
- {t("hero.deploy")}{" "}
-
-
- {t("hero.anywhere")}
- {" "}
- {t("hero.with")}
-
-
- {t("hero.des")}
-
-
-
-
- curl -sSL https://dokploy.com/install.sh | sh
-
-
- {/*
+
-
-
-
-
- {/*
-
- {t("hero.featuredIn")}
-
-
- {[
- [
- { name: "Product Hunt", logo: },
- // { name: "Hacker News", logo: },
- ],
- ].map((group, groupIndex) => (
- -
-
- {group.map((company) => (
- -
- {company.logo}
-
- ))}
-
-
- ))}
-
-
*/}
+
+
+
+
+
);
diff --git a/apps/website/components/PrimaryFeatures.tsx b/apps/website/components/PrimaryFeatures.tsx
index ef4ecfd..4a0b4b3 100644
--- a/apps/website/components/PrimaryFeatures.tsx
+++ b/apps/website/components/PrimaryFeatures.tsx
@@ -7,17 +7,13 @@ import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";
import { useTranslations } from "next-intl";
import { Container } from "./Container";
+import Safari from "./ui/safari";
const features = [
- {
- title: "primaryFeatures.projects",
- description: "primaryFeatures.projectsDes",
- image: "/primary/projects.png",
- },
{
title: "primaryFeatures.applications",
description: "primaryFeatures.applicationsDes",
- image: "/primary/applications.png",
+ image: "/primary/primary.png",
},
{
title: "primaryFeatures.compose",
@@ -25,9 +21,9 @@ const features = [
image: "/primary/compose.png",
},
{
- title: "primaryFeatures.multinode",
- description: "primaryFeatures.multinodeDes",
- image: "/primary/multinode.png",
+ title: "primaryFeatures.multiserver",
+ description: "primaryFeatures.multiserverDes",
+ image: "/primary/servers.png",
},
{
title: "primaryFeatures.monitoring",
@@ -39,6 +35,11 @@ const features = [
description: "primaryFeatures.backupsDes",
image: "/primary/backups.png",
},
+ {
+ title: "primaryFeatures.traefik",
+ description: "primaryFeatures.traefikDes",
+ image: "/primary/traefik.png",
+ },
];
export function PrimaryFeatures() {
@@ -85,7 +86,7 @@ export function PrimaryFeatures() {
height={1636}
unoptimized
/> */}
-
+
{t("primaryFeatures.title")}
@@ -96,16 +97,16 @@ export function PrimaryFeatures() {
{({ selectedIndex }) => (
<>
-
+
{features.map((feature, featureIndex) => (
{selectedIndex === featureIndex && (
-
+
{t(feature.title)}
{t(feature.description)}
@@ -153,34 +154,35 @@ export function PrimaryFeatures() {
))}
-
+
{features.map((feature, index) => (
-
+
-
+
{t(feature.description)}
- 
+
+
+
))}
@@ -188,7 +190,7 @@ export function PrimaryFeatures() {
)}
-
+
+
+
+
+ {name}
+
+
{username}
+
+
{body}
+
+ );
+};
+
export function Testimonials() {
return (
-
-
-
- What Our Users Say
-
-
- Don’t just take our word for it—see what our users across the globe
- are saying about how our platform has transformed their development
- workflows and boosted their productivity.
-
-
+
+
+ Packed with thousands of features
+
+
+
+ From Image generation to video generation, Everything AI has APIs for
+ literally everything. It can even create this website copy for you.
+
+
+
+
+
+ {features.map((feature) => (
+
+ {feature.title}
+ {feature.description}
+ {feature.skeleton}
+
+ ))}
+
+
+
+ {children}
+
+ );
+};
+
+const FeatureTitle = ({ children }: { children?: React.ReactNode }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export const SkeletonOne = () => {
+ return (
+
+ );
+};
+
+export const SkeletonThree = () => {
+ return (
+
+
+
+ );
+};
+
+export const SkeletonTwo = () => {
+ const images = [
+ "https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+ "https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+ "https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+ "https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+ "https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+ ];
+
+ const imageVariants = {
+ whileHover: {
+ scale: 1.1,
+ rotate: 0,
+ zIndex: 100,
+ },
+ whileTap: {
+ scale: 1.1,
+ rotate: 0,
+ zIndex: 100,
+ },
+ };
+ return (
+
+ {/* TODO */}
+
+ {images.map((image, idx) => (
+
+
+
+ ))}
+
+
+ {images.map((image, idx) => (
+
+
+
+ ))}
+
+
+
+
+
+ {/* */}
+
+ );
+};
diff --git a/apps/website/components/features.tsx b/apps/website/components/features.tsx
new file mode 100644
index 0000000..68be0cf
--- /dev/null
+++ b/apps/website/components/features.tsx
@@ -0,0 +1,148 @@
+"use client";
+import { cn } from "@/lib/utils";
+import {
+ IconActivity,
+ IconCloud,
+ IconDatabase,
+ IconEaseInOut,
+ IconRocket,
+ IconTemplate,
+ IconTerminal,
+ IconTerminal2,
+ IconUsers,
+} from "@tabler/icons-react";
+import { Layers, Lock, UnlockIcon } from "lucide-react";
+
+export function FeaturesSectionDemo() {
+ const features = [
+ {
+ title: "Flexible Application Deployment",
+ description:
+ "Deploy any application using Nixpacks, Heroku Buildpacks, or your custom Dockerfile, tailored to your stack.",
+ icon: ,
+ },
+ {
+ title: "Native Docker Compose Support",
+ description:
+ "Deploy complex applications natively with full Docker Compose integration for seamless orchestration.",
+ icon: ,
+ },
+ {
+ title: "Multi-server Support",
+ description:
+ "Effortlessly deploy your applications on remote servers, with zero configuration hassle.",
+ icon: ,
+ },
+ {
+ title: "Advanced User Management",
+ description:
+ "Control user access with detailed roles and permissions, keeping your deployments secure and organized.",
+ icon: ,
+ },
+ {
+ title: "Database Management with Backups",
+ description:
+ "Manage and back up MySQL, PostgreSQL, MongoDB, MariaDB, Redis directly from Dokploy.",
+ icon: ,
+ },
+ {
+ title: "API & CLI Access",
+ description:
+ "Need custom functionality? Dokploy offers complete API and CLI access to fit your needs.",
+ icon: ,
+ },
+ {
+ title: "Docker Swarm Clusters",
+ description:
+ "Scale your deployments seamlessly with built-in Docker Swarm support for robust, multi-node applications.",
+ icon: ,
+ },
+ {
+ title: "Open Source Templates",
+ description:
+ "Get started quickly with pre-configured templates for popular tools like Supabase, Cal.com, and Pocketbase.",
+ icon: ,
+ },
+ {
+ title: "No Vendor Lock-In",
+ description:
+ "Experience complete freedom to modify, scale, and customize Dokploy to suit your specific needs.",
+ icon: ,
+ },
+ {
+ title: "Real-time Monitoring & Alerts",
+ description:
+ "Monitor CPU, memory, and network usage in real-time across your deployments for full visibility.",
+ icon: ,
+ },
+ {
+ title: "Built for developers",
+ description:
+ "Designed specifically for engineers and developers seeking control and flexibility.",
+ icon: ,
+ },
+ {
+ title: "Self-hosted & Open Source",
+ description:
+ "Dokploy provides complete control with self-hosting capabilities and open-source transparency.",
+ icon: ,
+ },
+ ];
+ return (
+
+
+ Powerful Deployment, Tailored for You
+
+
+ Unlock seamless multi-server deployments, advanced user control, and
+ flexible database management—all with Dokploy’s developer-focused
+ features.
+
+
+ {features.map((feature, index) => (
+
+ ))}
+
+
+ {index < 4 && (
+
+ )}
+ {index >= 4 && (
+
+ )}
+
{icon}
+
+
+ {description}
+
+
+
+
+
+
+
+ Welcome to Our Website
+
+
+ Elig doloremque mollitia fugiat omnis! Porro facilis quo animi
+ consequatur.
+
+
+
+ {/*
+
+
+ No credit card required
+
+
+
*/}
+
+
+
+
+
+
+
+
+
+
+
4.8 starts
+
+
207 Reviews
+
+
+
+
+
+
+
+ {children}
+
+
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/apps/website/components/ui/animated-gradient-text.tsx b/apps/website/components/ui/animated-gradient-text.tsx
new file mode 100644
index 0000000..e53cd79
--- /dev/null
+++ b/apps/website/components/ui/animated-gradient-text.tsx
@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+export default function AnimatedGradientText({
+ children,
+ className,
+}: {
+ children: ReactNode;
+ className?: string;
+}) {
+ return (
+
+ );
+}
diff --git a/apps/website/components/ui/hero-video-dialog.tsx b/apps/website/components/ui/hero-video-dialog.tsx
new file mode 100644
index 0000000..f24a203
--- /dev/null
+++ b/apps/website/components/ui/hero-video-dialog.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { Play, XIcon } from "lucide-react";
+import { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+type AnimationStyle =
+ | "from-bottom"
+ | "from-center"
+ | "from-top"
+ | "from-left"
+ | "from-right"
+ | "fade"
+ | "top-in-bottom-out"
+ | "left-in-right-out";
+
+interface HeroVideoProps {
+ animationStyle?: AnimationStyle;
+ videoSrc: string;
+ thumbnailSrc: string;
+ thumbnailAlt?: string;
+ className?: string;
+}
+
+const animationVariants = {
+ "from-bottom": {
+ initial: { y: "100%", opacity: 0 },
+ animate: { y: 0, opacity: 1 },
+ exit: { y: "100%", opacity: 0 },
+ },
+ "from-center": {
+ initial: { scale: 0.5, opacity: 0 },
+ animate: { scale: 1, opacity: 1 },
+ exit: { scale: 0.5, opacity: 0 },
+ },
+ "from-top": {
+ initial: { y: "-100%", opacity: 0 },
+ animate: { y: 0, opacity: 1 },
+ exit: { y: "-100%", opacity: 0 },
+ },
+ "from-left": {
+ initial: { x: "-100%", opacity: 0 },
+ animate: { x: 0, opacity: 1 },
+ exit: { x: "-100%", opacity: 0 },
+ },
+ "from-right": {
+ initial: { x: "100%", opacity: 0 },
+ animate: { x: 0, opacity: 1 },
+ exit: { x: "100%", opacity: 0 },
+ },
+ fade: {
+ initial: { opacity: 0 },
+ animate: { opacity: 1 },
+ exit: { opacity: 0 },
+ },
+ "top-in-bottom-out": {
+ initial: { y: "-100%", opacity: 0 },
+ animate: { y: 0, opacity: 1 },
+ exit: { y: "100%", opacity: 0 },
+ },
+ "left-in-right-out": {
+ initial: { x: "-100%", opacity: 0 },
+ animate: { x: 0, opacity: 1 },
+ exit: { x: "100%", opacity: 0 },
+ },
+};
+
+export default function HeroVideoDialog({
+ animationStyle = "from-center",
+ videoSrc,
+ thumbnailSrc,
+ thumbnailAlt = "Video thumbnail",
+ className,
+}: HeroVideoProps) {
+ const [isVideoOpen, setIsVideoOpen] = useState(false);
+ const selectedAnimation = animationVariants[animationStyle];
+
+ return (
+
+
setIsVideoOpen(true)}
+ >
+
+
+
+
+ {isVideoOpen && (
+ setIsVideoOpen(false)}
+ exit={{ opacity: 0 }}
+ className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md"
+ >
+
+
+
+
+
+ {/* biome-ignore lint/a11y/useIframeTitle: */}
+
+
+
+
+ )}
+
+
+ {Array(repeat)
+ .fill(0)
+ .map((_, i) => (
+
+ {children}
+
+ ))}
+