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;

frontEnd/app/career/page.tsx

@@ -0,0 +1,41 @@
+import { Metadata } from 'next';
+import Header from "@/components/shared/layout/header/Header";
+import CareerBanner from "@/components/pages/career/CareerBanner";
+import OpenPosition from "@/components/pages/career/OpenPosition";
+import Thrive from "@/components/pages/career/Thrive";
+import Footer from "@/components/shared/layout/footer/Footer";
+import CareerScrollProgressButton from "@/components/pages/career/CareerScrollProgressButton";
+import CareerInitAnimations from "@/components/pages/career/CareerInitAnimations";
+import { generateMetadata as createMetadata } from "@/lib/seo/metadata";
+
+export const metadata: Metadata = createMetadata({
+  title: "Careers - Join Our Team",
+  description: "Explore career opportunities at GNX Soft. Join our team of talented professionals working on cutting-edge enterprise software solutions. View open positions and apply today.",
+  keywords: [
+    "Careers",
+    "Job Openings",
+    "Software Development Jobs",
+    "Join Our Team",
+    "Tech Careers",
+    "Employment Opportunities",
+  ],
+  url: "/career",
+});
+
+const page = () => {
+  return (
+    <div className="tp-app">
+      <Header />
+      <main>
+        <CareerBanner />
+        <OpenPosition />
+        <Thrive />
+      </main>
+      <Footer />
+      <CareerScrollProgressButton />
+      <CareerInitAnimations />
+    </div>
+  );
+};
+
+export default page;