updates

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

@@ -1,18 +1,48 @@
 "use client";
 
 import { useParams } from "next/navigation";
+import { useEffect } from "react";
 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";
+import { generateCareerMetadata } from "@/lib/seo/metadata";
 
 const JobPage = () => {
   const params = useParams();
   const slug = params?.slug as string;
   const { job, loading, error } = useJob(slug);
 
+  // Update metadata dynamically for client component
+  useEffect(() => {
+    if (job) {
+      const metadata = generateCareerMetadata(job);
+      const title = typeof metadata.title === 'string' ? metadata.title : `Career - ${job.title} | GNX Soft`;
+      document.title = title;
+      
+      // Update meta description
+      let metaDescription = document.querySelector('meta[name="description"]');
+      if (!metaDescription) {
+        metaDescription = document.createElement('meta');
+        metaDescription.setAttribute('name', 'description');
+        document.head.appendChild(metaDescription);
+      }
+      const description = typeof metadata.description === 'string' ? metadata.description : `Apply for ${job.title} at GNX Soft. ${job.location || 'Remote'} position.`;
+      metaDescription.setAttribute('content', description);
+
+      // Update canonical URL
+      let canonical = document.querySelector('link[rel="canonical"]');
+      if (!canonical) {
+        canonical = document.createElement('link');
+        canonical.setAttribute('rel', 'canonical');
+        document.head.appendChild(canonical);
+      }
+      canonical.setAttribute('href', `${window.location.origin}/career/${job.slug}`);
+    }
+  }, [job]);
+
   if (loading) {
     return (
       <div className="tp-app">