React-router-dom

package.json

@@ -16,7 +16,7 @@
     "react-icons": "^4.7.1",
     "react-lazy-load": "^4.0.1",
     "react-on-screen": "^2.1.1",
-    "react-router-dom": "^6.8.0",
+    "react-router-dom": "^6.8.1",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.1",
     "react-slick": "^0.29.0",

src/App.jsx

@@ -11,23 +11,36 @@ import Glimpse from "./components/Glimpse/Glimpse";
 import Signup from "./components/Signup/Signup";
 import Registration from "./components/registration/registration";
 import { render } from "@testing-library/react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import HomePage from "./components/HomePage";
+
 const App = () => {
 
   return (
-    <div >
-        {/* <div className="loader" ref={divRef}>
-        </div> */}
-        <NavBar/>
-        <Home/>
-        <About />
-        <Event />
-        {/* <Team /> */}
-        {/* <Sponsor /> */}
-        <Glimpse />
-      <Signup/>
-      <Registration/>
-        <Footer />
+    <div>
+      <NavBar/>
+    <BrowserRouter>
+
+    <Routes>
+      <Route path="/" element={<HomePage/>}/>
+      <Route path="/signup" element={<Signup/>}/>
+      <Route path="/registration" element={<Registration/>}/>
+      </Routes>
+      </BrowserRouter>
+
     </div>
   );
 };
 export default App;
+
+
+      //   <NavBar/>
+      //   <Home/>
+      //   <About />
+      //   <Event />
+      //   <Team /> 
+      //   <Sponsor /> 
+      //   <Glimpse />
+      // <Signup/>
+      // <Registration/>
+      // <Footer />

src/components/Events/Event.jsx

@@ -63,7 +63,7 @@ function Event() {
   ];
   return(
 
-    <section className="container" id="event">
+    <section className="container" id="Events">
 
       <div className="heading head mx-auto d-flex align-items-center justify-content-center">
           <h2

src/components/Home/Home.jsx

@@ -2,6 +2,7 @@ import React,{useEffect,useRef} from "react";
 import "./Home.css";
 import IMG from "../../assets/logo.svg";
 import Title from "../../assets/title.png";
+import { NavBar } from "../Nav/NavBar";
 const Home = () => {
 
   const vidRef = useRef(null);
@@ -15,8 +16,9 @@ const Home = () => {
 
 
   return (
+
     <section id="home">
-
+      {/* <NavBar/> */}
       <div className="container home__container">
         <div className="home__content">
           <div className="home__title">

src/components/HomePage.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { NavBar } from './Nav/NavBar';
+import Home from './Home/Home';
+import About from './About/About';
+import Event from './Events/Event';
+import Glimpse from './Glimpse/Glimpse';
+import Sponsor from './Sponsor/Sponsor';
+import Team from './Team/Team';
+import Footer from './Footer/Footer';
+
+const HomePage = () => {
+  return (
+    <div>
+      {/* <NavBar/> */}
+      <Home/>
+      <About/>
+      <Event/>
+      <Sponsor/>
+      <Team/>
+      <Glimpse/>
+      <Footer/>
+    </div>
+  )
+}
+
+export default HomePage

src/components/Nav/NavBar.jsx

@@ -41,35 +41,35 @@ export const NavBar = () => {
           </Navbar.Toggle>
           <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="ms-auto">
-              <Nav.Link
+              {/* <Nav.Link
                 href="#home"
                 className={
                   activeLink === "home" ? "active navbar-link" : "navbar-link"
                 }
                 onClick={() => onUpdateActiveLink("home")}
               >
                 Home
-              </Nav.Link>
+              </Nav.Link> */}
               <Nav.Link
-                href="#About"
+                href="/#About"
                 className={
                   activeLink === "About" ? "active navbar-link" : "navbar-link"
                 }
                 onClick={() => onUpdateActiveLink("About")}
               >
                 About
               </Nav.Link>
-              {/* <Nav.Link
-                href="#"
+              <Nav.Link
+                href="/#Events"
                 className={
                   activeLink === "Events" ? "active navbar-link" : "navbar-link"
                 }
                 onClick={() => onUpdateActiveLink("Events")}
               >
                 Events
-              </Nav.Link> */}
+              </Nav.Link>
               <Nav.Link
-                href="#Glimpse"
+                href="/#Glimpse"
                 className={
                   activeLink === "Glimpse"
                     ? "active navbar-link"
@@ -79,8 +79,8 @@ export const NavBar = () => {
               >
                 Glimpse
               </Nav.Link>
-              {/* <Nav.Link
-                href="#sponser"
+              <Nav.Link
+                href="/#sponser"
                 className={
                   activeLink === "Sponser"
                     ? "active navbar-link"
@@ -91,23 +91,23 @@ export const NavBar = () => {
                 Sponser
               </Nav.Link>
               <Nav.Link
-                href="#"
+                href="/signup"
                 className={
-                  activeLink === "Signup" ? "active navbar-link" : "navbar-link"
+                  activeLink === "signup" ? "active navbar-link" : "navbar-link"
                 }
-                onClick={() => onUpdateActiveLink("signup")}
+                onClick={() => onUpdateActiveLink("/signup")}
               >
                 SignUp
               </Nav.Link>
               <Nav.Link
-                href="#"
+                href="/signup"
                 className={
-                  activeLink === "Signup" ? "active navbar-link" : "navbar-link"
+                  activeLink === "signup" ? "active navbar-link" : "navbar-link"
                 }
-                onClick={() => onUpdateActiveLink("signup")}
+                onClick={() => onUpdateActiveLink("/signup")}
               >
                 <FiShoppingCart />
-              </Nav.Link> */}
+              </Nav.Link>
             </Nav>
           </Navbar.Collapse>
         </Container>

src/components/Sponsor/Sponsor.jsx

@@ -3,7 +3,7 @@ import "./Sponsor.css";
 
 function Sponsor() {
   return (
-    <Carousel id="sponser">
+    <section id="sponser">
       <div className="heading">
         <h2
           className="abouthead"
@@ -16,6 +16,7 @@ function Sponsor() {
         </h2>
         <h2 className="front-text"> Sponsor</h2>
       </div>
+      <Carousel>
       <Carousel.Item interval={2000}>
         <img
           className="mx-auto c-block"
@@ -43,29 +44,23 @@ function Sponsor() {
           src="assests/Sponsor/GOLD-SPONSOR.png"
           alt="Fourth slide"
         />
-        <Carousel.Item interval={2000}>
-          <img
-            className="mx-auto d-block"
-            src="assests/Sponsor/SILVER-SPONSOR.png"
-            alt="Fifth slide"
-          />
-        </Carousel.Item>
       </Carousel.Item>
       <Carousel.Item interval={2000}>
         <img
           className="mx-auto d-block"
           src="assests/Sponsor/SILVER-SPONSOR.png"
-          alt="sixth slide"
+          alt="Fifth slide"
         />
       </Carousel.Item>
       <Carousel.Item interval={2000}>
         <img
           className="mx-auto d-block"
           src="assests/Sponsor/BRONZE-SPONSOR.png"
-          alt="Seventh slide"
+          alt="Sixth slide"
         />
       </Carousel.Item>
-    </Carousel>
+      </Carousel>
+    </section>
   );
 }