Merge pull request #19 from NepTechTribe/new

Event Section Added

Author: shree404

src/Components/landingpage/announcement.jsx

@@ -0,0 +1,57 @@
+import Title from "./title";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import eventimg from "../../assets/LandingPage/pr-1.jpg";
+import Button from "./button";
+function Announcement() {
+  const AnnouncementArray = [
+    {
+      title: "event title",
+      image: eventimg,
+      date: "2050",
+      venue: "Google Meet",
+    },
+    {
+      title: "event title",
+      image: eventimg,
+      date: "2050",
+      venue: "Google Meet",
+    },
+    {
+      title: "event title",
+      image: eventimg,
+      date: "2050",
+      venue: "Google Meet",
+    },
+    {
+      title: "event title",
+      image: eventimg,
+      date: "2050",
+      venue: "Google Meet",
+    },
+  ];
+
+  return (
+    <>
+      <Container className="Announcement">
+        <Title title={"ANNOUNCEMENTS"} head={"Our Upcoming Events"} />
+        <Row>
+          {AnnouncementArray.map((item, index) => (
+            <Col md={3} key={index} className="Announcement-individual">
+              <img src={item.image} className="Announcement-individual__image" alt={`image of ${item.title}`} />
+              <div style={{padding:'1rem 0rem'}}>
+              <h2 className="Announcement-individual__title">{item.title}</h2>
+              <h4 className="Announcement-individual__date">{item.date}</h4>
+              <h4  className="Announcement-individual__venue">{item.venue}</h4>
+              </div>
+              <Button buttontext={"View More"} buttonclass={"eventbutton"} />
+            </Col>
+          ))}
+        </Row>
+      </Container>
+    </>
+  );
+}
+
+export default Announcement;

src/Components/landingpage/button.jsx

@@ -1,7 +1,7 @@
-function Button({buttontext,buttonclass}){
+function Button({buttontext,buttonclass , buttoncontainer}){
     return(
         <>
-        <div className="Button-container">
+        <div className={buttoncontainer} >
         <button className={buttonclass}>{buttontext}</button>
         </div>
         </>

src/Components/landingpage/hero.jsx

@@ -18,7 +18,7 @@ function Hero() {
             head={"Leaders are those who empower others"}
             description={description}
           />
-          <Button buttontext={"Explore More"} buttonclass={"herobutton"} />
+          <Button buttontext={"Explore More"} buttonclass={"herobutton"} buttoncontainer={"Button-container"} />
         </div>
       </div>
       </>

src/Pages/Landingpage.jsx

@@ -2,6 +2,7 @@ import Navbar from "../Components/landingpage/Navbar";
 import Hero from "../Components/landingpage/hero";
 import AboutUs from "../Components/landingpage/about";
 import Programs from "../Components/landingpage/programs";
+import Announcement from "../Components/landingpage/announcement";
 
 function LandingPage(){
     return(
@@ -10,6 +11,7 @@ function LandingPage(){
         <Hero/>
         <AboutUs/>
         <Programs/>
+        <Announcement/>
         </>
     )
 }

src/Styles/App.css

@@ -42,7 +42,7 @@
 
 .hero {
   min-height: 100vh;
-  background: linear-gradient(rgba(60, 55, 94, 0.7019607843), rgba(70, 63, 111, 0.7019607843)), url(../../../public/herobg.png);
+  background: linear-gradient(rgba(60, 55, 94, 0.7019607843), rgba(70, 63, 111, 0.7019607843)), url(/herobg.png);
   background-size: cover;
   background-position: center;
   color: #fff;
@@ -56,7 +56,7 @@
   justify-content: center;
 }
 
-.herobutton {
+.herobutton, .eventbutton {
   height: 3rem;
   padding: 0.5rem 1rem;
   text-align: center;
@@ -67,11 +67,19 @@
   background-color: #000080;
   border: none;
 }
-.herobutton:hover {
+.herobutton:hover, .eventbutton:hover {
   color: #000080;
   background-color: white;
 }
 
+.eventbutton {
+  padding: 0rem;
+  background-color: transparent;
+  color: black;
+  font-weight: 400;
+  height: 1rem;
+}
+
 .Head {
   text-align: center;
   color: white;
@@ -125,27 +133,28 @@
   font-family: "Poppins", sans-serif;
   font-style: italic;
 }
-.About-MissionVision__head, .About-values {
+.About-MissionVision__head, .Announcement-individual__title, .About-values {
   font-size: 1.25rem;
   font-weight: 500;
   color: #000080;
 }
-.About-MissionVision__description {
+.About-MissionVision__description, .Announcement-individual__venue {
   font-size: 15px;
   font-weight: 300;
 }
 .About-values {
   text-align: center;
   color: #000080;
 }
-.About-values__title {
+.About-values__title, .Announcement-individual__date {
   font-size: 1rem;
   font-weight: 400;
 }
 
 .Program {
   position: relative;
   overflow: hidden;
+  margin-bottom: 3rem;
 }
 .Program:hover .Program-caption {
   opacity: 1;
@@ -172,4 +181,17 @@
 .Program-icons {
   height: 3rem;
   width: 3rem;
+}
+
+.Announcement-individual {
+  padding: 1.5rem;
+  overflow: hidden;
+}
+.Announcement-individual__image {
+  height: 18rem;
+  border-radius: 1rem;
+}
+.Announcement-individual__title {
+  text-transform: capitalize;
+  font-size: 1rem;
 }/*# sourceMappingURL=App.css.map */

src/Styles/App.css.map

@@ -0,0 +1,21 @@
+.Announcement{
+    &-individual{
+        padding: 1.5rem;
+        overflow: hidden;
+        &__image{
+            height: 18rem;
+            border-radius: 1rem;
+        }
+        &__title{
+          @extend .About-MissionVision__head;
+          text-transform: capitalize;  
+          font-size: 1rem;
+        }
+        &__date{
+            @extend .About-values__title;
+        }
+        &__venue{
+            @extend .About-MissionVision__description;
+        }
+    }
+}

src/Styles/LandingPage/_Announcement.scss

@@ -18,3 +18,13 @@
     background-color: white;
   }
 }
+
+
+.eventbutton{
+  @extend .herobutton;
+  padding: 0rem;
+  background-color: transparent;
+  color: black;
+  font-weight: 400;
+  height: 1rem;
+}

src/Styles/LandingPage/_Button.scss

@@ -1,6 +1,6 @@
 .hero {
     min-height: 100vh;
-    background: linear-gradient(#3c375eb3,#463f6fb3),url(../../../public/herobg.png);
+    background: linear-gradient(#3c375eb3,#463f6fb3),url(/herobg.png);
     background-size: cover;
     background-position: center;
     color: #fff;

src/Styles/LandingPage/_Hero.scss

@@ -4,4 +4,5 @@
 @import 'Head';
 @import 'Title';
 @import 'About';
-@import 'Program'
+@import 'Program';
+@import 'Announcement';