improve navbar

src/Components/About.js

@@ -5,7 +5,7 @@ import { BsFillPlayCircleFill } from "react-icons/bs";
 
 const About = () => {
   return (
-    <div className="about-section-container">
+    <div className="about-section-container" id="about">
       <div className="about-background-image-container">
         <img src={AboutBackground} alt="" />
       </div>

src/Components/Contact.js

@@ -2,7 +2,7 @@ import React from "react";
 
 const Contact = () => {
   return (
-    <div className="contact-page-wrapper">
+    <div className="contact-page-wrapper " id="contact">
       <h1 className="primary-heading">Have Question In Mind?</h1>
       <h1 className="primary-heading">Let Us Help You</h1>
       <div className="contact-form-container">

src/Components/Navbar.js

@@ -16,6 +16,7 @@ import PhoneRoundedIcon from "@mui/icons-material/PhoneRounded";
 import ShoppingCartRoundedIcon from "@mui/icons-material/ShoppingCartRounded";
 import LuggageIcon from "@mui/icons-material/Luggage";
 import { Link } from "react-router-dom";
+import logo from "../Assets/tryvalleylogo.png"
 
 const Navbar = () => {
   const [openMenu, setOpenMenu] = useState(false);
@@ -33,50 +34,35 @@ const Navbar = () => {
       text: "Testimonials",
       icon: <CommentRoundedIcon />,
     },
-    {
-      text: "Plan Your Trip",
-      icon: <LuggageIcon />,
-      submenus: [
-        "18+",
-        "21+",
-        "Dog-Friendly",
-        "Family-Friendly",
-        "LGBTQIA+",
-        "Seniors",
-        "Young Adults",
-      ],
-    },
+
     {
       text: "Contact",
       icon: <PhoneRoundedIcon />,
     },
   ];
   return (
     <nav className="w-full  border border-gray-200 bg-[#F6E2C0] py-4 z-50 mb-4">
-      <div className="nav-logo-container">
-        <img src=" " alt="" />
+      <div className="nav-logo-container w-16 mx-8 text-8xl">
+        <img src={logo} alt="" />
       </div>
       <div className="navbar-links-container">
         <ul className="flex flex-wrap  items-center">
           <li>
             <Link to="/">Home</Link>
           </li>
           <li>
-            <Link to="/">About</Link>
+          <a href="#about">About</a>
           </li>
 
           <li>
-            <Link to="/events">Events</Link>
-          </li>
-          <li>
-            <Link to="/plan-your-trip">Plan Your Trip</Link>
+           <a href="#testimonial">Testimonials</a>
           </li>
           <li>
-            <Link to="/">Contact</Link>
+            <a href="#contact">Contact</a>
           </li>
           <li>
-            <Link to="/bookings">
-              <button className="primary-button">Bookings Now</button>
+            <Link to="/events">
+              <button className="primary-button">Go to Events</button>
             </Link>
           </li>
         </ul>

src/Components/Testimonial.js

@@ -4,7 +4,7 @@ import { AiFillStar } from "react-icons/ai";
 
 const Testimonial = () => {
   return (
-    <div className="work-section-wrapper ">
+    <div className="work-section-wrapper " id="testimonial">
       <div className="work-section-top ">
         <p className="primary-subheading">Testimonial</p>
         <h1 className="primary-heading">What They Are Saying</h1>

src/index.js

@@ -3,7 +3,6 @@ import ReactDOM from "react-dom/client";
 import App from "./App.js";
 import "./index.css";
 import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
-import PlanYourTrip from "./Components/PlanYourTrip.js";
 import Home from "./Components/Home.js";
 import Event from "./Components/Event.js";
 import eventData from "./data/events.json";
@@ -22,10 +21,7 @@ const appRouter = createBrowserRouter([
         path: "/events",
         element:<Event props={eventData}/>
       },
-      {
-        path:"/plan-your-trip",
-        element:<EventPlannerAi/>
-      },
+
       {
         path: "events/:eventId",
         element: <EventPlannerAi/>,