-
+
Dokploy
@@ -17,14 +21,11 @@ export function Footer() {
-
-
Features
-
Faqs
-
- Docs
+
+ {t("navigation.features")}
+ {t("navigation.faqs")}
+
+ {t("navigation.docs")}
@@ -57,8 +58,9 @@ export function Footer() {
- Copyright © {new Date().getFullYear()} Dokploy. All rights
- reserved.
+ {t("footer.copyright", {
+ year: new Date().getFullYear(),
+ })}
diff --git a/apps/website/components/Header.tsx b/apps/website/components/Header.tsx
index 5cd3151c4..8347b1430 100644
--- a/apps/website/components/Header.tsx
+++ b/apps/website/components/Header.tsx
@@ -1,10 +1,17 @@
"use client";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+} from "@/components/ui/select";
+import { Link, useRouter } from "@/i18n/routing";
import { cn } from "@/lib/utils";
import { Popover, Transition } from "@headlessui/react";
import { HeartIcon } from "lucide-react";
-import Link from "next/link";
-import { Fragment } from "react";
+import { useLocale, useTranslations } from "next-intl";
+import { Fragment, type JSX, type SVGProps } from "react";
import { Container } from "./Container";
import { NavLink } from "./NavLink";
import { trackGAEvent } from "./analitycs";
@@ -63,7 +70,27 @@ function MobileNavIcon({ open }: { open: boolean }) {
);
}
+const I18nIcon = (props: JSX.IntrinsicAttributes & SVGProps
) => (
+
+
+);
+
function MobileNavigation() {
+ const t = useTranslations("HomePage");
+ const linkT = useTranslations("Link");
return (
- Features
- Testimonials
- Faqs
-
- Docs
+
+ {t("navigation.features")}
+
+ {/* Testimonials */}
+ {t("navigation.faqs")}
+
+ {t("navigation.docs")}
@@ -115,27 +141,54 @@ function MobileNavigation() {
}
export function Header() {
+ const router = useRouter();
+ const locale = useLocale();
+ const t = useTranslations("HomePage");
+ const linkT = useTranslations("Link");
+
return (
-
+
-
+
- Features
+ {t("navigation.features")}
{/* Testimonials */}
- Faqs
-
- Docs
+ {t("navigation.faqs")}
+
+ {t("navigation.docs")}
+
{
+ router.replace("/", {
+ locale: locale as "en" | "zh-Hans",
+ });
+ }}
+ value={locale}
+ >
+
+
+
+ {t("navigation.i18nEn")}
+
+ {t("navigation.i18nZh-Hans")}
+
+
+
+
-
Support
-
+
+ {t("navigation.support")}{" "}
+
+
- {/* @ts-expect-error */}
- Discord
+ {t("navigation.discord")}
diff --git a/apps/website/components/Hero.tsx b/apps/website/components/Hero.tsx
index 3d07e9ca7..e03d4f1e1 100644
--- a/apps/website/components/Hero.tsx
+++ b/apps/website/components/Hero.tsx
@@ -1,5 +1,6 @@
"use client";
import { Check, Copy } from "lucide-react";
+import { useTranslations } from "next-intl";
import Link from "next/link";
import { useEffect, useState } from "react";
import { Container } from "./Container";
@@ -38,6 +39,7 @@ const ProductHunt = () => {
};
export function Hero() {
+ const t = useTranslations("HomePage");
const [isCopied, setIsCopied] = useState(false);
useEffect(() => {
@@ -47,7 +49,7 @@ export function Hero() {
return () => clearTimeout(timer);
}, [isCopied]);
return (
-
+
@@ -68,7 +70,7 @@ export function Hero() {
- Deploy{" "}
+ {t("hero.deploy")}{" "}
- Anywhere
+ {t("hero.anywhere")}
{" "}
- with Total Freedom and Ease.
+ {t("hero.with")}
- Streamline your operations with our all-in-one platform—perfect for
- managing projects, data, and system health with simplicity and
- efficiency.
+ {t("hero.des")}
-
-
+
+
curl -sSL https://dokploy.com/install.sh | sh
*/}
- {/* @ts-expect-error */}
-
+
-
-
Featured in
+
+
+ {t("hero.featuredIn")}
+
{[
[
diff --git a/apps/website/components/NavLink.tsx b/apps/website/components/NavLink.tsx
index 8dcd8688a..06f0f7edd 100644
--- a/apps/website/components/NavLink.tsx
+++ b/apps/website/components/NavLink.tsx
@@ -1,6 +1,6 @@
"use client";
-import Link from "next/link";
+import { Link } from "@/i18n/routing";
import { trackGAEvent } from "./analitycs";
export function NavLink({
diff --git a/apps/website/components/PrimaryFeatures.tsx b/apps/website/components/PrimaryFeatures.tsx
index 12c60d06d..ef4ecfd96 100644
--- a/apps/website/components/PrimaryFeatures.tsx
+++ b/apps/website/components/PrimaryFeatures.tsx
@@ -5,48 +5,44 @@ import { AnimatePresence, motion } from "framer-motion";
import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";
+import { useTranslations } from "next-intl";
import { Container } from "./Container";
const features = [
{
- title: "Projects",
- description:
- "Manage and organize all your projects in one place, keeping detailed track of progress and resource allocation.",
+ title: "primaryFeatures.projects",
+ description: "primaryFeatures.projectsDes",
image: "/primary/projects.png",
},
{
- title: "Applications & Databases",
- description:
- "Centralize control over your applications and databases for enhanced security and efficiency, simplifying access and management across your infrastructure.",
+ title: "primaryFeatures.applications",
+ description: "primaryFeatures.applicationsDes",
image: "/primary/applications.png",
},
{
- title: "Docker Compose",
- description:
- "Native Docker Compose support for manage complex applications and services with ease.",
+ title: "primaryFeatures.compose",
+ description: "primaryFeatures.composeDes",
image: "/primary/compose.png",
},
{
- title: "Multi Node",
- description:
- "Scale applications to multiples nodes using docker swarm to manage the cluster.",
+ title: "primaryFeatures.multinode",
+ description: "primaryFeatures.multinodeDes",
image: "/primary/multinode.png",
},
{
- title: "Monitoring",
- description:
- "Monitor your systems' performance and health in real time, ensuring continuous and uninterrupted operation.",
+ title: "primaryFeatures.monitoring",
+ description: "primaryFeatures.monitoringDes",
image: "/primary/monitoring.png",
},
{
- title: "Backups",
- description:
- "Implement automatic and secure backup solutions to protect your critical data and restore it quickly when necessary.",
+ title: "primaryFeatures.backups",
+ description: "primaryFeatures.backupsDes",
image: "/primary/backups.png",
},
];
export function PrimaryFeatures() {
+ const t = useTranslations("HomePage");
const [tabOrientation, setTabOrientation] = useState<
"horizontal" | "vertical"
>("horizontal");
@@ -92,11 +88,10 @@ export function PrimaryFeatures() {
- Comprehensive Control for Your Digital Ecosystem
+ {t("primaryFeatures.title")}
- Simplify your project and data management, ensure robust monitoring,
- and secure your backups—all without the fuss over minute details.
+ {t("primaryFeatures.des")}
{selectedIndex === featureIndex && (
- {feature.description}
+ {t(feature.description)}
))}
@@ -164,7 +159,7 @@ export function PrimaryFeatures() {
- {feature.description}
+ {t(feature.description)}
@@ -178,7 +173,7 @@ export function PrimaryFeatures() {
bounce: 0.2,
duration: 0.6,
}}
- className="mt-10 h-[24rem] lg:h-[40rem] w-[45rem] overflow-hidden rounded-xl shadow-xl border sm:w-auto lg:mt-0 lg:w-[67.8125rem]"
+ className="mt-10 h-[24rem] w-[45rem] overflow-hidden rounded-xl border shadow-xl sm:w-auto lg:mt-0 lg:h-[40rem] lg:w-[67.8125rem]"
>
= [
},
},
{
- name: "Real-Time Traefik Configuration",
- summary:
- " Modify Traefik settings on-the-fly via a graphical interface or API.",
- description:
- "Users can adjust Traefik's configuration, including middleware, forwarding rules, and SSL certificates through an intuitive interface or API. This feature enables seamless traffic routing and security adjustments without the need to restart services",
+ name: "secondaryFeatures.traefik",
+ summary: "secondaryFeatures.traefikSummary",
+ description: "secondaryFeatures.traefikDes",
image: "/secondary/traefik.png",
icon: function ReportingIcon() {
return (
@@ -217,11 +215,9 @@ const features: Array = [
},
},
{
- name: "User Permission Management",
- summary:
- "Detailed control over user permissions for accessing and managing projects and services.",
- description:
- "Allows administrators to define specific roles and permissions for each user, including the ability to create, modify, or delete applications and databases. This feature ensures secure and efficient management of large and diverse teams.",
+ name: "secondaryFeatures.users",
+ summary: "secondaryFeatures.usersSummary",
+ description: "secondaryFeatures.usersDes",
image: "/secondary/users.png",
icon: function InventoryIcon() {
return (
@@ -232,11 +228,9 @@ const features: Array = [
},
},
{
- name: "Terminal Access",
- summary:
- "Direct access to each container's and server terminal for advanced management.",
- description:
- "Provides an interface to access the command line of any active container, allowing developers to execute commands, manage services, and troubleshoot directly from the dashboard",
+ name: "secondaryFeatures.terminal",
+ summary: "secondaryFeatures.terminalSummary",
+ description: "secondaryFeatures.terminalDes",
image: "/secondary/terminal.png",
icon: function ContactsIcon() {
return (
@@ -257,18 +251,19 @@ function Feature({
feature: Feature;
isActive: boolean;
}) {
+ const t = useTranslations("HomePage");
return (
@@ -277,7 +272,7 @@ function Feature({
{isActive && (
- {feature.summary}
+ {t(feature.summary)}
- {feature.description}
+ {t(feature.description)}
);
@@ -327,6 +322,7 @@ function FeaturesMobile() {
}
function FeaturesDesktop() {
+ const t = useTranslations("HomePage");
return (
{({ selectedIndex }) => (
@@ -340,7 +336,7 @@ function FeaturesDesktop() {
name: (
),
}}
@@ -359,7 +355,9 @@ function FeaturesDesktop() {
"px-5 transition duration-500 ease-in-out ui-not-focus-visible:outline-none",
featureIndex !== selectedIndex && "opacity-60",
)}
- style={{ transform: `translateX(-${selectedIndex * 100}%)` }}
+ style={{
+ transform: `translateX(-${selectedIndex * 100}%)`,
+ }}
aria-hidden={featureIndex !== selectedIndex}
>
@@ -382,21 +380,20 @@ function FeaturesDesktop() {
}
export function SecondaryFeatures() {
+ const t = useTranslations("HomePage");
return (
- Advanced Management Tools
+ {t("secondaryFeatures.title")}
- Elevate your infrastructure with tools that offer precise control,
- detailed monitoring, and enhanced security, ensuring seamless
- management and robust performance.
+ {t("secondaryFeatures.des")}
-
+
404
-
- Oops! Looks like you're lost.
-
+
{t("title")}
- Let's get you back{" "}
+ {t("des")}{" "}
diff --git a/apps/website/components/ui/button.tsx b/apps/website/components/ui/button.tsx
index adeca4dca..829c7e3d0 100644
--- a/apps/website/components/ui/button.tsx
+++ b/apps/website/components/ui/button.tsx
@@ -46,7 +46,6 @@ const Button = React.forwardRef(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return (
- // @ts-expect-error
,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+ span]:line-clamp-1",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+