While I try to Add my About Us page link in NAVBAR and then add that in the app.jsx the home page gets mixed with it and somehow it is a bit messy Like when I don’t add the navbar links it works perfectly fine but when I try to add
for eg I tried to add in the Home section of my Navbar i.e the AboutUs sub one in home section
I get the error of that the about page style gets overlapped with my Home page

NAVBAR Image please Refer this Image for your reference

Here is the code for both

Navbar.jsx

import React, { useEffect, useState } from 'react';
import './Navbar.css'; // Import the CSS file
import gsap from 'gsap'; // Make sure gsap is installed and imported
import { Link, useLocation } from 'react-router-dom';

const Navbar = () => {
  const location = useLocation();
  const [menu, setMenu] = useState(location.pathname);

  useEffect(() => {
    const nav = document.querySelector('nav');

    const handleMouseEnter = () => {
      let tl = gsap.timeline();
      
      tl.to("#nav-bottom", {
        height: "21vh",
        duration: 0.5
      })
      .to(".nav-part2 h5", {
        display: "block",
        duration: 0.1
      })
      .to(".nav-part2 h5 span", {
        y: 0,
        stagger: {
          amount: 0.5
        }
      });
    };

    const handleMouseLeave = () => {
      let tl = gsap.timeline();
      
      tl.to(".nav-part2 h5 span", {
        y: 25,
        stagger: {
          amount: 0.2
        }
      })
      .to(".nav-part2 h5", {
        display: "none",
        duration: 0.1
      })
      .to("#nav-bottom", {
        height: 0,
        duration: 0.2
      });
    };

    nav.addEventListener('mouseenter', handleMouseEnter);
    nav.addEventListener('mouseleave', handleMouseLeave);

    return () => {
      nav.removeEventListener('mouseenter', handleMouseEnter);
      nav.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, []);

  useEffect(() => {
    setMenu(location.pathname);
  }, [location]);

  return (
    <nav>
      <h1><span className="color3">CRAVE</span>Cart.</h1>
      <div className="nav-part2">
        <div className="nav-elem">
          <h4>Our Story</h4>
          <h5><span>Our Story</span></h5>
        </div>
        <div className="nav-elem">
          <h4><Link to="/" className={menu === '/' ? 'active' : ''} onClick={() => setMenu('/')}>Home</Link></h4>
          <h5><span><Link to="/about" className={menu === '/about' ? 'active' : ''} onClick={() => setMenu('/about')}>About Us</Link></span></h5>
          <h5><span>How It Works</span></h5>
          <h5><span>Blog</span></h5>
        </div>
        <div className="nav-elem">
          <h4>Mess</h4>
          <h5><span>Daily Specials</span></h5>
          <h5><span>Weekly Menu</span></h5>
          <h5><span>Meal Plans</span></h5>
          <h5><span>Student Discounts</span></h5>
        </div>
        <div className="nav-elem">
          <h4>Track Order</h4>
          <h5><span>Order Status</span></h5>
          <h5><span>Delivery Timeline</span></h5>
          <h5><span>Recent Orders</span></h5>
          <h5><span>Track with Map</span></h5>
        </div>
        <div className="nav-elem">
          <h4>Contact Us</h4>
          <h5><span>Customer Service</span></h5>
          <h5><span>Feedback</span></h5>
          <h5><span>FAQs</span></h5>
        </div>
        <div className="nav-elem">
          <h4>About Agency</h4>
          <h5><span>Our Team</span></h5>
        </div>
      </div>
        
      <button>
        Login
        <svg fill="none" viewBox="0 0 20 20">
          <path fill="#fff" d="M2.5 14.375V17.5h3.125l9.217-9.217-3.125-3.125L2.5 14.375Zm14.758-8.508a.83.83 0 0 0 0-1.175l-1.95-1.95a.83.83 0 0 0-1.175 0l-1.525 1.525 3.125 3.125 1.525-1.525Z"></path>
        </svg>
      </button>
      <div id="nav-bottom"></div>
    </nav>
  );
};

export default Navbar;

App.jsx

import React from 'react';
import Navbar from './components/Navbar/Navbar';
import Home from './pages/Home/Home';
import { Routes, Route } from 'react-router-dom';


function App() {
  return (
    <div className="App">
      <Navbar />
      <Routes>
        <Route path='/home' element={<Home />} />
        <Route path='/' element={<Home />} /> {/* Optional: Route for the home page */}
        
      </Routes>
    </div>
  );
}

export default App;

when I add the Route option for my About Us page It gets overlapped on the Home page