Hero section added

Author: shree404

src/Components/landingpage/Navbar.jsx

@@ -27,7 +27,7 @@ const Navbar = () => {
                 <li><Link to="/gallary" className='link-default' >Gallery</Link></li>
                 <li><Link to="/about" className='link-default'>About Us</Link> </li>
                 <li><Link to="/events" className='link-default'> Upcoming Events</Link></li>
-                <li><Link to="/contact" className='link-default' >Contact us</Link></li>
+                <li><Link to="/contact" className='link-default' >Contact Us</Link></li>
             </ul>
         </nav>
         </Container>

src/Components/landingpage/button.jsx

@@ -0,0 +1,9 @@
+function Button({buttontext,buttonclass}){
+    return(
+        <>
+        <button className={buttonclass}>{buttontext}</button>
+        </>
+    )
+}
+
+export default Button;

src/assets/Components/Hero/Hero.jsx renamed to src/Components/landingpage/hero.jsx

@@ -1,9 +1,7 @@
-import React from 'react'
-import './Hero.css'
-const Hero = () => {
-    return (
-
-        <div className="hero" id='hero'>
+function Hero(){
+    return(
+        <>
+        <div className="hero">
             <div className='container'>
             <div className="hero-text">
                 <h1>Leaders are those who empower others.</h1>
@@ -13,7 +11,8 @@ const Hero = () => {
                  </button>
             </div></div>
         </div>
+        </>
     )
 }
 
-export default Hero
+export default Hero;

src/Pages/Landingpage.jsx

@@ -1,9 +1,11 @@
 import Navbar from "../Components/landingpage/Navbar";
+import Hero from "../Components/landingpage/hero";
 
 function LandingPage(){
     return(
         <>
         <Navbar/>
+        <Hero/>
         </>
     )
 }

src/Styles/App.css

@@ -31,43 +31,49 @@
   text-decoration: inherit;
 }
 
-.menu-icon {
-  display: none;
+.hero {
+  margin-top: auto;
+  width: 100%;
+  min-height: 100vh;
+  background: linear-gradient(rgba(8, 0, 58, 0.7019607843), rgba(8, 0, 58, 0.7019607843)), url(/herobg.png);
+  /* background: url(/herobg.png); */
+  background-size: cover;
+  background-position: center;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-@media (max-width: 1000px) {
-  .logo {
-    width: 140px;
-  }
-  nav ul li {
-    margin: 10px 15px;
-  }
+.hero-text {
+  text-align: center;
+  max-width: 800px;
 }
-@media (max-width: 840px) {
-  nav {
-    padding: 15px 0;
-  }
-  nav ul {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    background: #212ea0;
-    z-index: -1;
-    width: 200px;
-    padding-top: 70px;
-    transition: 0.5s;
-  }
-  nav ul li {
-    display: block;
-    margin: 25px 40px;
+
+.hero-text h1 {
+  font-size: 60px;
+  font-weight: 600;
+}
+
+.hero-text p {
+  max-width: 700px;
+  margin: 10px auto 20px;
+  line-height: 1.4;
+}
+
+@media (max-width: 850px) {
+  .hero-text h1 {
+    font-size: 40px;
   }
-  .menu-icon {
-    display: block;
-    width: 30px;
-    cursor: pointer;
+}
+@media (max-width: 650px) {
+  .hero-text h1 {
+    font-size: 30px;
+    max-width: 400px;
+    margin: auto;
   }
-  .hide-mobile-menu {
-    right: -200px;
+  .hero-text p {
+    font-size: 14px;
+    margin: 15px auto 30px;
   }
 }/*# sourceMappingURL=App.css.map */

src/Styles/App.css.map

@@ -1 +1,3 @@
-@import 'Navbar'
+@import 'Navbar';
+@import 'Hero';
+@import 'Button'

src/Styles/LandingPage/_Button.scss

@@ -34,50 +34,4 @@
     text-decoration: inherit;
 }
 
-.menu-icon {
-    display: none;
-}
-
-@media (max-width: 1000px) {
-    .logo {
-        width:140px
-    }
-
-    nav ul li {
-        margin: 10px 15px
-    }
-}
-
-@media (max-width: 840px) {
-    nav {
-        padding:15px 0
-    }
-
-    nav ul {
-        position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        background: #212ea0;
-        z-index: -1;
-        width: 200px;
-        padding-top: 70px;
-        transition: .5s
-    }
-
-    nav ul li {
-        display: block;
-        margin: 25px 40px
-    }
-
-    .menu-icon {
-        display: block;
-        width: 30px;
-        cursor: pointer
-    }
-
-    .hide-mobile-menu {
-        right: -200px
-    }
-}