Merge pull request #975 from chiefEbube/feat/multiple-languages-support

feat/multiple language support: added messages
hngprojects · Aug 15, 2024 · 54d364e · 54d364e
2 parents 5a1c943 + 5f18a91
commit 54d364e
Show file tree

Hide file tree

Showing 13 changed files with 253 additions and 61 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -1,4 +1,13 @@
 {
+    "navbar": {
+        "login": "Log in",
+        "register": "Get Started"
+    },
+    "navLinks": {
+        "home": "Home",
+        "pricing": "Pricing",
+        "careers": "Careers"
+    },
     "HomePage": {
         "title": "Hello world!"
     },
@@ -22,5 +31,54 @@
         "scalableDescription": "Our boilerplate is designed to grow with your product. Easily add new features and functionalities as needed.",
         "easyTitle": "Easy Customization",
         "easyDescription": "Tailor the experience to your specific needs and preferences for maximum results."
+    },
+    "testimonials": {
+        "title": "Client Testimonials",
+        "description": "Don't just take our word for it - see what actual users of our product have to say about their experience.",
+        "content": "I've been using this web hosting service for over a year and I'm really impressed with the uptime and support. The website has never gone down and the customer service is always quick to help with any issues I have. Highly recommend!"
+    },
+    "perfectFit": {
+        "title": "Find The Perfect Fit",
+        "description": "Choose the boilerplate plan that best suits your project needs and budget. All plans include access to our comprehensive library of pre-built sections, drag-and-drop customization.",
+        "cta": "See Our Pricing Plan"
+    },
+    "footer": {
+        "newsletterSignUp": "Sign Up For Newsletters",
+        "subscribe": "Subscribe",
+        "navigation": "Navigation",
+        "support": "Support",
+        "legal": "Legal",
+        "followUs": "Follow Us",
+        "privacyPolicy": "Privacy Policy",
+        "termsOfUse": "Terms of Use",
+        "enterYourEmail": "Enter your email",
+        "links": {
+            "navigation": "Navigation",
+            "home": "Home",
+            "aboutUs": "About Us",
+            "career": "Career",
+            "features": "Features",
+            "blog": "Blog",
+            "support": "Support",
+            "helpCenter": "Help Center",
+            "faq": "FAQ",
+            "waitingList": "Waiting List",
+            "pricingExperience": "Pricing Experience",
+            "contactUs": "Contact Us",
+            "legal": "Legal",
+            "privacyPolicy": "Privacy Policy",
+            "termsAndConditions": "Terms and Conditions"
+        },
+        "social": {
+            "facebook": "Facebook",
+            "instagram": "Instagram",
+            "linkedin": "LinkedIn",
+            "youtube": "YouTube"
+        },
+        "footerBottom": {
+            "privacyPolicy": "Privacy Policy",
+            "termsOfUse": "Terms of Use",
+            "copyright": "2024 All Rights Reserved"
+        }
     }
 }
