Made pages in Home/ directory multilingual:

- Cards.jsx
- Customization.jsx
- Footer.jsx
- Hero.jsx
- Hero2.jsx
- HomePage.jsx

Also added language key:values for en and fr in locales.

Frontend/src/pages/Home/Customization.jsx

@@ -1,6 +1,13 @@
 import React from "react";
+import { t } from "../../service/translation";
+import { useOutletContext } from "react-router-dom";
+
+const Customization = (props) => {
+  // Get language from context if available, else from props, default to "en"
+  const outletContext = useOutletContext?.();
+  const language =
+    (outletContext && outletContext.language) || props.language || "en";
 
-const Customization = () => {
   return (
     <>
       <section
@@ -11,25 +18,20 @@ const Customization = () => {
           <div className="container mx-auto flex flex-col justify-around h-full w-full md:py-10">
             <div className="text-center md:text-start flex flex-col justify-around h-full">
               <h2 className="text-xl font-bold mb-4 text-yellow-600">
-                CUSTOMIZE WITH YOUR SCHEDULE
+                {t("customization_schedule", language)}
               </h2>
               <h1 className="text-2xl md:text-4xl md:font-extrabold font-bold mb-4">
-                Talented and Qualified Tutors to Serve You for Help
+                {t("customization_tutors_title", language)}
               </h1>
               <p className="text-base mb-8">
-                Our scheduling system allows you to select based on free time.
-                Lorem ipsum demo text for template. Keep track of your students
-                class and tutoring schedules, and never miss your lectures. The
-                best online class scheduling system with easy accessibility.
-                Lorem ipsum is a placeholder text commonly used to demonstrate
-                the visual form
+                {t("customization_paragraph", language)}
               </p>
               <div className="flex gap-4 justify-center md:justify-start">
                 <button
                   type="button"
                   className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
                 >
-                  Get started
+                  {t("customization_get_started", language)}
                 </button>
               </div>
             </div>
@@ -38,7 +40,7 @@ const Customization = () => {
             <img
               src="/images/interaction2.png"
               className="w-full h-auto"
-              alt=""
+              alt={t("customization_image_alt", language)}
             />
           </div>
         </div>
@@ -48,3 +50,4 @@ const Customization = () => {
 };
 
 export default Customization;
+