update

frontEnd/app/career/[slug]/page.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import Header from "@/components/shared/layout/header/Header";
+import JobSingle from "@/components/pages/career/JobSingle";
+import Footer from "@/components/shared/layout/footer/Footer";
+import CareerScrollProgressButton from "@/components/pages/career/CareerScrollProgressButton";
+import CareerInitAnimations from "@/components/pages/career/CareerInitAnimations";
+import { useJob } from "@/lib/hooks/useCareer";
+
+const JobPage = () => {
+  const params = useParams();
+  const slug = params?.slug as string;
+  const { job, loading, error } = useJob(slug);
+
+  if (loading) {
+    return (
+      <div className="tp-app">
+        <Header />
+        <main>
+          <section className="pt-120 pb-120">
+            <div className="container">
+              <div className="row">
+                <div className="col-12 text-center">
+                  <h2>Loading job details...</h2>
+                </div>
+              </div>
+            </div>
+          </section>
+        </main>
+        <Footer />
+        <CareerScrollProgressButton />
+        <CareerInitAnimations />
+      </div>
+    );
+  }
+
+  if (error || !job) {
+    return (
+      <div className="tp-app">
+        <Header />
+        <main>
+          <section className="pt-120 pb-120">
+            <div className="container">
+              <div className="row">
+                <div className="col-12 text-center">
+                  <h2 className="text-danger">Job Not Found</h2>
+                  <p className="mt-24">
+                    The job position you are looking for does not exist or is no longer available.
+                  </p>
+                  <a href="/career" className="btn mt-40">
+                    View All Positions
+                  </a>
+                </div>
+              </div>
+            </div>
+          </section>
+        </main>
+        <Footer />
+        <CareerScrollProgressButton />
+        <CareerInitAnimations />
+      </div>
+    );
+  }
+
+  return (
+    <div className="tp-app">
+      <Header />
+      <main>
+        <JobSingle job={job} />
+      </main>
+      <Footer />
+      <CareerScrollProgressButton />
+      <CareerInitAnimations />
+    </div>
+  );
+};
+
+export default JobPage;