diff --git a/messages/es.json b/messages/es.json
@@ -1,4 +1,13 @@
 {
+    "navbar": {
+        "login": "Iniciar sesión",
+        "register": "Comenzar"
+    },
+    "navLinks": {
+        "home": "Inicio",
+        "pricing": "Precios",
+        "careers": "Carreras"
+    },
     "HomePage": {
         "title": "¡Hola, mundo!"
     },
@@ -22,5 +31,56 @@
         "scalableDescription": "Nuestro boilerplate está diseñado para crecer con tu producto. Añade fácilmente nuevas características y funcionalidades según sea necesario.",
         "easyTitle": "Personalización Fácil",
         "easyDescription": "Personaliza la experiencia según tus necesidades y preferencias específicas para obtener resultados óptimos."
+    },
+    "testimonials": {
+        "title": "Testimonios de Clientes",
+        "description": "No te fíes solo de nuestra palabra: descubre lo que los usuarios reales de nuestro producto tienen que decir sobre su experiencia.",
+        "content": "He estado usando este servicio de alojamiento web durante más de un año y estoy realmente impresionado con el tiempo de actividad y el soporte. El sitio web nunca ha caído y el servicio al cliente siempre es rápido para ayudar con cualquier problema que tenga. ¡Altamente recomendado!"
+    },
+    "perfectFit": {
+        "title": "Encuentra la Solución Perfecta",
+        "description": "Elige el plan de plantilla que mejor se adapte a las necesidades y presupuesto de tu proyecto. Todos los planes incluyen acceso a nuestra biblioteca completa de secciones preconstruidas y personalización mediante arrastrar y soltar.",
+        "cta": "Consulta Nuestro Plan de Precios"
+    },
+    "footer": {
+        "boilerplate": "Plantilla",
+        "address": "Detalles del logo y dirección",
+        "newsletterSignUp": "Suscríbete al Boletín",
+        "subscribe": "Suscribirse",
+        "navigation": "Navegación",
+        "support": "Soporte",
+        "legal": "Legal",
+        "followUs": "Síguenos",
+        "privacyPolicy": "Política de Privacidad",
+        "termsOfUse": "Términos de Uso",
+        "enterYourEmail": "Introduce tu correo electrónico",
+        "links": {
+            "navigation": "Navegación",
+            "home": "Inicio",
+            "aboutUs": "Sobre Nosotros",
+            "career": "Carrera",
+            "features": "Características",
+            "blog": "Blog",
+            "support": "Soporte",
+            "helpCenter": "Centro de Ayuda",
+            "faq": "FAQ",
+            "waitingList": "Lista de Espera",
+            "pricingExperience": "Experiencia de Precios",
+            "contactUs": "Contáctanos",
+            "legal": "Legal",
+            "privacyPolicy": "Política de Privacidad",
+            "termsAndConditions": "Términos y Condiciones"
+        },
+        "social": {
+            "facebook": "Facebook",
+            "instagram": "Instagram",
+            "linkedin": "LinkedIn",
+            "youtube": "YouTube"
+        },
+        "footerBottom": {
+            "privacyPolicy": "Política de Privacidad",
+            "termsOfUse": "Términos de Uso",
+            "copyright": "2024 Todos los Derechos Reservados"
+        }
     }
 }
diff --git a/messages/fr.json b/messages/fr.json
@@ -1,4 +1,13 @@
 {
+    "navbar": {
+        "login": "Se connecter",
+        "register": "Commencer"
+    },
+    "navLinks": {
+        "home": "Accueil",
+        "pricing": "Tarification",
+        "careers": "Carrières"
+    },
     "HomePage": {
         "title": "Bonjour le monde !"
     },
@@ -22,5 +31,56 @@
         "scalableDescription": "Notre modèle est conçu pour évoluer avec votre produit. Ajoutez facilement de nouvelles fonctionnalités selon vos besoins.",
         "easyTitle": "Personnalisation Facile",
         "easyDescription": "Adaptez l'expérience à vos besoins et préférences spécifiques pour des résultats maximaux."
+    },
+    "testimonials": {
+        "title": "Témoignages de Clients",
+        "description": "Ne vous fiez pas seulement à notre parole : découvrez ce que les utilisateurs réels de notre produit ont à dire sur leur expérience.",
+        "content": "J'utilise ce service d'hébergement web depuis plus d'un an et je suis vraiment impressionné par le temps de disponibilité et le support. Le site web n'est jamais tombé et le service client est toujours rapide pour aider avec les problèmes que j'ai. Je recommande vivement !"
+    },
+    "perfectFit": {
+        "title": "Trouvez la Solution Parfaite",
+        "description": "Choisissez le plan de modèle qui correspond le mieux aux besoins et au budget de votre projet. Tous les plans incluent l'accès à notre bibliothèque complète de sections pré-construites et à la personnalisation par glisser-déposer.",
+        "cta": "Voir Notre Plan Tarifaire"
+    },
+    "footer": {
+        "boilerplate": "Gabarit",
+        "address": "Détails du logo et adresse",
+        "newsletterSignUp": "Inscrivez-vous à la Newsletter",
+        "subscribe": "S'abonner",
+        "navigation": "Navigation",
+        "support": "Support",
+        "legal": "Légal",
+        "followUs": "Suivez-nous",
+        "privacyPolicy": "Politique de Confidentialité",
+        "termsOfUse": "Conditions d'Utilisation",
+        "enterYourEmail": "Entrez votre e-mail",
+        "links": {
+            "navigation": "Navigation",
+            "home": "Accueil",
+            "aboutUs": "À Propos de Nous",
+            "career": "Carrière",
+            "features": "Fonctionnalités",
+            "blog": "Blog",
+            "support": "Support",
+            "helpCenter": "Centre d'Aide",
+            "faq": "FAQ",
+            "waitingList": "Liste d'Attente",
+            "pricingExperience": "Expérience Tarifaire",
+            "contactUs": "Contactez-nous",
+            "legal": "Légal",
+            "privacyPolicy": "Politique de Confidentialité",
+            "termsAndConditions": "Conditions Générales"
+        },
+        "social": {
+            "facebook": "Facebook",
+            "instagram": "Instagram",
+            "linkedin": "LinkedIn",
+            "youtube": "YouTube"
+        },
+        "footerBottom": {
+            "privacyPolicy": "Politique de Confidentialité",
+            "termsOfUse": "Conditions d'Utilisation",
+            "copyright": "2024 Tous Droits Réservés"
+        }
     }
 }
