Footer component

client/package.json

@@ -14,7 +14,7 @@
     "cors": "^2.8.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-icon": "^1.0.0",
+
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.4.0"
   },

client/src/App.jsx

@@ -1,3 +1,4 @@
+
 import React, { useEffect, useState, createContext } from "react"
 import {
   BrowserRouter as Router,
@@ -16,6 +17,7 @@ function App() {
   const [userFullName, setUserFullName] = useState("")
   const navigate = useNavigate()
 
+
   async function checkUser() {
     try {
       const token = localStorage.getItem("token")
@@ -56,6 +58,7 @@ function App() {
     // getFullname()
   }, [])
   return (
+
     <AppState.Provider value={{ user, setUser }}>
       <Routes>
         <Route path="/" element={<Landing />} />
@@ -66,6 +69,7 @@ function App() {
       </Routes>
     </AppState.Provider>
   )
+
 }
 
 export default App

client/src/Component/Footer/Footer.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import styles from "./Footer.module.css"; 
+import logo from "../Footer/Image/logo-footer.png"; 
+import { FaFacebook, FaInstagram, FaYoutube } from "react-icons/fa"; 
+
+const Footer = () => {
+  return (
+    <footer className={styles.footer}>
+      {/* Logo and Socials */}
+      <div className={styles.logoSection}>
+        <img src={logo} alt="Evangadi Logo" className={styles.logo} />
+        <div className={styles.iconsWrapper}>
+          <a href="https://www.facebook.com" aria-label="Facebook">
+            <FaFacebook className={styles.icon} />
+          </a>
+          <a href="https://www.instagram.com" aria-label="Instagram">
+            <FaInstagram className={styles.icon} />
+          </a>
+          <a href="https://www.youtube.com" aria-label="YouTube">
+            <FaYoutube className={styles.icon} />
+          </a>
+        </div>
+      </div>
+
+      {/* Useful Links */}
+      <div className={styles.linksSection}>
+        <h3>Useful Links</h3>
+        <ul>
+            <li>
+                <a href="#">How it works</a>
+            </li>
+          <li>
+            <a href="#">Terms of Service</a>
+          </li>
+          <li>
+            <a href="#">Privacy Policy</a>
+          </li>
+        </ul>
+      </div>
+
+      {/* Contact Info */}
+      <div className={styles.contactSection}>
+        <h3>Contact Info</h3>
+        <ul>
+          <li>
+            <a href="mailto:support@evangadi.com">support@evangadi.com</a>
+          </li>
+          <li>
+            <a href="tel:+12023862702">+1-202-386-2702</a>
+          </li>
+        </ul>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

client/src/Component/Footer/Footer.module.css

@@ -0,0 +1,65 @@
+.footer {
+  background-color: #222;
+  color: white;
+  padding: 40px 20px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  text-align: center;
+}
+
+.logoSection {
+  flex: 1;
+  min-width: 250px;
+}
+
+.logo {
+  width: 150px;
+  margin-bottom: 10px;
+}
+
+.iconsWrapper {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+}
+
+.icon {
+  color: white;
+  font-size: 24px;
+  transition: 0.3s;
+}
+
+.icon:hover {
+  color: #f4a261;
+}
+
+.linksSection,
+.contactSection {
+  flex: 1;
+  min-width: 250px;
+}
+
+h3 {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+ul li {
+  margin: 5px 0;
+}
+
+ul li a {
+  color:#5F7888;
+  text-decoration: none;
+  transition: 0.3s;
+}
+
+ul li a:hover {
+  color: #f4a261;
+}

client/src/Component/Header/Header.jsx

@@ -1,3 +1,4 @@
+
 import React, { useContext, useState } from "react"
 import { Link, useNavigate } from "react-router-dom"
 import style from "./Header.module.css"
@@ -28,6 +29,7 @@ function Header() {
           {" "}
           {user.username ? "LOG OUT" : "SIGN IN"}
           {console.log(user.username ? "yes" : "no")}
+
         </button>
       </div>
     </header>