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

@@ -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>

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... */}