From 950ee77a494a58e12b560c10c3a9b364aeb73bab Mon Sep 17 00:00:00 2001
From: JiPai <github@jipai.moe>
Date: Sun, 27 Oct 2024 14:32:23 +0800
Subject: [PATCH] feat(i18n): add zh-Hans translation for homepage

---
 apps/website/components/Hero.tsx  | 66 +++++++++++++++----------------
 apps/website/locales/en.json      | 15 ++++++-
 apps/website/locales/zh-Hans.json | 15 ++++++-
 3 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/apps/website/components/Hero.tsx b/apps/website/components/Hero.tsx
index 3355f641..b8c81a1b 100644
--- a/apps/website/components/Hero.tsx
+++ b/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
diff --git a/apps/website/locales/en.json b/apps/website/locales/en.json
index 7c401706..7a85913d 100644
--- a/apps/website/locales/en.json
+++ b/apps/website/locales/en.json
@@ -11,11 +11,24 @@
 			"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",
diff --git a/apps/website/locales/zh-Hans.json b/apps/website/locales/zh-Hans.json
index c852c2ab..f3d5fcb1 100644
--- a/apps/website/locales/zh-Hans.json
+++ b/apps/website/locales/zh-Hans.json
@@ -11,11 +11,24 @@
 			"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": "全面掌控您的基础设施",