From 73a1c521d5c4050c35777e9601ca69cfdc2dd99d Mon Sep 17 00:00:00 2001
From: Kshitij <160704796+kshitij-ka@users.noreply.github.com>
Date: Fri, 27 Jun 2025 00:00:33 +0530
Subject: [PATCH] Performed translation for some components in ./src

- Footer.jsx
- Sidebar.jsx

Also, added key:value pairs (English + French for now) for all the text in src/locales. Need to perform translation for FileList.jsx & FileUploadModal.jsx. Will do once backend is accessible again.
---
 Frontend/src/components/Footer.jsx  | 41 +++++++++++++++--------------
 Frontend/src/components/Sidebar.jsx | 18 +++++++------
 Frontend/src/locales/en.json        | 31 +++++++++++++++++++++-
 Frontend/src/locales/fr.json        | 31 +++++++++++++++++++++-
 4 files changed, 91 insertions(+), 30 deletions(-)

diff --git a/Frontend/src/components/Footer.jsx b/Frontend/src/components/Footer.jsx
index 528c0c5..82a7ae0 100644
--- a/Frontend/src/components/Footer.jsx
+++ b/Frontend/src/components/Footer.jsx
@@ -8,15 +8,17 @@ import {
   Phone,
   MapPin,
 } from "lucide-react";
