Career2

src/App.css

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

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/404/components/Section404.jsx

@@ -0,0 +1,40 @@
+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/career/components/Career.jsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import Hero1 from '../../../components/layout/Hero1'
+import Header from '../../../components/layout/Header'
+import Footer from '../../../components/layout/Footer'
+import CareerHeader from './CareerHeader'
+import CareerSection from './CareerSection'
+
+
+
+const career = () => {
+  return (
+
+    <div>
+        <Header/>
+
+        {/**  <Hero1/>*/}
+
+        <Hero1
+        title = "Career"
+        text = "Home"
+        span = "Career"
+        />
+
+
+
+          {/**career */}
+
+<section>
+
+    <div>
+
+   <CareerHeader/>
+
+   <CareerSection
+    title ="Refugee Education Research Specialist"
+    location ="New York"
+    type = "Full Time"
+    applyLink = "Apply Now"
+      />
+
+<CareerSection
+    title ="Marketing Volunteer"
+    location ="New York"
+    type = "Full Time"
+    applyLink = "Apply Now"
+      />
+
+<CareerSection
+    title ="Refugee Education Research Specialist"
+    location ="New York"
+    type = "Full Time"
+    applyLink = "Apply Now"
+      />
+
+<CareerSection
+    title ="Teacher Educator"
+    location ="New York"
+    type = "Full Time"
+    applyLink = "Apply Now"
+      />
+
+<CareerSection
+    title ="Education Management Advisor"
+    location ="New York"
+    type = "Full Time"
+    applyLink = "Apply Now"
+      />
+
+<CareerSection
+    title ="Social Cohesion and Tolerance Adviser"
+    location ="New York"
+    type = "Full Time"
+    applyLink = "Apply Now"
+      />
+
+
+
+
+    </div>
+
+</section>
+
+   <Footer/>
+
+   </div>
+
+
+  )
+}
+
+export default career
+

src/pages/career/components/CareerHeader.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+function CareerHeader() {
+  return (
+    <div>
+         <div className='text-center pt-10'>
+        <h1 className='text-3xl font-bold'>Become a Part of Our Big Family</h1>
+        <p className='pt-2'>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste cum dicta eius autem sint sunt! 
+            Deserunt aperiam perspiciatis autem illo.</p>
+    </div>
+
+    </div>
+  )
+}
+
+export default CareerHeader
+

src/pages/career/components/CareerSection.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+function CareerSection(props){
+    const title =props.title;
+    const location = props.location;
+    const type= props.type;
+    const applyLink = props.applyLink;
+
+
+
+  return (
+
+
+
+<div>
+
+
+<div className='gap-4'>
+
+<div className='bg-[#EEEAFC]  h-16 grid grid-cols-4 justify-between mt-8 mx-28 mr-28'>
+    <p className='px-4 mt-5'>{title}</p>
+    <p className='mt-5'>{location}</p>
+    <p className='mt-5'>{type}</p>
+
+    <div className='flex justify-center'>
+     <a href='#' 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'>{applyLink}
+       <i className="fa fa-angle-right pr-2 px-2"></i></a>
+       </div>
+</div>
+
+</div>
+
+
+</div>
+  )
+}
+
+export default CareerSection

src/pages/home/Home.jsx

@@ -1,9 +1,13 @@
 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";
 import Header from "../../components/layout/Header";
-import AboutSection from "./components/AboutSection";
+// import AboutSection from "./components/AboutSection";
 import BlogSection from "./components/BlogSection";
 import DonationSection from "./components/DonationSection";
 
@@ -35,8 +39,8 @@ function Home() {
       <HelpSection></HelpSection>
 
       {/* about us section */}
-      <AboutSection></AboutSection>
-
+
+{/* <AboutSection></AboutSection> */}
       {/* donate section  */}
 
       <DonationSection></DonationSection>

src/pages/home/components/EventCard.jsx

@@ -1,5 +1,6 @@
-import React from "react";
-import image10 from "../../../assets/images/Images 1.png";
+import React from 'react'
+import image10 from "../../../assets/images/image1.png";
+
 
 function EventCard(props) {
   const title = props.title;

src/pages/home/components/EventSection.jsx

@@ -1,5 +1,4 @@
-import React from "react";
-
+import React from 'react'
 import Button from "../../../components/Button";
 import EventCard from "./EventCard";
 function EventSection() {

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() {