Redirected to different sections using navbar buttons and travelgo icon

src/App.css

@@ -6,8 +6,12 @@ ul{
     list-style: none;
 }
 
-a {
+a{
     text-decoration: none;
     color: white;
+}
+
+a:hover{
     cursor: pointer;
+
 }

src/components/Cover.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 
 function Cover() {
   return (
-    <Container>
+    <Container id="home">
       <CoverImg src={require('../assets/cover.png')} alt="cover" />
       <CoverBody>
         <CoverTitle>Your Imagination Is</CoverTitle>

src/components/Footer.js

@@ -3,13 +3,15 @@ import styled from 'styled-components'
 import footerLogo from '../assets/footer-logo.svg'
 import appStore from '../assets/appstore.svg'
 import playStore from '../assets/playstore.svg'
+import {Link} from "react-scroll"
 
 function Footer() {
   return (
     <Container>
 
         <Left>
-          <Logo src={footerLogo} alt='' />
+        <Link to="home" smooth={true} duration={500} spy={true} exact="true">
+          <Logo src={footerLogo} alt='' /></Link>
           <LeftText>Book your trip in minute, get full Control for much longer</LeftText>
         </Left>
 

src/components/Navbar.css

@@ -0,0 +1,63 @@
+.navbar {
+  position: absolute;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 10vh;
+  background-color: rgba(9, 9, 9, 0.491);
+  backdrop-filter: blur(5px);
+
+  /* border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem; */
+  /* z-index: 100; */
+  /* border: 2px solid white; */
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  list-style: none;
+}
+
+.nav-item {
+  margin-left: 3rem;
+}
+
+.nav-linkers {
+  /* background-color: #444; */
+  color: rgb(245, 237, 237);
+  text-decoration: none;
+  /* font-family: "Oswald", sans-serif; */
+  /* font-family: "Dancing Script", cursive; */
+  font-size: 1.2rem;
+  opacity: 1;
+  transition-duration: 300ms;
+}
+.nav-linkers:hover {
+  color: #f40303ab;
+  /* backdrop-filter: blur(10px); */
+  opacity: 1;
+  font-size: 1.6rem;
+}
+
+.link--btns {
+  background: none;
+  border: none;
+}
+
+.home-linker {
+  color: #03e9f4;
+  opacity: 1;
+}
+.logo {
+  width: 5rem;
+  opacity: 0.6;
+}
+
+a {
+  cursor: "pointer";
+  color: white;
+}
+a:hover {
+  color: #f40303ab;
+}

src/components/Navbar.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
+import {Link} from "react-scroll"
 
 function Navbar() {
   return (
@@ -8,9 +9,9 @@ function Navbar() {
         <Logo src={require('../assets/TravelGo.png')} />
       </Left>
       <Center>
-        <a href='/'>Home</a>
-        <a href='/'>About Us</a>
-        <a href='/'>Packages</a>
+        <a><Link to="home" smooth={true} duration={500} spy={true} exact="true">Home</Link></a>
+        <a><Link to="aboutUs" smooth={true} duration={500} spy={true} exact="true">About Us</Link></a>
+        <a href='/'><Link to="packages" smooth={true} duration={500} spy={true} exact="true">Packages</Link></a>
       </Center>
       <Right>
         <Favourite src={require('../assets/favourite.png')} alt='Favourites' />
@@ -28,6 +29,7 @@ const Nav = styled.div`
   justify-content: space-around;
   width: 100%;
   height: 10vh;
+  z-index:12;
 `
 
 const Left = styled.div`

src/components/Navbar2.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Link } from 'react-scroll';
+import "./Navbar.css"
+import logo from "../assets/TravelGo.png"
+import fav from "../assets/favourite.png";
+import profile from "../assets/Profile.png"
+export default function Navbar() {
+  return (
+    <>
+    <div>
+      <nav className="navbar" id="home">
+        <div className="logos">
+          <img className="logo" src={logo} alt="logo" />
+        </div>
+        <ul className="nav-link">
+            <li className="nav-item">
+
+                <button className="nav-linkers link--btns" id="home--link"> <Link to="home">Home</Link></button>
+
+          </li>
+          <li className="nav-item">
+
+            <button className="nav-linkers link--btns" id="stocks--link" to="/aboutus"><Link to="stocks" smooth={true}
+                duration={500}
+                spy={true}
+                exact="true"
+                offset={-20} className="links">
+              About Us</Link>
+            </button>
+          </li>
+          <li className="nav-item">
+            {/* <a href="#" className="nav-linkers">About Us</a>  */}
+            <button className="nav-linkers link--btns" id="about--link"><Link to="packages" smooth={true}
+                duration={500}
+                spy={true}
+                exact="true"
+                offset={-20}>
+              Packages</Link>
+            </button>
+          </li>
+          <li>
+            <img src={fav}></img>
+            <img src={profile}></img>
+          </li>
+        </ul>
+      </nav>
+      </div>
+      </>
+    );
+}

src/components/Packages.js

@@ -5,7 +5,7 @@ import PackageSelect from './PackageSelect'
 
 function Packages() {
   return (
-    <Container>
+    <Container id="packages">
 
         <Title>Best Packages For You</Title>
         <Package>

src/components/ServiceStats.js

@@ -4,7 +4,7 @@ import StatsCard from './StatsCard'
 
 function ServiceStats() {
   return (
-    <Container>
+    <Container id="aboutUs">
         <CoverTitleu>We always try to give you</CoverTitleu>
         <CoverTitle>the best service</CoverTitle>
         <CoverTextu>We always try to make our customer Happy. We provide all kind of</CoverTextu>