From d0b0d101241afefb1527f7352735c1a856f079af Mon Sep 17 00:00:00 2001
From: libertyoms <libertym@oms.africa>
Date: Sun, 27 Apr 2025 09:58:38 +0200
Subject: [PATCH] displaying vacancy completed

---
 app/(website)/vacancies/[slug]/page.tsx       |   2 +-
 .../vacancies/_components/ListSection.tsx     |   4 +-
 .../vacancies/_components/MetadataItem.tsx    |   2 +-
 .../_components/VacancyClientContent.tsx      | 192 ++++-----
 components/HeaderClient.tsx                   |   8 +-
 components/VacancyApplicationForm.tsx         | 376 +++++++++++-------
 components/ui/Modal.tsx                       | 126 ++++++
 7 files changed, 456 insertions(+), 254 deletions(-)
 create mode 100644 components/ui/Modal.tsx

diff --git a/app/(website)/vacancies/[slug]/page.tsx b/app/(website)/vacancies/[slug]/page.tsx
index 58a3509..39d2568 100644
--- a/app/(website)/vacancies/[slug]/page.tsx
+++ b/app/(website)/vacancies/[slug]/page.tsx
@@ -45,7 +45,7 @@ export default async function VacancyDetailsPage({
   );
 
   return (
-    <div className="bg-white text-gray-800 font-poppins overflow-x-hidden min-h-screen py-12 md:py-5">
+    <div className="bg-white dark:bg-black text-gray-800 font-poppins overflow-x-hidden min-h-screen py-12 md:py-5">
       <VacancyClientContent
         vacancy={vacancy}
         shareUrl={shareUrl}
diff --git a/app/(website)/vacancies/_components/ListSection.tsx b/app/(website)/vacancies/_components/ListSection.tsx
index 26cc056..ebe7b03 100644
--- a/app/(website)/vacancies/_components/ListSection.tsx
+++ b/app/(website)/vacancies/_components/ListSection.tsx
@@ -12,7 +12,7 @@ export const ListSection = ({
   if (!items || items.length === 0) return null;
   return (
     <div className="mb-8">
-      <h3 className="flex items-center gap-2 text-xl font-semibold mb-3 text-gray-900 font-poppins border-b border-gray-200 pb-2">
+      <h3 className="flex items-center gap-2 text-xl font-semibold mb-3 text-gray-900 dark:text-white font-poppins border-b border-gray-200 pb-2">
         {Icon && (
           <Icon
             className="h-5 w-5 text-primary"
@@ -21,7 +21,7 @@ export const ListSection = ({
         )}
         {title}
       </h3>
-      <ul className="list-disc space-y-2 pl-6 text-gray-700 font-poppins text-sm leading-relaxed">
+      <ul className="list-disc space-y-2 pl-6 text-gray-700 dark:text-white font-poppins text-sm leading-relaxed">
         {items.map((item, index) => (
           <li key={index}>{item}</li>
         ))}
diff --git a/app/(website)/vacancies/_components/MetadataItem.tsx b/app/(website)/vacancies/_components/MetadataItem.tsx
index f5eeaba..2e4e387 100644
--- a/app/(website)/vacancies/_components/MetadataItem.tsx
+++ b/app/(website)/vacancies/_components/MetadataItem.tsx
@@ -9,7 +9,7 @@ export const MetadataItem = ({
   label: string;
   value: React.ReactNode;
 }) => (
-  <div className="flex items-start space-x-2 text-sm text-gray-700 font-poppins">
+  <div className="flex items-start space-x-2 text-sm text-gray-700 dark:text-white font-poppins">
     <Icon
       className="h-5 w-5 mt-0.5 flex-shrink-0 text-primary"
       aria-hidden="true"
diff --git a/app/(website)/vacancies/_components/VacancyClientContent.tsx b/app/(website)/vacancies/_components/VacancyClientContent.tsx
index 7d60662..1f11451 100644
--- a/app/(website)/vacancies/_components/VacancyClientContent.tsx
+++ b/app/(website)/vacancies/_components/VacancyClientContent.tsx
@@ -1,6 +1,8 @@
 "use client";
 
-import { useState, useRef, useEffect } from "react";
+import {
+  useState /* useRef, useEffect - Remove these if no longer needed */,
+} from "react"; // Updated imports
 import Link from "next/link";
 import { Vacancy } from "@/types";
 import VacancyApplicationForm from "@/components/VacancyApplicationForm";
@@ -28,7 +30,8 @@ import Image from "next/image";
 import { MetadataItem } from "./MetadataItem";
 import { Badge } from "./Badge";
 import { ListSection } from "./ListSection";
-import Button from "@/components/ui/Button";
+import Button from "@/components/ui/Button"; // Assuming you have a Button component
+import Modal from "@/components/ui/Modal";
 
 interface VacancyClientContentProps {
   vacancy: Vacancy & {
@@ -44,56 +47,62 @@ export default function VacancyClientContent({
   shareUrl,
   shareTitle,
 }: VacancyClientContentProps) {
-  const [showApplyForm, setShowApplyForm] = useState(false);
-  const applyFormRef = useRef<HTMLDivElement>(null);
+  // State to control modal visibility
+  const [isApplyModalOpen, setIsApplyModalOpen] = useState(false);
+  // const applyFormRef = useRef<HTMLDivElement>(null); // Remove this ref
+  // Remove the useEffect for scrolling
 
-  const handleApplyClick = () => {
-    setShowApplyForm(true);
+  const handleOpenApplyModal = () => {
+    setIsApplyModalOpen(true);
   };
 
-  useEffect(() => {
-    if (showApplyForm && applyFormRef.current) {
-      setTimeout(() => {
-        applyFormRef.current?.scrollIntoView({
-          behavior: "smooth",
-          block: "start",
-        });
-      }, 100);
-    }
-  }, [showApplyForm]);
+  const handleCloseApplyModal = () => {
+    setIsApplyModalOpen(false);
+  };
 
   return (
-    // Container is now within the client component
-    <div className="container mx-auto px-6">
-      {/* --- Re-include the FULL Company Header --- */}
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      {" "}
+      {/* Adjusted padding */}
+      {/* --- Company Header --- */}
       {vacancy.company && (
-        <div className="mb-10 flex flex-col sm:flex-row items-center justify-between gap-6 p-6 bg-gray-50 shadow-md rounded-lg border border-gray-200">
-          <div className="flex items-center gap-4">
+        <div className="mb-10 flex flex-col sm:flex-row items-center justify-between gap-6 p-6 bg-gray-50 dark:bg-gray-800 shadow-md rounded-lg border border-gray-200 dark:border-gray-700">
+          <div className="flex items-center gap-4 flex-grow min-w-0">
+            {" "}
+            {/* Added flex-grow and min-w-0 for wrapping */}
             {vacancy.company.logoUrl ? (
               <Image
                 src={vacancy.company.logoUrl}
                 alt={`${vacancy.company.name} Logo`}
+                width={64} // Add width/height for better layout shift prevention
+                height={64}
                 className="h-16 w-16 object-contain rounded-md flex-shrink-0"
               />
             ) : (
-              <div className="h-16 w-16 bg-gray-200 rounded-md flex items-center justify-center flex-shrink-0">
+              <div className="h-16 w-16 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center flex-shrink-0">
                 <FaBuilding
                   className="h-8 w-8 text-primary"
                   style={{ color: COLORS.primary }}
                 />
               </div>
             )}
-            <div>
-              <h1 className="text-3xl md:text-4xl font-bold text-gray-900">
+            <div className="min-w-0">
+              {" "}
+              {/* Added min-w-0 here too */}
+              <h1 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white truncate">
+                {" "}
+                {/* Consider truncate */}
                 {vacancy.title}
               </h1>
-              <p className="text-lg text-gray-700">at {vacancy.company.name}</p>
+              <p className="text-lg text-gray-700 dark:text-gray-300">
+                at {vacancy.company.name}
+              </p>
               {vacancy.company.websiteUrl && (
                 <Link
                   href={vacancy.company.websiteUrl}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-sm text-blue-600 hover:text-blue-800 inline-flex items-center gap-1 group mt-1"
+                  className="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 inline-flex items-center gap-1 group mt-1"
                 >
                   Visit website{" "}
                   <FaLink className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-1" />
@@ -101,45 +110,57 @@ export default function VacancyClientContent({
               )}
             </div>
           </div>
-          {/* Apply Button in Header (conditional) */}
-          {!showApplyForm && (
-            <button
-              onClick={handleApplyClick}
-              className="inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-md hover:bg-gray-900 transition-colors duration-300 whitespace-nowrap"
-            >
-              Apply Now
-            </button>
-          )}
+          {/* Apply Button in Header */}
+          <Button
+            variant="primary" // Use your Button component if available
+            onClick={handleOpenApplyModal}
+            className="flex-shrink-0 whitespace-nowrap" // Prevent shrinking/wrapping
+          >
+            Apply Now
+          </Button>
         </div>
       )}
       {/* --- End Company Header --- */}
-
       {/* --- Main Grid Layout --- */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10">
         {/* --- Main Content Area (Left Column) --- */}
-        <div className="lg:col-span-2 bg-white shadow-lg rounded-lg p-6 md:p-8 border border-gray-200">
+        <div className="lg:col-span-2 bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 md:p-8 border border-gray-200 dark:border-gray-700">
           {/* Title if no company header */}
           {!vacancy.company && (
-            <h1 className="text-3xl md:text-4xl font-bold mb-6 text-gray-900">
-              {vacancy.title}
-            </h1>
+            <div className="flex justify-between items-start mb-6">
+              <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">
+                {vacancy.title}
+              </h1>
+              {/* Apply Button if no header */}
+              <Button
+                variant="primary"
+                onClick={handleOpenApplyModal}
+                className="ml-4 flex-shrink-0 whitespace-nowrap"
+              >
+                Apply Now
+              </Button>
+            </div>
           )}
 
           {/* Job Description */}
           <div className="mb-8">
-            <h3 className="flex items-center gap-2 text-xl font-semibold mb-3 text-gray-900 border-b border-gray-200 pb-2">
+            <h3 className="flex items-center gap-2 text-xl font-semibold mb-3 text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
               <FaInfoCircle
                 className="h-5 w-5 text-primary"
                 style={{ color: COLORS.primary }}
               />{" "}
               Job Description
             </h3>
-            <div className="prose prose-sm sm:prose-base max-w-none text-gray-700 font-poppins leading-relaxed">
-              <p>{vacancy.description}</p>
+            <div
+              className="prose prose-sm sm:prose-base max-w-none text-gray-700 dark:text-gray-300 font-poppins leading-relaxed prose-headings:text-gray-900 prose-headings:dark:text-white prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-strong:text-gray-800 dark:prose-strong:text-gray-200"
+              dangerouslySetInnerHTML={{ __html: vacancy.description || "" }} // Use dangerouslySetInnerHTML if description is HTML
+            >
+              {/* Or render as text if plain: <p>{vacancy.description}</p> */}
             </div>
           </div>
 
-          {/* --- All List Sections (Responsibilities, Qualifications, Skills, Benefits) --- */}
+          {/* --- List Sections (Responsibilities, Qualifications, Skills, Benefits) --- */}
+          {/* Assuming ListSection renders conditionally if items are empty */}
           <ListSection
             title="Responsibilities"
             items={vacancy.responsibilities}
@@ -156,10 +177,10 @@ export default function VacancyClientContent({
             icon={FaStar}
           />
 
-          {/* Skills Section - RE-INCLUDED */}
+          {/* Skills Section */}
           {vacancy.skills && vacancy.skills.length > 0 && (
             <div className="mb-8">
-              <h3 className="flex items-center gap-2 text-xl font-semibold mb-4 text-gray-900 border-b border-gray-200 pb-2">
+              <h3 className="flex items-center gap-2 text-xl font-semibold mb-4 text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
                 <FaTools
                   className="h-5 w-5 text-primary"
                   style={{ color: COLORS.primary }}
@@ -174,17 +195,17 @@ export default function VacancyClientContent({
             </div>
           )}
 
-          {/* Benefits Section - RE-INCLUDED */}
+          {/* Benefits Section */}
           {vacancy.benefits && vacancy.benefits.length > 0 && (
             <div className="mb-8">
-              <h3 className="flex items-center gap-2 text-xl font-semibold mb-3 text-gray-900 border-b border-gray-200 pb-2">
+              <h3 className="flex items-center gap-2 text-xl font-semibold mb-3 text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
                 <FaGift
                   className="h-5 w-5 text-primary"
                   style={{ color: COLORS.primary }}
                 />{" "}
                 Benefits
               </h3>
-              <ul className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 text-gray-700 mt-3 text-sm">
+              <ul className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 text-gray-700 dark:text-gray-300 mt-3 text-sm">
                 {vacancy.benefits.map((item, index) => (
                   <li
                     key={index}
@@ -199,22 +220,20 @@ export default function VacancyClientContent({
           )}
           {/* --- End List Sections --- */}
 
-          {/* Apply button below main content (conditional) */}
-          {!showApplyForm && (
-            <div className="mt-10 text-center lg:text-left">
-              <Button variant="primary" onClick={handleApplyClick}>
-                Apply for this Position
-              </Button>
-            </div>
-          )}
+          {/* Apply button below main content (redundant if header button exists, keep or remove as needed) */}
+          <div className="mt-10 text-center lg:text-left">
+            <Button variant="primary" onClick={handleOpenApplyModal}>
+              Apply for this Position
+            </Button>
+          </div>
         </div>
         {/* --- End Main Content Area --- */}
 
         {/* --- Sidebar (Right Column) --- */}
         <div className="lg:col-span-1 space-y-8">
-          {/* Metadata Card - Exactly as before */}
-          <div className="bg-gray-50 shadow-md rounded-lg p-6 border-l-4 border-primary">
-            <h3 className="text-xl font-semibold mb-5 text-gray-900 font-poppins">
+          {/* Metadata Card */}
+          <div className="bg-gray-50 dark:bg-gray-800 shadow-md rounded-lg p-6 border-l-4 border-primary dark:border-gold-500">
+            <h3 className="text-xl font-semibold mb-5 text-gray-900 dark:text-white font-poppins">
               Job Overview
             </h3>
             <div className="space-y-4">
@@ -248,7 +267,7 @@ export default function VacancyClientContent({
                   icon={FaDollarSign}
                   label="Salary"
                   value={
-                    <span className="font-semibold text-gray-800">
+                    <span className="font-semibold text-gray-800 dark:text-gray-200">
                       {vacancy.salary.min.toLocaleString()} -{" "}
                       {vacancy.salary.max.toLocaleString()}{" "}
                       {vacancy.salary.currency} {vacancy.salary.period}
@@ -271,9 +290,9 @@ export default function VacancyClientContent({
             </div>
           </div>
 
-          {/* Share Card - Exactly as before */}
-          <div className="bg-gray-50 shadow-md rounded-lg p-6 border-l-4 border-primary">
-            <h3 className="text-xl font-semibold mb-4 text-gray-900 flex items-center gap-2 font-poppins">
+          {/* Share Card */}
+          <div className="bg-gray-50 dark:bg-gray-800 shadow-md rounded-lg p-6 border-l-4 border-primary dark:border-gold-500">
+            <h3 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white flex items-center gap-2 font-poppins">
               <FaShareAlt
                 className="h-5 w-5 text-primary"
                 style={{ color: COLORS.primary }}
@@ -287,7 +306,7 @@ export default function VacancyClientContent({
                 )}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-blue-600 hover:underline"
+                className="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
               >
                 LinkedIn
               </a>
@@ -297,7 +316,7 @@ export default function VacancyClientContent({
                 )}&text=${shareTitle}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-blue-600 hover:underline"
+                className="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
               >
                 Twitter
               </a>
@@ -305,37 +324,26 @@ export default function VacancyClientContent({
                 href={`mailto:?subject=${shareTitle}&body=Check out this job opening: ${encodeURIComponent(
                   shareUrl
                 )}`}
-                className="text-gray-600 hover:underline"
+                className="text-gray-600 hover:underline dark:text-gray-400 dark:hover:text-gray-300"
               >
                 Email
               </a>
             </div>
           </div>
-
-          {/* --- Conditionally Rendered Application Form Section --- */}
-          {showApplyForm && (
-            <div
-              ref={applyFormRef}
-              id="apply-form-section"
-              className="bg-white shadow-lg rounded-lg p-6 md:p-8 border border-gray-200 scroll-mt-20 lg:mt-0"
-            >
-              {" "}
-              {/* scroll-mt helps anchor links, lg:mt-0 aligns with other cards */}
-              <h2 className="text-2xl font-bold mb-6 text-center text-gray-900 font-poppins">
-                Apply for: {vacancy.title}
-              </h2>
-              <VacancyApplicationForm
-                vacancyId={vacancy.id}
-                vacancyTitle={vacancy.title}
-                // Pass a function to close the form if needed: onFormClose={() => setShowApplyForm(false)}
-              />
-            </div>
-          )}
-          {/* --- End Form Section --- */}
         </div>
-        {/* --- End Sidebar --- */}
       </div>
-      {/* --- End Main Grid --- */}
-    </div> // End Container
+      <Modal
+        isOpen={isApplyModalOpen}
+        onClose={handleCloseApplyModal}
+        title={`Apply for: ${vacancy.title}`}
+        size="4xl"
+      >
+        <VacancyApplicationForm
+          vacancyId={vacancy.id}
+          vacancyTitle={vacancy.title}
+          onClose={handleCloseApplyModal}
+        />
+      </Modal>
+    </div>
   );
 }
diff --git a/components/HeaderClient.tsx b/components/HeaderClient.tsx
index aadae6f..a65efbb 100644
--- a/components/HeaderClient.tsx
+++ b/components/HeaderClient.tsx
@@ -244,12 +244,8 @@ const HeaderClient = ({
               </div>
               <div className="hover:text-opacity-80 transition-opacity">
                 <DropdownMenu trigger={<span>Join Our Team</span>}>
-                  <DropdownLink href="/join-us/vacancies">
-                    Vacancies
-                  </DropdownLink>
-                  <DropdownLink href="/join-us/portal">
-                    Recruitment Portal
-                  </DropdownLink>
+                  <DropdownLink href="/vacancies">Vacancies</DropdownLink>
+                  <DropdownLink href="/portal">Recruitment Portal</DropdownLink>
                 </DropdownMenu>
               </div>
             </nav>
diff --git a/components/VacancyApplicationForm.tsx b/components/VacancyApplicationForm.tsx
index 40bdc91..97735cc 100644
--- a/components/VacancyApplicationForm.tsx
+++ b/components/VacancyApplicationForm.tsx
@@ -1,46 +1,81 @@
-// src/components/VacancyApplicationForm.tsx (Example structure and styling)
-"use client"; // This likely needs to be a client component for form handling
+"use client";
 
 import React, { useState, useCallback, ChangeEvent, DragEvent } from "react";
-import { FaUpload, FaFileAlt, FaTimes } from "react-icons/fa"; // Import icons
+import { FaUpload, FaFileAlt, FaTimes } from "react-icons/fa";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import Button from "./ui/Button";
+
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+const ACCEPTED_FILE_TYPES = [
+  "application/pdf",
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "text/plain",
+];
+
+const applicationSchema = z.object({
+  name: z.string().min(2, "Full name must be at least 2 characters"),
+  email: z.string().email("Invalid email address"),
+  phone: z.string().optional(),
+  linkedin: z.string().url("Invalid URL").optional().or(z.literal("")),
+  coverLetter: z.string().optional(),
+  resume: z
+    .custom<File | null>((val) => val instanceof File, "Resume/CV is required")
+    .refine(
+      (file) => file && file.size <= MAX_FILE_SIZE,
+      `Max file size is 5MB.`
+    )
+    .refine(
+      (file) => file && ACCEPTED_FILE_TYPES.includes(file.type),
+      "Unsupported file format. Please upload PDF, DOC, DOCX, or TXT."
+    ),
+});
+
+type ApplicationFormData = z.infer<typeof applicationSchema>;
 
 interface VacancyApplicationFormProps {
   vacancyId: string;
   vacancyTitle: string;
-  // onFormClose?: () => void; // Optional: If you add a close button
+  onClose: () => void;
 }
 
 export default function VacancyApplicationForm({
   vacancyId,
   vacancyTitle,
+  onClose,
 }: VacancyApplicationFormProps) {
-  const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    phone: "",
-    linkedin: "",
-    coverLetter: "",
-    // Add other fields as needed
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors, isSubmitting },
+    reset,
+  } = useForm<ApplicationFormData>({
+    resolver: zodResolver(applicationSchema),
+    mode: "onChange",
+    defaultValues: {
+      name: "",
+      email: "",
+      phone: "",
+      linkedin: "",
+      coverLetter: "",
+      resume: null,
+    },
   });
-  const [resumeFile, setResumeFile] = useState<File | null>(null);
+
+  const resumeFile = watch("resume");
   const [isDragging, setIsDragging] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitStatus, setSubmitStatus] = useState<
     "idle" | "success" | "error"
   >("idle");
 
-  const handleInputChange = (
-    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
-  };
-
-  // --- File Input Handling ---
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
-      setResumeFile(e.target.files[0]);
-      e.target.value = ""; // Reset input value for potential re-upload
+      setValue("resume", e.target.files[0], { shouldValidate: true });
+      e.target.value = "";
     }
   };
 
@@ -58,161 +93,190 @@ export default function VacancyApplicationForm({
 
   const handleDragOver = useCallback(
     (e: DragEvent<HTMLDivElement>) => {
-      e.preventDefault(); // Necessary to allow drop
+      e.preventDefault();
       e.stopPropagation();
-      if (!isDragging) setIsDragging(true); // Ensure state is true while over
+      if (!isDragging) setIsDragging(true);
     },
     [isDragging]
   );
 
-  const handleDrop = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(false);
-    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      setResumeFile(e.dataTransfer.files[0]);
-      e.dataTransfer.clearData();
-    }
-  }, []);
+  const handleDrop = useCallback(
+    (e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        setValue("resume", e.dataTransfer.files[0], { shouldValidate: true });
+        e.dataTransfer.clearData();
+      }
+    },
+    [setValue]
+  );
 
   const removeFile = () => {
-    setResumeFile(null);
+    setValue("resume", null, { shouldValidate: true });
   };
-  // --- End File Input Handling ---
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setIsSubmitting(true);
+  const onSubmit: SubmitHandler<ApplicationFormData> = async (data) => {
     setSubmitStatus("idle");
-
-    const data = new FormData();
-    data.append("vacancyId", vacancyId);
-    data.append("vacancyTitle", vacancyTitle);
-    data.append("name", formData.name);
-    data.append("email", formData.email);
-    data.append("phone", formData.phone);
-    data.append("linkedin", formData.linkedin);
-    data.append("coverLetter", formData.coverLetter);
-    if (resumeFile) {
-      data.append("resume", resumeFile, resumeFile.name);
-    }
+    const formData = new FormData();
+    formData.append("vacancyId", vacancyId);
+    formData.append("vacancyTitle", vacancyTitle);
+    formData.append("name", data.name);
+    formData.append("email", data.email);
+    if (data.phone) formData.append("phone", data.phone);
+    if (data.linkedin) formData.append("linkedin", data.linkedin);
+    if (data.coverLetter) formData.append("coverLetter", data.coverLetter);
+    if (data.resume) formData.append("resume", data.resume, data.resume.name);
 
     try {
-      // Replace with your actual API endpoint for form submission
       const response = await fetch("/api/apply", {
         method: "POST",
-        body: data, // FormData handles multipart/form-data automatically
+        body: formData,
       });
-
-      if (!response.ok) {
-        throw new Error("Submission failed");
-      }
-
+      if (!response.ok)
+        throw new Error(`Submission failed: ${response.statusText}`);
       setSubmitStatus("success");
-      // Optionally reset form:
-      // setFormData({ name: '', email: '', ... });
-      // setResumeFile(null);
-      // Optionally close form: onFormClose?.();
+      reset();
+      setTimeout(() => {
+        onClose();
+        setSubmitStatus("idle");
+      }, 1500);
     } catch (error) {
-      console.error("Application submission error:", error);
+      console.error(error);
       setSubmitStatus("error");
-    } finally {
-      setIsSubmitting(false);
     }
   };
 
-  // --- Base Input Styling ---
   const inputBaseStyle =
     "block w-full px-4 py-2 mt-1 text-gray-700 bg-white border border-gray-300 rounded-md focus:border-gold-500 focus:ring focus:ring-gold-500 focus:ring-opacity-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:focus:border-gold-500 font-poppins";
+  const errorStyle = "border-red-500 focus:border-red-500 focus:ring-red-500";
+  const errorMessageStyle = "text-red-600 text-xs mt-1";
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-6 font-poppins">
-      {/* Example Fields */}
-      <div>
-        <label htmlFor="name" className="text-gray-700 dark:text-gray-200">
-          Full Name *
-        </label>
-        <input
-          id="name"
-          name="name"
-          type="text"
-          required
-          className={inputBaseStyle}
-          value={formData.name}
-          onChange={handleInputChange}
-        />
-      </div>
-      <div>
-        <label htmlFor="email" className="text-gray-700 dark:text-gray-200">
-          Email Address *
-        </label>
-        <input
-          id="email"
-          name="email"
-          type="email"
-          required
-          className={inputBaseStyle}
-          value={formData.email}
-          onChange={handleInputChange}
-        />
-      </div>
-      <div>
-        <label htmlFor="phone" className="text-gray-700 dark:text-gray-200">
-          Phone Number
-        </label>
-        <input
-          id="phone"
-          name="phone"
-          type="tel"
-          className={inputBaseStyle}
-          value={formData.phone}
-          onChange={handleInputChange}
-        />
-      </div>
-      <div>
-        <label htmlFor="linkedin" className="text-gray-700 dark:text-gray-200">
-          LinkedIn Profile URL
-        </label>
-        <input
-          id="linkedin"
-          name="linkedin"
-          type="url"
-          className={inputBaseStyle}
-          value={formData.linkedin}
-          onChange={handleInputChange}
-          placeholder="https://linkedin.com/in/yourprofile"
-        />
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 font-poppins">
+      {/* Row 1: Name & Email */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Name Field */}
+        <div>
+          <label htmlFor="name" className="text-gray-700 dark:text-gray-200">
+            Full Name *
+          </label>
+          <input
+            id="name"
+            type="text"
+            {...register("name")}
+            className={`${inputBaseStyle} ${errors.name ? errorStyle : ""}`}
+            aria-invalid={errors.name ? "true" : "false"}
+          />
+          {errors.name && (
+            <p role="alert" className={errorMessageStyle}>
+              {errors.name.message}
+            </p>
+          )}
+        </div>
+
+        {/* Email Field */}
+        <div>
+          <label htmlFor="email" className="text-gray-700 dark:text-gray-200">
+            Email Address *
+          </label>
+          <input
+            id="email"
+            type="email"
+            {...register("email")}
+            className={`${inputBaseStyle} ${errors.email ? errorStyle : ""}`}
+            aria-invalid={errors.email ? "true" : "false"}
+          />
+          {errors.email && (
+            <p role="alert" className={errorMessageStyle}>
+              {errors.email.message}
+            </p>
+          )}
+        </div>
       </div>
 
-      {/* --- Styled File Upload Area --- */}
+      {/* Row 2: Phone & LinkedIn */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Phone Field */}
+        <div>
+          <label htmlFor="phone" className="text-gray-700 dark:text-gray-200">
+            Phone Number
+          </label>
+          <input
+            id="phone"
+            type="tel"
+            {...register("phone")}
+            className={`${inputBaseStyle} ${errors.phone ? errorStyle : ""}`}
+            aria-invalid={errors.phone ? "true" : "false"}
+          />
+          {errors.phone && (
+            <p role="alert" className={errorMessageStyle}>
+              {errors.phone.message}
+            </p>
+          )}
+        </div>
+
+        {/* LinkedIn Field */}
+        <div>
+          <label
+            htmlFor="linkedin"
+            className="text-gray-700 dark:text-gray-200"
+          >
+            LinkedIn Profile URL
+          </label>
+          <input
+            id="linkedin"
+            type="url"
+            {...register("linkedin")}
+            className={`${inputBaseStyle} ${errors.linkedin ? errorStyle : ""}`}
+            placeholder="https://linkedin.com/in/yourprofile"
+            aria-invalid={errors.linkedin ? "true" : "false"}
+          />
+          {errors.linkedin && (
+            <p role="alert" className={errorMessageStyle}>
+              {errors.linkedin.message}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Resume/CV Upload */}
       <div>
         <label className="text-gray-700 dark:text-gray-200 block mb-2">
           Resume/CV *
         </label>
+        <input
+          id="resume-upload-hidden"
+          type="file"
+          onChange={handleFileChange}
+          accept=".pdf,.doc,.docx,.txt"
+          className="hidden"
+          aria-hidden="true"
+        />
         <div
           className={`relative flex flex-col items-center justify-center w-full p-6 transition-colors duration-300 ease-in-out border-2 border-dashed rounded-lg cursor-pointer hover:border-gold-500/80 ${
             isDragging
               ? "border-gold-500 bg-gold-50"
+              : errors.resume
+              ? "border-red-500"
               : "border-gray-300 hover:bg-gray-50"
           }`}
           onDragEnter={handleDragEnter}
           onDragLeave={handleDragLeave}
           onDragOver={handleDragOver}
           onDrop={handleDrop}
-          onClick={() => document.getElementById("resume-upload")?.click()} // Trigger hidden input
+          onClick={() =>
+            document.getElementById("resume-upload-hidden")?.click()
+          }
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ")
+              document.getElementById("resume-upload-hidden")?.click();
+          }}
+          aria-label="Upload Resume/CV"
         >
-          {/* Hidden Actual Input */}
-          <input
-            id="resume-upload"
-            name="resume"
-            type="file"
-            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-            onChange={handleFileChange}
-            accept=".pdf,.doc,.docx,.txt" // Specify accepted file types
-            aria-hidden="true" // Hide from accessibility tree as visual element handles interaction
-          />
-
-          {/* Visual Cue */}
           <FaUpload
             className={`w-8 h-8 mb-3 ${
               isDragging ? "text-gold-600" : "text-gray-400"
@@ -229,10 +293,15 @@ export default function VacancyApplicationForm({
           <p className="text-xs text-gray-500 text-center">
             or click to browse
           </p>
-          <p className="mt-2 text-xs text-gray-500">(PDF, DOC, DOCX, TXT)</p>
+          <p className="mt-2 text-xs text-gray-500">
+            (PDF, DOC, DOCX, TXT - Max 5MB)
+          </p>
         </div>
-
-        {/* Display Selected File */}
+        {errors.resume && (
+          <p role="alert" className={errorMessageStyle}>
+            {(errors.resume as unknown as { message: string }).message}
+          </p>
+        )}
         {resumeFile && (
           <div className="mt-3 flex items-center justify-between px-3 py-2 text-sm text-gray-700 bg-gray-100 border border-gray-200 rounded-md">
             <div className="flex items-center gap-2">
@@ -255,8 +324,8 @@ export default function VacancyApplicationForm({
           </div>
         )}
       </div>
-      {/* --- End File Upload Area --- */}
 
+      {/* Cover Letter Field */}
       <div>
         <label
           htmlFor="coverLetter"
@@ -266,34 +335,37 @@ export default function VacancyApplicationForm({
         </label>
         <textarea
           id="coverLetter"
-          name="coverLetter"
           rows={4}
-          className={`${inputBaseStyle} resize-vertical`}
-          value={formData.coverLetter}
-          onChange={handleInputChange}
+          {...register("coverLetter")} // Register with RHF
+          className={`${inputBaseStyle} resize-vertical ${
+            errors.coverLetter ? errorStyle : ""
+          }`}
+          aria-invalid={errors.coverLetter ? "true" : "false"}
         ></textarea>
+        {errors.coverLetter && (
+          <p role="alert" className={errorMessageStyle}>
+            {errors.coverLetter.message}
+          </p>
+        )}
       </div>
 
       {/* Submit Button & Status */}
       <div className="flex flex-col items-center space-y-3 pt-4">
-        <button
+        <Button
           type="submit"
-          disabled={
-            isSubmitting || !formData.name || !formData.email || !resumeFile
-          } // Basic validation example
-          className="w-full md:w-auto px-8 py-3 font-bold text-white bg-gray-800 rounded-md hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-300"
+          disabled={isSubmitting || submitStatus === "success"} // Disable while submitting or on success
         >
           {isSubmitting ? "Submitting..." : "Submit Application"}
-        </button>
+        </Button>
 
         {submitStatus === "success" && (
           <p className="text-sm text-green-600">
-            Application submitted successfully!
+            Application submitted successfully! Closing form...
           </p>
         )}
         {submitStatus === "error" && (
           <p className="text-sm text-red-600">
-            Submission failed. Please try again.
+            Submission failed. Please check your details and try again.
           </p>
         )}
       </div>
diff --git a/components/ui/Modal.tsx b/components/ui/Modal.tsx
new file mode 100644
index 0000000..5950106
--- /dev/null
+++ b/components/ui/Modal.tsx
@@ -0,0 +1,126 @@
+// src/components/ui/Modal.tsx
+import React, { ReactNode, useEffect } from "react";
+import { FaTimes } from "react-icons/fa";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: ReactNode;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl"; // Optional size control
+}
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = "2xl", // Default size
+}) => {
+  // Close modal on Escape key press
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+    }
+    // Cleanup listener on component unmount or when modal closes
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen, onClose]);
+
+  // Prevent scrolling on the body when the modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+    // Cleanup overflow style on component unmount
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  // Map size prop to Tailwind max-width classes
+  const sizeClasses = {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-xl",
+    "2xl": "max-w-2xl",
+    "3xl": "max-w-3xl",
+    "4xl": "max-w-4xl",
+    "5xl": "max-w-5xl",
+  };
+
+  return (
+    // Backdrop
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 backdrop-blur-sm p-4 transition-opacity duration-300 ease-in-out"
+      onClick={onClose} // Close when clicking the backdrop
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? "modal-title" : undefined}
+    >
+      {/* Modal Panel */}
+      <div
+        className={`relative w-full ${sizeClasses[size]} bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transition-all duration-300 ease-in-out transform scale-95 opacity-0 animate-modal-appear`}
+        onClick={(e) => e.stopPropagation()} // Prevent clicks inside the modal from closing it
+      >
+        {/* Modal Header (Optional) */}
+        {title && (
+          <div className="flex items-center justify-between p-4 sm:p-5 border-b border-gray-200 dark:border-gray-700">
+            {title && (
+              <h2
+                id="modal-title"
+                className="text-lg font-semibold text-gray-900 dark:text-white font-poppins"
+              >
+                {title}
+              </h2>
+            )}
+            <button
+              onClick={onClose}
+              className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+              aria-label="Close modal"
+            >
+              <FaTimes className="w-5 h-5" />
+            </button>
+          </div>
+        )}
+
+        {/* Modal Body */}
+        <div className="p-5 sm:p-6 space-y-4 max-h-[80vh] overflow-y-auto">
+          {" "}
+          {/* Added max-height and scroll */}
+          {children}
+        </div>
+      </div>
+
+      {/* Add animation keyframes to your global CSS (e.g., src/app/globals.css) */}
+      <style jsx global>{`
+        @keyframes modal-appear {
+          0% {
+            opacity: 0;
+            transform: scale(0.95);
+          }
+          100% {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+        .animate-modal-appear {
+          animation: modal-appear 0.3s ease-out forwards;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Modal;