From fe032d3d0ffc1d7f1449d3417ae934c5f6ad5715 Mon Sep 17 00:00:00 2001 From: JiPai Date: Thu, 5 Sep 2024 20:19:28 +0800 Subject: [PATCH] feat: add translate for zh-Hans --- apps/website/app/[locale]/page.tsx | 25 +++ apps/website/app/page.tsx | 25 --- apps/website/components/CallToAction.tsx | 33 ++-- apps/website/components/Faqs.tsx | 64 ++++---- apps/website/components/Footer.tsx | 31 ++-- apps/website/components/Header.tsx | 95 ++++++----- apps/website/components/Hero.tsx | 82 +++++---- apps/website/components/PrimaryFeatures.tsx | 126 +++++++------- apps/website/components/SecondaryFeatures.tsx | 155 ++++++++++-------- apps/website/components/SlimLayout.tsx | 16 +- apps/website/locales/en.json | 82 +++++++++ apps/website/locales/zh-Hans.json | 82 +++++++++ 12 files changed, 521 insertions(+), 295 deletions(-) create mode 100644 apps/website/app/[locale]/page.tsx delete mode 100644 apps/website/app/page.tsx create mode 100644 apps/website/locales/en.json create mode 100644 apps/website/locales/zh-Hans.json diff --git a/apps/website/app/[locale]/page.tsx b/apps/website/app/[locale]/page.tsx new file mode 100644 index 00000000..b459b2da --- /dev/null +++ b/apps/website/app/[locale]/page.tsx @@ -0,0 +1,25 @@ +import { CallToAction } from '@/components/CallToAction' +import { Faqs } from '@/components/Faqs' +import { Footer } from '@/components/Footer' +import { Header } from '@/components/Header' +import { Hero } from '@/components/Hero' +import { PrimaryFeatures } from '@/components/PrimaryFeatures' +import { SecondaryFeatures } from '@/components/SecondaryFeatures' +import { Testimonials } from '../../components/Testimonials' + +export default function Home() { + return ( +
+
+
+ + + + + {/* */} + +
+
+
+ ) +} diff --git a/apps/website/app/page.tsx b/apps/website/app/page.tsx deleted file mode 100644 index 2847ee10..00000000 --- a/apps/website/app/page.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { CallToAction } from "../components/CallToAction"; -import { Faqs } from "../components/Faqs"; -import { Footer } from "../components/Footer"; -import { Header } from "../components/Header"; -import { Hero } from "../components/Hero"; -import { PrimaryFeatures } from "../components/PrimaryFeatures"; -import { SecondaryFeatures } from "../components/SecondaryFeatures"; -import { Testimonials } from "../components/Testimonials"; - -export default function Home() { - return ( -
-
-
- - - - - {/* */} - -
-
-
- ); -} diff --git a/apps/website/components/CallToAction.tsx b/apps/website/components/CallToAction.tsx index 6c7b5a1f..ac225284 100644 --- a/apps/website/components/CallToAction.tsx +++ b/apps/website/components/CallToAction.tsx @@ -1,12 +1,14 @@ -import { Container } from "@/components/Container"; -import Link from "next/link"; -import { Button } from "./ui/button"; +import { Container } from '@/components/Container' +import Link from 'next/link' +import { Button } from './ui/button' +import { useTranslations } from 'next-intl' export function CallToAction() { + const t = useTranslations('HomePage') return (
- + @@ -27,30 +34,28 @@ export function CallToAction() { - +

- Unlock Your Deployment Potential + {t('callToAction.title')}

- Streamline your deployments with our PaaS. Effortlessly manage - Docker containers and traffic with Traefik. Boost your - infrastructure's efficiency and security today + {t('callToAction.des')}

{/* @ts-expect-error */} -
- ); + ) } diff --git a/apps/website/components/Faqs.tsx b/apps/website/components/Faqs.tsx index 117b4d00..f84fe5c4 100644 --- a/apps/website/components/Faqs.tsx +++ b/apps/website/components/Faqs.tsx @@ -1,63 +1,58 @@ -import { Container } from "./Container"; +import { useTranslations } from 'next-intl' +import { Container } from './Container' const faqs = [ [ { - question: "What is dokploy?", - answer: - "Dokploy is a stable, easy-to-use deployment solution designed to simplify the application management process. Think of Dokploy as a free alternative self-hostable solution to platforms like Heroku, Vercel, and Netlify.", + question: 'faq.q1', + answer: 'faq.a2', }, { - question: "Why Choose Dokploy?", - answer: "Simplicity, Flexibility, and Fast", + question: 'faq.q2', + answer: 'faq.a2', }, { - question: "Is free?", - answer: - "Yes, dokploy is totally free. You can use it for personal projects, small teams, or even for large-scale applications.", + question: 'faq.q3', + answer: 'faq.a3', }, { - question: "Is it open source?", - answer: "Yes, dokploy is open source and free to use.", + question: 'faq.q4', + answer: 'faq.a4', }, ], [ { - question: "What type of applications can i deploy with dokploy?", - answer: - "Dokploy is a great choice for any type of application. You can deploy your code to dokploy and manage it from the dashboard. We support a wide range of languages and frameworks, so you can choose the one that best fits your needs.", + question: 'faq.q5', + answer: 'faq.a5', }, { - question: "How do I request a feature or report a bug?", - answer: - "Currently we are working on fixing bug fixes, but we will be releasing new features soon. You can also request features or report bugs.", + question: 'faq.q6', + answer: 'faq.a6', }, { - question: "Do you track the usage of Dokploy?", - answer: "No, we don't track any usage data.", + question: 'faq.q7', + answer: "faq.a7", }, ], [ { question: - "Are there any user forums or communities where I can interact with other users?", - answer: - "Yes, we have active github discussions where you can share ideas, ask for help, and connect with other users.", + 'faq.q8', + answer: 'faq.a8', }, { - question: "What types of applications can I deploy with Dokploy?", - answer: - "Dokploy supports a variety of applications, including those built with Docker, as well as applications from any Git repository, offering custom builds with Nixpacks, Dockerfiles, or Buildpacks like Heroku and Paketo.", + question: 'faq.q9', + answer: 'faq.a9', }, { - question: "How does Dokploy handle database management?", - answer: - "Dokploy supports multiple database systems including Postgres, MySQL, MariaDB, MongoDB, and Redis, providing tools for easy deployment and management directly from the dashboard.", + question: 'faq.q10', + answer: 'faq.a10', }, ], -]; +] export function Faqs() { + const t = useTranslations('HomePage') return (
- Frequently asked questions + {t('faq.title')}

- If you can’t find what you’re looking for, email our support team - and if you’re lucky someone will get back to you. + {t('faq.des')}

- ); + ) } diff --git a/apps/website/components/Footer.tsx b/apps/website/components/Footer.tsx index 3c188e55..0c2bd1c4 100644 --- a/apps/website/components/Footer.tsx +++ b/apps/website/components/Footer.tsx @@ -1,15 +1,17 @@ -import Link from "next/link"; +import Link from 'next/link' -import { Container } from "./Container"; -import { NavLink } from "./NavLink"; -import { Logo } from "./shared/Logo"; +import { Container } from './Container' +import { NavLink } from './NavLink' +import { Logo } from './shared/Logo' +import { useTranslations } from 'next-intl' export function Footer() { + const t = useTranslations('HomePage') return ( - ); + ) } diff --git a/apps/website/components/Header.tsx b/apps/website/components/Header.tsx index 5cd3151c..5f0ca76c 100644 --- a/apps/website/components/Header.tsx +++ b/apps/website/components/Header.tsx @@ -1,33 +1,34 @@ -"use client"; +'use client' -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 { Container } from "./Container"; -import { NavLink } from "./NavLink"; -import { trackGAEvent } from "./analitycs"; -import { Logo } from "./shared/Logo"; -import { Button, buttonVariants } from "./ui/button"; +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 { Container } from './Container' +import { NavLink } from './NavLink' +import { trackGAEvent } from './analitycs' +import { Logo } from './shared/Logo' +import { Button, buttonVariants } from './ui/button' +import { useTranslations } from 'next-intl' function MobileNavLink({ href, children, target, }: { - href: string; - children: React.ReactNode; - target?: string; + href: string + children: React.ReactNode + target?: string }) { return ( { trackGAEvent({ - action: "Nav Link Clicked", - category: "Navigation", + action: 'Nav Link Clicked', + category: 'Navigation', label: href, - }); + }) }} as={Link} href={href} @@ -36,7 +37,7 @@ function MobileNavLink({ > {children} - ); + ) } function MobileNavIcon({ open }: { open: boolean }) { @@ -50,20 +51,24 @@ function MobileNavIcon({ open }: { open: boolean }) { > - ); + ) } function MobileNavigation() { + const t = useTranslations('HomePage') return ( - Features - Testimonials - Faqs + + {t('navigation.features')} + + {/* Testimonials */} + + {t('navigation.faqs')} + - Docs + {t('navigation.docs')} - ); + ) } export function Header() { + const t = useTranslations('HomePage') return ( -
+
- ); + ) } diff --git a/apps/website/components/Hero.tsx b/apps/website/components/Hero.tsx index 3d07e9ca..018962c2 100644 --- a/apps/website/components/Hero.tsx +++ b/apps/website/components/Hero.tsx @@ -1,9 +1,10 @@ -"use client"; -import { Check, Copy } from "lucide-react"; -import Link from "next/link"; -import { useEffect, useState } from "react"; -import { Container } from "./Container"; -import { Button } from "./ui/button"; +'use client' +import { Check, Copy } from 'lucide-react' +import Link from 'next/link' +import { useEffect, useState } from 'react' +import { Container } from './Container' +import { Button } from './ui/button' +import { useTranslations } from 'next-intl' const ProductHunt = () => { return ( @@ -34,32 +35,42 @@ const ProductHunt = () => { - ); -}; + ) +} export function Hero() { - const [isCopied, setIsCopied] = useState(false); + const t = useTranslations('HomePage') + const [isCopied, setIsCopied] = useState(false) useEffect(() => { const timer = setTimeout(() => { - setIsCopied(false); - }, 2000); - return () => clearTimeout(timer); - }, [isCopied]); + setIsCopied(false) + }, 2000) + return () => clearTimeout(timer) + }, [isCopied]) return ( - +
- + - + @@ -68,7 +79,7 @@ export function Hero() {

- Deploy{" "} + {t('hero.deploy')}{' '} - Anywhere - {" "} - with Total Freedom and Ease. + {t('hero.anywhere')} + {' '} + {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
-
+