From 8590e06344c0de5ea21a18c55bc68fc0dc6eea1a Mon Sep 17 00:00:00 2001
From: bayeka binet <minetbayeka@gmail.com>
Date: Wed, 14 Aug 2024 01:59:39 -0700
Subject: [PATCH] worked with the evenlist and evendetails page , some part of
 the page was import and some designed

---
 src/App.jsx                                   |   6 +
 src/pages/event/Event.jsx                     |  73 ++++++++
 src/pages/event/EventDetails.jsx              |  33 ++++
 .../event/components/EventDetailSection.jsx   | 159 ++++++++++++++++++
 src/pages/event/components/EventList.jsx      |  65 +++++++
 src/pages/home/components/EventCard.jsx       |   2 +-
 src/pages/home/components/HelpSection.jsx     |   6 +-
 src/pages/leadership/Leadership.jsx           |   2 +-
 8 files changed, 341 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/event/Event.jsx
 create mode 100644 src/pages/event/EventDetails.jsx
 create mode 100644 src/pages/event/components/EventDetailSection.jsx
 create mode 100644 src/pages/event/components/EventList.jsx

diff --git a/src/App.jsx b/src/App.jsx
index f263b39..9adf30b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,6 +12,9 @@ import Donners from "./pages/donners/Donners";
 import Home from "./pages/home/Home";
 import Leadership from "./pages/leadership/Leadership";
 import Faqs from "./pages/faqs/Faqs";
