From 436cc1af37ec813b040921fd68af2f440c83623d Mon Sep 17 00:00:00 2001
From: Annu Priya <anuthisisme@gmail.com>
Date: Fri, 7 Oct 2022 03:06:00 +0530
Subject: [PATCH] Redirected to different sections using navbar buttons and
 footer travelgo icon

---
 src/App.css                    |  6 +++-
 src/components/Cover.js        |  2 +-
 src/components/Footer.js       |  4 ++-
 src/components/Navbar.css      | 63 ++++++++++++++++++++++++++++++++++
 src/components/Navbar.js       |  8 +++--
 src/components/Navbar2.js      | 50 +++++++++++++++++++++++++++
 src/components/Packages.js     |  2 +-
 src/components/ServiceStats.js |  2 +-
 8 files changed, 129 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Navbar.css
 create mode 100644 src/components/Navbar2.js

diff --git a/src/App.css b/src/App.css
index b9f5f08..8af9479 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,8 +6,12 @@ ul{
     list-style: none;
 }
 
-a {
+a{
     text-decoration: none;
     color: white;
+}
+
+a:hover{
     cursor: pointer;
+
 }
\ No newline at end of file
diff --git a/src/components/Cover.js b/src/components/Cover.js
index 9f2953a..1423b77 100644
--- a/src/components/Cover.js
+++ b/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>
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 3a0d5ae..1506340 100644
--- a/src/components/Footer.js
+++ b/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>
 
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
new file mode 100644
index 0000000..b1de068
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index e57dfb3..48004f7 100644
--- a/src/components/Navbar.js
+++ b/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`
diff --git a/src/components/Navbar2.js b/src/components/Navbar2.js
new file mode 100644
index 0000000..22aef39
--- /dev/null
+++ b/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>
+      </>
+    );
+}
\ No newline at end of file
diff --git a/src/components/Packages.js b/src/components/Packages.js
index 4ebb59e..2b24442 100644
--- a/src/components/Packages.js
+++ b/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>
diff --git a/src/components/ServiceStats.js b/src/components/ServiceStats.js
index 880b59e..93af252 100644
--- a/src/components/ServiceStats.js
+++ b/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>