Evenlist

src/App.jsx

@@ -14,6 +14,10 @@ import Leadership from "./pages/leadership/Leadership";
 import Faqs from "./pages/faqs/Faqs";
 import Blog from "./pages/Blog/Blog";
 import BlogDetails from "./pages/Blog/BlogDetails";
+import Event from "./pages/event/Event";
+import EventDetails from "./pages/event/EventDetails";
+import ApplyCareer from "./pages/applycareer/ApplyCareer";
+
 
 function App() {
   return (
@@ -29,8 +33,13 @@ function App() {
         <Route path="/donners" element={<Donners />} />
         <Route path="/causes/:id" element={<CauseDetails />} />
         <Route path="/donate" element={<DonatePage />} />
-        <Route path="/blog" element={<Blog/>}/>
-        <Route path="/blog/:id" element={<BlogDetails/>}/>
+        <Route path="/blog" element={<Blog />} />
+        <Route path="/blog/:id" element={<BlogDetails />} />
+        <Route path="/event" element={<Event />} />
+        <Route path="/event/:id" element={<EventDetails />} />
+        <Route path="/applycareer" element={<ApplyCareer />} />
+
+
       </Routes>
     </BrowserRouter>
   );

src/pages/Blog/Blog.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import image1 from "../../assets/images/Rectangle 2.png";
+import image1 from "/assets/images/Rectangle 2.png";
 import GeneralHero from "../../components/layout/GeneralHero";
 import Header from "../../components/layout/Header";
 

src/pages/Blog/BlogDetails.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { useParams } from "react-router-dom";
 import Button from "../../../src/components/Button";
-import image from "../../assets/images/Rectangle 2.png";
-import image2 from "../../assets/images/Image3.png";
-import image3 from "../../assets/images/Rectangle19.jpg";
+import image from "/assets/images/Rectangle 2.png";
+import image2 from "/assets/images/Image3.png";
+import image3 from "/assets/images/Rectangle19.jpg";
 import Footer from "../../components/layout/Footer";
 import GeneralHero from "../../components/layout/GeneralHero";
 import Header from "../../components/layout/Header";

src/pages/Blog/components/BlogList.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import BlogCard from '../../home/components/BlogCard';
-import image14 from "../../../assets/images/Rectangle 14.png";
+import image14 from "/assets/images/Rectangle 14.png";
 import Pagination from '../../../components/Pagination';
 function BlogList() {
 const blogId=1

src/pages/applycareer/components/ApplyForm.jsx

@@ -0,0 +1,131 @@
+import React from 'react'
+
+function ApplyForm (props) {
+
+    const  text = props.text
+    const info = props.info
+    const fN = props.fN
+    const LN = props.LN
+    const Email = props.Email
+    const number = props.number
+    const position = props.position
+    const experience= props.experience
+    const Cv= props.Cv
+
+
+  return (
+    <div className="bg-primary-color mt-20 mx-[450px] w-[900px] h-[700px] text-slate-200">
+    <h1 className="font-bold text-3xl pt-10 mx-14 ">{text}</h1>
+    <h2 className="font-semibold text-xl mt-3 mb-3     mx-14">{info}</h2>
+
+    <div className=" mx-14">
+      <form className="flex-col"> 
+        <div className="flex gap-5">
+          <div className="">
+            <label className="text-xl">{fN}</label>
+            <div className="pt-3">
+              <input
+                type=" text"
+                name="name"
+                placeholder="First Name "
+                className="bg-primary-color w-96 text-sm p-1  border rounded-md px-2  focus:outline-none"
+              />
+            </div>
+          </div>
+
+          <div className="">
+            <label className="inline-block text-xl">{LN}</label>
+            <div className="pt-3">
+              <input
+                type=" text"
+                name="name"
+                placeholder="Last Name"
+                className="bg-primary-color  w-96 text-sm p-1   border rounded-md px-2 focus:outline-none"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex gap-5 pt-6">
+          <div>
+            <label className="text-xl">{Email}</label>
+            <div className="pt-3">
+              <input
+                type=" text"
+                name="email"
+                placeholder="Email Address "
+                className="bg-primary-color  w-96 text-sm p-1   border rounded-md px-2 focus:outline-none"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="inline-block text-xl">{number}</label>
+            <div className="pt-3">
+              <input
+                type=" text"
+                name=""
+                placeholder="Phone Number "
+                className="bg-primary-color  w-96  text-sm p-1   border rounded-md px-2 focus:outline-none"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex gap-5 pt-6">
+          <div>
+            <label className="text-xl">{position}</label>
+            <div className="pt-3">
+              <input
+                type=" text"
+                name=""
+                placeholder="Age "
+                className="bg-primary-color   w-96 text-sm p-1   border rounded-md px-2 focus:outline-none"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="inline-block text-xl">{experience}</label>
+            <div className="pt-3">
+              <input
+                type=" text"
+                name=""
+                placeholder="Region "
+                className="bg-primary-color  w-96 text-sm p-1   border rounded-md px-2 focus:outline-none"
+              />
+            </div>
+          </div>
+        </div>
+
+
+        <div className="grid pt-14">
+        <label form="message" className="text-xl">
+          {Cv}
+        </label>
+
+        <div className="inline-block pt-3">
+        <input
+                type=" text"
+                name=""
+                placeholder="Submit your google drive link "
+                className="bg-primary-color   w-full text-sm p-1   border rounded-md px-2 focus:outline-none"
+              />
+
+        </div>
+
+        </div>
+
+
+
+        <a href="#" className="border w-20 p-1 rounded  mb-3  flex mt-20">
+          Submit
+          <i className="fa fa-angle-right pr-2  px-2  pt-1"></i>
+        </a>
+      </form>
+    </div>
+  </div>
+  )
+}
+
+export default ApplyForm

src/pages/career/components/CareerSection.jsx

@@ -16,9 +16,9 @@ function CareerSection(props) {
 
           <div className="flex justify-center">
             <a
-              href="#"
+              href="/applycareer"
               className=" mt-3 mr-4 bg-white bg-transparent text-primary-color flex flex-row rounded-[.4rem]
-     items-center border-solid border-primary-color border w-28 h-10 px-1"
+              items-center border-solid border-primary-color border w-28 h-10 px-1"
             >
               {applyLink}
               <i className="fa fa-angle-right pr-2 px-2"></i>

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

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