worked with the careerDetail page

skye8-tech · Aug 14, 2024 · 0f393c9 · 0f393c9
1 parent caffd63
commit 0f393c9
Show file tree

Hide file tree

Showing 7 changed files with 206 additions and 6 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -12,6 +12,7 @@ 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 CareerDetails from "./pages/careerdetails/CareerDetails";
 
 function App() {
   return (
@@ -27,6 +28,7 @@ function App() {
         <Route path="/donners" element={<Donners />} />
         <Route path="/causes/:id" element={<CauseDetails />} />
         <Route path="/donate" element={<DonatePage />} />
+        <Route path="/careerdetails" element={<CareerDetails />} />
       </Routes>
     </BrowserRouter>
   );

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -16,7 +16,7 @@ function Button({ icon, text, type, href, className, ...props }) {
       {text}
       {icon}
     </Link>
-  ) : (
+   ): (
     <button className={`${type} ${className}`} {...props}>
       {text}
       {icon}

diff --git a/src/components/layout/GeneralHero.jsx b/src/components/layout/GeneralHero.jsx
@@ -21,7 +21,7 @@ function GeneralHero(props) {
         <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">
+          <div className="flex flex-row items-center gap-4 text-slate-200 text-2xl mt-4">
             <p>
               <Link to="/" className="">
                 Home

diff --git a/src/pages/careerdetails/CareerDetails.jsx b/src/pages/careerdetails/CareerDetails.jsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import Header from '../../components/layout/Header'
+import Footer from '../../components/layout/Footer'
+import GeneralHero from '../../components/layout/GeneralHero'
+import career from '../career/Career'
+import image from "../../assets/images/Rectangle 2.png";
+import CareerDetailSection from './components/CareerDetailSection'
+
+const CareerDetails = () => {
+  return (
+    <div>
+
+        <Header/>
+        <GeneralHero
+        title="Career"
+        subTitle={career?.title || "Teacher Educator"}
+        image={image}
+      ></GeneralHero>
+
+      <CareerDetailSection/>
+
+        <Footer/>
+
+    </div>
+  )
+}
+
+export default CareerDetails
+
diff --git a/src/pages/careerdetails/components/CareerDetailSection.jsx b/src/pages/careerdetails/components/CareerDetailSection.jsx
@@ -0,0 +1,169 @@
+import React from 'react'
+import Button from '../../../components/Button'
+
+const CareerDetailSection = () => {
+  return (
+    <div className='mx-28 mr-28'>
+        <div className='flex justify-between mt-8'>
+            <div>
+            <h1 className='text-4xl font-bold'>TEACHER EDUCATOR</h1>
+            <div className='flex gap-16 text-xl mt-4'>
+            <p>Full time</p>
+            <p>Remote</p>
+            <p>2-4years</p>
+            </div>
+            </div>
+
+            <div>
+             <Button className="primary-button"
+             text="Apply Now"
+             icon={<i className="fa fa-angle-right"></i>}
+           />
+
+            </div>
+        </div>
+
+        <div  className='flex justify-evenly mt-9  mb-6'>
+            <div>
+                <h1 className='text-2xl font-semibold mb-7'>About Role</h1>
+                <ul>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
+                    Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     architecto illo. Eaque sed qui nemo architecto!
+                     Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     architecto illo. Eaque sed qui nemo architecto!</p> </ul>
+            </div>
+
+            <div>
+                <h1 className='text-2xl font-semibold mb-10'>Similar Jobs</h1>
+                <div className='bg-slate-300 w-96 h-48 '>
+                    <h1 className='text-2xl font-semibold mx-10 mt-5'>Marketing Volunteer</h1>
+                    <div className='flex gap-8 text-xl mx-10 mt-5'>
+                    <p>Full time</p>
+                    <p>Remote</p>
+                    <p>2-4years</p>
+                     </div>
+                     <button className='secondary-button mx-10 mt-12'>Apply Now
+                      <i className="fa fa-angle-right"></i>
+                     </button>
+
+                </div>
+
+            </div>
+        </div>
+
+        <div  className='flex justify-evenly mt-9  mb-6'>
+            <div>
+                <h1 className='text-2xl font-semibold mb-7'>Qualification</h1>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
+                    Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     architecto illo. Eaque sed qui nemo architecto!
+                     Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     architecto illo. Eaque sed qui nemo architecto!</p>
+            </div>
+
+            <div>
+                <div className='bg-slate-300 w-96 h-48 '>
+                    <h1 className='text-2xl font-semibold mx-10'>Marketing Volunteer</h1>
+                    <div className='flex gap-8 text-xl mx-10 mt-5'>
+                    <p>Full time</p>
+                    <p>Remote</p>
+                    <p>2-4years</p>
+                     </div>
+                     <button className='secondary-button mx-10 mt-12'>Apply Now
+                      <i className="fa fa-angle-right"></i>
+                     </button>
+
+                </div>
+
+            </div>
+        </div>
+
+        <div  className='flex justify-evenly mt-9  mb-6'>
+            <div>
+                <h1 className='text-2xl font-semibold mb-7'>Responsibilities</h1>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
+                    Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     architecto illo. Eaque sed qui nemo architecto!
+                     Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     architecto illo. Eaque sed qui nemo architecto!</p>
+            </div>
+
+            <div>
+                <h1 className='text-2xl font-semibold mb-10'>More Jobs</h1>
+                <div className='bg-slate-300 w-96 h-48 '>
+                    <h1 className='text-2xl font-semibold mx-10'>Marketing Volunteer</h1>
+                    <div className='flex gap-8 text-xl mx-10 mt-5'>
+                    <p>Full time</p>
+                    <p>Remote</p>
+                    <p>2-4years</p>
+                     </div>
+                     <button className='secondary-button mx-10 mt-12'>Apply Now
+                      <i className="fa fa-angle-right"></i>
+                     </button>
+
+                </div>
+
+            </div>
+        </div>
+
+
+        <div  className='flex justify-evenly mt-9  mb-6'>
+            <div>
+                <h1 className='text-2xl font-semibold mb-7'>More Role</h1>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
+                    Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     architecto illo. Eaque sed qui nemo architecto!
+                     Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     Iusto doloremque veritatis eum quasi placeat fugiat
+                     nostrum maxime quos corporis cum quas, temporibus, inventore,
+                     architecto illo. Eaque sed qui nemo architecto!</p>
+            </div>
+
+            <div>
+
+                <div className='bg-slate-300 w-96 h-48 '>
+                    <h1 className='text-2xl font-semibold mx-10'>Marketing Volunteer</h1>
+                    <div className='flex gap-8 text-xl mx-10 mt-5'>
+                    <p>Full time</p>
+                    <p>Remote</p>
+                    <p>2-4years</p>
+                     </div>
+                     <button className='secondary-button mx-10 mt-12'>Apply Now
+                      <i className="fa fa-angle-right"></i>
+                     </button>
+
+                </div>
+
+            </div>
+        </div>
+
+
+
+    </div>
+  )
+}
+
+export default CareerDetailSection
diff --git 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
@@ -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() {
-Original file line number
+Diff line change
@@ Expand Up @@
           {text}
           {icon}
         </Link>
-      ) : (
+       ): (
         <button className={`${type} ${className}`} {...props}>
           {text}
           {icon}
@@ Expand Down @@