Responsive Navbar and Hero Section

client/src/App.js

@@ -1,13 +1,37 @@
-import React from 'react'
+import React, {useState} from 'react'
 import Home from './pages/home/Home.js'
+import Navbar from './components/navbar/Navbar.js'
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import Team from "./pages/team/Team"
+import Hero from './components/hero/Hero.js';
+
+export const VisibilityContext = React.createContext()
 
 const App = () => {
+
+    const [visibility, setVisibility] = useState(false)
+    const value = {visibility, setVisibility}
+
+    console.log(visibility)
+    // console.log("check")
+
     return (
-        <div>
-            {/* <h1>App</h1> */}
-            <Home />
-        </div>
-    )
+      <VisibilityContext.Provider value={value}>
+        <Router>
+          <Navbar visibility={visibility} />
+          <Switch>
+            <Route exact path="/">
+              <Home />
+            </Route>
+            <Route exact path="/team">
+              {/* <Home></Home> */}
+              <Team></Team>
+            </Route>
+          </Switch>
+        </Router>
+      </VisibilityContext.Provider>
+    );
+
 }
 
-export default App
+export default App

client/src/components/hero/Hero.css

@@ -7,31 +7,59 @@
 }
 
 .hero-container {
-  position: relative;
-  top: -52px;
-  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 110vh;
+  background-image: url("./assets/background-large.png");
+  background-repeat: no-repeat;
+  background-color: #fcfcfc;
+  background-size: cover;
+  background-position: center center;
+  font-family: "Raleway", sans-serif;
+  height: 95vh;
+  transform: translate(0,-9vh);
+  max-height: 100vh;
+  width: 100%;
 }
 
