🌐 Add translations for features

app/[locale]/page.js

@@ -7,7 +7,7 @@ import Footer from '@/components/sections/Footer'
 import initTranslations from '../i18n';
 import TranslationsProvider from '@/components/TranslationsProvider';
 
-const i18nNamespaces = ['hero', 'reviews'];
+const i18nNamespaces = ['hero', 'reviews', 'features'];
 
 export default async function Home({ params: { locale } }) {
   const { t, resources } = await initTranslations(locale, i18nNamespaces);

components/sections/FeatureSection.jsx

@@ -1,40 +1,20 @@
-// import DARKDEMOPIC from "@/public/darkdemo.png";
-// import LIGHTDEMOPIC from "@/public/lightdemo.png";
+"use client";
 import {
   ArrowPathIcon,
-  CloudArrowUpIcon,
-  Cog6ToothIcon,
-  FingerPrintIcon,
-  LockClosedIcon,
-  ServerIcon,
+  SparklesIcon,
+  BookOpenIcon,
+  HeartIcon,
 } from "@heroicons/react/20/solid";
 import Image from "next/image";
+import { useTranslation } from "react-i18next";
 
-const features = [
-  {
-    name: "Sleek Design.",
-    description:
-      "Designed from the the ground up to be simple and pleasing to the eye.",
-    icon: CloudArrowUpIcon,
-  },
-  {
-    name: "Reliable.",
-    description: "Data is taken from the official local authority",
-    icon: ArrowPathIcon,
-  },
-  {
-    name: "We are open source.",
-    description: "Check the code yourself on Github and start contributing.",
-    icon: Cog6ToothIcon,
-  },
-  {
-    name: "More features.",
-    description: "More features will be added in the future. Stay tuned!",
-    icon: ServerIcon,
-  },
-];
+const featureIcons = [SparklesIcon, HeartIcon, BookOpenIcon, ArrowPathIcon];
 
 const Feature = () => {
+  const { t } = useTranslation("features");
+
+  const i18nFeatures = t("features", { returnObjects: true });
+
   return (
     <section
       id="feature"
@@ -43,31 +23,34 @@ const Feature = () => {
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl sm:text-center">
           <h2 className="text-base font-semibold leading-7 dark:text-cyan-500 text-cyan-600">
-            Everything you need
+            {t("featureTitle")}
           </h2>
           <p className="mt-2 text-3xl font-bold tracking-tight text-zinc-800 dark:text-slate-200 sm:text-4xl">
-            &quot;Hurry to the prayer. Hurry to success&quot;
+            &quot;{t("featureBody")}&quot;
           </p>
 
           <p className="mt-6 text-lg leading-8 text-zinc-600 dark:text-zinc-300">
-            Feature packed while keeping the design clean and minimal
+            {t("featureDescription")}
           </p>
         </div>
       </div>
       <div className="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
         <dl className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base leading-7 text-gray-600 dark:text-gray-300 sm:grid-cols-2 xl:mx-0 xl:max-w-none xl:grid-cols-4 xl:gap-x-8 xl:gap-y-16">
-          {features.map((feature) => (
-            <div key={feature.name} className="relative pl-9">
-              <dt className="inline font-semibold text-zinc-900 dark:text-slate-200">
-                <feature.icon
-                  className="absolute left-1 top-1 h-5 w-5 text-cyan-600 dark:text-cyan-500"
-                  aria-hidden="true"
-                />
-                {feature.name}
-              </dt>{" "}
-              <dd className="inline">{feature.description}</dd>
-            </div>
-          ))}
+          {i18nFeatures.map((feature, index) => {
+            const Icon = featureIcons[index];
+            return (
+              <div key={feature.name} className="relative pl-9">
+                <dt className="inline font-semibold text-zinc-900 dark:text-slate-200">
+                  <Icon
+                    className="absolute left-1 top-1 h-5 w-5 text-cyan-600 dark:text-cyan-500"
+                    aria-hidden="true"
+                  />
+                  {feature.name}
+                </dt>{" "}
+                <dd className="inline">{feature.description}</dd>
+              </div>
+            );
+          })}
         </dl>
       </div>
     </section>

locales/en/features.json

@@ -0,0 +1,23 @@
+{
+  "featureTitle": "Everything you need",
+  "featureBody": "Hurry to the prayer. Hurry to success",
+  "featureDescription": "Feature packed while keeping the design clean and minimal",
+  "features": [
+    {
+      "name": "Sleek Design.",
+      "description": "Designed from the the ground up to be simple and pleasing to the eye."
+    },
+    {
+      "name": "Reliable.",
+      "description": "Data is taken from the official local authority"
+    },
+    {
+      "name": "We are open source.",
+      "description": "Found a bug or want to contribute to the project? Visit our GitHub!"
+    },
+    {
+      "name": "Continuous support.",
+      "description": "We are always working on improving the app and adding new features."
+    }
+  ]
+}

locales/en/hero.json

@@ -5,6 +5,6 @@
   "latestVersion": "Latest Version",
   "screenshotLight": "/public/images/phone-light-portrait.png",
   "screenshotDark": "/public/images/phone-dark-portrait.png",
-  "sorryNoIos": "Maaf, this app is not available for iOS yet.",
+  "sorryNoIos": "Sorry, this app is not available for iOS yet.",
   "lang": "en"
 }

locales/ms/features.json

@@ -0,0 +1,23 @@
+{
+  "featureTitle": "Segala yang anda perlukan",
+  "featureBody": "Marilah menunaikan solat, Marilah merebut kemenangan",
+  "featureDescription": "Penuh dengan ciri-ciri sambil mengekalkan reka bentuk yang moden dan minimal",
+  "features": [
+    {
+      "name": "Reka Bentuk Moden.",
+      "description": "Direka dari asasnya untuk menjadi ringkas dan menyenangkan mata."
+    },
+    {
+      "name": "Boleh Dipercayai.",
+      "description": "Data diambil dari pihak berkuasa tempatan rasmi."
+    },
+    {
+      "name": "Kami adalah sumber terbuka.",
+      "description": "Jumpa bug atau ingin menyumbang kepada projek? Layari GitHub kami!"
+    },
+    {
+      "name": "Sokongan Berterusan.",
+      "description": "Kami sentiasa berusaha untuk memperbaiki aplikasi dan menambah ciri-ciri baru."
+    }
+  ]
+}