feat: 首页部分实现多语言

Fizznoc · Sep 16, 2024 · 2ad4422 · 2ad4422
1 parent 3151a33
commit 2ad4422
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 35 deletions.
diff --git a/src/app/[locale]/(marketing)/page.tsx b/src/app/[locale]/(marketing)/page.tsx
@@ -1,3 +1,6 @@
+import { useTranslations } from "next-intl";
+import { unstable_setRequestLocale } from "next-intl/server";
+
 import { infos } from "@/config/landing";
 import BentoGrid from "@/components/sections/bentogrid";
 import Features from "@/components/sections/features";
@@ -6,23 +9,21 @@ import InfoLanding from "@/components/sections/info-landing";
 import Powered from "@/components/sections/powered";
 import PreviewLanding from "@/components/sections/preview-landing";
 import Testimonials from "@/components/sections/testimonials";
-import {unstable_setRequestLocale} from 'next-intl/server';
-import { useTranslations } from "next-intl";
 
-export default function IndexPage({params: {locale}}) {
+export default function IndexPage({ params: { locale } }) {
   unstable_setRequestLocale(locale);
-  const t = useTranslations('HomePage');
+  const t = useTranslations("HomePage");
 
   return (
     <>
-      <HeroLanding locale={locale}/>
+      <HeroLanding locale={locale} />
       <PreviewLanding />
-      <Powered />
-      <BentoGrid />
-      <InfoLanding data={infos[0]} reverse={true} />
+      <Powered locale={locale} />
+      <BentoGrid locale={locale} />
+      <InfoLanding locale={locale} data={infos[0]} reverse={true} />
       {/* <InfoLanding data={infos[1]} /> */}
       <Features />
-      <Testimonials />
+      <Testimonials locale={locale} />
     </>
   );
 }
diff --git a/src/components/sections/bentogrid.tsx b/src/components/sections/bentogrid.tsx
@@ -1,8 +1,10 @@
 import Image from "next/image";
 
 import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
+import { useTranslations } from "next-intl";
 
-export default function BentoGrid() {
+export default function BentoGrid({locale}) {
+  const t = useTranslations('BentoGrid');
   return (
     <section className="py-32">
       <MaxWidthWrapper>
@@ -27,7 +29,7 @@ export default function BentoGrid() {
                 </span>
               </div>
               <h2 className="mt-6 text-center font-heading text-3xl md:text-4xl lg:text-[40px]">
-                Customizable
+                {t("customizable")}
               </h2>
             </div>
           </div>
@@ -90,11 +92,10 @@ export default function BentoGrid() {
               </div>
               <div className="relative z-10 mt-8 space-y-1.5 text-center">
                 <h2 className="text-lg font-medium text-foreground">
-                  Secure by default
+                  {t("secureByDefault")}
                 </h2>
                 <p className="text-muted-foreground">
-                  Provident fugit and vero voluptate. magnam magni doloribus
-                  dolores voluptates a sapiente nisi.
+                  {t("secureByDefaultDescription")}
                 </p>
               </div>
             </div>
@@ -187,11 +188,10 @@ export default function BentoGrid() {
               </div>
               <div className="relative z-10 mt-8 space-y-1.5 text-center">
                 <h2 className="text-lg font-medium text-foreground">
-                  Faster than light
+                  {t("fasterThanLight")}
                 </h2>
                 <p className="text-muted-foreground">
-                  Provident fugit vero voluptate. magnam magni doloribus dolores
-                  voluptates inventore nisi.
+                  {t("fasterThanLightDescription")}
                 </p>
               </div>
             </div>
@@ -219,11 +219,10 @@ export default function BentoGrid() {
                 </div>
                 <div className="space-y-2">
                   <h2 className="text-lg font-medium text-foreground">
-                    Faster than light
+                    {t("fasterThanLight")}
                   </h2>
                   <p className="text-muted-foreground">
-                    Provident fugit vero voluptate. Voluptates a sapiente
-                    inventore nisi.
+                    {t("fasterThanLightDescription")}
                   </p>
                 </div>
               </div>
@@ -304,11 +303,10 @@ export default function BentoGrid() {
                 </div>
                 <div className="space-y-2">
                   <h2 className="text-lg font-medium text-foreground">
-                    Keep your loved ones safe
+                    {t('keepLovedOnesSafe')}
                   </h2>
                   <p className="text-muted-foreground">
-                    Voluptate. magnam magni doloribus dolores voluptates a
-                    sapiente.
+                    {t("keepLovedOnesSafeDescription")}
                   </p>
                 </div>
               </div>

diff --git a/src/components/sections/info-landing.tsx b/src/components/sections/info-landing.tsx
@@ -9,6 +9,7 @@ import { Icons } from "@/components/shared/icons";
 import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
 
 interface InfoLandingProps {
+  locale: string;
   data: InfoLdg;
   reverse?: boolean;
 }

diff --git a/src/components/sections/powered.tsx b/src/components/sections/powered.tsx
@@ -1,5 +1,6 @@
-import Link from "@/components/link/link";
+import { useTranslations } from "next-intl";
 
+import Link from "@/components/link/link";
 import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
 
 const logos = [
@@ -217,12 +218,18 @@ const logos = [
   },
 ];
 
-export default function Powered() {
+interface PoweredProps {
+  locale: string;
+}
+
+export default function Powered({ locale }: PoweredProps) {
+  const t = useTranslations("Powered");
+
   return (
     <section className="py-14 text-muted-foreground">
       <MaxWidthWrapper>
         <h2 className="text-center text-sm font-semibold uppercase">
-          Powered by
+          {t("poweredby")}
         </h2>
 
         <div className="mt-10 grid grid-cols-2 place-items-center gap-8 md:grid-cols-4">

diff --git a/src/components/sections/preview-landing.tsx b/src/components/sections/preview-landing.tsx
@@ -1,8 +1,10 @@
 import Image from "next/image";
 
 import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
+import { useTranslations } from "next-intl";
 
 export default function PreviewLanding() {
+  const t = useTranslations('PreviewLanding');
   return (
     <div className="pb-6 sm:pb-16">
       <MaxWidthWrapper>
@@ -11,7 +13,7 @@ export default function PreviewLanding() {
             <Image
               className="size-full object-cover object-center dark:opacity-85 dark:invert"
               src="/_static/blog/blog-post-3.jpg"
-              alt="preview landing"
+              alt={t('imageAlt')}
               width={2000}
               height={1000}
               priority={true}

diff --git a/src/components/sections/testimonials.tsx b/src/components/sections/testimonials.tsx
@@ -2,16 +2,17 @@ import Image from "next/image";
 
 import { testimonials } from "@/config/landing";
 import { HeaderSection } from "@/components/shared/header-section";
+import { useTranslations } from "next-intl";
 
-export default function Testimonials() {
+export default function Testimonials({locale}) {
+  const t = useTranslations('Testimonials');
   return (
     <section>
       <div className="container flex max-w-6xl flex-col gap-10 py-32 sm:gap-y-16">
         <HeaderSection
-          label="Testimonials"
-          title="What our clients are sharing."
-          subtitle="Discover the glowing feedback from our delighted customers
-            worldwide."
+          label={t('label')}
+          title={t('title')}
+          subtitle={t('subtitle')}
         />
 
         <div className="column-1 gap-5 space-y-5 md:columns-2 lg:columns-3 ">
@@ -39,7 +40,7 @@ export default function Testimonials() {
                         </p>
                       </div>
                     </div>
-                    <q className="text-muted-foreground">{item.review}</q>
+                    <q className="text-muted-foreground">{t(`reviews.${item.id}`)}</q>
                   </div>
                 </div>
               </div>

diff --git a/src/config/landing.ts b/src/config/landing.ts
@@ -99,48 +99,55 @@ export const features: FeatureLdg[] = [
 
 export const testimonials: TestimonialType[] = [
   {
+    id: "1",
     name: "John Doe",
     job: "Full Stack Developer",
     image: "https://randomuser.me/api/portraits/men/1.jpg",
     review:
       "The next-saas-stripe-starter repo has truly revolutionized my development workflow. With its comprehensive features and seamless integration with Stripe, I've been able to build and deploy projects faster than ever before. The documentation is clear and concise, making it easy to navigate through the setup process. I highly recommend next-saas-stripe-starter to any developer.",
   },
   {
+    id: "2",
     name: "Alice Smith",
     job: "UI/UX Designer",
     image: "https://randomuser.me/api/portraits/women/2.jpg",
     review:
       "Thanks to next-saas-stripe-starter, I've been able to create modern and attractive user interfaces in record time. The starter kit provides a solid foundation for building sleek and intuitive designs, allowing me to focus more on the creative aspects of my work.",
   },
   {
+    id: "3",
     name: "David Johnson",
     job: "DevOps Engineer",
     image: "https://randomuser.me/api/portraits/men/3.jpg",
     review:
       "Thanks to next-saas-stripe-starter, I was able to streamline the entire process and get payments up and running in no time. ",
   },
   {
+    id: "4",
     name: "Michael Wilson",
     job: "Project Manager",
     image: "https://randomuser.me/api/portraits/men/5.jpg",
     review:
       "I'm impressed by the quality of code and clear documentation of next-saas-stripe-starter. Kudos to the team!",
   },
   {
+    id: "5",
     name: "Sophia Garcia",
     job: "Data Analyst",
     image: "https://randomuser.me/api/portraits/women/6.jpg",
     review:
       "next-saas-stripe-starter provided me with the tools I needed to efficiently manage user data. Thank you so much!",
   },
   {
+    id: "6",
     name: "Emily Brown",
     job: "Marketing Manager",
     image: "https://randomuser.me/api/portraits/women/4.jpg",
     review:
       "next-saas-stripe-starter has been an invaluable asset in my role as a marketing manager. With its seamless integration with Stripe, I've been able to launch targeted marketing campaigns with built-in payment functionality, allowing us to monetize our products and services more effectively.",
   },
   {
+    id: "7",
     name: "Jason Stan",
     job: "Web Designer",
     image: "https://randomuser.me/api/portraits/men/9.jpg",

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -146,5 +146,53 @@
     "title": "Upgrade to Pro",
     "description": "Unlock all features and get unlimited access to our support team.",
     "upgradeButton": "Upgrade"
+  },
+  "Powered": {
+    "poweredby": "Powered by"
+  },
+  "Testimonials": {
+    "label": "Testimonials",
+    "title": "What our clients are sharing.",
+    "subtitle": "Discover the glowing feedback from our delighted customers worldwide.",
+    "reviews": {
+      "1": "FFlow Next has revolutionized our development process. It's incredibly fast and efficient!",
+      "2": "The integration of Next.js 14 and other cutting-edge technologies makes FFlow Next a game-changer.",
+      "3": "Our team's productivity skyrocketed after adopting FFlow Next. Highly recommended!",
+      "4": "I'm impressed by the quality of code and clear documentation of fflow-next. Kudos to the team!",
+      "5": "fflow-next provided me with the tools I needed to efficiently manage user data. Thank you so much!",
+      "6": "fflow-next has been an invaluable asset in my role as a marketing manager. With its seamless integration with Stripe, I've been able to launch targeted marketing campaigns with built-in payment functionality, allowing us to monetize our products and services more effectively.",
+      "7": "Thanks to fflow-next, I've been able to create modern and attractive user interfaces in record time. The starter kit provides a solid foundation for building sleek and intuitive designs, allowing me to focus more on the creative aspects of my work."
+    }
+  },
+  "PreviewLanding": {
+    "imageAlt": "Preview landing"
+  },
+  "BentoGrid": {
+    "customizable": "Customizable",
+    "secureByDefault": "Secure by default",
+    "secureByDefaultDescription": "Provident fugit and vero voluptate. magnam magni doloribus dolores voluptates a sapiente nisi.",
+    "fasterThanLight": "Faster than light",
+    "fasterThanLightDescription": "Provident fugit vero voluptate. magnam magni doloribus dolores voluptates inventore nisi.",
+    "fasterThanLightAltDescription": "Provident fugit vero voluptate. Voluptates a sapiente inventore nisi.",
+    "keepLovedOnesSafe": "Keep your loved ones safe",
+    "keepLovedOnesSafeDescription": "Voluptate. magnam magni doloribus dolores voluptates a sapiente."
+  },
+  "Features": {
+    "label": "Features",
+    "title": "Discover all features.",
+    "subtitle": "These features are designed to enhance your productivity and user experience.",
+    "visitSite": "Visit Site",
+    "nextjs": {
+      "title": "Next.js 14",
+      "description": "Build fast, scalable applications with the power of Next.js 14."
+    },
+    "typescript": {
+      "title": "TypeScript",
+      "description": "Write safer, more maintainable code with TypeScript."
+    },
+    "react": {
+      "title": "React",
+      "description": "Create dynamic, responsive user interfaces with React."
+    }
   }
 }
diff --git a/src/locales/zh.json b/src/locales/zh.json
@@ -146,5 +146,53 @@
     "title": "升级到专业版",
     "description": "解锁所有功能并获得我们支持团队的无限访问权限。",
     "upgradeButton": "升级"
+  },
+  "Powered": {
+    "poweredby": "技术支持"
+  },
+  "Testimonials": {
+    "label": "客户评价",
+    "title": "我们的客户在分享什么。",
+    "subtitle": "发现来自全球满意客户的热烈反馈。",
+    "reviews": {
+      "1": "FFlow Next 彻底改变了我们的开发流程。它非常快速和高效！",
+      "2": "Next.js 14 和其他前沿技术的集成使 FFlow Next 成为了游戏规则的改变者。",
+      "3": "采用 FFlow Next 后，我们团队的生产力飞速提升。强烈推荐！",
+      "4": "我对 FFlow Next 的代码质量和清晰文档印象深刻。向团队致敬！",
+      "5": "FFlow Next 为我提供了必要的工具，以高效地管理用户数据。非常感谢！",
+      "6": "FFlow Next 在我作为营销经理的角色中发挥了无价的作用。通过 Stripe 的无缝集成，我能够启动具有内置支付功能的定向营销活动，使我们能够更有效地货币化我们的产品和服务。",
+      "7": "感谢 FFlow Next, 我能够在创纪录的时间内创建现代和吸引人的用户界面。入门套件为构建时尚和直观的界面提供了坚实的基础, 使我能够更专注于工作的创造性方面。"
+    }
+  },
+  "PreviewLanding": {
+    "imageAlt": "预览着陆页"
+  },
+  "BentoGrid": {
+    "customizable": "可定制",
+    "secureByDefault": "默认安全",
+    "secureByDefaultDescription": "提供可靠的保护和真实的价值。大量的努力带来了巨大的回报和智慧的洞察。",
+    "fasterThanLight": "比光速更快",
+    "fasterThanLightDescription": "提供真实的速度体验。大量的努力带来了巨大的回报和创新的发明。",
+    "fasterThanLightAltDescription": "提供真实的速度体验。智慧的发明带来了巨大的价值。",
+    "keepLovedOnesSafe": "保护您所爱的人",
+    "keepLovedOnesSafeDescription": "价值。大量的努力带来了巨大的回报和智慧的洞察。"
+  },
+  "Features": {
+    "label": "功能",
+    "title": "探索所有功能。",
+    "subtitle": "这些功能旨在提高您的工作效率和用户体验。",
+    "visitSite": "访问网站",
+    "nextjs": {
+      "title": "Next.js 14",
+      "description": "利用 Next.js 14 的强大功能构建快速、可扩展的应用程序。"
+    },
+    "typescript": {
+      "title": "TypeScript",
+      "description": "使用 TypeScript 编写更安全、更可维护的代码。"
+    },
+    "react": {
+      "title": "React",
+      "description": "使用 React 创建动态、响应式的用户界面。"
+    }
   }
 }
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -122,12 +122,19 @@ export type FeatureLdg = {
     icon: keyof typeof Icons;
 };
 
-export type TestimonialType = {
+export type Feature = {
+    icon: string;
+    titleKey: string;
+    descriptionKey: string;
+};
+
+export interface TestimonialType {
+    id: string;
     name: string;
     job: string;
     image: string;
     review: string;
-};
+}
 
 export enum UserRole {
     ADMIN = 'ADMIN',