Shift Navbar to Top and Fix Section Alignment Issues for Enhanced UI

frontend/src/components/Events.jsx

@@ -23,7 +23,7 @@ const Events = () => {
     },
   ];
   return (
-    <div className="flex flex-col w-full my-12 px-4 md:px-12 lg:px-24">
+    <div className="flex flex-col w-full my-12 px-4 md:px-12 lg:px-24" id="event">
       <div className="w-fit text-white bg-black px-4 py-2 rounded-full mx-auto font-semibold sm:my-2">
         Stay Connected with Our
       </div>

frontend/src/components/Footer.jsx

@@ -39,7 +39,7 @@ export default function Footer() {
 
 
   return (
-    <footer className="bg-black text-white pt-8 pb-24">
+    <footer className="bg-black text-white pt-8 pb-24" id="join-us">
       <div className="container mx-auto flex flex-col md:flex-row justify-between items-center">
         {/* Social Media Section */}
         <div className="my-3">

frontend/src/components/Navbar.jsx

@@ -1,15 +1,86 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Sheet from "react-modal-sheet";
 import './style/Navbar.css';
 export default function Navbar() {
   const [spanStyle, setSpanStyle] = useState({ left: "0px", width: "95px" });
-  const widthMapping = [95, 94, 110, 115, 110];
+  const [widthMapping, setWidthMapping] = useState([95, 94, 110, 115, 110]);
+
+  // Handle screen resize and adjust widthMapping based on screen size
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 640) {
+        // For smaller screens (mobile)
+        setWidthMapping([70, 68, 80, 85, 80]); // Adjust these values as per design
+      } else {
+        // For larger screens (desktop)
+        setWidthMapping([95, 94, 110, 115, 110]);
+      }
+    };
+
+    // Call the function initially
+    handleResize();
+
+    // Listen for window resize
+    window.addEventListener("resize", handleResize);
+
+    // Clean up event listener on unmount
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   const handleHover = (index) => {
-    const leftPosition = index === 0 ? 0 : widthMapping.slice(0, index).reduce((a, b) => a + b, 0);
-    setSpanStyle({ left: `${leftPosition}px`, width: `${widthMapping[index]}px` });
+    const leftPosition =
+      index === 0 ? 0 : widthMapping.slice(0, index).reduce((a, b) => a + b, 0);
+    setSpanStyle({
+      left: `${leftPosition}px`,
+      width: `${widthMapping[index]}px`,
+    });
   };
   return (
-    <div className="relative z-50">
+    <div className="relative z-50"
+  <nav className="fixed top-5 left-1/2 transform -translate-x-1/2 w-[90%] sm:w-[524px] h-[50px] bg-[#4F46E5] rounded-lg flex justify-around sm:justify-center items-center">
+    <a
+      href="#"
+      className="relative inline-block text-white text-sm sm:text-base font-medium px-2 sm:px-6 z-10"
+      onMouseEnter={() => handleHover(0)}
+    >
+      Home
+    </a>
+    <a
+      href="#event"
+      className="relative inline-block text-white text-sm sm:text-base font-medium px-2 sm:px-6 z-10"
+      onMouseEnter={() => handleHover(1)}
+    >
+      Events
+    </a>
+    <a
+      href="#"
+      className="relative inline-block text-white text-sm sm:text-base font-medium px-2 sm:px-6 z-10"
+      onMouseEnter={() => handleHover(2)}
+    >
+      Resources
+    </a>
+    <a
+      href="#team"
+      className="relative inline-block text-white text-sm sm:text-base font-medium px-2 sm:px-6 z-10"
+      onMouseEnter={() => handleHover(3)}
+    >
+      Team
+    </a>
+    <a
+      href="#join-us"
+      className="relative inline-block text-white text-sm sm:text-base font-medium px-2 sm:px-6 z-10"
+      onMouseEnter={() => handleHover(4)}
+    >
+      Join Us
+    </a>
+    <span
+      className="absolute top-0 left-0 h-full bg-gradient-to-r from-[#222] to-[#BC3482] rounded-lg transition-all duration-500"
+      style={{ left: spanStyle.left, width: spanStyle.width }}
+    />
+  </nav>
+</div>
+
+=======
       <nav className="fixed bottom-5  transform -translate-x-1/2  bg-[#4F46E5] rounded-lg flex justify-center items-center navbar">
         <a
           href="#"

frontend/src/components/TeamSection.jsx

@@ -337,13 +337,23 @@ export default function TeamSection() {
   ];
 
   return (
+
+    <div class="flex flex-col w-full my-12 px-4 md:px-12 lg:px-24" > {/* Changed background to dark */}
+      {/* <div class="flex flex-col"> */}
+        <div class="flex flex-col mt-8" id="team">
+          <div class="container max-w-7xl px-4">
+            <div class="flex flex-wrap justify-center text-center mb-24">
+              <div class="w-full lg:w-6/12 px-4">
+                <h1 class="text-white text-4xl font-bold mb-8"> {/* Text color to white */}
+
     <div className="flex flex-col w-full my-12 px-4 md:px-12 lg:px-24">
       <div className="flex flex-col">
         <div className="flex flex-col mt-8">
           <div className="container max-w-7xl px-4">
             <div className="flex flex-wrap justify-center text-center mb-24">
               <div className="w-full lg:w-6/12 px-4">
                 <h1 className="text-white text-4xl font-bold mb-8">
+
                   Meet the Team
                 </h1>
                 <p className="text-gray-300 text-lg font-light">