worked on the header, about and hero section

package.json

@@ -10,7 +10,10 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.6.0",
+    "react-router": "^6.4.3",
+    "react-router-dom": "^6.4.3"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",

src/App.tsx

@@ -1,18 +1,18 @@
-import HeroSection from "./components/HeroSection"
-import Header from "./components/Header"
-import About from "./components/About"
+import HeroSection from "./components/Hero/HeroSection"
+import Header from "./components/Header/Header"
+import About from "./components/About/About"
 import Team from "./components/Team"
 import Fundraising from "./components/Fundaraising"
 import Footer from "./components/Footer"
 
 function App() {
   return (
-    < div className="bg-green-1">
+    < div>
        <Header/>
        <HeroSection/>
        <About/>
-       <Team/>
-       <Fundraising/>
+       {/* <Team/>
+       <Fundraising/> */}
     </div>
   )
 }

src/components/About/About.css

@@ -0,0 +1,32 @@
+.gallery-items{
+    min-height: 25rem;
+    max-height: 25rem;
+    max-width: 30rem;
+    position: relative;
+    transition: all 1s ease-in-out;
+    cursor: pointer;
+}
+
+.gallery-items img{
+    height: 100%;
+    min-width: 100%;
+    object-fit: cover;
+}
+
+.gallery-text{
+    position: absolute;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.85);
+    height: 90%;
+    margin-top: 5%;
+    width: 90%;
+    margin-left: 5%;
+    padding: 2rem;
+    display: none;
+    align-items: center;
+    border-radius: 5px;
+}
+
+.ds{
+    display: flex;
+}

src/components/About/About.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react'
+import Img1 from '../../assets/media/kibera-1.png'
+import Img2 from '../../assets/media/kibera-2.png'
+import Img3 from '../../assets/media/kibera-6.jpg'
+import './About.css'
+
+function About() {
+  const datas = [
+    {id: 1, image: Img1, text: "Its unclear how many people live in Kibera but estimates range from 1 million to 1.5million people living in just 2.25 square kilometres."},
+    {id: 2, image: Img2, text: "Residents often live in cramped one-roomed homes mostly made of mud and iron sheets. Water is collected in jerry cans from water points around the slum."},
+    {id: 3, image: Img3, text: "Life is hard in Kibera but many face those challenges with strength of character. It is is a lively place to be. As you walk around you hear music blaring and people talking."}
+  ]
+
+  const[textId, setTextId] = useState(0);
+  const setIdFunction = (id:number) =>{
+    setTextId(id);
+  }
+
+  return (
+    <div className="About bg-green-3 text-white flex flex-col items-center justify-center p-10 space-y-12">
+      <h2 className=" text-5xl font-semibold">About</h2>
+      <p className=" text-xl font-semibold max-w-3xl">We work in Kibera, a vast slum in Kenya's capital city in Nairobi, currently the largest unplanned settlement in the world</p>
+      <div className="gallery flex flex-row gap-5">
+      {datas.map( data => 
+          <div className="gallery-items" key={data.id} onMouseEnter={() => setIdFunction(data.id)}
+            onMouseLeave={() => setIdFunction(0)}>
+            <img src={data.image} alt="An Image of the Kibera slums" className="max-w-sm rounded-md"/>
+            <p className={`gallery-text ${textId === data.id ? `ds` : " "}`}>{data.text}</p>
+          </div>
+      )}
+       </div>
+    </div>
+  )
+}
+
+export default About