head component added

shree404 · shree404 · commit cf9e9d2e36af · 2024-09-30T19:56:21.000+05:45
diff --git a/src/Components/landingpage/head.jsx b/src/Components/landingpage/head.jsx
@@ -0,0 +1,12 @@
+function Head({head,description}){
+    return(
+        <>
+        <div className="Head">
+        <h1 className="Head-title">{head}</h1>
+        <p className="Head-description">{description}</p>
+        </div>
+        </>
+    )
+}
+
+export default Head;
diff --git a/src/Components/landingpage/hero.jsx b/src/Components/landingpage/hero.jsx
@@ -1,7 +1,22 @@
+import Head from "./head";
+import Button from "./button";
+
+
 function Hero(){
+
+    const description = <>
+    A non-profit organization founded by group of tech-obsessed youngsters,<br /> concentrating on offering digital literacy programs and instructional tools to students
+    </>
+
     return(
         <>
         <div className="hero">
+            <div>
+<Head head={"Leaders are those who empower others"} description={description} />
+<Button buttontext={"Explore More"} buttonclass={"herobutton"} />
+</div>
+        </div>
+        {/* <div className="hero">
             <div className='container'>
             <div className="hero-text">
                 <h1>Leaders are those who empower others.</h1>
@@ -10,7 +25,7 @@ function Hero(){
                 <button className="btn">Explore more&nbsp;<i className="fa-solid fa-arrow-right"></i>
                  </button>
             </div></div>
-        </div>
+        </div> */}
         </>
     )
 }
diff --git a/src/Styles/App.css b/src/Styles/App.css
@@ -39,11 +39,8 @@
 }
 
 .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;
@@ -52,35 +49,18 @@
   justify-content: center;
 }
 
-.hero-text {
+.Head {
   text-align: center;
-  max-width: 800px;
-}
-
-.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;
-  }
+.Head-title {
+  text-align: center;
+  font-size: 2.5rem;
+  font-family: "Poppins", sans-serif;
+  color: white;
 }
-@media (max-width: 650px) {
-  .hero-text h1 {
-    font-size: 30px;
-    max-width: 400px;
-    margin: auto;
-  }
-  .hero-text p {
-    font-size: 14px;
-    margin: 15px auto 30px;
-  }
+.Head-description {
+  text-align: center;
+  font-size: 1rem;
+  font-family: "Poppins", sans-serif;
+  color: white;
 }/*# sourceMappingURL=App.css.map */
diff --git a/src/Styles/App.css.map b/src/Styles/App.css.map
diff --git a/src/Styles/LandingPage/_Button.scss b/src/Styles/LandingPage/_Button.scss
@@ -0,0 +1,3 @@
+.herobutton{
+    // display: none;
+}
diff --git a/src/Styles/LandingPage/_Head.scss b/src/Styles/LandingPage/_Head.scss
@@ -0,0 +1,15 @@
+.Head{
+    text-align: center;
+    &-title{
+        text-align: center;
+    font-size: 2.5rem;
+    font-family: $font;
+    color: white;
+}
+&-description{
+    text-align: center;
+    font-size: 1rem;
+    font-family: $font;
+    color: white;
+}
+}
diff --git a/src/Styles/LandingPage/_Hero.scss b/src/Styles/LandingPage/_Hero.scss
@@ -1,9 +1,6 @@
 .hero {
-    margin-top: auto;
-    width: 100%;
     min-height: 100vh;
     background: linear-gradient(#08003ab3,#08003ab3),url(/herobg.png);
-    /* background: url(/herobg.png); */
     background-size: cover;
     background-position: center;
     color: #fff;
@@ -12,37 +9,3 @@
     justify-content: center
 }
 
-.hero-text {
-    text-align: center;
-    max-width: 800px
-}
-
-.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
-    }
-}
-
-@media (max-width: 650px) {
-    .hero-text h1 {
-        font-size:30px;
-        max-width: 400px;
-        margin: auto
-    }
-
-    .hero-text p {
-        font-size: 14px;
-        margin: 15px auto 30px
-    }
-}
diff --git a/src/Styles/LandingPage/_Index.scss b/src/Styles/LandingPage/_Index.scss
@@ -1,3 +1,4 @@
 @import 'Navbar';
 @import 'Hero';
-@import 'Button'
+@import 'Button';
+@import 'Head'

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.herobutton{`
	`2`	`+ // display: none;`
	`3`	`+}`