From 19db2095b03061a65b07db8868a3fbb480127280 Mon Sep 17 00:00:00 2001
From: Harsh Patil <harshpatil2956@gmail.com>
Date: Sat, 25 May 2024 11:43:00 +0530
Subject: [PATCH] Revert "Filter jobs"

---
 client/package-lock.json         |  10 --
 client/package.json              |   1 -
 client/src/App.jsx               |  44 ++---
 client/src/components/FAQs.jsx   |  76 ---------
 client/src/components/Footer.jsx |   2 +-
 client/src/pages/ApplyForm.jsx   | 265 -------------------------------
 client/src/pages/FindJobs.jsx    |  52 ++----
 client/src/pages/JobDetail.jsx   | 101 ++++++------
 client/src/utils/data.js         | 124 ++++++---------
 9 files changed, 131 insertions(+), 544 deletions(-)
 delete mode 100644 client/src/components/FAQs.jsx
 delete mode 100644 client/src/pages/ApplyForm.jsx

diff --git a/client/package-lock.json b/client/package-lock.json
index fd73623..39577ff 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -23,7 +23,6 @@
         "react-icons": "^4.10.1",
         "react-redux": "^8.1.1",
         "react-router-dom": "^6.14.1",
-        "slugify": "^1.6.6",
         "styled-components": "^6.1.11"
       },
       "devDependencies": {
@@ -4861,15 +4860,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/slugify": {
-      "version": "1.6.6",
-      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
-      "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
-      "engines": {
-        "node": ">=8.0.0"
-  }
-},
-
     "node_modules/signal-exit": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
diff --git a/client/package.json b/client/package.json
index 9aaef67..e484467 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,7 +25,6 @@
     "react-icons": "^4.10.1",
     "react-redux": "^8.1.1",
     "react-router-dom": "^6.14.1",
