From 54aa02462ed12db7abd00f5f92288e3de030b08f Mon Sep 17 00:00:00 2001
From: Mahrukh Raheel <mahrukhraheel18@gmail.com>
Date: Thu, 27 Feb 2025 10:52:35 +0500
Subject: [PATCH] changed Job Desc & Apply Form pages design

---
 jobboard-sanity/schemaTypes/job.js |  8 +++++
 src/pages/Apply.jsx                | 48 +++++++++++++++++++++---------
 src/pages/JobDetails.jsx           | 33 ++++++++++++--------
 3 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/jobboard-sanity/schemaTypes/job.js b/jobboard-sanity/schemaTypes/job.js
index c535bd5..a901ee9 100644
--- a/jobboard-sanity/schemaTypes/job.js
+++ b/jobboard-sanity/schemaTypes/job.js
@@ -17,6 +17,14 @@ export default {
         maxLength: 96,
       },
     },
+    {
+      name: "postedDate", 
+      title: "Date Posted",
+      type: "date",
+      options: {
+        dateFormat: "YYYY-MM-DD",
+      },
+    },
     {
       name: 'summary',
       title: 'Summary',
diff --git a/src/pages/Apply.jsx b/src/pages/Apply.jsx
index 211c45a..3a7ecea 100644
--- a/src/pages/Apply.jsx
+++ b/src/pages/Apply.jsx
@@ -1,5 +1,5 @@
-import { useParams } from "react-router-dom";
-import { useState } from "react";
+import { useParams, Link } from "react-router-dom";
+import { useState, useEffect } from "react";
 import PhoneInput from "react-phone-input-2";
 import "react-phone-input-2/lib/style.css";
 import { createClient } from '@supabase/supabase-js'
@@ -22,6 +22,12 @@ const Apply = () => {
     resume: null,
   });
 
