Merge pull request #5 from skye8-tech/Ndifon

Implementing Causes page

src/App.jsx

@@ -4,12 +4,14 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import "./App.css";
 import Home from "./pages/home/Home";
+import Causes from "./pages/causes/Causes"
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Home />} />
+        <Route path="/causes" element={<Causes />} />
       </Routes>
     </BrowserRouter>
   );

src/components/Pagination.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+function Pagination() {
+  return (
+    <section className='flex flex-row gap-2 items-center justify-center py-6'>
+      <div className="py-1 px-2 rounded-lg border border-primary-color w-fit">
+        <i class="fas fa-angle-left"></i>
+      </div>
+      <div className="py-1 px-2 rounded-lg bg-primary-color text-white w-fit">
+        <p> 01</p>
+      </div>
+      <div className="py-1 px-2 w-fit">02</div>
+      <div className="py-1 px-2 w-fit">03</div>
+      <div className="py-1 px-2 w-fit">---</div>
+      <div className="py-1 px-2 w-fit">10</div>
+      <div className="py-1 px-2 rounded-lg bg-primary-color text-white w-fit">
+        <i class="fas fa-angle-right"></i>
+      </div>
+    </section>
+  );
+}
+
+export default Pagination

src/components/layout/GeneralHero.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Outlet, Link } from "react-router-dom";
+
+function GeneralHero(props) {
+    const {image,title}=props;
+    const backgroundImageStyle = {
+      backgroundImage: `linear-gradient(rgba(15, 23, 43, 0.6), rgba(15, 23, 43, 0.6)), url(${image})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
+      height: "40vh",
+      width:"100%"
+    };
+
+  return (
+    <div>
+      <div
+        style={backgroundImageStyle}
+        className=" text-white flex items-center justify-center "
+      >
+        <div className=" flex flex-col items-center text-center  justify-center ">
+          <h1 className="  text-3xl md:text-5xl   ">{title}</h1>
+
+          <div className="flex flex-row items-center gap-4 text-slate-200 text-2xl">
+            <p>
+              <Link to="/" className="">
+                Home
+              </Link>
+            </p>
+            <i className="fa fa-angle-right pr-2"></i>
+            <p>{title}</p>
+          </div>
+        </div>
+      </div>
+
+      <Outlet />
+    </div>
+  );
+}
+
+export default GeneralHero

src/components/layout/Header.jsx

@@ -1,5 +1,7 @@
 import React from "react";
+
 import { Link, useLocation } from "react-router-dom";
+
 import Logo from "../../assets/images/logo.png";
 import Button from "../Button";
 
@@ -34,8 +36,10 @@ function Header(props) {
     },
   ];
   return (
-    <header className="relative mx-6 md:mx-32">
-      {outerCircle}
+    <>
+      <header className="relative mx-6 md:mx-32">
+        {outerCircle}
+
 
       <nav className="flex justify-between items-center py-6">
         <img src={Logo} alt="logo" className="w-20 " />
@@ -48,7 +52,7 @@ function Header(props) {
                 pathname == link.to ? "text-primary-color font-bold" : ""
               }`}
             >
-              {text}
+              {link.text}
             </Link>
           ))}
         </div>
@@ -60,6 +64,7 @@ function Header(props) {
       </nav>
       {children}
     </header>
+</>
   );
 }
 

src/pages/home/components/StatisticsSection.jsx → src/components/layout/StatisticsSection.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 function StatisticsSection() {
   return (
-    <section className="px-6 md:px-32 flex flex-row my-20 py-20 gap-8 items-center">
+    <section className="px-6 md:px-32 flex flex-row  py-20 gap-8 items-center">
       <div className="flex flex-col w-1/3 gap-6 items-center">
         <p className=" text-3xl md:text-5xl font-bold ">520k</p>
         <p className="font-bold text-3xl">Poor People</p>

src/pages/causes/Causes.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import Header from "../../components/layout/Header";
+import GeneralHero from "../../components/layout/GeneralHero";
+import image from "../../assets/images/Rectangle 2.png";
+import CausesSection from "./components/CausesSection";
+import Pagination from "../../components/Pagination";
+import StatisticsSection from "../../components/layout/StatisticsSection";
+import ReviewSection from "../home/components/ReviewSection";
+import Footer from "../../components/layout/Footer";
+
+function Causes() {
+  return (
+    <div className="">
+      <Header outerCircle=""></Header>
+      <GeneralHero title="Causes" image={image}></GeneralHero>
+      <CausesSection ></CausesSection>
+      <Pagination></Pagination>
+      <StatisticsSection></StatisticsSection>
+      <ReviewSection></ReviewSection>
+      <Footer></Footer>
+    </div>
+  );
+}
+
+export default Causes;

src/pages/causes/components/CausesSection.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import DonationCard from '../../home/components/DonationCard'
+
+function CausesSection() {
+  return (
+    <section className="mx-6 md:mx-32 flex flex-col items-center my-20 gap-10">
+      <div className=" flex flex-col lg:grid lg:grid-cols-3 gap-6">
+        {new Array(9).fill(null).map((_, index) => (
+          <DonationCard key={index} className=""></DonationCard>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default CausesSection

src/pages/home/Home.jsx

@@ -6,12 +6,16 @@ import Header from "../../components/layout/Header";
 import AboutSection from "./components/AboutSection";
 import BlogSection from "./components/BlogSection";
 import DonationSection from "./components/DonationSection";
-import EventSection from "./components/EventSection";
+
 import HelpSection from "./components/HelpSection";
 import Hero from "./components/Hero";
 import PeopleDonationSection from "./components/PeopleDonationSection";
+
+import EventSection from "./components/EventSection";
+import StatisticsSection from "../../components/layout/StatisticsSection";
+
 import ReviewSection from "./components/ReviewSection";
-import StatisticsSection from "./components/StatisticsSection";
+
 
 function Home() {
   const OuterCircle = () => {

src/pages/home/components/DonationCard.jsx

@@ -4,7 +4,7 @@ import Button from "../../../components/Button";
 
 function DonationCard() {
   return (
-    <div className="flex flex-col gap-4 shadow-md">
+    <div className="flex flex-col gap-4 shadow-md  ">
       <img src={image4} alt="" />
       <div className="p-4 flex flex-col gap-5">
         <div className="flex flex-row justify-between ">

src/pages/home/components/ReviewSection.jsx

@@ -5,8 +5,10 @@ import ReviewCard from "./ReviewCard";
 function ReviewSection() {
   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-2/6 h-full p-20 py-36 text-center flex items-center section-volunteer text-white">
+
+      <div className="flex flex-col md: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>