+
+
+
+
-
- 🚀 {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.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}
-
- ))}
-
-
- ))}
-
-
*/}
-
-
- );
-}
-
-export const ShowSponsors = () => {
- const t = useTranslations("HomePage");
- return (
-
-
-
- {t("hero.sponsors.title")}
-
-
- {t("hero.sponsors.description")}
-
-
-
-
- {t("hero.sponsors.level.hero")} 🎖
-
-
-
-
-
- {t("hero.sponsors.level.premium")} 🥇
-
-
-
-
-
- {t("hero.sponsors.level.supporting")} 🥉
-
-
-
-
-
- {t("hero.sponsors.level.community")} 🤝
-
-
-
-
-
- {t("hero.sponsors.level.organizations")}
-
-
-
-
-
- {t("hero.sponsors.level.individuals")}
-
-
+
);
-};
+}
diff --git a/apps/website/components/Testimonials.tsx b/apps/website/components/Testimonials.tsx
index ad06cfc..444f4aa 100644
--- a/apps/website/components/Testimonials.tsx
+++ b/apps/website/components/Testimonials.tsx
@@ -1,134 +1,216 @@
-import { Container } from "./Container";
+"use client";
+import { cn } from "@/lib/utils";
+import { Marquee } from "./ui/marquee";
-const testimonials = [
- [
- {
- content:
- "This application has revolutionized the way we handle deployments. The integration of Docker and Traefik through such a user-friendly interface has saved us countless hours.",
- author: {
- name: "Emily R.",
- role: "Full Stack Developer",
- image: "/avatars/avatar-1.png",
- },
- },
- {
- content:
- "As a fast-paced startup, efficiency and reliability are paramount. This software delivered on both, allowing us to focus more on development and less on operations.",
- author: {
- name: "Mark T.",
- role: "CTO, Tech Innovations Inc.",
- image: "/avatars/avatar-2.png",
- },
- },
- ],
- [
- {
- content:
- "The comprehensive monitoring and robust backup solutions have given us the peace of mind we need to operate at our best 24/7. Highly recommended!",
- author: {
- name: "Sarah L.",
- role: "IT Director, Creative Solutions Agency",
- image: "/avatars/avatar-3.png",
- },
- },
- {
- content:
- "Upgrading to this platform was a game-changer for our agency. The user permission controls and real-time updates have greatly enhanced our team's efficiency.",
- author: {
- name: "James P.",
- role: "Lead Developer, Dynamic Web Solutions",
- image: "/avatars/avatar-4.png",
- },
- },
- ],
- [
- {
- content:
- "Fantastic tool! The direct container access and dynamic Traefik configuration features have made it so easy to manage our services. It's like having a DevOps team in a box!",
- author: {
- name: "Ana D.",
- role: "Full Stack Developer, Independent Contractor",
- image: "/avatars/avatar-7.png",
- },
- },
- {
- content:
- "his tool has been indispensable for managing my client projects. It has streamlined my workflow and dramatically increased my productivity, allowing me to take on more clients without sacrificing quality.",
- author: {
- name: "Carlos M.",
- role: "Freelance Full Stack Developer",
- image: "/avatars/avatar-6.png",
- },
- },
- ],
+// const testimonials = [
+// [
+// {
+// content:
+// "This application has revolutionized the way we handle deployments. The integration of Docker and Traefik through such a user-friendly interface has saved us countless hours.",
+// author: {
+// name: "Emily R.",
+// role: "Full Stack Developer",
+// image: "/avatars/avatar-1.png",
+// },
+// },
+// {
+// content:
+// "As a fast-paced startup, efficiency and reliability are paramount. This software delivered on both, allowing us to focus more on development and less on operations.",
+// author: {
+// name: "Mark T.",
+// role: "CTO, Tech Innovations Inc.",
+// image: "/avatars/avatar-2.png",
+// },
+// },
+// ],
+// [
+// {
+// content:
+// "The comprehensive monitoring and robust backup solutions have given us the peace of mind we need to operate at our best 24/7. Highly recommended!",
+// author: {
+// name: "Sarah L.",
+// role: "IT Director, Creative Solutions Agency",
+// image: "/avatars/avatar-3.png",
+// },
+// },
+// {
+// content:
+// "Upgrading to this platform was a game-changer for our agency. The user permission controls and real-time updates have greatly enhanced our team's efficiency.",
+// author: {
+// name: "James P.",
+// role: "Lead Developer, Dynamic Web Solutions",
+// image: "/avatars/avatar-4.png",
+// },
+// },
+// ],
+// [
+// {
+// content:
+// "Fantastic tool! The direct container access and dynamic Traefik configuration features have made it so easy to manage our services. It's like having a DevOps team in a box!",
+// author: {
+// name: "Ana D.",
+// role: "Full Stack Developer, Independent Contractor",
+// image: "/avatars/avatar-7.png",
+// },
+// },
+// {
+// content:
+// "his tool has been indispensable for managing my client projects. It has streamlined my workflow and dramatically increased my productivity, allowing me to take on more clients without sacrificing quality.",
+// author: {
+// name: "Carlos M.",
+// role: "Freelance Full Stack Developer",
+// image: "/avatars/avatar-6.png",
+// },
+// },
+// ],
+// ];
+
+// function QuoteIcon(props: React.ComponentPropsWithoutRef<"svg">) {
+// return (
+//
+// );
+// }
+
+const reviews = [
+ {
+ name: "Duras",
+ username: "@duras",
+ body: "This app convinced me to try something beyond pure Docker Compose. It’s a pleasure to contribute to such an awesome project!",
+ img: "https://avatar.vercel.sh/duras",
+ },
+ {
+ name: "apis",
+ username: "@apis",
+ body: "I replaced my previous setup with Dokploy today. It’s stable, easy to use, and offers excellent support!",
+ img: "https://avatar.vercel.sh/apis",
+ },
+ {
+ name: "yayza_",
+ username: "@yayza_",
+ body: "Migrated all my services to Dokploy—it worked seamlessly! The level of configuration is perfect for all kinds of projects.",
+ img: "https://avatar.vercel.sh/yayza",
+ },
+ {
+ name: "Vaurion",
+ username: "@vaurion",
+ body: "Dokploy makes my deployments incredibly easy. I just test locally, push a preview to GitHub, and Dokploy takes care of the rest.",
+ img: "https://avatar.vercel.sh/vaurion",
+ },
+ {
+ name: "vinum?",
+ username: "@vinum",
+ body: "Dokploy is everything I wanted in a PaaS. The functionality is impressive, and it's completely free!",
+ img: "https://avatar.vercel.sh/vinum",
+ },
+ {
+ name: "vadzim",
+ username: "@vadzim",
+ body: "Dokploy is fantastic! I rarely encounter any deployment issues, and the community support is top-notch.",
+ img: "https://avatar.vercel.sh/vadzim",
+ },
+ {
+ name: "Slurpy Beckerman",
+ username: "@slurpy",
+ body: "This is exactly what I want in a deployment system. I’ve restructured my dev process around Dokploy!",
+ img: "https://avatar.vercel.sh/slurpy",
+ },
+ {
+ name: "lua",
+ username: "@lua",
+ body: "Dokploy is genuinely so nice to use. The hard work behind it really shows.",
+ img: "https://avatar.vercel.sh/lua",
+ },
+ {
+ name: "johnnygri",
+ username: "@johnnygri",
+ body: "Dokploy is a complete joy to use. I’m running a mix of critical and low-priority services seamlessly across servers.",
+ img: "https://avatar.vercel.sh/johnnygri",
+ },
+ {
+ name: "HiJoe",
+ username: "@hijoe",
+ body: "Setting up Dokploy was great—simple, intuitive, and reliable. Perfect for small to medium-sized businesses.",
+ img: "https://avatar.vercel.sh/hijoe",
+ },
+ {
+ name: "johannes0910",
+ username: "@johannes0910",
+ body: "Dokploy has been a game-changer for my side projects. Solid UI, straightforward Docker abstraction, and great design.",
+ img: "https://avatar.vercel.sh/johannes0910",
+ },
];
-function QuoteIcon(props: React.ComponentPropsWithoutRef<"svg">) {
+const firstRow = reviews.slice(0, reviews.length / 2);
+const secondRow = reviews.slice(reviews.length / 2);
+
+const ReviewCard = ({
+ img,
+ name,
+ username,
+ body,
+}: {
+ img: string;
+ name: string;
+ username: string;
+ body: string;
+}) => {
return (
-
+
+
+
+
+
+ {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.
-
-
);
}
diff --git a/apps/website/components/features-second.tsx b/apps/website/components/features-second.tsx
new file mode 100644
index 0000000..2da102e
--- /dev/null
+++ b/apps/website/components/features-second.tsx
@@ -0,0 +1,232 @@
+import { cn } from "@/lib/utils";
+import { IconBrandYoutubeFilled } from "@tabler/icons-react";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import Link from "next/link";
+import type React from "react";
+
+export function FeaturesSectionDemo() {
+ const features = [
+ {
+ title: "Track issues effectively",
+ description:
+ "Track and manage your project issues with ease using our intuitive interface.",
+ skeleton:
,
+ className:
+ "col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
+ },
+ {
+ title: "Capture pictures with AI",
+ description:
+ "Capture stunning photos effortlessly using our advanced AI technology.",
+ skeleton:
,
+ className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
+ },
+ {
+ title: "Watch our AI on YouTube",
+ description:
+ "Whether its you or Tyler Durden, you can get to know about our product on YouTube",
+ skeleton:
,
+ className:
+ "col-span-1 lg:col-span-3 lg:border-r dark:border-neutral-800",
+ },
+ {
+ title: "Deploy in seconds",
+ description:
+ "With our blazing fast, state of the art, cutting edge, we are so back cloud servies (read AWS) - you can deploy your model in seconds.",
+ skeleton:
,
+ className: "col-span-1 lg:col-span-3 border-b lg:border-none",
+ },
+ ];
+ return (
+
+
+
+ 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}
+
+ ))}
+
+
+
+ );
+}
+
+const FeatureCard = ({
+ children,
+ className,
+}: {
+ children?: React.ReactNode;
+ className?: string;
+}) => {
+ return (
+
+ {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) => (
+
+
+
+ ))}
+
+
+
+
+
+ );
+};
+
+export const SkeletonFour = () => {
+ return (
+
+ {/* */}
+
+ );
+};
diff --git a/apps/website/components/first-features.tsx b/apps/website/components/first-features.tsx
new file mode 100644
index 0000000..1451383
--- /dev/null
+++ b/apps/website/components/first-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 FirstFeaturesSection() {
+ 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) => (
+
+ ))}
+
+
+ );
+}
+
+const Feature = ({
+ title,
+ description,
+ icon,
+ index,
+}: {
+ title: string;
+ description: string;
+ icon: React.ReactNode;
+ index: number;
+}) => {
+ return (
+
+ {index < 4 && (
+
+ )}
+ {index >= 4 && (
+
+ )}
+
{icon}
+
+
+ {description}
+
+
+ );
+};
diff --git a/apps/website/components/pricing.tsx b/apps/website/components/pricing.tsx
index 366dfe0..51b7f55 100644
--- a/apps/website/components/pricing.tsx
+++ b/apps/website/components/pricing.tsx
@@ -6,9 +6,8 @@ import { ArrowRight, MinusIcon, PlusIcon } from "lucide-react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { useRouter } from "next/navigation";
-import { use, useState } from "react";
+import { useState } from "react";
import { Container } from "./Container";
-import { trackGAEvent } from "./analitycs";
import { Badge } from "./ui/badge";
import { Button, buttonVariants } from "./ui/button";
import { NumberInput } from "./ui/input";
@@ -68,94 +67,6 @@ export const calculatePrice = (count: number, isAnnual = false) => {
if (count <= 1) return 4.5;
return count * 3.5;
};
-function Plan({
- name,
- price,
- description,
- href,
- features,
- featured = false,
- buttonText = "Get Started",
-}: {
- name: string;
- price: string;
- description: string;
- href: string;
- features: Array
;
- featured?: boolean;
- buttonText?: string;
-}) {
- const router = useRouter();
- return (
-
-
-
-
-
{name}
-
- {description}
-
-
- {price}
-
-
- {features.map((feature) => (
- -
-
- {feature}
-
- ))}
-
-
-
+