+import { useTranslation } from "react-i18next"; // for multilinguality
 
 const Footer = () => {
+  const { t } = useTranslation(); // for multilinguality
   const [email, setEmail] = useState("");
 
   //Currently storing user email in localstorage
   const handleSubscribe = () => {
     if (email.trim() !== "") {
       localStorage.setItem("subscribedEmail", email);
-      alert("You have successfully subscribed!");
+      alert(t("subscribe_success")); 
       setEmail("");
     }
   };
@@ -42,10 +44,10 @@ const Footer = () => {
                   />
                 </svg>
               </div>
-              <h3 className="text-2xl font-bold text-white">Skycrate</h3>
+              <h3 className="text-2xl font-bold text-white">{t("footer_brand")}</h3>
             </div>
             <p className="text-white/90">
-              Your secure cloud storage solution for all your digital needs.
+              {t("footer_tagline")}
             </p>
             <div className="flex space-x-4">
               <a
@@ -81,14 +83,14 @@ const Footer = () => {
 
           {/* Quick Links */}
           <div>
-            <h4 className="font-semibold text-white mb-4">Quick Links</h4>
+            <h4 className="font-semibold text-white mb-4">{t("footer_quick_links")}</h4>
             <ul className="space-y-2">
               <li>
                 <a
                   href="#about"
                   className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
                 >
-                  About Us
+                  {t("footer_about_us")}
                 </a>
               </li>
               <li>
@@ -96,7 +98,7 @@ const Footer = () => {
                   href="#features"
                   className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
                 >
-                  Features
+                  {t("footer_features")}
                 </a>
               </li>
               <li>
@@ -104,7 +106,7 @@ const Footer = () => {
                   href="#howItWorks"
                   className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
                 >
-                  How It Works
+                  {t("footer_how_it_works")}
                 </a>
               </li>
             </ul>
@@ -112,43 +114,42 @@ const Footer = () => {
 
           {/* Contact Info */}
           <div>
-            <h4 className="font-semibold text-white mb-4">Contact</h4>
+            <h4 className="font-semibold text-white mb-4">{t("footer_contact")}</h4>
             <ul className="space-y-2">
               <li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
                 <Mail className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
-                support@drivethru.com
+                {t("footer_email")}
               </li>
               <li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
                 <Phone className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
-                +91 3628206234
+                {t("footer_phone")}
               </li>
               <li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
                 <MapPin className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
-                123 Cloud Street, Digital City
+                {t("footer_address")}
               </li>
             </ul>
           </div>
 
           {/* Newsletter */}
           <div>
-            <h4 className="font-semibold text-white mb-4">Stay Updated</h4>
+            <h4 className="font-semibold text-white mb-4">{t("footer_newsletter_title")}</h4>
             <p className="text-white/90 mb-4">
-              Get exclusive tips, updates on new features, and special offers
-              directly in your inbox.
+              {t("footer_newsletter_desc")}
             </p>
             <div className="space-y-4">
               <input
                 type="email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                placeholder="Enter your email"
+                placeholder={t("footer_newsletter_placeholder")}
                 className="w-full px-4 py-2 rounded-md bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:bg-white/20 transition-all duration-200 outline-none focus:ring-2 focus:ring-white/30"
               />
               <button
                 onClick={handleSubscribe}
                 className="w-full px-4 py-2 rounded-md bg-white text-blue-600 font-medium hover:bg-opacity-90 transition-all duration-200 transform hover:scale-105"
               >
-                Subscribe to Newsletter
+                {t("footer_newsletter_button")}
               </button>
             </div>
           </div>
@@ -158,25 +159,25 @@ const Footer = () => {
 
         {/* Bottom Section */}
         <div className="flex flex-col md:flex-row justify-between items-center text-white/90 text-sm">
-          <p>© {new Date().getFullYear()} Skycrate. All rights reserved.</p>
+          <p>© {new Date().getFullYear()} {t("footer_brand")}. {t("footer_rights")}</p>
           <div className="flex gap-4 mt-4 md:mt-0">
             <a
               href="#"
               className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
             >
-              Privacy Policy
+              {t("footer_privacy_policy")}
             </a>
             <a
               href="#"
               className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
             >
-              Terms of Service
+              {t("footer_terms_of_service")}
             </a>
             <a
               href="#"
               className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
             >
-              Cookie Policy
+              {t("footer_cookie_policy")}
             </a>
           </div>
         </div>
diff --git a/Frontend/src/components/Sidebar.jsx b/Frontend/src/components/Sidebar.jsx
index 540fe82..50c2b8c 100644
--- a/Frontend/src/components/Sidebar.jsx
+++ b/Frontend/src/components/Sidebar.jsx
@@ -1,15 +1,17 @@
 import { useState, useEffect, useRef } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { toast } from "react-hot-toast";
+import { useTranslation } from "react-i18next"; // for multilinguality
 
 const Sidebar = () => {
+  const { t } = useTranslation(); // for multilinguality
   const navigate = useNavigate(); // Hook for programmatic navigation
   const [userMenuOpen, setUserMenuOpen] = useState(false);
   const menuRef = useRef();
 
   // Show loading toast and perform logout
   const handleLogout = () => {
-    const loadingToast = toast.loading("Logging out...");
+    const loadingToast = toast.loading(t("sidebar_logging_out"));
 
     // Simulate a delay (for example, network request)
     setTimeout(() => {
@@ -23,7 +25,7 @@ const Sidebar = () => {
 
       // Show success toast after logout
       toast.update(loadingToast, {
-        render: "Logged out successfully!",
+        render: t("sidebar_logged_out"),
         type: "success",
         isLoading: false,
         autoClose: 2000,
@@ -55,7 +57,7 @@ const Sidebar = () => {
               type="button"
               className="inline-flex items-center p-2 text-lg text-white rounded-lg sm:hidden hover:bg-[#37A0EA] focus:outline-none"
             >
-              <span className="sr-only">Open sidebar</span>
+              <span className="sr-only">{t("sidebar_open_sidebar")}</span>
               <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                 <path
                   clipRule="evenodd"
@@ -67,7 +69,7 @@ const Sidebar = () => {
             <Link to="/" className="flex ms-2 md:me-24">
               <img src="./image.png" className="h-8 me-3" alt="Skycrate Logo" />
               <span className="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap">
-                Skycrate
+                {t("sidebar_brand")}
               </span>
             </Link>
           </div>
@@ -84,11 +86,11 @@ const Sidebar = () => {
                 onClick={() => setUserMenuOpen((o) => !o)}
                 className="flex text-lg bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300"
               >
-                <span className="sr-only">Open user menu</span>
+                <span className="sr-only">{t("sidebar_open_user_menu")}</span>
                 <img
                   className="w-8 h-8 rounded-full"
                   src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
-                  alt="User Photo"
+                  alt={t("sidebar_user_photo")}
                 />
               </button>
 
@@ -109,7 +111,7 @@ const Sidebar = () => {
                         className="w-full text-left px-4 py-2 text-lg text-white hover:bg-[#37A0EA]"
                         role="menuitem"
                       >
-                        Log out
+                        {t("sidebar_logout")}
                       </button>
                     </li>
                   </ul>
@@ -139,7 +141,7 @@ const Sidebar = () => {
                 >
                   <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z" />
                 </svg>
-                <span className="ms-3">Starred</span>
+                <span className="ms-3">{t("sidebar_starred")}</span>
               </Link>
             </li>
             {/* ...additional sidebar items... */}
diff --git a/Frontend/src/locales/en.json b/Frontend/src/locales/en.json
index c0ad6f1..63f52f9 100644
--- a/Frontend/src/locales/en.json
+++ b/Frontend/src/locales/en.json
@@ -58,7 +58,36 @@
   "signup_failed": "Signup failed.",
   "folder_creation_failed": "Failed to create user folder.",
   "signup_success": "Successfully registered and folder created!",
-  "an_error_occurred": "An error occurred. Please try again."
+  "an_error_occurred": "An error occurred. Please try again.",
+
+  "footer_brand": "Skycrate",
+  "footer_tagline": "Your secure cloud storage solution for all your digital needs.",
+  "footer_quick_links": "Quick Links",
+  "footer_about_us": "About Us",
+  "footer_features": "Features",
+  "footer_how_it_works": "How It Works",
+  "footer_contact": "Contact",
+  "footer_email": "support@drivethru.com",
+  "footer_phone": "+91 3628206234",
+  "footer_address": "123 Cloud Street, Digital City",
+  "footer_newsletter_title": "Stay Updated",
+  "footer_newsletter_desc": "Get exclusive tips, updates on new features, and special offers directly in your inbox.",
+  "footer_newsletter_placeholder": "Enter your email",
+  "footer_newsletter_button": "Subscribe to Newsletter",
+  "subscribe_success": "You have successfully subscribed!",
+  "footer_rights": "All rights reserved.",
+  "footer_privacy_policy": "Privacy Policy",
+  "footer_terms_of_service": "Terms of Service",
+  "footer_cookie_policy": "Cookie Policy",
+
+  "sidebar_logging_out": "Logging out...",
+  "sidebar_logged_out": "Logged out successfully!",
+  "sidebar_open_sidebar": "Open sidebar",
+  "sidebar_brand": "Skycrate",
+  "sidebar_open_user_menu": "Open user menu",
+  "sidebar_user_photo": "User Photo",
+  "sidebar_logout": "Log out",
+  "sidebar_starred": "Starred"
 
 
 }
diff --git a/Frontend/src/locales/fr.json b/Frontend/src/locales/fr.json
index 94dd4e3..ea88722 100644
--- a/Frontend/src/locales/fr.json
+++ b/Frontend/src/locales/fr.json
@@ -57,7 +57,36 @@
   "signup_failed": "Échec de l'inscription.",
   "failed_create_folder": "Échec de la création du dossier utilisateur.",
   "signup_success": "Inscription réussie et dossier créé !",
-  "an_error_occurred": "Une erreur s'est produite. Veuillez réessayer."
+  "an_error_occurred": "Une erreur s'est produite. Veuillez réessayer.",
+
+  "footer_brand": "Skycrate",
+  "footer_tagline": "Votre solution de stockage cloud sécurisée pour tous vos besoins numériques.",
+  "footer_quick_links": "Liens rapides",
+  "footer_about_us": "À propos",
+  "footer_features": "Fonctionnalités",
+  "footer_how_it_works": "Comment ça marche",
+  "footer_contact": "Contact",
+  "footer_email": "support@drivethru.com",
+  "footer_phone": "+91 3628206234",
+  "footer_address": "123 Rue du Cloud, Ville Digitale",
+  "footer_newsletter_title": "Restez informé",
+  "footer_newsletter_desc": "Recevez des conseils exclusifs, des mises à jour sur les nouvelles fonctionnalités et des offres spéciales directement dans votre boîte de réception.",
+  "footer_newsletter_placeholder": "Entrez votre e-mail",
+  "footer_newsletter_button": "S'abonner à la newsletter",
+  "subscribe_success": "Vous vous êtes abonné avec succès !",
+  "footer_rights": "Tous droits réservés.",
+  "footer_privacy_policy": "Politique de confidentialité",
+  "footer_terms_of_service": "Conditions d'utilisation",
+  "footer_cookie_policy": "Politique relative aux cookies",
+
+  "sidebar_logging_out": "Déconnexion...",
+  "sidebar_logged_out": "Déconnecté avec succès !",
+  "sidebar_open_sidebar": "Ouvrir la barre latérale",
+  "sidebar_brand": "Skycrate",
+  "sidebar_open_user_menu": "Ouvrir le menu utilisateur",
+  "sidebar_user_photo": "Photo de l'utilisateur",
+  "sidebar_logout": "Se déconnecter",
+  "sidebar_starred": "Favoris"
 
 
 }