+import EventList from "./pages/event/components/EventList";
+import Event from "./pages/event/Event";
+import EventDetails from "./pages/event/EventDetails";
 
 function App() {
   return (
@@ -27,6 +30,9 @@ function App() {
         <Route path="/donners" element={<Donners />} />
         <Route path="/causes/:id" element={<CauseDetails />} />
         <Route path="/donate" element={<DonatePage />} />
+        <Route path="/event" element={<Event />} />
+        <Route path="/event/:id" element={<EventDetails/>} />
+        
       </Routes>
     </BrowserRouter>
   );
diff --git a/src/pages/event/Event.jsx b/src/pages/event/Event.jsx
new file mode 100644
index 0000000..4c7f8c3
--- /dev/null
+++ b/src/pages/event/Event.jsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import Header from '../../components/layout/Header'
+import GeneralHero from '../../components/layout/GeneralHero'
+import Footer from '../../components/layout/Footer'
+import EventList from './components/EventList'
+import image from '../../assets/images/Rectangle16.png'
+import image26 from '../../assets/images/Rectangle 6.png'
+
+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 image13 from "../../assets/images/muslim.jpg";
+
+import image21 from "../../assets/images/Rectangle21.jpg";
+import image22 from "../../assets/images/Rectangle22.jpg";
+import image23 from "../../assets/images/Rectangle23.jpg";
+import Pagination from '../../components/Pagination'
+import StatisticsSection from '../../components/layout/StatisticsSection'
+import ReviewSection from '../home/components/ReviewSection'
+
+
+const Event = () => {
+  return (
+    <div>
+        <Header/>
+
+        <GeneralHero
+        title="Event"
+        subTitle={Event?.title || "EventList"}
+        image ={image}
+      ></GeneralHero>
+        {/* <GeneralHero
+        title = "EventList"
+        subtitle ="Event"
+        /> */}
+
+        <EventList
+        image ={image17}
+        image1 ={image26}
+        
+        
+        />
+
+      <EventList
+        image ={image18}
+        image1 ={image19} 
+        />
+
+     <EventList
+        image ={image20}
+        image1 ={image21} 
+        />
+
+     <EventList
+        image ={image22}
+        image1 ={image23} 
+        />
+        <Pagination/>
+
+        <StatisticsSection/>
+        <ReviewSection/>
+
+        <Footer/>
+
+       
+      
+    </div>
+  )
+}
+
+export default Event
diff --git a/src/pages/event/EventDetails.jsx b/src/pages/event/EventDetails.jsx
new file mode 100644
index 0000000..917fe4e
--- /dev/null
+++ b/src/pages/event/EventDetails.jsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import Header from '../../components/layout/Header'
+import Footer from '../../components/layout/Footer'
+import EventList from './components/EventList'
+import image from '../../assets/images/Rectangle16.png';
+
+import GeneralHero from '../../components/layout/GeneralHero';
+import EventDetailSection from './components/EventDetailSection';
+
+
+const EventDetails = () => {
+  return (
+    <div>
+
+    <Header/>
+    <GeneralHero
+     title="Event Details"
+     subTitle={Event?.title || "Need School For Mozambique Children"}
+     image ={image}
+     />
+
+     <EventDetailSection/>
+
+    
+    <Footer/>
+
+
+      
+    </div>
+  )
+}
+
+export default EventDetails
diff --git a/src/pages/event/components/EventDetailSection.jsx b/src/pages/event/components/EventDetailSection.jsx
new file mode 100644
index 0000000..2039763
--- /dev/null
+++ b/src/pages/event/components/EventDetailSection.jsx
@@ -0,0 +1,159 @@
+import React from 'react'
+
+import image3 from '../../../assets/images/Image3.png'
+import image12 from '../../../assets/images/Rectangle 12.png'
+import Button from '../../../components/Button'
+import image22 from '../../../assets/images/Rectangle22.jpg'
+import image23 from '../../../assets/images/Rectangle23.jpg'
+import image20 from '../../../assets/images/Rectangle20.jpg'
+
+
+const EventDetailSection = () => {
+  return (
+    
+
+    <div className=' flex   grid-cols-2  mx-28 mt-14 gap-52'>
+    
+     <div className=" flex flex-col gap-6">
+             <p className=" text-2xl md:text-3xl font-bold ">Causes Category</p>
+            <div className="flex flex-row justify-between text-xl">
+              <p>Water</p>
+              <p className=' text-xl'>(01)</p>
+            </div>
+            <div className="flex flex-row justify-between text-xl">
+             <p>Education </p>
+               <p className=' text-xl'>(02)</p>
+          </div>
+            <div className="flex flex-row justify-between text-xl">
+               <p>Water</p>
+               <p className=' text-xl'>(03)</p>
+            </div>
+             <div className="flex flex-row justify-between text-xl">
+              <p>Education </p>
+               <p className=''>(04)</p>
+           </div>
+
+           <div className=''>
+            <h1 className='font-bold text-2xl md:text-3xl mb-3'>Urgent Causes</h1>
+            <img src={image12}  alt='' className='w-[670px] h-[409px] pt-8'/>
+            <h2 className='gap-4 font-semibold text-xl md:text-2xl pt-5'>Children Education Needs For Change The World</h2>
+            <p className='pt-4'>Lorem ipsum dolor sit amet consectetur 
+                adipisicing elit. In, harum. adipisicing elit. In, harum.</p>
+
+           </div>
+           <div className='flex gap-40'>
+            <div className='flex flex-col'>
+                <p className='text-xl'>Goal</p>
+                <p className='text-primary-color font-semibold text-2xl mt-3'>$400</p>
+            </div>
+            <div className='flex flex-col'>
+                <p className='text-xl'>Rise</p>
+                <p className='text-primary-color font-semibold text-2xl mt-3'>$3000</p>
+            </div>
+            <div className='flex flex-col'>
+                <p className='text-xl'>To Go</p>
+                <p className='text-primary-color font-semibold text-2xl mt-3'>$1000</p>
+            </div>
+           </div>
+
+
+           <div>
+           <progress className="progress text-primary-color w-[40rem] rounded-full" value="70" max="100"></progress>
+
+           </div>
+
+           <div className=' flex gap-5 p-4'>   
+            <button className='border  w-16 h-14 '>$40</button>
+            <button className='border  w-16 h-14 '>$50</button> 
+            <button className='border  w-20 h-14 '>$100</button>
+            <button className='border   w-20 h-14 '>$200</button>
+            <button className='border   w-24 h-14 '>$500</button>
+           </div>
+
+           <div className='mx-48'>
+
+           <Button
+
+          type="primary-button"
+          text="Donate  Now"
+          icon={<i className="fa fa-angle-right"></i>}
+           />
+           </div>
+
+          </div> 
+
+
+            <div className=''>
+             <div>
+            <img src={image3} alt='' className='w-[900px] h-[500px]'/>
+            </div>
+
+            <div className='flex mt-5 gap-52'>
+            <div>
+            <i className="fa fa-calendar text-primary-color fa-2x "></i>
+            <p className='text-xl'>15 Feb 2024</p>
+            </div>
+            <div>
+            <i className="fa fa-clock-o text-primary-color fa-2x"></i>
+            <p className='text-xl'>10:00AM - 04:00PM</p>
+            </div>
+            <div>
+            <i className="fa fa-map-marker text-primary-color  fa-2x" ></i>
+            <p className='text-xl'>Mitchell, 57301 USA</p>
+            </div>
+
+            </div>
+
+            <div className=''>
+              <h1 className='text-xl md:text-2xl  font-semibold pt-4'>Need School For Mozambique Children</h1>
+              <p className='text-xl pt-3'>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+                Inventore quae perspiciatis repellat eveniet ut
+                 repudiandae ratione distinctio harum iure ipsa 
+                 obcaecati perferendis alias doloribus
+                 veniam voluptatem saepe, odio vel in?</p>
+            </div>
+
+            <div className=''>
+              <h1 className='text-xl md:text-2xl  font-semibold pt-4'>Old Education Needs For Change The World.</h1>
+              <p className='text-xl pt-3'>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+                Inventore quae perspiciatis repellat eveniet ut
+                 repudiandae ratione distinctio harum iure ipsa 
+                 obcaecati perferendis alias doloribus
+                 veniam voluptatem saepe, odio vel in?</p>
+            </div>
+
+            <div className='flex gap-4 mt-5 '>
+              <img src={image20} alt='' className='w-72 h-72'/>
+              <img src={image22} alt='' className='w-72 h-72'/>
+              <img src={image23} alt='' className='w-72 h-72'/>
+            </div>
+            <p className='text-xl pt-3 '>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit ab harum 
+              tenetur optio voluptatum veritatis quibusdam, animi quaerat
+               fugiat officia nihil doloribus adipisci libero voluptates 
+               modi mollitia cumque placeat hic?</p>
+
+               <div className=''>
+              <h1 className='text-xl md:text-2xl  font-semibold pt-4'>Current Sponsors.</h1>
+              <p className='text-xl pt-3'>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+                Inventore quae perspiciatis repellat eveniet ut
+                 repudiandae ratione distinctio harum iure ipsa 
+                 obcaecati perferendis alias doloribus
+                 veniam voluptatem saepe, odio vel in?</p>
+            </div>
+            <div className=''>
+              <h1 className='text-xl md:text-2xl  font-semibold pt-4'>Why Jion This Event?</h1>
+              <p className='text-xl pt-3'>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+                Inventore quae perspiciatis repellat eveniet ut
+                 repudiandae ratione distinctio harum iure ipsa 
+                 obcaecati perferendis alias doloribus
+                 veniam voluptatem saepe, odio vel in?</p>
+            </div>
+
+            </div>    
+
+      
+    </div>
+  )
+}
+
+export default EventDetailSection
diff --git a/src/pages/event/components/EventList.jsx b/src/pages/event/components/EventList.jsx
new file mode 100644
index 0000000..78d05ff
--- /dev/null
+++ b/src/pages/event/components/EventList.jsx
@@ -0,0 +1,65 @@
+import React from "react";
+import Button from "../../../components/Button";
+
+
+
+function EventList(props){
+    const image =props.image
+    const image1 = props.image1
+
+  return (
+
+    
+    <div className="mt-16 flex mb-9">
+      <div className="flex mx-28 bg-slate-50 drop-shadow-xl w-[700px] ">
+        <div>
+          <img src={image} alt="" className="w-56 h-60 rounded-l-lg " />
+        </div>
+
+        <div className="mx-10">
+          <h1 className="font-semibold text-xl pb-3">
+            Use Hashtags To Support Online
+          </h1>
+          <p>JANUARY 17, 2024 @12:00AM-JANUARY 30, 2024 @ 11:59 PM</p>
+          <h2 className="font-semibold text-xl pt-14">Event Location:</h2>
+
+          <div className="flex justify-between">
+            <p className="pt-5">Mitchell, 57301 United States</p>
+            
+            <Button
+              type="primary-button"
+              text="Jion Now"
+              icon={<i className="fa fa-angle-right"></i>}
+            ></Button> 
+          </div>
+        </div>
+      </div>
+
+      <div className="flex mx-28 bg-slate-50 drop-shadow-xl w-[700px] ">
+        <div>
+          <img src={image1} alt="" className="w-56 h-60 rounded-l-lg " />
+        </div>
+
+        <div className="mx-10">
+          <h1 className="font-semibold text-xl pb-3">
+            Use Hashtags To Support Online
+          </h1>
+          <p>JANUARY 17, 2024 @12:00AM-JANUARY 30, 2024 @ 11:59 PM</p>
+          <h2 className="font-semibold text-xl pt-14">Event Location:</h2>
+
+          <div className="flex justify-between">
+            <p className="pt-5">Mitchell, 57301 United States</p>
+
+            <Button
+              type="primary-button"
+              text="Jion Now"
+              icon={<i className="fa fa-angle-right"></i>}
+            ></Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventList;
diff --git a/src/pages/home/components/EventCard.jsx b/src/pages/home/components/EventCard.jsx
index 27af64e..ef825b4 100644
--- a/src/pages/home/components/EventCard.jsx
+++ b/src/pages/home/components/EventCard.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import image10 from "../../../assets/images/image1.png";
+import image10 from "../../../assets/images/Image1.png";
 
 
 function EventCard(props) {
diff --git a/src/pages/home/components/HelpSection.jsx b/src/pages/home/components/HelpSection.jsx
index ac1cf97..564ef65 100644
--- a/src/pages/home/components/HelpSection.jsx
+++ b/src/pages/home/components/HelpSection.jsx
@@ -1,7 +1,7 @@
 import React from "react";
-import icon from "../../../assets/images/icon.png";
-import icon2 from "../../../assets/images/icon2.png";
-import icon3 from "../../../assets/images/icon3.png";
+import icon from "../../../assets/images/Icon.png";
+import icon2 from "../../../assets/images/Icon2.png";
+import icon3 from "../../../assets/images/Icon3.png";
 import HelpCard from "./HelpCard";
 
 function HelpSection() {
diff --git a/src/pages/leadership/Leadership.jsx b/src/pages/leadership/Leadership.jsx
index 2d54a55..2a86a07 100644
--- a/src/pages/leadership/Leadership.jsx
+++ b/src/pages/leadership/Leadership.jsx
@@ -3,7 +3,7 @@ import Footer from "../../components/layout/Footer";
 import Header from "../../components/layout/Header";
 import Hero1 from "../../components/layout/Hero1";
 import Pagination from "../../components/Pagination";
-import LeadershipSection from "./components/LeadershipSection";
+import LeadershipSection from "../leadership/components/LeadershipSection";
 
 const Leadership = () => {
   return (