diff --git a/src/components/layouts/footer/footer.test.tsx b/src/components/layouts/footer/footer.test.tsx
@@ -1,12 +1,12 @@
 import Footer from ".";
 
-import { render } from "~/test/utils";
+import { renderWithIntl } from "~/test/utils";
 
 describe("page tests", () => {
   it("footer renders", () => {
     expect.assertions(1);
 
-    const view = render(<Footer />);
+    const view = renderWithIntl(<Footer />);
 
     expect(view.baseElement).toBeInTheDocument();
   });

diff --git a/src/components/layouts/footer/index.tsx b/src/components/layouts/footer/index.tsx
@@ -9,6 +9,7 @@ import {
   XIcon,
   Youtube,
 } from "lucide-react";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useState } from "react";
 
@@ -23,6 +24,14 @@ const Footer = () => {
   const [email, setEmail] = useState("");
   const [loading, setLoading] = useState(false);
   const { toast } = useToast();
+  const t = useTranslations("footer");
+  const locale = localStorage.getItem("preferredLanguage");
+  const toastDesc =
+    locale === "fr"
+      ? "Veuillez fournir votre e-mail"
+      : locale === "es"
+        ? "Por favor, proporcione su correo electrónico"
+        : "Please provide your email";
 
   // handle submit
   const handleSubmit = async () => {
@@ -31,7 +40,7 @@ const Footer = () => {
     if (email === "") {
       toast({
         title: "Error",
-        description: "Please provide your email",
+        description: toastDesc,
         variant: "destructive",
       });
       setLoading(false);
@@ -80,30 +89,30 @@ const Footer = () => {
 
   const footerLinks = [
     {
-      title: "Navigation",
+      title: t("navigation"),
       links: [
-        { route: "Home", link: "/" },
-        { route: "About us", link: "/about-us" },
-        { route: "Career", link: "/career" },
-        { route: "Features", link: "/" },
-        { route: "Blog", link: "/blog" },
+        { route: "home", link: "/" },
+        { route: "aboutUs", link: "/about-us" },
+        { route: "career", link: "/career" },
+        { route: "features", link: "/" },
+        { route: "blog", link: "/blog" },
       ],
     },
     {
-      title: "Support",
+      title: t("support"),
       links: [
-        { route: "Help center", link: "/help-center" },
-        { route: "FAQ", link: "/faqs" },
-        { route: "Waiting List", link: "/waitlist" },
-        { route: "Pricing Experience", link: "/pricing" },
-        { route: "Contact Us", link: "/contact-us" },
+        { route: "helpCenter", link: "/help-center" },
+        { route: "faq", link: "/faqs" },
+        { route: "waitingList", link: "/waitlist" },
+        { route: "pricingExperience", link: "/pricing" },
+        { route: "contactUs", link: "/contact-us" },
       ],
     },
     {
-      title: "Legal",
+      title: t("legal"),
       links: [
-        { route: "Privacy Policy", link: "/privacy-policy" },
-        { route: "Terms and condition", link: "/terms-and-conditions" },
+        { route: "privacyPolicy", link: "/privacy-policy" },
+        { route: "termsAndConditions", link: "/terms-and-conditions" },
       ],
     },
   ];
@@ -132,8 +141,8 @@ const Footer = () => {
   ];
 
   const footerBottom = [
-    { route: "Privacy Policy", link: "/" },
-    { route: "Terms of Use", link: "/" },
+    { route: "privacyPolicy", link: "/" },
+    { route: "termsOfUse", link: "/" },
   ];
 
   //
@@ -153,7 +162,7 @@ const Footer = () => {
             </div>
             <div className="flex flex-col items-center justify-center md:block lg:hidden">
               <h5 className="text-neurtal-dark-2 text-md mb-4 text-center font-semibold sm:text-left md:mb-[36px]">
-                Sign Up For Newsletters
+                {t("newsletterSignUp")}
               </h5>
               <div className="item flex h-[46px] w-full items-center justify-start md:max-w-[283px]">
                 <Input
@@ -194,7 +203,7 @@ const Footer = () => {
                             href={item.link}
                             className="text-md cursor-pointer text-neutral-dark-2 transition-colors duration-300 hover:text-primary hover:underline dark:text-white"
                           >
-                            {item.route}
+                            {t(`links.${item.route}`)}
                           </Link>
                         </li>
                       );
@@ -206,12 +215,12 @@ const Footer = () => {
 
             <div className="hidden lg:block">
               <h5 className="text-neurtal-dark-2 text-md mb-4 font-semibold md:mb-[36px]">
-                Sign Up For Newsletter
+                {t("newsletterSignUp")}
               </h5>
               <div className="item flex h-[46px] w-full max-w-[283px] items-center justify-start">
                 <Input
                   className="border-r-none h-[46px] rounded-r-none border-r-0 border-r-transparent bg-transparent active:border-transparent"
-                  placeholder="Enter your email"
+                  placeholder={t("enterYourEmail")}
                   onChange={(event) => setEmail(event.target.value)}
                   value={email}
                 />
@@ -226,15 +235,15 @@ const Footer = () => {
                       <LoadingSpinner className="size-4 animate-spin sm:size-5" />
                     </span>
                   ) : (
-                    "Subscibe"
+                    `${t("subscribe")}`
                   )}
                 </CustomButton>
               </div>
             </div>
 
             <div className="lg:hidden">
               <h5 className="text-neurtal-dark-2 mb-[10px] text-[20px] font-semibold">
-                Follow Us
+                {t("followUs")}
               </h5>
               <div className="flex w-full max-w-[116px] items-center justify-between gap-1 md:max-w-[212px]">
                 {socialLinks.map((item, index) => {
@@ -271,7 +280,7 @@ const Footer = () => {
           </div>
           <span className="flex items-center justify-center text-center text-xs font-semibold text-stroke-colors-stroke">
             <Copyright className="h-5 w-5 text-stroke-colors-stroke" />
-            2024 All Rights Reserved
+            {t("footerBottom.copyright")}
           </span>
           <div className="hidden lg:block">
             <ul className="flex items-center justify-between gap-[13px]">
@@ -282,7 +291,7 @@ const Footer = () => {
                       href={item.link}
                       className="cursor-pointer text-sm text-neutral-dark-2 transition-colors duration-300 hover:text-primary hover:underline"
                     >
-                      {item.route}
+                      {t(`footerBottom.${item.route}`)}
                     </Link>
                   </li>
                 );