+  const [jobTitle, setJobTitle] = useState("");
+
+  useEffect(() => {
+    setJobTitle(slug.replace(/-/g, " ")); 
+  }, [slug]);
+
   const requirePermitExpiry = ["Work Permit", "Study Permit"].includes(formData.immigrationStatus);
 
   const handleChange = (e) => {
@@ -80,8 +86,21 @@ const Apply = () => {
   };
 
   return (
-    <div className="container w-[40%] mt-10 mx-auto p-6 leading-loose">
-      <h1 className="text-2xl font-bold mb-4">Apply for {slug.replace(/-/g, " ")}</h1>
+    <div className="w-full">
+    <div className="bg-gray-300 w-full py-12">
+      <div className="max-w-4xl mx-auto px-16">
+        <h1 className="text-4xl font-bold">Apply For</h1>
+        <Link
+          to={`/careers/${slug}`}
+          className="text-red-500 text-2xl font-semibold hover:underline flex items-center mt-5"
+        >
+        💼 {jobTitle.charAt(0).toUpperCase() + jobTitle.slice(1)}
+        </Link>
+      </div>
+    </div>
+
+      {/* Application Form */}
+      <div className="container w-[90%] md:w-[45%] mt-4 mx-auto p-6 leading-loose">
       <form id="application-form" onSubmit={handleSubmit} className="space-y-4">
         <label className="block">Name</label>
         <input
@@ -90,7 +109,7 @@ const Apply = () => {
           placeholder="Enter Full Name"
           required
           onChange={handleChange}
-          className="w-full p-2 border rounded-md"
+          className="w-full p-2 border border-gray-400 rounded-md"
         />
 
         <label className="block">Email</label>
@@ -100,7 +119,7 @@ const Apply = () => {
           placeholder="Enter Email address"
           required
           onChange={handleChange}
-          className="w-full p-2 border rounded-md"
+          className="w-full p-2 border border-gray-400 rounded-md"
         />
 
         <label className="block">Phone</label>
@@ -109,8 +128,8 @@ const Apply = () => {
           enableSearch={true} 
           value={formData.phone}
           onChange={handlePhoneChange}
-          inputClass="w-full p-2 border rounded-md"
-          containerClass="w-full"
+          inputClass="w-full p-2 border rounded-md border-gray-400"
+          containerClass="w-[250px] md:w-full"
         />
 
         <label className="block">Address</label>
@@ -120,7 +139,7 @@ const Apply = () => {
           placeholder="Address"
           required
           onChange={handleChange}
-          className="w-full p-2 border rounded-md"
+          className="w-full p-2 border border-gray-400 rounded-md"
         />
 
         <label className="block">Are you willing to relocate?</label>
@@ -128,7 +147,7 @@ const Apply = () => {
           name="relocation"
           required
           onChange={handleChange}
-          className="w-full p-2 border rounded-md"
+          className="w-full p-2 border border-gray-400 rounded-md"
         >
           <option value="">Select</option>
           <option value="Yes">Yes</option>
@@ -142,7 +161,7 @@ const Apply = () => {
           placeholder="Preferred Start Date"
           required
           onChange={handleChange}
-          className="w-full p-2 border rounded-md"
+          className="w-full p-2  border-gray-400 rounded-md"
         />
 
         <label className="block">Immigration Status</label>
@@ -152,7 +171,7 @@ const Apply = () => {
           placeholder="Immigration Status"
           required
           onChange={handleChange}
-          className="w-full p-2 border rounded-md"
+          className="w-full p-2 border border-gray-400 rounded-md"
         >
           <option value="">Select</option>
           <option value="Citizen">Citizen</option>
@@ -169,7 +188,7 @@ const Apply = () => {
           placeholder="Work Permit Expiry (if applicable)"
           onChange={handleChange}
           required
-          className={"w-full p-2 border rounded-md" + (!requirePermitExpiry ? "bg-gray-400" : "")}
+          className={"w-full p-2 border border-gray-400 rounded-md" + (!requirePermitExpiry ? "bg-gray-400" : "")}
           disabled={!requirePermitExpiry}
         />
 
@@ -179,7 +198,7 @@ const Apply = () => {
           accept=".pdf,.doc,.docx"
           required
           onChange={handleFileChange}
-          className="w-full p-2 border rounded-md"
+          className="w-full p-2 border border-gray-400 rounded-md"
         />
 
         <button
@@ -190,6 +209,7 @@ const Apply = () => {
         </button>
       </form>
     </div>
+    </div>
   );
 };
 
diff --git a/src/pages/JobDetails.jsx b/src/pages/JobDetails.jsx
index dcbbd93..1c7dbf8 100644
--- a/src/pages/JobDetails.jsx
+++ b/src/pages/JobDetails.jsx
@@ -27,24 +27,31 @@ const JobDetails = () => {
   }
 
   return (
-    <div className="container w-[70%] mt-10 mx-auto p-6 leading-loose">
-      {/* Back to Open Positions & Apply Now Button */}
-      <div className="flex justify-between items-center mb-8">
-        <Link to="/careers" className="text-red-500 font-semibold inline-flex items-center">
-          ← Back to Open Positions
-        </Link>
-        <Link to={`/careers/${slug}/apply`} className="bg-red-500 text-white px-4 py-2 rounded-md font-semibold hover:bg-red-600">
-          Apply Now
-        </Link>
+    <div className="w-full">
+      <div className="bg-gray-300 py-12">
+      <div className="container mx-auto flex flex-col md:flex-row justify-between items-start md:items-center px-6 w-[70%]">
+        <div>
+           <h1 className="text-4xl font-bold">{job.title}</h1>
+             {job.postedDate && (
+             <p className="text-gray-700 text-m mt-2 md:mt-4">Date Posted: {new Date(job.postedDate).toDateString()}</p>
+              )}
+        </div>
+          <Link to={`/careers/${slug}/apply`} className="bg-red-500 mt-4 md:mt-0 text-white px-6 py-3 rounded-md font-semibold hover:bg-red-600">
+            Apply Now
+          </Link>
+        </div>
       </div>
 
-      <h1 className="text-3xl font-bold">{job.title}</h1>
-
-      <div className="mt-6 text-gray-700 leading-7">
+      <div className="container w-[70%] mx-auto p-6 text-gray-700 leading-7">
         <PortableText
           value={job.description}
           components={components}
-        />
+        />{/* Back to Open Positions */}
+        <div className="mt-10 text-center">
+          <Link to="/careers" className="text-red-500 font-semibold hover:underline">
+            ← Back to Open Positions
+          </Link>
+        </div>
       </div>
     </div>
   );