feat: add english locale data using next-intl

vickyadrii · web-flow · commit b4d2fc4523aa · 2024-09-16T14:49:21.000+07:00
diff --git a/src/components/common/footer/Footer.tsx b/src/components/common/footer/Footer.tsx
@@ -3,10 +3,14 @@ import { dataFooter } from "./constants";
 import { Link } from "@/lib/navigation";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
+import { useTranslations } from "next-intl";
 
 const Footer = () => {
   const date = new Date();
   const { resource, social_media, contact } = dataFooter;
+
+  const t = useTranslations("Footer");
+
   return (
     <>
       <div className="space-y-8 border-t border-dashed">
@@ -16,23 +20,23 @@ const Footer = () => {
 
             {/* Resources */}
             <div className="flex flex-col md:items-start items-center gap-3">
-              <h3 className="text-lg text-hmc-primary font-semibold">{resource.title}</h3>
+              <h3 className="text-lg text-hmc-primary font-semibold">{t("resource.title")}</h3>
               <div className="flex flex-col md:items-start items-center gap-1">
-                {resource.data.map((data) => (
+                {resource.data.map((data, index) => (
                   <Link
                     key={data.navigate_url}
                     href={data.navigate_url}
                     className="md:text-sm text-xs text-slate-600 dark:text-slate-400 hover:opacity-80 hover:underline"
                   >
-                    {data.name}
+                    {t(`resource.data.${index}.name`)}
                   </Link>
                 ))}
               </div>
             </div>
 
             {/* Social Media */}
             <div className="flex flex-col md:items-start items-center gap-3">
-              <h3 className="text-lg text-hmc-primary font-semibold">{social_media.title}</h3>
+              <h3 className="text-lg text-hmc-primary font-semibold">{t("social_media.title")}</h3>
               <div className="flex flex-col md:items-start items-center gap-1">
                 {social_media.data.map((data) => (
                   <Link
@@ -48,7 +52,7 @@ const Footer = () => {
 
             {/* Contact */}
             <div className="flex flex-col md:items-start items-center gap-3">
-              <h3 className="text-lg text-hmc-primary font-semibold">{contact.title}</h3>
+              <h3 className="text-lg text-hmc-primary font-semibold">{t("contact.title")}</h3>
               <div className="flex flex-col md:items-start items-center gap-1">
                 {contact.data.map((data) => (
                   <Button
@@ -66,7 +70,9 @@ const Footer = () => {
         </div>
       </div>
       <footer className="bg-slate-950 dark:bg-slate-950 p-8">
-        <p className="text-center text-white">{date.getFullYear()} © Penggiat Teknologi Palu Berkarya</p>
+        <p className="md:text-sm text-xs text-center text-white">
+          {date.getFullYear()} © Penggiat Teknologi Palu Berkarya
+        </p>
       </footer>
     </>
   );
diff --git a/src/features/home/components/AboutSection.tsx b/src/features/home/components/AboutSection.tsx
@@ -1,9 +1,12 @@
 import { Button } from "@/components/ui/button";
 import { Link } from "@/lib/navigation";
 import { ArrowRight } from "lucide-react";
+import { useTranslations } from "next-intl";
 import Image from "next/image";
 
 const AboutSection = () => {
+  const t = useTranslations("HomePage.section-about");
+
   return (
     <div className="container lg:py-40 py-10">
       <div className="flex lg:flex-row flex-col-reverse lg:gap-16 gap-10">
@@ -32,18 +35,19 @@ const AboutSection = () => {
         </div>
         <div className="basis-1/2 gap-4 lg:-mt-16">
           <div className="flex flex-col lg:items-end gap-4">
-            <h2 className="text-tertiary md:text-3xl text-2xl font-bold">Siapa Kami? 🤔</h2>
+            <h2 className="text-tertiary md:text-3xl text-2xl font-bold">{t("title")}</h2>
             <h1 className="text-hmc-primary lg:text-right md:text-5xl text-3xl font-bold md:leading-[60px]">
-              Komunitas Untuk Memajukan Daerah.
+              {t("sub-title")}
             </h1>
             <div className="flex flex-col lg:items-end gap-3">
               <p className="md:text-base lg:text-right text-sm text-slate-500 dark:text-slate-400 md:leading-7">
-                <b>Hammercode</b> adalah sebuah komunitas teknologi yang diinisiasi sebagai wadah berkumpulnya para
-                pembelajar, programmer, dan pelaku industri teknologi lainnya yang berada di kota Palu dan sekitarnya.
+                {t.rich("description", {
+                  b: (chunks) => <b>{chunks}</b>,
+                })}
               </p>
               <Button variant="tertiary" asChild className="flex items-center gap-2 w-fit">
                 <Link href="/about">
-                  View More <ArrowRight className="lg:w-6 w-5" />
+                  {t("view-more-button")} <ArrowRight className="lg:w-6 w-5" />
                 </Link>
               </Button>
             </div>
diff --git a/src/features/home/components/ClassSection.tsx b/src/features/home/components/ClassSection.tsx
@@ -2,15 +2,18 @@ import Image from "next/image";
 import { courseData } from "../constants";
 import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { useTranslations } from "next-intl";
 
 const ClassSection = () => {
+  const t = useTranslations("HomePage.section-class");
+
   return (
     <div className="bg-sky-50 dark:bg-slate-900">
       <div className="container md:py-14 py-10 my-10 space-y-6">
         <div className="flex flex-col items-center gap-2">
-          <h2 className="text-tertiary md:text-3xl text-2xl font-bold">Kelas Hammercode 🔥</h2>
+          <h2 className="text-tertiary md:text-3xl text-2xl font-bold">{t("title")}</h2>
           <p className="max-w-3xl md:text-base text-center text-sm text-slate-500 dark:text-slate-400 md:leading-7">
-            Hammercode tempat yang cocok untukmu yang ingin belajar tentang coding/pemrograman dan software engineering.
+            {t("description")}
           </p>
         </div>
 
diff --git a/src/features/home/components/ContactSection.tsx b/src/features/home/components/ContactSection.tsx
@@ -1,23 +1,24 @@
 import { Button } from "@/components/ui/button";
 import { Send } from "lucide-react";
 import { Link } from "@/lib/navigation";
+import { useTranslations } from "next-intl";
 
 const ContactSection = () => {
+  const t = useTranslations("HomePage.section-contact");
+
   return (
     <div className="container py-10">
       <div className="flex flex-col items-center md:gap-8 gap-6">
         <div className="flex flex-col items-center gap-2">
-          <h2 className="text-tertiary md:text-3xl text-2xl text-center font-bold">
-            Punya pertanyaan atau ingin sekedar ngobrol? 😃
-          </h2>
+          <h2 className="text-tertiary md:text-3xl text-2xl text-center font-bold">{t("title")}</h2>
           <p className="max-w-3xl md:text-base text-center text-sm text-slate-500 dark:text-slate-400 md:leading-7">
-            Kami dengan senang hati terhubung dengan kamu. Cukup klik tombol di bawah yaa!
+            {t("description")}
           </p>
         </div>
 
         <Button asChild variant="tertiary" className="flex items-center gap-2">
           <Link href="https://wa.me/6281355893352" target="_blank">
-            Hubungi Kami <Send className="lg:w-6 w-5" />
+            {t("contact-button")} <Send className="lg:w-6 w-5" />
           </Link>
         </Button>
       </div>
diff --git a/src/features/home/components/HeroSection.tsx b/src/features/home/components/HeroSection.tsx
@@ -6,23 +6,21 @@ import { Button } from "@/components/ui/button";
 import { HandCoins } from "lucide-react";
 
 const HeroSection = () => {
-  const t = useTranslations("HomePage");
+  const t = useTranslations("HomePage.section-hero");
   return (
     <div className="container py-32 flex lg:flex-row flex-col items-center gap-6 justify-between">
       <div className="basis-[50%]">
         <div className="space-y-4">
           <div className="space-y-1.5">
-            <h1 className="text-hmc-primary md:text-[44px] text-3xl font-bold md:leading-[60px]">
-              {t("section-hero.title")}
-            </h1>
-            <p className="text-slate-600 dark:text-slate-400">{t("section-hero.description")}</p>
+            <h1 className="text-hmc-primary md:text-[44px] text-3xl font-bold md:leading-[60px]">{t("title")}</h1>
+            <p className="text-slate-600 dark:text-slate-400">{t("description")}</p>
           </div>
 
           {/* Social Media */}
           <div className="flex items-center gap-2">
             <Button asChild size="lg" className="flex items-center gap-2">
               <Link href="https://discord.com/invite/M9mNK6MBbu" target="_blank">
-                {t("section-hero.join-button")} <HandCoins className="lg:w-6 w-5" />
+                {t("join-button")} <HandCoins className="lg:w-6 w-5" />
               </Link>
             </Button>
             <div className="flex items-center gap-2">
diff --git a/src/features/home/components/PartnerSection.tsx b/src/features/home/components/PartnerSection.tsx
@@ -4,15 +4,13 @@ import { useTranslations } from "next-intl";
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 
 const PartnerSection = () => {
-  const t = useTranslations("HomePage");
+  const t = useTranslations("HomePage.section-partner");
   return (
     <div className="bg-sky-50 dark:bg-slate-900">
       <div className="container md:py-14 py-10 my-10 space-y-8">
         <div className="flex flex-col items-center gap-2">
-          <h2 className="text-tertiary md:text-3xl text-2xl font-bold">{t("section-partner.title")}</h2>
-          <p className="md:text-base text-sm text-slate-500 dark:text-slate-400 md:text-center">
-            {t("section-partner.description")}
-          </p>
+          <h2 className="text-tertiary md:text-3xl text-2xl font-bold">{t("title")}</h2>
+          <p className="md:text-base text-sm text-slate-500 dark:text-slate-400 md:text-center">{t("description")}</p>
         </div>
 
         <div className="px-12 md:px-12">
diff --git a/src/features/home/components/ProgramSection.tsx b/src/features/home/components/ProgramSection.tsx
@@ -2,16 +2,17 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
 
 import Image from "next/image";
 import { programData } from "../constants";
+import { useTranslations } from "next-intl";
 
 const ProgramSection = () => {
+  const t = useTranslations("HomePage.section-program");
+
   return (
     <div className="container py-10 space-y-8">
       <div className="flex flex-col gap-4">
-        <h2 className="text-tertiary md:text-3xl text-2xl font-bold">Program Hammercode ✨</h2>
+        <h2 className="text-tertiary md:text-3xl text-2xl font-bold">{t("title")}</h2>
         <p className="max-w-3xl md:text-base text-sm text-slate-500 dark:text-slate-400 md:leading-7">
-          Kegiatan-kegiatan yang kami selenggarakan berorientasi pada knowledge-transfer yang diharapkan dapat
-          mempercepat pemerataan keterampilan di bidang teknologi informasi serta mencetak talenta teknologi yang siap
-          kerja.
+          {t("description")}
         </p>
       </div>
 
@@ -44,9 +45,9 @@ const ProgramSection = () => {
                 <div className="bg-sky-100 dark:bg-sky-900 p-2 w-9 h-9 text-sm text-hmc-primary flex justify-center items-center rounded-lg">
                   {data.id}
                 </div>
-                <h3 className="text-xl text-center font-semibold">{data.title}</h3>
+                <h3 className="text-xl text-center font-semibold">{t(`programs.${data.id}.title`)}</h3>
                 <p className="md:text-sm text-sm text-center text-slate-500 dark:text-slate-400 md:leading-6">
-                  {data.description}
+                  {t(`programs.${data.id}.description`)}
                 </p>
               </div>
             </CardContent>
diff --git a/src/features/home/components/TestimonialSection.tsx b/src/features/home/components/TestimonialSection.tsx
@@ -3,15 +3,15 @@ import { testimonialData } from "../constants";
 import { Card, CardFooter, CardHeader } from "@/components/ui/card";
 import Image from "next/image";
 import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel";
+import { useTranslations } from "next-intl";
 
 const TestimonialSection = () => {
+  const t = useTranslations("HomePage.section-testimonial");
   return (
     <div className="container py-10 space-y-8">
       <div className="flex flex-col space-y-2">
-        <h2 className="text-tertiary md:text-3xl text-2xl font-bold">Manfaat 🌟</h2>
-        <p className="md:text-base text-sm text-slate-500 dark:text-slate-400">
-          Beberapa testimonial dari teman dan alumni yang merasakan manfaat dari Hammercode.
-        </p>
+        <h2 className="text-tertiary md:text-3xl text-2xl font-bold">{t("title")}</h2>
+        <p className="md:text-base text-sm text-slate-500 dark:text-slate-400">{t("description")}</p>
       </div>
 
       <Carousel className="w-full" isDots={true}>
diff --git a/src/features/home/index.tsx b/src/features/home/index.tsx
@@ -2,7 +2,7 @@ import HeroSection from "./components/HeroSection";
 import PartnerSection from "./components/PartnerSection";
 import AboutSection from "./components/AboutSection";
 import ProgramSection from "./components/ProgramSection";
-import CourseSection from "./components/CourseSection";
+import ClassSection from "./components/ClassSection";
 import TestimonialSection from "./components/TestimonialSection";
 import ContactSection from "./components/ContactSection";
 
@@ -13,7 +13,7 @@ const Home = () => {
       <PartnerSection />
       <AboutSection />
       <ProgramSection />
-      <CourseSection />
+      <ClassSection />
       <TestimonialSection />
       <ContactSection />
     </div>
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -10,6 +10,25 @@
     "title": "Welcome to Hammercode 👋",
     "description": "Hammercode is a community based in Palu, Indonesia."
   },
+  "Footer": {
+    "resource": {
+      "title": "Resources",
+      "data": [
+        {
+          "name": "Home"
+        },
+        {
+          "name": "About Us"
+        }
+      ]
+    },
+    "social_media": {
+      "title": "Let's Join with Us!"
+    },
+    "contact": {
+      "title": "Contact"
+    }
+  },
   "HomePage": {
     "section-hero": {
       "title": "Boost Your Skills with High-Quality Classes!",
@@ -19,6 +38,43 @@
     "section-partner": {
       "title": "Learning From Our Expert Tech",
       "description": "Take the opportunity to learn from experts from tech companies"
+    },
+    "section-about": {
+      "title": "Who We Are? 🤔",
+      "sub-title": "Community to Advance our Hometown.",
+      "description": "<b>Hammercode</b> is tech community initiated as a place for learner, programmer, developer, and the other tech industry players at Palu and surrounding areas.",
+      "view-more-button": "View More"
+    },
+    "section-program": {
+      "title": "Hammercode Programs ✨",
+      "description": "Our activities orienting to knowledge-transfer which is expected to accelerate the distribution of skills in industry and to produce ready to work technology talents.",
+      "programs": {
+        "01": {
+          "title": "Mentoring",
+          "description": "Our community members from various tech company ready to help you with internship or full-time job application."
+        },
+        "02": {
+          "title": "Workshops & Classes",
+          "description": "Classes and workshops are available for various fields, such as the web, mobile apps to data. The level of presented material varies, from beginner to advanced."
+        },
+        "03": {
+          "title": "Tech Talk",
+          "description": "Monthly knowledge sharing activities brought by practitioner from industry and community members."
+        }
+      }
+    },
+    "section-class": {
+      "title": "Hammercode Classes 🔥",
+      "description": "Hammercode is a percect place for those to learn about coding/programming and software engineering."
+    },
+    "section-testimonial": {
+      "title": "Impact Story 🌟",
+      "description": "Some friends and alumni who feel the benefits from Hammercode."
+    },
+    "section-contact": {
+      "title": "Got any question or just want casual chit-chat? 😃",
+      "description": "We will love to be connected with you. Just hit the button below, yaa!",
+      "contact-button": "Contact Us"
     }
   },
   "EventsPage": {
diff --git a/src/locales/id.json b/src/locales/id.json