-    "slugify": "^1.6.6",
     "styled-components": "^6.1.11"
   },
   "devDependencies": {
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 5c6bc09..9806b72 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -10,8 +10,6 @@ import {
   UserProfile,
 } from "./pages";
 import { useSelector } from "react-redux";
-import FAQs from "./components/FAQs";
-import ApplyForm from "./pages/ApplyForm";
 
 import SectionFirst from "./components/Home/SectionFirst";
 import SectionSecond from "./components/Home/SectionSecond";
@@ -57,27 +55,9 @@ function App() {
       {loading && <Loader />}
       <Routes>
         <Route element={<Layout />}>
-          <Route path="/" element={<Navigate to="/find-jobs" replace />} />
-          <Route path="/find-jobs" element={<FindJobs />} />
-          <Route path="/companies" element={<Companies />} />
-          <Route path="/FAQ" element={<FAQs />} />
-          <Route path="/apply/:id/:title" element={<ApplyForm />} />
-          <Route path="/about-us" element={<About />} />
-          <Route path="/user-auth" element={<AuthPage />} />
-          <Route path="/job-detail/:id" element={<JobDetail />} />
-          <Route path="/upload-job" element={<UploadJob />} />
-          <Route
-            path={
-              user?.user?.accountType === "seeker"
-                ? "/user-profile"
-                : "/user-profile/:id"
-            }
-            element={<UserProfile />}
-          />
-          <Route path="/company-profile" element={<CompanyProfile />} />
-          <Route path="/company-profile/:id" element={<CompanyProfile />} />
+          <Route element={<About />} path="/about" />
           <Route
-            path="/"
+            path='/'
             element={
               <>
                 <SectionFirst />
@@ -89,7 +69,27 @@ function App() {
               </>
             }
           />
+          <Route path='/companies' element={<Companies />} />
+          <Route path="/find-jobs" element={<FindJobs />} />
+          <Route
+            path={
+              user?.user?.accountType === "seeker"
+                ? "/user-profile"
+                : "/user-profile/:id"
+            }
+            element={<UserProfile />}
+          />
+          <Route path="/company-profile" element={<CompanyProfile />} />
+          <Route path="/company-profile/:id" element={<CompanyProfile />} />
+          <Route path="/upload-job" element={<UploadJob />} />
+          <Route path="/job-detail/:id" element={<JobDetail />} />
         </Route>
+        <Route path="/about-us" element={<About />} />
+        <Route path="/user-auth" element={<AuthPage />} />
+        <Route
+          path="/"
+          element={<Navigate to="/find-jobs" replace={true} />}
+        />
       </Routes>
       {user && <Footer />}
     </main>
diff --git a/client/src/components/FAQs.jsx b/client/src/components/FAQs.jsx
deleted file mode 100644
index 71162cb..0000000
--- a/client/src/components/FAQs.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { useState } from 'react';
-const faqsData = [
-    {
-      question: "How do I create an account?",
-      answer: "To create an account, click on the 'Sign Up' button at the top right corner and fill in the required details."
-    },
-    {
-      question: "How do I reset my password?",
-      answer: "Click on the 'Forgot Password' link on the login page and follow the instructions to reset your password."
-    },
-    {
-      question: "How do I search for jobs?",
-      answer: "Use the search bar on the homepage to enter keywords, job titles, or company names. You can also use filters to narrow down your search."
-    },
-    {
-      question: "How can I apply for a job?",
-      answer: "Once you find a job you're interested in, click on the 'Apply' button and follow the instructions to submit your application."
-    },
-    {
-      question: "How do I receive job alerts?",
-      answer: "To receive job alerts, go to your account settings and enable job alerts. You can customize the alerts based on your preferences and receive notifications via email."
-    },
-    {
-      question: "How do I contact support?",
-      answer: "If you need assistance, you can contact our support team by clicking on the 'Contact Us' link at the bottom of the page. Fill in the contact form and our team will get back to you as soon as possible."
-    },
-    {
-      question: "How do I upload my resume?",
-      answer: "To upload your resume, go to your profile page and click on 'Upload Resume'. Select the file from your computer and it will be added to your profile."
-    },
-    {
-      question: "Can I apply for jobs without an account?",
-      answer: "No, you need to have an account to apply for jobs on our platform. This helps us to provide a more personalized experience and track your application status."
-    },
-    {
-      question: "What types of jobs are available?",
-      answer: "We have a wide range of job listings across various industries, including technology, healthcare, finance, education, and more. Use the search filters to find jobs that match your skills and interests."
-    },
-    {
-      question: "How can I improve my chances of getting hired?",
-      answer: "Make sure your profile is complete and up-to-date, including your resume and skills. Tailor your applications to the job descriptions, and consider reaching out to employers directly through the platform's messaging system."
-    }
-  ];
-  
-
-const FAQs = () => {
-  const [activeIndex, setActiveIndex] = useState(null);
-
-  const handleClick = (index) => {
-    setActiveIndex(activeIndex === index ? null : index);
-  };
-
-  return (
-    <div className="max-w-2xl mx-auto p-4">
-      <h1 className="text-3xl font-bold text-center my-4">Frequently Asked Questions</h1>
-      <ul className="space-y-4 mt-12">
-        {faqsData.map((faq, index) => (
-          <li key={index} className="border-b pb-4">
-            <h3
-              onClick={() => handleClick(index)}
-              className="text-xl font-semibold cursor-pointer flex justify-between items-center"
-            >
-              {faq.question}
-              <span className="ml-4 transform transition-transform duration-200" style={{ transform: activeIndex === index ? 'rotate(180deg)' : 'rotate(0deg)' }}>
-                ▼
-              </span>
-            </h3>
-            {activeIndex === index && <p className="mt-2 text-gray-600">{faq.answer}</p>}
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-export default FAQs;
diff --git a/client/src/components/Footer.jsx b/client/src/components/Footer.jsx
index 62b7af9..74c7c36 100644
--- a/client/src/components/Footer.jsx
+++ b/client/src/components/Footer.jsx
@@ -37,7 +37,7 @@ const Footer = () => {
                   {links.map((link, index) => (
                     <Link
                       key={link + index}
-                      to={"/"+link}
+                      to="/"
                       className="text-gray-300 text-sm hover:text-white "
                     >
                       {link}
diff --git a/client/src/pages/ApplyForm.jsx b/client/src/pages/ApplyForm.jsx
deleted file mode 100644
index c4812f6..0000000
--- a/client/src/pages/ApplyForm.jsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import React, { useState } from "react";
-import { useParams } from "react-router-dom";
-import { jobs } from "../utils/data";
-
-const ApplyForm = () => {
-  const { id } = useParams();
-  const job = jobs[id - 1];
-
-  const [step, setStep] = useState(1);
-  const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    phone: "",
-    resume: null,
-    experience: "",
-    experienceYears: "",
-  });
-  const [errors, setErrors] = useState({});
-  const [successMessage, setSuccessMessage] = useState("");
-
-  const validateStep = () => {
-    const newErrors = {};
-    if (step === 1) {
-      if (!formData.name) newErrors.name = "Name is required";
-      if (!formData.email) newErrors.email = "Email is required";
-      if (!formData.phone) newErrors.phone = "Phone number is required";
-      if (formData.phone && !/^\d{10}$/.test(formData.phone)) {
-        newErrors.phone = "Phone number must be exactly 10 digits";
-      }
-    }
-    if (step === 2) {
-      if (!formData.resume) newErrors.resume = "Resume is required";
-    }
-    if (step === 3) {
-      if (!formData.experience) newErrors.experience = "Experience is required";
-      if (!formData.experienceYears)
-        newErrors.experienceYears = "Experience years are required";
-    }
-    return newErrors;
-  };
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData({ ...formData, [name]: value });
-  };
-
-  const handleFileChange = (e) => {
-    setFormData({ ...formData, resume: e.target.files[0] });
-  };
-
-  const handleNextStep = () => {
-    const validationErrors = validateStep();
-    if (Object.keys(validationErrors).length === 0) {
-      setErrors({});
-      setStep(step + 1);
-    } else {
-      setErrors(validationErrors);
-    }
-  };
-
-  const handlePrevStep = () => {
-    setStep(step - 1);
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    const validationErrors = validateStep();
-    if (Object.keys(validationErrors).length === 0) {
-      setErrors({});
-      console.log("Application submitted:", formData);
-      setSuccessMessage(
-        "Your application was submitted successfully! We'll get in touch soon."
-      );
-      // Handle form submission (e.g., send data to a backend server)
-    } else {
-      setErrors(validationErrors);
-    }
-  };
-
-  return (
-    <div className="max-w-2xl mx-auto p-8">
-      <h1 className="text-3xl font-bold my-6 text-center">
-        Application Form - {job.jobTitle}
-      </h1>
-      {successMessage && (
-        <div className="min-h-[400px]">
-          <div className="bg-green-100 mt-10 text-green-700 p-4 rounded-lg mb-6">
-            {successMessage}
-          </div>
-        </div>
-      )}
-      {!successMessage && (
-        <form onSubmit={handleSubmit}>
-          {step === 1 && (
-            <div className="min-h-[400px]">
-              <div className="mb-4">
-                <label
-                  className="block text-gray-700 font-semibold mb-2"
-                  htmlFor="name"
-                >
-                  Full Name
-                </label>
-                <input
-                  type="text"
-                  name="name"
-                  id="name"
-                  value={formData.name}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 border rounded-lg"
-                  placeholder="Enter your full name"
-                />
-                {errors.name && <p className="text-red-500">{errors.name}</p>}
-              </div>
-              <div className="mb-4">
-                <label
-                  className="block text-gray-700 font-semibold mb-2"
-                  htmlFor="email"
-                >
-                  Email
-                </label>
-                <input
-                  type="email"
-                  name="email"
-                  id="email"
-                  value={formData.email}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 border rounded-lg"
-                  placeholder="Enter your email"
-                />
-                {errors.email && <p className="text-red-500">{errors.email}</p>}
-              </div>
-              <div className="mb-4">
-                <label
-                  className="block text-gray-700 font-semibold mb-2"
-                  htmlFor="phone"
-                >
-                  Phone Number
-                </label>
-                <input
-                  type="tel"
-                  name="phone"
-                  id="phone"
-                  value={formData.phone}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 border rounded-lg"
-                  placeholder="Enter your phone number"
-                />
-                {errors.phone && <p className="text-red-500">{errors.phone}</p>}
-              </div>
-              <div className="text-center">
-                <button
-                  type="button"
-                  onClick={handleNextStep}
-                  className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-200"
-                >
-                  Next
-                </button>
-              </div>
-            </div>
-          )}
-          {step === 2 && (
-            <div className="min-h-[400px]">
-              <div className="mb-4">
-                <label
-                  className="block text-gray-700 font-semibold mb-2"
-                  htmlFor="resume"
-                >
-                  Upload Resume
-                </label>
-                <input
-                  type="file"
-                  name="resume"
-                  id="resume"
-                  onChange={handleFileChange}
-                  className="w-full px-3 py-2 border rounded-lg"
-                />
-                {errors.resume && (
-                  <p className="text-red-500">{errors.resume}</p>
-                )}
-              </div>
-              <div className="flex justify-between">
-                <button
-                  type="button"
-                  onClick={handlePrevStep}
-                  className="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition-colors duration-200"
-                >
-                  Previous
-                </button>
-                <button
-                  type="button"
-                  onClick={handleNextStep}
-                  className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-200"
-                >
-                  Next
-                </button>
-              </div>
-            </div>
-          )}
-          {step === 3 && (
-            <div className="min-h-[400px]">
-              <div className="mb-4">
-                <label
-                  className="block text-gray-700 font-semibold mb-2"
-                  htmlFor="experience"
-                >
-                  Relevant Experience
-                </label>
-                <textarea
-                  name="experience"
-                  id="experience"
-                  value={formData.experience}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 border rounded-lg"
-                  placeholder="Describe your relevant experience"
-                  rows="5"
-                ></textarea>
-                {errors.experience && (
-                  <p className="text-red-500">{errors.experience}</p>
-                )}
-              </div>
-              <div className="mb-4">
-                <label
-                  className="block text-gray-700 font-semibold mb-2"
-                  htmlFor="experienceYears"
-                >
-                  Years of Experience
-                </label>
-                <input
-                  type="number"
-                  min={0}
-                  name="experienceYears"
-                  id="experienceYears"
-                  value={formData.experienceYears}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 border rounded-lg"
-                  placeholder="Enter your years of experience"
-                />
-                {errors.experienceYears && (
-                  <p className="text-red-500">{errors.experienceYears}</p>
-                )}
-              </div>
-              <div className="flex justify-between">
-                <button
-                  type="button"
-                  onClick={handlePrevStep}
-                  className="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition-colors duration-200"
-                >
-                  Previous
-                </button>
-                <button
-                  type="submit"
-                  className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-200"
-                >
-                  Submit Application
-                </button>
-              </div>
-            </div>
-          )}
-        </form>
-      )}
-    </div>
-  );
-};
-
-export default ApplyForm;
diff --git a/client/src/pages/FindJobs.jsx b/client/src/pages/FindJobs.jsx
index 446f78c..b3fd128 100644
--- a/client/src/pages/FindJobs.jsx
+++ b/client/src/pages/FindJobs.jsx
@@ -12,6 +12,8 @@ const FindJobs = () => {
   const [sort, setSort] = useState("Newest");
   const [page, setPage] = useState(1);
   const [numPage, setNumPage] = useState(1);
+  const [recordCount, setRecordCount] = useState(0);
+  const [data, setData] = useState([]);
 
   const [searchQuery, setSearchQuery] = useState("");
   const [jobLocation, setJobLocation] = useState("");
@@ -20,49 +22,19 @@ const FindJobs = () => {
 
   const [isFetching, setIsFetching] = useState(false);
 
+  const location = useLocation();
+  const navigate = useNavigate();
+
   const filterJobs = (val) => {
-    if (filterJobTypes.includes(val)) {
-      setFilterJobTypes(filterJobTypes.filter((el) => el !== val));
+    if (filterJobTypes?.includes(val)) {
+      setFilterJobTypes(filterJobTypes.filter((el) => el != val));
     } else {
       setFilterJobTypes([...filterJobTypes, val]);
     }
   };
 
-  const filterExperience = (e) => {
-    const val = e.target.value;
-    if (filterExp.includes(val)) {
-      setFilterExp(filterExp.filter((el) => el !== val));
-    } else {
-      setFilterExp([...filterExp, val]);
-    }
-  };
-
-  const getFilteredJobs = () => {
-    let filtered = jobs;
-
-    if (filterJobTypes.length > 0) {
-      filtered = filtered.filter((job) => filterJobTypes.includes(job.jobType));
-    }
-
-    if (filterExp.length > 0) {
-      filtered = filtered.filter((job) =>
-        filterExp.some((exp) => job.experience.includes(exp))
-      );
-    }
-
-    if (searchQuery) {
-      filtered = filtered.filter((job) =>
-        job.jobTitle.toLowerCase().includes(searchQuery.toLowerCase())
-      );
-    }
-
-    if (jobLocation) {
-      filtered = filtered.filter((job) =>
-        job.location.toLowerCase().includes(jobLocation.toLowerCase())
-      );
-    }
-
-    return filtered;
+  const filterExperience = async (e) => {
+    setFilterExp(e);
   };
 
   return (
@@ -127,7 +99,7 @@ const FindJobs = () => {
                     type='checkbox'
                     value={exp?.value}
                     className='w-4 h-4'
-                    onChange={filterExperience}
+                    onChange={(e) => filterExperience(e.target.value)}
                   />
                   <span>{exp.title}</span>
                 </div>
@@ -139,7 +111,7 @@ const FindJobs = () => {
         <div className='w-full md:w-5/6 px-5 md:px-0'>
           <div className='flex items-center justify-between mb-4'>
             <p className='text-sm md:text-base'>
-              Showing: <span className='font-semibold'>{getFilteredJobs().length}</span> Jobs
+              Showing: <span className='font-semibold'>1,902</span> Jobs
               Available
             </p>
 
@@ -151,7 +123,7 @@ const FindJobs = () => {
           </div>
 
           <div className='w-full flex flex-wrap gap-4'>
-            {getFilteredJobs().map((job, index) => (
+            {jobs.map((job, index) => (
               <JobCard job={job} key={index} />
             ))}
           </div>
diff --git a/client/src/pages/JobDetail.jsx b/client/src/pages/JobDetail.jsx
index a506278..bee1d01 100644
--- a/client/src/pages/JobDetail.jsx
+++ b/client/src/pages/JobDetail.jsx
@@ -2,10 +2,9 @@ import { useEffect, useState } from "react";
 import { Linkedin } from "../assets";
 import moment from "moment";
 import { AiOutlineSafetyCertificate } from "react-icons/ai";
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { jobs } from "../utils/data";
 import { CustomButton, JobCard } from "../components";
-import slugify from "slugify"
 
 const JobDetail = () => {
   const params = useParams();
@@ -18,77 +17,75 @@ const JobDetail = () => {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   }, [id]);
 
-  console.log("job name", job);
-
   return (
-    <div className="container mx-auto">
-      <div className="w-full flex flex-col md:flex-row gap-10">
+    <div className='container mx-auto'>
+      <div className='w-full flex flex-col md:flex-row gap-10'>
         {/* LEFT SIDE */}
-        <div className="w-full h-fit md:w-2/3 2xl:2/4 bg-white px-5 py-10 md:px-10 shadow-md">
-          <div className="w-full flex items-center justify-between">
-            <div className="w-3/4 flex gap-2">
+        <div className='w-full h-fit md:w-2/3 2xl:2/4 bg-white px-5 py-10 md:px-10 shadow-md'>
+          <div className='w-full flex items-center justify-between'>
+            <div className='w-3/4 flex gap-2'>
               <img
                 src={job?.company?.profileUrl}
                 alt={job?.company?.name}
-                className="w-20 h-20 md:w-24 md:h-20 rounded"
+                className='w-20 h-20 md:w-24 md:h-20 rounded'
               />
 
-              <div className="flex flex-col">
-                <p className="text-xl font-semibold text-gray-600">
+              <div className='flex flex-col'>
+                <p className='text-xl font-semibold text-gray-600'>
                   {job?.jobTitle}
                 </p>
 
-                <span className="text-base">{job?.location}</span>
+                <span className='text-base'>{job?.location}</span>
 
-                <span className="text-base text-blue-600">
+                <span className='text-base text-blue-600'>
                   {job?.company?.name}
                 </span>
 
-                <span className="text-gray-500 text-sm">
+                <span className='text-gray-500 text-sm'>
                   {moment(job?.createdAt).fromNow()}
                 </span>
               </div>
             </div>
 
-            <div className="">
-              <AiOutlineSafetyCertificate className="text-3xl text-blue-500" />
+            <div className=''>
+              <AiOutlineSafetyCertificate className='text-3xl text-blue-500' />
             </div>
           </div>
 
-          <div className="w-full flex flex-wrap md:flex-row gap-2 items-center justify-between my-10">
-            <div className="bg-[#bdf4c8] w-40 h-16 rounded-lg flex flex-col items-center justify-center">
-              <span className="text-sm">Salary</span>
-              <p className="text-lg font-semibold text-gray-700">
+          <div className='w-full flex flex-wrap md:flex-row gap-2 items-center justify-between my-10'>
+            <div className='bg-[#bdf4c8] w-40 h-16 rounded-lg flex flex-col items-center justify-center'>
+              <span className='text-sm'>Salary</span>
+              <p className='text-lg font-semibold text-gray-700'>
                 $ {job?.salary}
               </p>
             </div>
 
-            <div className="bg-[#bae5f4] w-40 h-16 rounded-lg flex flex-col items-center justify-center">
-              <span className="text-sm">Job Type</span>
-              <p className="text-lg font-semibold text-gray-700">
+            <div className='bg-[#bae5f4] w-40 h-16 rounded-lg flex flex-col items-center justify-center'>
+              <span className='text-sm'>Job Type</span>
+              <p className='text-lg font-semibold text-gray-700'>
                 {job?.jobType}
               </p>
             </div>
 
-            <div className="bg-[#fed0ab] w-40 h-16 px-6 rounded-lg flex flex-col items-center justify-center">
-              <span className="text-sm">No. of Applicants</span>
-              <p className="text-lg font-semibold text-gray-700">
+            <div className='bg-[#fed0ab] w-40 h-16 px-6 rounded-lg flex flex-col items-center justify-center'>
+              <span className='text-sm'>No. of Applicants</span>
+              <p className='text-lg font-semibold text-gray-700'>
                 {job?.applicants?.length}K
               </p>
             </div>
 
-            <div className="bg-[#cecdff] w-40 h-16 px-6 rounded-lg flex flex-col items-center justify-center">
-              <span className="text-sm">No. of Vacancies</span>
-              <p className="text-lg font-semibold text-gray-700">
+            <div className='bg-[#cecdff] w-40 h-16 px-6 rounded-lg flex flex-col items-center justify-center'>
+              <span className='text-sm'>No. of Vacancies</span>
+              <p className='text-lg font-semibold text-gray-700'>
                 {job?.vacancies}
               </p>
             </div>
           </div>
 
-          <div className="w-full flex gap-4 py-5">
+          <div className='w-full flex gap-4 py-5'>
             <CustomButton
               onClick={() => setSelected("0")}
-              title="Job Description"
+              title='Job Description'
               containerStyles={`w-full flex items-center justify-center py-3 px-5 outline-none rounded-full text-sm ${
                 selected === "0"
                   ? "bg-black text-white"
@@ -98,7 +95,7 @@ const JobDetail = () => {
 
             <CustomButton
               onClick={() => setSelected("1")}
-              title="Company"
+              title='Company'
               containerStyles={`w-full flex items-center justify-center  py-3 px-5 outline-none rounded-full text-sm ${
                 selected === "1"
                   ? "bg-black text-white"
@@ -107,17 +104,17 @@ const JobDetail = () => {
             />
           </div>
 
-          <div className="my-6">
+          <div className='my-6'>
             {selected === "0" ? (
               <>
-                <p className="text-xl font-semibold">Job Decsription</p>
+                <p className='text-xl font-semibold'>Job Decsription</p>
 
-                <span className="text-base">{job?.detail[0]?.desc}</span>
+                <span className='text-base'>{job?.detail[0]?.desc}</span>
 
                 {job?.detail[0]?.requirement && (
                   <>
-                    <p className="text-xl font-semibold mt-8">Requirement</p>
-                    <span className="text-base">
+                    <p className='text-xl font-semibold mt-8'>Requirement</p>
+                    <span className='text-base'>
                       {job?.detail[0]?.requirement}
                     </span>
                   </>
@@ -125,35 +122,33 @@ const JobDetail = () => {
               </>
             ) : (
               <>
-                <div className="mb-6 flex flex-col">
-                  <p className="text-xl text-blue-600 font-semibold">
+                <div className='mb-6 flex flex-col'>
+                  <p className='text-xl text-blue-600 font-semibold'>
                     {job?.company?.name}
                   </p>
-                  <span className="text-base">{job?.company?.location}</span>
-                  <span className="text-sm">{job?.company?.email}</span>
+                  <span className='text-base'>{job?.company?.location}</span>
+                  <span className='text-sm'>{job?.company?.email}</span>
                 </div>
 
-                <p className="text-xl font-semibold">About Company</p>
+                <p className='text-xl font-semibold'>About Company</p>
                 <span>{job?.company?.about}</span>
               </>
             )}
           </div>
 
-          <div className="w-full">
-            <Link to={`/apply/${job.id}/${slugify(job.jobTitle).toLowerCase()}`}>
-              <CustomButton
-                title="Apply Now"
-                containerStyles={`w-full flex items-center justify-center text-white bg-black py-3 px-5 outline-none rounded-full text-base`}
-              />
-            </Link>
+          <div className='w-full'>
+            <CustomButton
+              title='Apply Now'
+              containerStyles={`w-full flex items-center justify-center text-white bg-black py-3 px-5 outline-none rounded-full text-base`}
+            />
           </div>
         </div>
 
         {/* RIGHT SIDE */}
-        <div className="w-full md:w-1/3 2xl:w-2/4 p-5 mt-20 md:mt-0">
-          <p className="text-gray-500 font-semibold">Similar Job Post</p>
+        <div className='w-full md:w-1/3 2xl:w-2/4 p-5 mt-20 md:mt-0'>
+          <p className='text-gray-500 font-semibold'>Similar Job Post</p>
 
-          <div className="w-full flex flex-wrap gap-4">
+          <div className='w-full flex flex-wrap gap-4'>
             {jobs?.slice(0, 6).map((job, index) => (
               <JobCard job={job} key={index} />
             ))}
diff --git a/client/src/utils/data.js b/client/src/utils/data.js
index 933054f..0df108b 100644
--- a/client/src/utils/data.js
+++ b/client/src/utils/data.js
@@ -35,7 +35,7 @@ export const jobs = [
     id: "1",
     company: {
       name: "Microsoft Corporation",
-      location: "California",
+      location: "Califonia",
       email: "support@microsoft.com",
       contact: "support@microsoft",
       about:
@@ -44,12 +44,12 @@ export const jobs = [
     },
     jobTitle: "Software Engineer",
     location: "West US",
-    jobType: "Part-Time",
+    jobType: "Full-Time",
     salary: "1200",
-    experience: "1-2",
     detail: [
       {
         desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+
         requirement:
           "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
       },
@@ -62,7 +62,7 @@ export const jobs = [
     id: "2",
     company: {
       name: "Google Inc",
-      location: "California",
+      location: "Califonia",
       email: "support@google.com",
       contact: "support@google",
       about:
@@ -73,10 +73,10 @@ export const jobs = [
     location: "New York",
     jobType: "Full-Time",
     salary: "1200",
-    experience: "2-6",
     detail: [
       {
         desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+
         requirement:
           "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
       },
@@ -96,14 +96,14 @@ export const jobs = [
         "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
       profileUrl: Linkedin,
     },
-    jobTitle: "Social Media Manager",
+    jobTitle: "Social Meia Manager",
     location: "India, Mumbai",
     jobType: "Full-Time",
     salary: "1200",
-    experience: "2-6",
     detail: [
       {
         desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+
         requirement:
           "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
       },
@@ -127,10 +127,10 @@ export const jobs = [
     location: "Norway",
     jobType: "Full-Time",
     salary: "1200",
-    experience: "6",
     detail: [
       {
         desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+
         requirement:
           "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
       },
@@ -142,22 +142,22 @@ export const jobs = [
   {
     id: "5",
     company: {
-      name: "CodeWave",
-      location: "Bangladesh",
+      name: "Facebook Corporation",
+      location: "Germany",
       email: "support@microsoft.com",
       contact: "support@microsoft",
       about:
         "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-      profileUrl: CodeWave,
+      profileUrl: Facebook,
     },
-    jobTitle: "Graphic Designer",
-    location: "West US",
+    jobTitle: "CFO",
+    location: "Norway",
     jobType: "Full-Time",
     salary: "1200",
-    experience: "2-6",
     detail: [
       {
         desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+
         requirement:
           "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
       },
@@ -169,22 +169,22 @@ export const jobs = [
   {
     id: "6",
     company: {
-      name: "Google Inc",
-      location: "California",
-      email: "support@google.com",
-      contact: "support@google",
+      name: "WhatsApp Corporation",
+      location: "Germany",
+      email: "support@microsoft.com",
+      contact: "support@microsoft",
       about:
         "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-      profileUrl: Google,
+      profileUrl: WhatsApp,
     },
-    jobTitle: "Full-Stack Developer",
-    location: "New York",
-    jobType: "Contract",
-    salary: "1500",
-    experience: "0-1",
+    jobTitle: "Product Manager",
+    location: "Norway",
+    jobType: "Full-Time",
+    salary: "1200",
     detail: [
       {
         desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+
         requirement:
           "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
       },
@@ -196,22 +196,22 @@ export const jobs = [
   {
     id: "7",
     company: {
-      name: "Spotify Corporation",
+      name: "Instagram Corporation",
       location: "Germany",
       email: "support@microsoft.com",
       contact: "support@microsoft",
       about:
         "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-      profileUrl: Spotify,
+      profileUrl: Instagram,
     },
-    jobTitle: "Data Scientist",
-    location: "Australia",
-    jobType: "Contract",
-    salary: "1300",
-    experience: "1-2",
+    jobTitle: "Product Manager",
+    location: "Norway",
+    jobType: "Full-Time",
+    salary: "1200",
     detail: [
       {
         desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+
         requirement:
           "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
       },
@@ -223,22 +223,22 @@ export const jobs = [
   {
     id: "8",
     company: {
-      name: "Facebook Inc",
-      location: "California",
-      email: "support@facebook.com",
-      contact: "support@facebook",
+      name: "Youtube Corporation",
+      location: "Germany",
+      email: "support@microsoft.com",
+      contact: "support@microsoft",
       about:
         "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-      profileUrl: Facebook,
+      profileUrl: Youtube,
     },
-    jobTitle: "HR Manager",
-    location: "New York",
+    jobTitle: "Product Manager",
+    location: "Norway",
     jobType: "Full-Time",
-    salary: "2000",
-    experience: "6",
+    salary: "1200",
     detail: [
       {
         desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+
         requirement:
           "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
       },
@@ -250,49 +250,22 @@ export const jobs = [
   {
     id: "9",
     company: {
-      name: "Twitter Inc",
-      location: "Bangladesh",
-      email: "support@twitter.com",
-      contact: "support@twitter",
-      about:
-        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-      profileUrl: Twitter,
-    },
-    jobTitle: "Data Scientist",
-    location: "West US",
-    jobType: "Full-Time",
-    salary: "2200",
-    experience: "3-4",
-    detail: [
-      {
-        desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-        requirement:
-          "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-      },
-    ],
-    applicants: ["1", "2", "3", "4"],
-    vacancies: 25,
-    createdAt: new Date(),
-  },
-  {
-    id: "10",
-    company: {
-      name: "Facebook Inc",
-      location: "California",
-      email: "support@facebook.com",
-      contact: "support@facebook",
+      name: "CodeWave Solutions",
+      location: "India",
+      email: "support@microsoft.com",
+      contact: "support@microsoft",
       about:
         "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-      profileUrl: Facebook,
+      profileUrl: CodeWave,
     },
-    jobTitle: "React Developer",
-    location: "Bangladesh",
+    jobTitle: "Subscribe Please",
+    location: "Norway",
     jobType: "Full-Time",
     salary: "1200",
-    experience: "5",
     detail: [
       {
         desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+
         requirement:
           "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
       },
@@ -303,7 +276,6 @@ export const jobs = [
   },
 ];
 
-
 export const footerLinks = [
   {
     id: "01",