Merge pull request #606 from PaiJi/chore/i18n-zh-hans

feat(i18n): add zh-Hans for Pricing and Sponsor

apps/website/components/Header.tsx

@@ -144,7 +144,7 @@ export function Header() {
 							<Logo className="h-10 w-auto" />
 						</Link>
 						<div className="hidden md:flex md:gap-x-6">
-							<NavLink href="/pricing">Pricing</NavLink>
+							<NavLink href="/pricing">{t("navigation.pricing")}</NavLink>
 							<NavLink href="/#faqs">{t("navigation.faqs")}</NavLink>
 							<NavLink href={linkT("docs.intro")} target="_blank">
 								{t("navigation.docs")}
@@ -172,7 +172,7 @@ export function Header() {
 								target="_blank"
 								// className="flex flex-row items-center gap-2 text-white"
 							>
-								Dashboard
+								{t("navigation.dashboard")}
 							</Link>
 						</Button>
 						<div className="-mr-1 md:hidden">

apps/website/components/Hero.tsx

@@ -72,22 +72,22 @@ export function Hero() {
 			</div>
 
 			<div className="relative">
-				<Link href="/pricing" className="relative z-10">
+				<Link href="/pricing" className="relative z-10 mb-4 inline-block">
 					<div className="flex items-center justify-center">
 						<div
 							className={cn(
 								"group rounded-full border border-black/5 bg-neutral-100 text-sm font-medium text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800",
 							)}
 						>
-							<AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out text-neutral-800 hover:text-neutral-900 hover:duration-300 hover:dark:text-neutral-400">
-								<span>🚀 Introducing Dokploy Cloud </span>
+							<AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 text-neutral-800 transition ease-out hover:text-neutral-900 hover:duration-300 hover:dark:text-neutral-400">
+								<span>🚀 {t("hero.cloud")} </span>
 								<ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
 							</AnimatedShinyText>
 						</div>
 					</div>
 				</Link>
 
-				<h1 className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight  text-muted-foreground  sm:text-7xl">
+				<h1 className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-muted-foreground sm:text-7xl">
 					{t("hero.deploy")}{" "}
 					<span className="relative whitespace-nowrap  text-primary">
 						<svg
@@ -144,8 +144,8 @@ export function Hero() {
 							</Link>
 						</Button> */}
 					</div>
-					<div className="flex flex-wrap items-center justify-center gap-3 md:flex-nowrap max-w-sm mx-auto w-full">
-						<Button className="rounded-xl  w-full" asChild>
+					<div className="mx-auto flex w-full max-w-sm flex-wrap items-center justify-center gap-3 md:flex-nowrap">
+						<Button className="w-full  rounded-xl" asChild>
 							<Link
 								href="https://github.com/dokploy/dokploy"
 								aria-label="Dokploy on GitHub"
@@ -159,7 +159,7 @@ export function Hero() {
 							</Link>
 						</Button>
 						<Button
-							className="rounded-xl bg-[#5965F2] hover:bg-[#4A55E0]  w-full"
+							className="w-full rounded-xl bg-[#5965F2]  hover:bg-[#4A55E0]"
 							asChild
 						>
 							<Link
@@ -223,22 +223,20 @@ export function Hero() {
 }
 
 export const ShowSponsors = () => {
+	const t = useTranslations("HomePage");
 	return (
 		<div className="mt-20 flex flex-col justify-center gap-y-10">
-			<div className="flex flex-col gap-4 justify-start">
+			<div className="flex flex-col justify-start gap-4">
 				<h1 className="mx-auto max-w-2xl font-display text-3xl font-medium tracking-tight  text-primary  sm:text-5xl">
-					Sponsors
+					{t("hero.sponsors.title")}
 				</h1>
 				<p className="mx-auto max-w-2xl text-lg tracking-tight text-muted-foreground">
-					Dokploy is an open source project that is maintained by a community of
-					volunteers. We would like to thank our sponsors for their support and
-					contributions to the project, which help us to continue to develop and
-					improve Dokploy.
+					{t("hero.sponsors.description")}
 				</p>
 			</div>
-			<div className="flex flex-col gap-4 md:gap-6 justify-start">
-				<h2 className="font-display text-2xl font-medium tracking-tight  text-primary  sm:text-2xl text-left">
-					Hero Sponsors 🎖
+			<div className="flex flex-col items-center justify-start gap-4 md:gap-6">
+				<h2 className="text-left font-display text-2xl font-medium  tracking-tight  text-primary sm:text-2xl">
+					{t("hero.sponsors.level.hero")} 🎖
 				</h2>
 				<div className="flex flex-wrap items-center gap-4">
 					<a
@@ -250,7 +248,7 @@ export const ShowSponsors = () => {
 						<img
 							src="https://raw.githubusercontent.com/Dokploy/dokploy/canary/.github/sponsors/hostinger.jpg"
 							alt="hostinger.com"
-							className="rounded-xl w-[190px] h-auto"
+							className="h-auto w-[190px] rounded-xl"
 						/>
 					</a>
 					<a
@@ -262,16 +260,16 @@ export const ShowSponsors = () => {
 						<img
 							src="https://raw.githubusercontent.com/Dokploy/dokploy/canary/.github/sponsors/lxaer.png"
 							alt="lxaer.com"
-							className="rounded-xl w-[70px] h-auto"
+							className="h-auto w-[70px] rounded-xl"
 						/>
 					</a>
 				</div>
 			</div>
-			<div className="flex flex-col gap-4 md:gap-8 justify-start">
-				<h2 className="font-display text-2xl font-medium tracking-tight  text-primary  sm:text-2xl text-left">
-					Premium Supporters 🥇
+			<div className="flex flex-col items-center justify-start gap-4 md:gap-8">
+				<h2 className="text-left font-display text-2xl font-medium  tracking-tight  text-primary sm:text-2xl">
+					{t("hero.sponsors.level.premium")} 🥇
 				</h2>
-				<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+				<div className="flex flex-col items-center justify-start gap-4 md:gap-6">
 					<a
 						href="https://supafort.com/?ref=dokploy"
 						target="_blank"
@@ -286,9 +284,9 @@ export const ShowSponsors = () => {
 					</a>
 				</div>
 			</div>
-			<div className="flex flex-col gap-4 md:gap-8 justify-start">
-				<h2 className="font-display text-2xl font-medium tracking-tight  text-primary  sm:text-2xl text-left">
-					Supporting Members 🥉
+			<div className="flex flex-col items-center justify-start gap-4 md:gap-8">
+				<h2 className="text-left font-display text-2xl font-medium  tracking-tight  text-primary sm:text-2xl">
+					{t("hero.sponsors.level.supporting")} 🥉
 				</h2>
 				<div className="flex flex-row gap-10">
 					<a
@@ -317,9 +315,9 @@ export const ShowSponsors = () => {
 					</a>
 				</div>
 			</div>
-			<div className="flex flex-col gap-4 md:gap-8 justify-start">
-				<h2 className="font-display text-2xl font-medium tracking-tight  text-primary  sm:text-2xl text-left">
-					Community Backers 🤝
+			<div className="justify-star flex flex-col items-center gap-4 md:gap-8">
+				<h2 className="text-left font-display text-2xl font-medium  tracking-tight  text-primary sm:text-2xl">
+					{t("hero.sponsors.level.community")} 🤝
 				</h2>
 				<div className="flex flex-row gap-10">
 					<a
@@ -361,9 +359,9 @@ export const ShowSponsors = () => {
 					</a>
 				</div>
 			</div>
-			<div className="flex flex-col gap-4 md:gap-8 justify-start">
-				<h2 className="font-display text-2xl font-medium tracking-tight  text-primary  sm:text-2xl text-left">
-					Organizations:
+			<div className="flex flex-col items-center justify-start gap-4 md:gap-8">
+				<h2 className="text-left font-display text-2xl font-medium  tracking-tight  text-primary sm:text-2xl">
+					{t("hero.sponsors.level.organizations")}
 				</h2>
 				<div className="flex flex-row gap-10">
 					<a
@@ -378,9 +376,9 @@ export const ShowSponsors = () => {
 					</a>
 				</div>
 			</div>
-			<div className="flex flex-col gap-4 md:gap-8 justify-start">
-				<h2 className="font-display text-2xl font-medium tracking-tight  text-primary  sm:text-2xl text-left">
-					Individuals:
+			<div className="flex flex-col items-center justify-start gap-4 md:gap-8">
+				<h2 className="text-left font-display text-2xl font-medium  tracking-tight  text-primary sm:text-2xl">
+					{t("hero.sponsors.level.individuals")}
 				</h2>
 				<div className="flex flex-row gap-10">
 					<a

apps/website/components/pricing.tsx

@@ -3,9 +3,10 @@ import clsx from "clsx";
 
 import { cn } from "@/lib/utils";
 import { ArrowRight, MinusIcon, PlusIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { use, useState } from "react";
 import { Container } from "./Container";
 import { trackGAEvent } from "./analitycs";
 import { Badge } from "./ui/badge";
@@ -89,7 +90,7 @@ function Plan({
 		<section
 			className={clsx(
 				"flex flex-col rounded-3xl px-6 sm:px-8",
-				featured ? "order-first bg-black border py-8 lg:order-none" : "lg:py-8",
+				featured ? "order-first border bg-black py-8 lg:order-none" : "lg:py-8",
 			)}
 		>
 			<div className="absolute inset-0">
@@ -147,7 +148,7 @@ function Plan({
 							label: `${name} - ${price}`,
 						});
 					}}
-					className="rounded-full mt-8"
+					className="mt-8 rounded-full"
 				>
 					{buttonText}
 				</Button>
@@ -158,6 +159,7 @@ function Plan({
 
 export function Pricing() {
 	const router = useRouter();
+	const t = useTranslations("Pricing");
 	const [isAnnual, setIsAnnual] = useState(true);
 	const [serverQuantity, setServerQuantity] = useState(3);
 	const featured = true;
@@ -165,7 +167,7 @@ export function Pricing() {
 		<section
 			id="pricing"
 			aria-label="Pricing"
-			className="bg-black border-t border-border/30 py-20 sm:py-32"
+			className="border-t border-border/30 bg-black py-20 sm:py-32"
 		>
 			<div className="absolute inset-0">
 				<svg viewBox="0 0 2000 1000" xmlns="http://www.w3.org/2000/svg">
@@ -189,48 +191,52 @@ export function Pricing() {
 					<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
 						<span className="relative whitespace-nowrap">
 							<SwirlyDoodle className="absolute left-0 top-1/2 h-[1em] w-full fill-muted-foreground" />
-							<span className="relative"> Simple & Affordable,</span>
+							<span className="relative">{t("swirlyDoodleTitle")}</span>
 						</span>{" "}
-						Pricing.
+						{t("restTitle")}
 					</h2>
 					<p className="mt-4 text-lg text-muted-foreground">
-						Deploy Smarter, Scale Faster – Without Breaking the Bank
+						{t("description")}
 					</p>
 				</div>
 
-				<div className=" mt-10 mx-auto">
-					<div className="mt-16 flex flex-col gap-10 mx-auto w-full lg:-mx-8 xl:mx-0 xl:gap-x-8 justify-center items-center">
+				<div className=" mx-auto mt-10">
+					<div className="mx-auto mt-16 flex w-full flex-col items-center justify-center gap-10 lg:-mx-8 xl:mx-0 xl:gap-x-8">
 						<Tabs
 							defaultValue="monthly"
 							value={isAnnual ? "annual" : "monthly"}
 							onValueChange={(e) => setIsAnnual(e === "annual")}
 						>
 							<TabsList>
-								<TabsTrigger value="monthly">Monthly</TabsTrigger>
-								<TabsTrigger value="annual">Annual</TabsTrigger>
+								<TabsTrigger value="monthly">
+									{t("billingCycle.monthly")}
+								</TabsTrigger>
+								<TabsTrigger value="annual">
+									{t("billingCycle.annual")}
+								</TabsTrigger>
 							</TabsList>
 						</Tabs>
-						<div className="flex max-w-4xl gap-4 mx-auto max-sm:flex-wrap-reverse max-sm:justify-center sm:flex-row-reverse">
+						<div className="mx-auto flex max-w-4xl gap-4 max-sm:flex-wrap-reverse max-sm:justify-center sm:flex-row-reverse">
 							<section
 								className={clsx(
-									"flex flex-col rounded-3xl  border-dashed border-muted border-2 px-4 max-w-sm",
+									"flex max-w-sm flex-col  rounded-3xl border-2 border-dashed border-muted px-4",
 									featured
-										? "order-first bg-black border py-8 lg:order-none"
+										? "order-first border bg-black py-8 lg:order-none"
 										: "lg:py-8",
 								)}
 							>
-								<div className="flex flex-row gap-2 items-center">
+								<div className="flex flex-row items-center gap-2">
 									<p className=" text-2xl font-semibold tracking-tight text-primary ">
-										Free
+										{t("plan.free.title")}
 									</p>
 									|
 									<p className=" text-base font-semibold tracking-tight text-muted-foreground">
-										Open Source
+										{t("plan.free.subTitle")}
 									</p>
 								</div>
 
-								<h3 className="mt-5 font-medium text-lg text-white">
-									Dokploy Open Source
+								<h3 className="mt-5 text-lg font-medium text-white">
+									{t("plan.free.section.title")}
 								</h3>
 								<p
 									className={clsx(
@@ -238,8 +244,7 @@ export function Pricing() {
 										featured ? "text-white" : "text-slate-400",
 									)}
 								>
-									Manager your own infrastructure installing dokploy ui in your
-									own server.
+									{t("plan.free.section.description")}
 								</p>
 
 								<ul
@@ -250,14 +255,14 @@ export function Pricing() {
 									)}
 								>
 									{[
-										"Complete Flexibility: Install Dokploy UI on your own infrastructure",
-										"Unlimited Deployments",
-										"Self-hosted Infrastructure",
-										"Community Support",
-										"Access to Core Features",
-										"Dokploy Integration",
-										"Basic Backups",
-										"Access to All Updates",
+										t("plan.free.features.f1"),
+										t("plan.free.features.f2"),
+										t("plan.free.features.f3"),
+										t("plan.free.features.f4"),
+										t("plan.free.features.f5"),
+										t("plan.free.features.f6"),
+										t("plan.free.features.f7"),
+										t("plan.free.features.f8"),
 									].map((feature) => (
 										<li key={feature} className="flex text-muted-foreground">
 											<CheckIcon />
@@ -265,17 +270,17 @@ export function Pricing() {
 										</li>
 									))}
 								</ul>
-								<div className="flex flex-col gap-2 mt-4">
-									<div className="flex flex-col items-center gap-2 justify-center">
+								<div className="mt-4 flex flex-col gap-2">
+									<div className="flex flex-col items-center justify-center gap-2">
 										<span className="text-sm text-muted-foreground">
-											Unlimited Servers
+											{t("plan.free.features.f9")}
 										</span>
 										<Link
 											href="https://docs.dokploy.com/en/docs/core/get-started/installation#docker"
 											target="_blank"
-											className="text-sm text-primary flex items-start"
+											className="flex items-start text-sm text-primary"
 										>
-											Installation{" "}
+											{t("plan.free.go")}{" "}
 											<ArrowRight className="ml-2 size-4 self-center" />
 										</Link>
 									</div>
@@ -283,20 +288,20 @@ export function Pricing() {
 							</section>
 							<section
 								className={clsx(
-									"flex flex-col rounded-3xl  border-dashed  border-2 px-4 max-w-sm",
+									"flex max-w-sm flex-col  rounded-3xl  border-2 border-dashed px-4",
 									featured
-										? "order-first bg-black border py-8 lg:order-none"
+										? "order-first border bg-black py-8 lg:order-none"
 										: "lg:py-8",
 								)}
 							>
 								{isAnnual && (
-									<div className="flex flex-row gap-2 items-center mb-4">
-										<Badge>Recommended 🚀</Badge>
+									<div className="mb-4 flex flex-row items-center gap-2">
+										<Badge>{t("plan.cloud.title")} 🚀</Badge>
 									</div>
 								)}
 
 								{isAnnual ? (
-									<div className="flex flex-row gap-2 items-center">
+									<div className="flex flex-row items-center gap-2">
 										<p className=" text-2xl font-semibold tracking-tight text-primary ">
 											$ {calculatePrice(serverQuantity, isAnnual).toFixed(2)}{" "}
 											USD
@@ -311,12 +316,12 @@ export function Pricing() {
 										</p>
 									</div>
 								) : (
-									<p className=" text-2xl font-semibold tracking-tight text-primary ">
+									<p className=" text-2xl font-semibold tracking-tight text-primary">
 										$ {calculatePrice(serverQuantity, isAnnual).toFixed(2)} USD
 									</p>
 								)}
-								<h3 className="mt-5 font-medium text-lg text-white">
-									Dokploy Plan
+								<h3 className="mt-5 text-lg font-medium text-white">
+									{t("plan.cloud.section.title")}
 								</h3>
 								<p
 									className={clsx(
@@ -324,8 +329,7 @@ export function Pricing() {
 										featured ? "text-white" : "text-slate-400",
 									)}
 								>
-									No need to manage Dokploy UI infrastructure, we take care of
-									it for you.
+									{t("plan.cloud.section.description")}
 								</p>
 
 								<ul
@@ -336,9 +340,9 @@ export function Pricing() {
 									)}
 								>
 									{[
-										"Managed Hosting: No need to manage your own servers",
-										"Priority Support",
-										"Future-Proof Features",
+										t("plan.cloud.features.f1"),
+										t("plan.cloud.features.f2"),
+										t("plan.cloud.features.f3"),
 									].map((feature) => (
 										<li key={feature} className="flex text-muted-foreground">
 											<CheckIcon />
@@ -346,10 +350,12 @@ export function Pricing() {
 										</li>
 									))}
 								</ul>
-								<div className="flex flex-col gap-2 mt-4">
-									<div className="flex items-center gap-2 justify-center">
+								<div className="mt-4 flex flex-col gap-2">
+									<div className="flex items-center justify-center gap-2">
 										<span className="text-sm text-muted-foreground">
-											{serverQuantity} Servers (You bring the servers)
+											{t("plan.cloud.servers", {
+												serverQuantity,
+											})}
 										</span>
 									</div>
 
@@ -384,16 +390,18 @@ export function Pricing() {
 									<div
 										className={cn(
 											"justify-between",
-											"flex flex-row  items-center gap-2 mt-4",
+											"mt-4 flex  flex-row items-center gap-2",
 										)}
 									>
-										<div className="justify-end w-full">
+										<div className="w-full justify-end">
 											<Link
 												href="https://app.dokploy.com/register"
 												target="_blank"
-												className={buttonVariants({ className: "w-full" })}
+												className={buttonVariants({
+													className: "w-full",
+												})}
 											>
-												Subscribe
+												{t("plan.cloud.go")}
 											</Link>
 										</div>
 									</div>
@@ -412,53 +420,46 @@ export function Pricing() {
 const faqs = [
 	[
 		{
-			question: "How does Dokploy's Open Source plan work?",
-			answer:
-				"You can host Dokploy UI on your own infrastructure and you will be responsible for the maintenance and updates.",
+			question: "faq.q1",
+			answer: "faq.a1",
 		},
 		{
-			question: "Do I need to provide my own server for the managed plan?",
-			answer:
-				"Yes, in the managed plan, you provide your own server eg(Hetzner, Hostinger, AWS, ETC.) VPS, and we manage the Dokploy UI infrastructure for you.",
+			question: "faq.q2",
+			answer: "faq.a2",
 		},
 		{
-			question: "What happens if I need more than one server?",
-			answer:
-				"The first server costs $4.50/month, if you buy more than one it will be $3.50/month per server.",
+			question: "faq.q3",
+			answer: "faq.a3",
 		},
 	],
 	[
 		{
-			question: "Is there a limit on the number of deployments?",
-			answer:
-				"No, there is no limit on the number of deployments in any of the plans.",
+			question: "faq.q4",
+			answer: "faq.a4",
 		},
 		{
-			question: "What happens if I exceed my purchased server limit?",
-			answer:
-				"The most recently added servers will be deactivated. You won't be able to create services on inactive servers until they are reactivated.",
+			question: "faq.q5",
+			answer: "faq.a5",
 		},
 		{
-			question: "Do you offer a refunds?",
-			answer:
-				"We do not offer refunds. However, you can cancel your subscription at any time. Feel free to try our open-source version for free before making a purchase.",
+			question: "faq.q6",
+			answer: "faq.a6",
 		},
 	],
 	[
 		{
-			question: "What kind of support do you offer?",
-			answer:
-				"We offer community support for the open source version and priority support for paid plans.",
+			question: "faq.q7",
+			answer: "faq.a7",
 		},
 		{
-			question: "Is Dokploy open-source?",
-			answer:
-				"Yes, Dokploy is fully open-source. You can contribute or modify it as needed for your projects.",
+			question: "faq.q8",
+			answer: "faq.a8",
 		},
 	],
 ];
 
 export function Faqs() {
+	const t = useTranslations("Pricing");
 	return (
 		<section
 			id="faqs"
@@ -471,11 +472,10 @@ export function Faqs() {
 						id="faq-title"
 						className="font-display text-3xl tracking-tight text-primary sm:text-4xl"
 					>
-						{"Frequently asked questions"}
+						{t("faq.title")}
 					</h2>
 					<p className="mt-4 text-lg tracking-tight text-muted-foreground">
-						If you can’t find what you’re looking for, please send us an email
-						to:{" "}
+						{t("faq.description")}:{" "}
 						<Link href={"mailto:support@dokploy.com"} className="text-primary">
 							support@dokploy.com
 						</Link>
@@ -488,10 +488,10 @@ export function Faqs() {
 								{column.map((faq, faqIndex) => (
 									<li key={faqIndex}>
 										<h3 className="font-display text-lg leading-7 text-primary">
-											{faq.question}
+											{t(faq.question)}
 										</h3>
 										<p className="mt-4 text-sm text-muted-foreground">
-											{faq.answer}
+											{t(faq.answer)}
 										</p>
 									</li>
 								))}

apps/website/locales/en.json

@@ -4,18 +4,33 @@
 			"features": "Features",
 			"faqs": "FAQ",
 			"docs": "Docs",
+			"pricing": "Pricing",
 			"support": "Support",
+			"dashboard": "Dashboard",
 			"discord": "Discord",
 			"i18nButtonPlaceholder": "Language",
 			"i18nEn": "English",
 			"i18nZh-Hans": "简体中文"
 		},
 		"hero": {
+			"cloud": "Introducing Dokploy Cloud",
 			"deploy": "Deploy",
 			"anywhere": "Anywhere",
 			"with": "with Total Freedom and Ease.",
 			"des": "Streamline your operations with our all-in-one platform—perfect for managing projects, data, and system health with simplicity and efficiency.",
-			"featuredIn": "Featured in"
+			"featuredIn": "Featured in",
+			"sponsors": {
+				"title": "Sponsors",
+				"description": "Dokploy is an open source project that is maintained by a community of volunteers. We would like to thank our sponsors for their support and contributions to the project, which help us to continue to develop and improve Dokploy.",
+				"level": {
+					"hero": "Hero Sponsors",
+					"premium": "Premium Supporters",
+					"supporting": "Supporting Members",
+					"community": "Community Backers",
+					"organizations": "Organizations",
+					"individuals": "Individuals"
+				}
+			}
 		},
 		"primaryFeatures": {
 			"title": "Comprehensive Control for Your Digital Ecosystem",
@@ -92,5 +107,70 @@
 			"intro": "https://docs.dokploy.com/get-started/introduction",
 			"install": "https://docs.dokploy.com/en/docs/core/get-started/introduction"
 		}
+	},
+	"Pricing": {
+		"swirlyDoodleTitle": "Simple & Affordable,",
+		"restTitle": "Pricing.",
+		"description": "Deploy Smarter, Scale Faster – Without Breaking the Bank",
+		"billingCycle": {
+			"monthly": "Monthly",
+			"annual": "Annual"
+		},
+		"plan": {
+			"free": {
+				"title": "Free",
+				"subTitle": "Open Source",
+				"section": {
+					"title": "Dokploy Open Source",
+					"description": "Manager your own infrastructure installing dokploy ui in your own server."
+				},
+				"features": {
+					"f1": "Complete Flexibility: Install Dokploy UI on your own infrastructure",
+					"f2": "Unlimited Deployments",
+					"f3": "Self-hosted Infrastructure",
+					"f4": "Community Support",
+					"f5": "Access to Core Features",
+					"f6": "Dokploy Integration",
+					"f7": "Basic Backups",
+					"f8": "Access to All Updates",
+					"f9": "Unlimited Servers"
+				},
+				"go": "Installation"
+			},
+			"cloud": {
+				"title": "Recommended",
+				"section": {
+					"title": "Dokploy Plan",
+					"description": " to manage Dokploy UI infrastructure, we take care of it for you."
+				},
+				"servers": "{serverQuantity}Servers (You bring the servers)",
+				"features": {
+					"f1": "Managed Hosting: No need to manage your own servers",
+					"f2": "Priority Support",
+					"f3": "Future-Proof Features"
+				},
+				"go": "Subscribe"
+			}
+		},
+		"faq": {
+			"title": "Frequently asked questions",
+			"description": "If you can’t find what you’re looking for, please send us an email to",
+			"q1": "How does Dokploy's Open Source plan work?",
+			"a1": "You can host Dokploy UI on your own infrastructure and you will be responsible for the maintenance and updates.",
+			"q2": "Do I need to provide my own server for the managed plan?",
+			"a2": "Yes, in the managed plan, you provide your own server eg(Hetzner, Hostinger, AWS, ETC.) VPS, and we manage the Dokploy UI infrastructure for you.",
+			"q3": "What happens if I need more than one server?",
+			"a3": "The first server costs $4.50/month, if you buy more than one it will be $3.50/month per server.",
+			"q4": "Is there a limit on the number of deployments?",
+			"a4": "No, there is no limit on the number of deployments in any of the plans.",
+			"q5": "What happens if I exceed my purchased server limit?",
+			"a5": "The most recently added servers will be deactivated. You won't be able to create services on inactive servers until they are reactivated.",
+			"q6": "Do you offer a refunds?",
+			"a6": "We do not offer refunds. However, you can cancel your subscription at any time. Feel free to try our open-source version for free before making a purchase.",
+			"q7": "What kind of support do you offer?",
+			"a7": "We offer community support for the open source version and priority support for paid plans.",
+			"q8": "Is Dokploy open-source?",
+			"a8": "Yes, Dokploy is fully open-source. You can contribute or modify it as needed for your projects."
+		}
 	}
 }

apps/website/locales/zh-Hans.json

@@ -4,18 +4,33 @@
 			"features": "特性",
 			"faqs": "FAQ",
 			"docs": "文档",
+			"pricing": "价格",
 			"support": "赞助",
+			"dashboard": "控制台",
 			"discord": "Discord",
 			"i18nButtonPlaceholder": "语言",
 			"i18nEn": "English",
 			"i18nZh-Hans": "简体中文"
 		},
 		"hero": {
+			"cloud": "隆重介绍 Dokploy 云",
 			"deploy": "部署在",
 			"anywhere": "任何设施之上",
 			"with": "",
 			"des": "以前所未有的简洁和高效提供一站式项目、数据的管理以及系统监控。",
-			"featuredIn": "发布于"
+			"featuredIn": "发布于",
+			"sponsors": {
+				"title": "赞助名单",
+				"description": "Dokploy 是由社区成员共同支持的完全免费的开源项目，您的慷慨解囊将帮助我们继续开发和改进 Dokploy。",
+				"level": {
+					"hero": "特别赞助",
+					"premium": "金牌赞助",
+					"supporting": "银牌赞助",
+					"community": "铜牌赞助",
+					"organizations": "组织赞助",
+					"individuals": "个人赞助"
+				}
+			}
 		},
 		"primaryFeatures": {
 			"title": "全面掌控您的基础设施",
@@ -92,5 +107,70 @@
 			"intro": "https://docs.dokploy.com/cn/docs/core/get-started/introduction",
 			"install": "https://docs.dokploy.com/cn/docs/core/get-started/introduction"
 		}
+	},
+	"Pricing": {
+		"swirlyDoodleTitle": "简洁明了的,",
+		"restTitle": "定价",
+		"description": "更聪明的部署方式，更快的扩容速度，以及不会让你破产的账单。",
+		"billingCycle": {
+			"monthly": "按月",
+			"annual": "按年"
+		},
+		"plan": {
+			"free": {
+				"title": "免费",
+				"subTitle": "开源版本",
+				"section": {
+					"title": "部署Dokploy的开源版本",
+					"description": "自行管理您的基础设施，不收取任何费用"
+				},
+				"features": {
+					"f1": "灵活的架构，您可以单独部署 Dokploy 管理端",
+					"f2": "无限数量的部署",
+					"f3": "自维护的基础设施",
+					"f4": "来自社区的有限支持",
+					"f5": "所有功能可用",
+					"f6": "Dokploy 集成",
+					"f7": "基础备份服务",
+					"f8": "跟随开源版本更新",
+					"f9": "无限服务器数量"
+				},
+				"go": "立即开始"
+			},
+			"cloud": {
+				"title": "推荐（年付更优惠）",
+				"section": {
+					"title": "Dokploy 云",
+					"description": "使用我们的云服务，一站式管理您所有的部署。"
+				},
+				"servers": "{serverQuantity}台受控服务器",
+				"features": {
+					"f1": "由 Dokploy 云提供支持的独立控制面板",
+					"f2": "优先技术支持",
+					"f3": "优先体验先行功能"
+				},
+				"go": "订阅"
+			}
+		},
+		"faq": {
+			"title": "常见问题",
+			"description": "如果您的问题不在以下列表，请随时向我们致信",
+			"q1": "Dokploy 的开源版本是什么？",
+			"a1": "您可以免费安装 Dokploy 开源版本，并自行负责 Dokploy 的日后维护工作",
+			"q2": "付费计划还需要自己的服务器吗？",
+			"a2": "是的，在付费计划中，您依然需要提供您用于实际运行服务的服务器（如阿里云、腾讯云、AWS 等），我们会为您管理 Dokploy 控制面板。",
+			"q3": "如果我需要管理更多的服务器怎么办？",
+			"a3": "第一台服务器的费用为 $4.5/月，之后每台的费用是 $3.5/月。",
+			"q4": "部署服务的数量有限制吗？",
+			"a4": "不管您如何使用 Dokploy，我们都不会限制您部署服务的数量。",
+			"q5": "如果我意外超过了最大服务器数量怎么办？",
+			"a5": "最新添加的服务器将被停用，您将不能向其创建服务，直到它们被重新激活。",
+			"q6": "关于退款服务的政策？",
+			"a6": "您可以随时取消您的订阅，但请原谅我们无法提供退款服务，您可以无限试用开源版本，然后再购买。",
+			"q7": "关于技术支持?",
+			"a7": "付费计划可以得到优先的技术支持，开源版本则是由社区提供技术支持。",
+			"q8": "Dokploy 开源吗?",
+			"a8": "是的，Dokploy 完全开源，您可以参与贡献或者是 Fork 后自行修改以用于您的私人需求。"
+		}
 	}
 }