Donners2

src/App.jsx

@@ -8,6 +8,7 @@ import CauseDetails from "./pages/causes/CauseDetails";
 import Causes from "./pages/causes/Causes";
 import DonatePage from "./pages/causes/DonatePage";
 import Contact from "./pages/contact/Contact";
+import Donners from "./pages/donners/Donners";
 import Home from "./pages/home/Home";
 import Leadership from "./pages/leadership/Leadership";
 
@@ -20,6 +21,7 @@ function App() {
         <Route path="/contact" element={<Contact />} />
         <Route path="/leadership" element={<Leadership />} />
         <Route path="/causes" element={<Causes />} />
+        <Route path="/donners" element={<Donners />} />
         <Route path="/causes/:id" element={<CauseDetails />} />
         <Route path="/donate" element={<DonatePage />} />
       </Routes>

src/pages/404/components/Section404.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import Header from '../../../components/layout/Header'
+import Hero1 from '../../../components/layout/Hero1'
+import Footer from '../../../components/layout/Footer'
+const Section404 = () => {
+  return (
+    <div>
+        <Header/>
+        <Hero1
+        title ="404"
+        text="Home"
+        span ="404"
+       />
+
+<div className="bg-primary-color mt-20 mx-[450px] w-[900px] h-[500px] text-slate-200 text-center">
+<h1 className="font-bold text-5xl pt-20 mx-14 ">404</h1>
+<h2 className='font-semibold text-3xl pt-8 '>Something went wrong.</h2>
+<p className='text-xl pt-8 px-20 pr-20'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
+    Enim ea mollitia, iusto ipsa voluptates cupiditate ad eaque quibusdam soluta quas!</p>
+
+    <a href="#" className="border w-32 p-1 rounded  mb-3 mx-96 flex mt-20">
+          Back to Home
+          <i className="fa fa-angle-right pr-2  px-2  pt-1"></i>
+        </a>
+</div>
+        <Footer/>
+    </div>
+  )
+}
+
+export default Section404;

src/pages/donners/Donners.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import Footer from "../../components/layout/Footer";
+import Header from "../../components/layout/Header";
+import Hero1 from "../../components/layout/Hero1";
+import Pagination from "../../components/Pagination";
+import DonnersSection from "./components/DonnersSection";
+
+const Donners = () => {
+  return (
+    <div>
+      <Header />
+
+      <Hero1 title="Donners" text="Home" span="Donners" />
+
+      <DonnersSection />
+
+      <Pagination />
+      <Footer />
+    </div>
+  );
+};
+
+export default Donners;

src/pages/donners/components/DonnersSection.jsx

@@ -0,0 +1,77 @@
+import React from "react";
+import image10 from "../../../assets/images/man.jpg";
+import image13 from "../../../assets/images/muslim.jpg";
+import image12 from "../../../assets/images/Rayon.jpg";
+import image17 from "../../../assets/images/Rectangle17.jpg";
+import image18 from "../../../assets/images/Rectangle18.jpg";
+import image19 from "../../../assets/images/Rectangle19.jpg";
+import image20 from "../../../assets/images/Rectangle20.jpg";
+import image21 from "../../../assets/images/Rectangle21.jpg";
+import image22 from "../../../assets/images/Rectangle22.jpg";
+import image23 from "../../../assets/images/Rectangle23.jpg";
+
+const DonnersSection = () => {
+  return (
+    <div>
+      <div className=" mt-20">
+        <h1 className="text-4xl pb-7 font-semibold text-center">
+          Meet Our Donners
+        </h1>
+        <p className=" text-center pb-10 text-2xl px-28 pr-28">
+          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem
+          suscipit dolor architecto. Repudiandae quae aut beatae tempora.
+          Voluptatibus, doloremque ullam!
+        </p>
+        <div className="flex g-3 justify-evenly ">
+          <div>
+            <img src={image19} alt="" className="w-80 h-96" />
+          </div>
+          <div>
+            <img src={image17} alt="" className="w-80 h-96" />
+          </div>
+          <div>
+            <img src={image20} alt="" className="w-80 h-96" />
+          </div>
+        </div>
+
+        <div className="flex g-3 justify-evenly pt-6">
+          <div>
+            <img src={image12} alt="" className="w-80 h-96" />
+          </div>
+          <div>
+            <img src={image18} alt="" className="w-80 h-96" />
+          </div>
+          <div>
+            <img src={image19} alt="" className="w-80 h-96" />
+          </div>
+        </div>
+
+        <div className="flex g-3 justify-evenly pt-6">
+          <div>
+            <img src={image10} alt="" className="w-80 h-96" />
+          </div>
+          <div>
+            <img src={image22} alt="" className="w-80 h-96" />
+          </div>
+          <div>
+            <img src={image13} alt="" className="w-80 h-96" />
+          </div>
+        </div>
+
+        <div className="flex g-3 justify-evenly pt-6">
+          <div>
+            <img src={image21} alt="" className="w-80 h-96" />
+          </div>
+          <div>
+            <img src={image12} alt="" className="w-80 h-96" />
+          </div>
+          <div>
+            <img src={image23} alt="" className="w-80 h-96" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DonnersSection;

src/pages/home/Home.jsx

@@ -1,6 +1,7 @@
 import React from "react";
-// import image9 from "../../assets/images/Ellipse 94.png";
-// import image10 from "../../assets/images/images 1.png";
+
+import image8 from "../../assets/images/Rectangle 10.png";
+import image7 from "../../assets/images/Rectangle 9.png";
 
 import "../../assets/styles/style.css";
 import Footer from "../../components/layout/Footer";
@@ -35,10 +36,6 @@ function Home() {
       {/* Help section */}
       <HelpSection></HelpSection>
 
-      {/* about us section */}
-
-      {/* <AboutSection></AboutSection> */}
-      {/* donate section  */}
 
       <DonationSection></DonationSection>