added internationalization to features section

Author: karthik11135

src/components/sections/features.tsx

@@ -1,91 +1,95 @@
 import { LanguagesIcon } from "lucide-react";
 import { BrandIcons } from "../shared/brand-icons";
 import { Card } from "../ui/card";
+import { getScopedI18n } from "~/locales/server";
+
+export default async function Features() {
+  const scopedT = await getScopedI18n("features");
+  const scopedTlibs = await getScopedI18n("features.libs");
 
-export default function Features() {
   return (
     <section>
-      <div className="container space-y-6 rounded-md bg-secondary py-14 lg:py-24 ">
+      <div className="container space-y-6 rounded-md bg-secondary py-14 lg:py-24">
         <div className="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center">
-          <h2 className="font-heading text-4xl md:text-6xl">Features</h2>
+          <h2 className="font-heading text-4xl md:text-6xl">
+            {scopedT("top")}
+          </h2>
           <p className="max-w-[85%] text-balance leading-normal text-primary/70 sm:text-lg sm:leading-7">
-            This template comes with features like Authentication, API routes,
-            File uploading and more in Next.js App dir.
+            {scopedT("details")}
           </p>
         </div>
         <div className="mx-auto grid justify-center gap-4 text-center sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3">
           <Card className="flex h-[160px] flex-col justify-between rounded-md p-6">
             <BrandIcons.nextjs />
             <p className="text-balance text-sm text-muted-foreground">
-              App dir, Routing, Layouts, API routes, Server Components, Server
-              actions.
+              {scopedTlibs("nextjs")}
             </p>
           </Card>
           <Card className="flex h-[160px] flex-col justify-between rounded-md p-6">
             <BrandIcons.shadcnUI />
 
             <p className="text-balance text-sm text-muted-foreground">
-              UI components built using Radix UI and styled with Tailwind CSS.
+              {scopedTlibs("tailwindcss")}
             </p>
           </Card>
           <Card className="flex h-[160px] flex-col justify-between rounded-md p-6">
             <BrandIcons.prisma />
 
             <p className="text-balance text-sm text-muted-foreground">
-              Using Postgres with Prisma ORM, hosted on Vercel Postgres.
+              {scopedTlibs("postgres")}
             </p>
           </Card>
           <Card className="flex h-[160px] flex-col justify-between rounded-md p-6">
             <BrandIcons.luciaAuth />
 
             <p className="text-balance text-sm text-muted-foreground">
-              Authentication and Authorization using LuciaAuth v3.
+              {scopedTlibs("lucia")}
             </p>
           </Card>
           <Card className="flex h-[160px] flex-col justify-between rounded-md p-6">
             <BrandIcons.uploadthing />
 
             <p className="text-balance text-sm text-muted-foreground">
-              Upload and preview files effortlessly with UploadThing.
+              {scopedTlibs("uploadthing")}
             </p>
           </Card>
           <Card className="flex h-[160px] flex-col justify-between p-6">
             <BrandIcons.resend />
 
             <p className="text-balance text-sm text-muted-foreground">
-              Create emails using React Email and Send with Resend.
+              {scopedTlibs("reactEmail")}
             </p>
           </Card>
           <Card className="flex h-[160px] flex-col justify-between p-6">
             <LanguagesIcon className="mx-auto h-12 w-12 fill-current" />
 
             <p className="text-balance text-sm text-muted-foreground">
-              Internationalization support with type-safe Next-International.
+              {scopedTlibs("internationalization")}
             </p>
           </Card>
           <Card className="flex h-[160px] flex-col justify-between p-6">
             <BrandIcons.stripe />
 
             <p className="text-balance text-sm text-muted-foreground">
-              Receive and process payments with Stripe.
+              {scopedTlibs("stripe")}
             </p>
           </Card>
           <Card className="flex h-[160px] flex-col justify-between p-6">
             <BrandIcons.vercel />
 
             <p className="text-balance text-sm text-muted-foreground">
-              Production and Preview deployments with Vercel.
+              {scopedTlibs("vercel")}
             </p>
           </Card>
         </div>
         <div className="mx-auto text-center md:max-w-[58rem]">
           <p className="leading-normal text-primary/70 sm:text-lg sm:leading-7">
-            ChadNext also includes Changelog & About page built using{" "}
+            {scopedT('aboutMd')}
             <a
               href="https://velite.js.org/"
               target="_blank"
               rel="noopener noreferrer"
-              className=" underline underline-offset-4"
+              className="underline underline-offset-4"
             >
               Velite
             </a>{" "}

src/locales/en.ts

@@ -13,6 +13,25 @@ export default {
     tools: "Built using Great Tools",
     on: "on",
   },
+  features: {
+    top: "Features",
+    details:
+      "This template comes with features like Authentication, API routes, File uploading and more in Next.js App dir.",
+    libs: {
+      nextjs:
+        "App dir, Routing, Layouts, API routes, Server Components, Server actions.",
+      tailwindcss: "UI components built using Radix UI and styled with Tailwind CSS.",
+      postgres: "Using Postgres with Prisma ORM, hosted on Vercel Postgres.",
+      lucia: "Authentication and Authorization using LuciaAuth v3.",
+      uploadthing: "Upload and preview files effortlessly with UploadThing.",
+      reactEmail: "Create emails using React Email and Send with Resend.",
+      internationalization:
+        "Internationalization support with type-safe Next-International.",
+      stripe: "Receive and process payments with Stripe.",
+      vercel: "Production and Preview deployments with Vercel.",
+    },
+    aboutMd: "ChadNext also includes Changelog & About page built using."
+  },
   notFound: {
     title: "Page Not Found!",
   },

src/locales/fr.ts

@@ -13,6 +13,30 @@ export default {
     tools: "Construit à l'aide d'excellents outils",
     on: "sur",
   },
+  features: {
+    top: "Caractéristiques",
+    details:
+      "Cette template comprend des fonctionnalités telles que l'authentification, les routes API, le téléchargement de fichiers et bien plus dans le répertoire App de Next.js.",
+    libs: {
+      nextjs:
+        "Répertoire App, routage, mises en page, routes API, composants serveur, actions serveur.",
+      tailwindcss:
+        "Composants UI construits avec Radix UI et stylisés avec Tailwind CSS.",
+      postgres:
+        "Utilisation de Postgres avec Prisma ORM, hébergé sur Vercel Postgres.",
+      lucia: "Authentification et autorisation avec LuciaAuth v3.",
+      uploadthing:
+        "Téléchargez et prévisualisez des fichiers facilement avec UploadThing.",
+      reactEmail:
+        "Créez des e-mails avec React Email et envoyez-les avec Resend.",
+      internationalization:
+        "Support d'internationalisation avec Next-International, sécurisé par typage.",
+      stripe: "Recevez et traitez les paiements avec Stripe.",
+      vercel: "Déploiements de production et de prévisualisation avec Vercel.",
+    },
+    aboutMd:
+      "ChadNext inclut également une page de journal des modifications et une page À propos, construites avec ",
+  },
   notFound: {
     title: "Page non trouvée!",
   },