Merge pull request #18 from NepTechTribe/new

Program section added

Author: shree404

package-lock.json

@@ -14,6 +14,7 @@
     "bootstrap-icons": "^1.11.3",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",
+    "react-bootstrap-icons": "^1.11.4",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",
     "react-router-dom": "^6.26.2",

package.json

@@ -0,0 +1,52 @@
+import Title from "./title";
+import img1 from '../../assets/LandingPage/pr-1.jpg';
+import img2 from '../../assets/LandingPage/pr-2.jpg';
+import img3 from '../../assets/LandingPage/pr-3.jpg';
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import { PeopleFill, Activity,PersonRaisedHand } from "react-bootstrap-icons";
+
+function Programs(){
+const ProgramArray = [
+    {
+        image : img1,
+        icon:PeopleFill,
+        title:"Social Skill Development"
+
+    },
+    {
+        image : img2,
+        icon:Activity,
+        title:"Personal Growth"
+
+    },
+    {
+        image : img3,
+        icon:PersonRaisedHand,
+        title:"Public Speaking"
+
+    }
+]
+
+    return(
+        <>
+        <Container>
+        <Title title={"Our Programs"} head={"What We Offer"} />
+        <Row>
+            {ProgramArray.map((program , index) => (
+                <Col md={4} className="Program">
+                    <img src={program.image} alt="Image for program" />
+                    <div className="Program-caption">
+                    {program.icon && <program.icon className="Program-icons"/>}
+                        <p>{program.title}</p>
+                    </div>
+                </Col>
+            ))}
+        </Row>
+        </Container>
+        </>
+    )
+}
+
+export default Programs;

src/Components/landingpage/programs.jsx

@@ -1,13 +1,15 @@
 import Navbar from "../Components/landingpage/Navbar";
 import Hero from "../Components/landingpage/hero";
 import AboutUs from "../Components/landingpage/about";
+import Programs from "../Components/landingpage/programs";
 
 function LandingPage(){
     return(
         <>
         <Navbar/>
         <Hero/>
         <AboutUs/>
+        <Programs/>
         </>
     )
 }

src/Pages/Landingpage.jsx

@@ -141,4 +141,35 @@
 .About-values__title {
   font-size: 1rem;
   font-weight: 400;
+}
+
+.Program {
+  position: relative;
+  overflow: hidden;
+}
+.Program:hover .Program-caption {
+  opacity: 1;
+  padding-top: 0;
+}
+.Program:hover img {
+  opacity: 0.5;
+}
+.Program-caption {
+  position: absolute;
+  top: 5rem;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  color: #000080;
+  cursor: pointer;
+  opacity: 0;
+  transition: 0.4s;
+}
+.Program-icons {
+  height: 3rem;
+  width: 3rem;
 }/*# sourceMappingURL=App.css.map */

src/Styles/App.css

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

src/Styles/App.css.map

@@ -0,0 +1,31 @@
+.Program {
+    position: relative;
+    overflow: hidden;
+  &:hover {
+    .Program-caption {
+      opacity: 1;
+      padding-top: 0;
+    } img{
+        opacity: 0.5;
+    }
+  }
+  &-caption {
+    position: absolute;
+    top: 5rem;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: #000080 ;
+    cursor: pointer;
+    opacity: 0;
+    transition: 0.4s;
+  }
+  &-icons{
+    height: 3rem;
+    width: 3rem;
+  }
+}