Banner

Author: Utkarsh742

src/assets/Images/main/headerBanner.png

@@ -13,14 +13,14 @@ import Footer from './footer/Footer'
 import DiscordDashboard from './discord/DiscordDashboard'
 import Blogs from './Blogs/Blogs'
 // import Advertisement from './advertisement/Advertisement'
-// import HeaderBanner from './header-banner/HeaderBanner'
+import HeaderBanner from './header-banner/HeaderBanner'
 
 const Home = () => {
 
     return (
         <>
             {/* <Advertisement /> */}
-            {/* <HeaderBanner/> */}
+            <HeaderBanner/>
             <Navbar />
             <Header />
             <Statistics />

src/assets/Images/main/headerBanner.svg

@@ -2,7 +2,7 @@ import React from 'react'
 import './headerBanner.css'
 
 import headerBannerImage from '../../assets/Images/main/headerBanner.svg'
-import headerBannerPhoneImage from '../../assets/Images/main/headerBannerPhone.svg'
+import headerBannerPhoneImage from '../../assets/Images/main/headerbannerphone.png'
 
 const HeaderBanner = () => {
     return (

src/assets/Images/main/headerbannerphone.png

@@ -20,13 +20,7 @@
     .headerImagePhone {
         display: block;
         width: 90%;
-        height: 100px;
+        height: 80px;
         /* display: none; */
     }
 }
-
-@media screen and (max-width:674px) {
-    .header-banner-container img{
-        /* height: 30px; */
-    }
-}

src/components/Home.js

@@ -88,7 +88,7 @@
 
 .header-right-image {
   margin-top: 40px;
-  animation: wave 4.6s infinite;
+  animation: wave 3.5s infinite;
   transition: smooth;
 }
 
@@ -106,7 +106,7 @@
 }
 .border-line {
   border-bottom: 1px solid #eaeaea;
-  margin-top: 9vh;
+  margin-top: -3vh;
 }
 /* ============ Media Query (Medium Devices) ============= */
 @media screen and (max-width: 1200px) {

src/components/header-banner/HeaderBanner.jsx

@@ -7,14 +7,18 @@ const Navbar = () => {
    const [active, setActive] = useState("nav__menu");
    const [toggleicon, setToggleicon] = useState("nav__toggler");
    const navToggle = () => {
+     
+    if(window.scrollY >=50){
     active=== 'nav__menu' ? setActive('nav__menu nav__active') : setActive('nav__menu');
     toggleicon=== 'nav__toggler' ? setToggleicon('nav__toggler toggle') : setToggleicon('nav__toggler');
    }
+  }
    const [navbar, setNavbar] = useState(false);
   const changeBackground = () => {
     if(window.scrollY >=50)
     {
       setNavbar(true);
+
     }
     else{
       setNavbar(false);
@@ -27,7 +31,7 @@ const Navbar = () => {
           <nav className={navbar ? 'nav sticky' : 'nav'}>
             <a href="/#" className="nav__brand"><img src={Logo} alt="" /></a>
             <ul className={active}>
-              <li className="nav__item"><a href="/#courses" className="nav__link">Courses</a></li>
+              <li className="nav__item"><a href="/#courses" className="nav__link">Course</a></li>
               <li className="nav__item"><a href="/#blogss" className="nav__link">Blogs</a></li>
               <li className="nav__item"><a href="/#campus-captains" className="nav__link">Campus Captains</a></li>
               <li className="nav__item"><a href="https://discord.gg/jwvtDtnkJv" className="nav__link">Community</a></li>

src/components/header-banner/headerBanner.css

@@ -15,8 +15,9 @@
 
 .nav{
   display: flex;
-  position: fixed;
+  position: static;
   align-items: center;
+  margin-top: 2vh;
   height: 12vh;
   width: 100%;
   max-width: 1600px;
@@ -130,4 +131,7 @@
 {
   box-shadow: 0 8px 6px -6px rgb(243, 240, 240);
   background:#fff;
+  position: fixed;
+  top: 0vh;
+  margin-top: 0vh;
 }