About2

src/App.css

@@ -1,4 +1,5 @@
 #root {
+
 
 
 }

src/App.jsx

@@ -7,12 +7,15 @@ import CauseDetails from "./pages/causes/CauseDetails";
 import Causes from "./pages/causes/Causes";
 import DonatePage from "./pages/causes/DonatePage";
 import Home from "./pages/home/Home";
+import About from "./pages/about/About";
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+
         <Route path="/causes" element={<Causes />} />
         <Route path="/causes/:id" element={<CauseDetails />} />
         <Route path="/donate" element={<DonatePage />} />

src/assets/styles/style.css

@@ -29,3 +29,14 @@
 .about-section {
   @apply px-6 md:px-32 flex flex-row my-20 py-20 gap-8 items-center  bg-[#EEEAFC];
 }
+
+.Hero-background{
+  width: 100%;
+  height: 50vh;
+  color: white !important;
+  background: linear-gradient(rgba(15, 23, 43, 0.6), rgba(15, 23, 43, 0.6)), url(../../assets/images/Rectangle16.png);
+  background-position: center;
+  background-size: cover;
+  position: relative;
+
+}

src/components/layout/Footer.jsx

@@ -3,7 +3,7 @@ import Logo from "../../assets/images/logo.png";
 import image3 from "../../assets/images/Rectangle 13.png";
 import image4 from "../../assets/images/Rectangle 14.png";
 import image5 from "../../assets/images/Rectangle 15.png";
-import image6 from "../../assets/images/Rectangle 16.png";
+import image6 from "../../assets/images/Rectangle16.png";
 import image1 from "../../assets/images/Rectangle 2.png";
 import image2 from "../../assets/images/Rectangle 5.png";
 
@@ -19,15 +19,22 @@ function Footer() {
           </p>
         </div>
 
-        <div className="flex flex-col gap-4 w-1/3 md:w-full">
-          <h3>Gallery</h3>
-          <div className=" flex flex-wrap gap-2">
-            <img src={image1} alt="" className="w-[8rem] " />
-            <img src={image2} alt="" className="w-[8rem] " />
-            <img src={image3} alt="" className="w-[8rem]" />
-            <img src={image4} alt="" className="w-[8rem] " />
-            <img src={image5} alt="" className="w-[8rem] " />
-            <img src={image6} alt="" className="w-[8rem] " />
+        <div className=" w-1/3 md:w-full">
+          <h3 className='mb-6'>Gallery</h3>
+          <div className="flex flex-col justify-between">
+
+            <div className=' flex '>
+            <img src={image1} alt="" className="w-20 h-20 " />
+            <img src={image2} alt="" className="w-20  h-20 mx-3" />
+            <img src={image3} alt="" className="w-20 h-20  mx-1" />
+            </div>
+
+              <div className=' flex pt-3'>
+              <img src={image4} alt="" className="w-20 h-20" />
+            <img src={image5} alt="" className="w-20 h-20 mx-3" />
+            <img src={image6} alt="" className="w-20 h-20  mx-1" />
+              </div>
+
           </div>
         </div>
 
@@ -36,40 +43,40 @@ function Footer() {
           <div className="flex flex-row gap-6  text-sm ">
             <ul className=" list-none flex flex-col gap-3 items-start ">
               <li>
-                <a href="#"> About Us</a>
+                <a href="about"> About Us</a>
               </li>
               <li>
-                <a href="#"> Career</a>
+                <a href="career">Career</a>
               </li>
               <li>
-                <a href="#"> Leadership</a>
+                <a href="leadership"> Leadership</a>
               </li>
               <li>
-                <a href="#"> FAQ's</a>
+                <a href="faqs"> FAQ's</a>
               </li>
               <li>
-                <a href="#"> Appointments</a>
+                <a href="appointment"> Appointments</a>
               </li>
               <li>
-                <a href="#"> Donners</a>
+                <a href="donners"> Donners</a>
               </li>
             </ul>
 
             <ul className="list-none flex flex-col gap-3 items-start ">
               <li>
-                <a href="#"> Become Volunteer</a>
+                <a href="volunteer"> Become Volunteer</a>
               </li>
               <li>
-                <a href="#"> Donation History</a>
+                <a href="donationhistory"> Donation History</a>
               </li>
               <li>
-                <a href="#"> Donation Failed</a>
+                <a href="donationfailed"> Donation Failed</a>
               </li>
               <li>
-                <a href="#"> 404</a>
+                <a href="404"> 404</a>
               </li>
               <li>
-                <a href="#"> Coming Soon</a>
+                <a href="comingsoon"> Coming Soon</a>
               </li>
               <li>
                 <a href="#"> Medical Facilities </a>

src/components/layout/Hero1.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+// import '../../../index.css'
+
+
+
+function Hero1(props){
+
+  const title = props.title;
+  const text = props.text;
+  const span = props.span;
+
+
+        return (
+          <div>
+            <div className=''  >
+          <div className="Hero-background">
+
+            <div className=' grid items-center  justify-center '>
+            <h1 className="  text-5xl pt-28 ">{title}</h1>
+
+         <a href='#' className='text-slate-200 pt-4 text-2xl'>
+         {text} 
+         <i className="fa fa-angle-right pr-2 px-2"></i>
+         <span>{span}</span></a>
+
+            </div>
+
+          </div>
+
+
+          </div>
+          </div>
+        )
+
+
+}
+
+
+export default Hero1

src/pages/about/About.jsx

@@ -0,0 +1,92 @@
+import React from "react";
+import image14 from "../../assets/images/Ellipse 94.png";
+import image10 from "../../assets/images/man.jpg";
+import image13 from "../../assets/images/muslim.jpg";
+import image12 from "../../assets/images/Rayon.jpg";
+import Footer from "../../components/layout/Footer";
+import Header from "../../components/layout/Header";
+import Hero1 from "../../components/layout/Hero1";
+import AboutSection from "./components/AboutSection";
+import View from "./components/view";
+
+//import image4 from "/images/Rectangle 5.png";
+
+//{/**import image7 from "../../assets/images/Rectangle 9.png";
+//import image8 from "../../assets/images/Rectangle 10.png";
+//import image9 from "../../assets/images/Rectangle 11.png";
+//import image11 from "../../assets/images/baby.jpg"; */}
+
+const page = () => {
+  return (
+    <div className="">
+      {/**header */}
+      <Header />
+
+      {/* About us*/}
+
+      {/**hero1 */}
+      <Hero1 title="About Us" text="Home" span="About Us" />
+
+      <AboutSection />
+
+      {/* meet  our volunteer */}
+
+      <section>
+        <div>
+          <h1 className="font-bold text-2xl flex items-center justify-center pt-28 pb-11">
+            Meet Our Volunteer
+          </h1>
+        </div>
+        <div className="flex g-3 justify-evenly">
+          <div>
+            <img src={image10} alt="" className="w-80 h-96" />
+          </div>
+          <div>
+            <img src={image13} alt="" className="w-80 h-96" />
+          </div>
+          <div>
+            <img src={image12} alt="" className="w-80 h-96" />
+          </div>
+        </div>
+      </section>
+
+      <div className="flex flex-row gap-1 justify-center pt-4 ">
+        <div className="w-3 h-3 rounded-lg bg-[#9483F1]"></div>
+        <div className="w-14 h-3 rounded-lg bg-primary-color"></div>
+        <div className="w-3 h-3 rounded-lg bg-[#9483F1]"></div>
+      </div>
+      {/* rating section */}
+      <section className="mb-12">
+        <div className="flex justify-between pt-28 px-28 pr-28">
+          <div>
+            <h1 className="font-bold text-5xl text-center">520k</h1>
+            <p className="text-2xl pt-3 font-medium">Poor People</p>
+          </div>
+          <div>
+            <h1 className="font-bold text-5xl text-center">842M</h1>
+            <p className="text-2xl pt-3 font-medium">Fund Rise</p>
+          </div>
+          <div>
+            <h1 className="font-bold text-5xl text-center">24k</h1>
+            <p className="text-2xl pt-3 font-medium">Active Members</p>
+          </div>
+        </div>
+      </section>
+
+      <View
+        author="Adam Samson"
+        text="Senior Volunteer"
+        image={image14}
+        description="Lorem ipsum dolor sit amet consectetur
+               adipisicing elit. Perspiciatis nemo natus sunt cumque voluptates 
+               velit, ab tempora in vitae! Commodi? ab temporain vitae! Commodi?
+               velit, ab tempora in vitae! Commodi? ab tempora in vitae! Commodi?"
+      />
+
+      {/**footer */}
+      <Footer />
+    </div>
+  );
+};
+
+export default page;

src/pages/about/components/AboutSection.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import image11 from "../../../assets/images/baby.jpg";
+
+function AboutSection() {
+  return (
+    <div>
+      <h1 className="font-bold text-4xl px-28 pt-24 mb-2">
+        Givest is The Non Profitable
+        <br /> Organization.
+      </h1>
+
+      <div className="flex flex-col items-center md:flex-row ">
+        <div className="md:w-1/2">
+          <img src={image11} alt="" className="pl-28" />
+        </div>
+        <div className="md:w-1/2 flex flex-col items-start pr-28 mt-0 pt-0 relative md:-top-8">
+          <h2 className="font-bold pb-9 text-xl">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
+            asperiores suscipit eius doloribus perspiciatis nostrum libero
+            ratione ex temporibus nesciunt!
+          </h2>
+
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
+            ipsam, at reprehenderit itaque quasi veritatis? Porro ab architecto
+            beatae blanditiis. consectetur adipisicing elit. Quaerat ipsam, at
+            reprehenderit itaque quasi veritatis? Porro ab architecto beatae
+            blanditiis.
+          </p>
+
+          <div className="flex justify-between pt-14">
+            <div className=" bg-red-400 w-1/2 h-80 rounded-md text-white">
+              <h1 className="text-center pt-3 font-bold">Our Mission </h1>
+              <p className="px-8  pt-2">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Recusandae deserunt eum veritatis autem quibusdam nulla, ut
+                neque, praesentium sed laboriosam.
+              </p>
+            </div>
+
+            <div className="bg-yellow-500 w-1/2 h-80 rounded-md mx-4 text-white">
+              <h1 className="text-center pt-3 font-bold">Our Vission </h1>
+              <p className="px-8  pt-2">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Recusandae deserunt eum veritatis autem quibusdam nulla, aut
+                neque, praesentium sed laboriosam
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AboutSection;

src/pages/about/components/view.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+
+function View(props){
+const image = props.image;
+const description = props.description;
+const author = props.author;
+const text = props.text;
+
+        return (
+
+
+          <section className=" flex flex-row my-20 py-20 gap-8 items-center  bg-[#EEEAFC]">
+          <div className="flex flex-row gap-10">
+            <div className="w-1/3 h-full p-20 py-28 text-center flex items-center section-volunteer text-white">
+              <p className="text-7xl md:text-4xl font-bold ">
+                What People Say About Us
+              </p>
+            </div>
+
+            <div className='flex flex-col gap-8 pr-20 px-20'>
+
+                <div>
+                <img src={image} alt='' className='h-18 w-18'/>
+                <p className='pr-28'>{description}</p>
+
+              </div>
+
+              <div className="flex flex-row justify-between items-center">
+
+              <div className="flex flex-col gap-2">
+                <p className="font-medium text-2xl">{author} </p>
+                <p className="">{text}</p>
+              </div>
+
+
+              <div className='flex flex-row flex-end p-4 items-start gap-4 text-2xl w-1/2 bg-primary-color text-white'>
+              <i className="fa fa-arrow-circle-o-left"></i>
+              <i className="fa fa-arrow-circle-o-right"></i>
+
+              </div>
+              </div>
+            </div>
+            </div>
+            </section>
+
+
+        )
+
+      }
+
+
+
+
+export default View