-.bg {
-  max-width: 100%;
-  z-index: -10;
+.hero-content{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 400px;
+  width: 80%;
+  margin-top: 6rem;
 }
 
-.hero-text {
-  position: relative;
-  top: -550px;
-  left: 170px;
-  color: #ff577e;
-  font-family: "Raleway", sans-serif;
-  height: 300px;
-  width: 300px;
-  line-height: 60px;
-  font-size: 1.5rem;
+.hero-content img{
+  width: 250px;
 }
 
-.head-logo {
-  position: relative;
-  top: -675px;
-  left: 100px;
-  width: 250px;
+.hero-text h1{
+  color: #ff697e;
+  font-size: 3.4rem;
+  font-weight: 400;
+}
+
+@media screen and (max-width:820px) {
+  .hero-container{
+    background: url("./assets//background-mobile.png") no-repeat center center fixed;
+    background-size: cover;
+    background-position: center center;
+  }
+}
+
+@media screen and (max-width:650px) {
+  .head-logo{
+    display: none;
+  }
+  .hero-content{
+    margin-top: 18rem;
+  }
+  .hero-text h1{
+  color: #ff697e;
+  font-size: 2.5rem;
+  font-weight: 400;
 }
+}

client/src/components/hero/Hero.js

@@ -1,22 +1,53 @@
-import React from 'react'
-
-// importing the bg
-import bg from './assets/Asset6.png'
+import React, {useState, useEffect, useRef, useContext} from 'react'
 
 import logo from './assets/logo.png'
+import {ReactComponent as BgSvg} from "./assets/background-large.svg"
 
 import "./Hero.css"
+import { VisibilityContext } from "../../App";
+
+
+const Hero = (props) => {
+
+    // const [isVisible, setIsVisible] = useState(false)
+    const logoRef = useRef(null)
+    const { visibility, setVisibility } = useContext(VisibilityContext);
+
+
+    const callback = (entries)=>{
+        const [entry] = entries
+        setVisibility(entry.isIntersecting)
+    }
+
+
+    let options = {
+        root: null,
+        rootMargin: "0px",
+        threshold: 0
+    }
+
+    useEffect(()=>{
+      const observer = new IntersectionObserver(callback, options);
+      if(logoRef.current) observer.observe(logoRef.current);
+
+        return ()=>{
+          if(logoRef.current) observer.unobserve(logoRef.current)
+        }
+
+    }, [options, logoRef])
 
-const Hero = () => {
     return (
-        <div className='hero-container'>
-            <img className='bg' src={bg} alt="" />
-            <img className='head-logo' src={logo} alt=""/>
+        <div className="hero-container">
+          <div className="hero-content">
+            <img ref={logoRef} className="head-logo" src={logo} alt="logo" />
             <div className="hero-text">
-                <h1>Streamlining Your Iot Needs</h1>
+              <h1>
+                Streamlining <br /> Your IOT <br /> Needs...
+              </h1>
             </div>
+          </div>
         </div>
-    )
+    );
 }
 
-export default Hero
+export default Hero

client/src/components/navbar/Navbar.css

@@ -1,65 +1,138 @@
 @import url("https://fonts.googleapis.com/css2?family=Work+Sans&display=swap");
 
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  scroll-behavior: smooth;
-}
-
-.nav-container {
-  top: 0;
-  left: 0;
+.navbar-container {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
+  align-items: center;
   position: fixed;
+  top: 0;
   width: 100%;
-  z-index: 10;
+  padding: 5px;
+  min-height: 70px;
+  z-index: 10000;
 }
 
-.nav-container a {
-  text-decoration: none;
-}
-
-.active {
-  color: #ff697e;
+.is-distinct {
+  box-shadow: 0px 14px 7px 0px #0000000f;
+  background: #f5f5f5;
 }
 
-.unselected {
-  color: #4564bf;
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 80%;
+  min-height: 60px;
 }
 
-.home {
-  margin: 0 75px 0 0;
+.nav-logo img {
+  width: 120px;
 }
 
-.about {
-  margin: 0 150px 0 0;
-}
-.nav-text {
+.nav-menu ul {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  font-size: 0.75rem;
+  list-style-type: none;
+}
+
+.nav-menu ul li {
+  margin: 0 1rem;
+  font-size: larger;
   font-family: "Work Sans", sans-serif;
-  color: #4564bf;
+  font-size: 1.3rem;
+  font-weight: 400;
 }
 
-.logo {
-  width: 140px;
-  margin: 10px 0 12px 62px;
-  visibility: hidden;
+.nav-menu ul a {
+  text-decoration: none;
+  color: #4564bf;
 }
 
-/*On  Scrollll */
-.nav-container.scroll {
-  background-color: #f5f5f5;
-  box-shadow: 0px 14px 7px 0px #0000000f;
-  position: fixed;
+.is-active li {
+  color: #ff577e;
 }
 
-.logo.scroll-logo {
-  width: 140px;
-  margin: 10px 0 12px 62px;
-  visibility: visible;
-}
+@media screen and (max-width: 500px) {
+  .is-distinct {
+    background: #ffffff;
+      box-shadow: 0 6px 4px -8px black;
+      z-index: 100;
+  }
+  .navbar {
+    width: 90%;
+  }
+  .nav-menu {
+    position: fixed;
+    right: 0;
+    top: 70.8px;
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.25);
+    height: 100vh;
+    width: 100vw;
+    transform: translate(0,-115%);
+    transition: all 0.5s ease;
+    z-index: -100;
+  }
+  .hide{
+    transform: translate(0);
+  }
+  .nav-menu ul {
+    flex-direction: column;
+    background: #ffffff;
+    align-items: flex-start;
+  }
+  .nav-menu ul a {
+    width: 100%;
+    line-height: 3rem;
+    margin-left: 1rem;
+  }
+  .hamburger-btn {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    right: 5px;
+    width: 35px;
+    height: 35px;
+    cursor: pointer;
+    transition: all 0.5s ease-in-out;
+    border-radius: 3px;
+    z-index: 10000;
+  }
+  .hamburger {
+    width: 28px;
+    height: 1.6px;
+    background: #000000;
+    border-radius: 5px;
+    transition: all 0.5s ease-in-out;
+  }
+  .hamburger::before,
+  .hamburger::after {
+    content: "";
+    position: absolute;
+    width: 28px;
+    height: 1.6px;
+    background: #000;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(255, 101, 47, 0.2);
+    transition: all 0.5s ease-in-out;
+  }
+  .hamburger::before {
+    transform: translateY(-10px);
+  }
+  .hamburger::after {
+    transform: translateY(10px);
+  }
+  .open .hamburger {
+    transform: translateX(-8px);
+    background: transparent;
+    box-shadow: none;
+  }
+  .open .hamburger::before {
+    transform: rotate(45deg) translate(5px, -5px);
+  }
+  .open .hamburger::after {
+    transform: rotate(-45deg) translate(5px, 5px);
+  }
+}