update

gnx-react/app/services/[slug]/page.tsx

@@ -10,6 +10,8 @@ import Footer from "@/components/shared/layout/footer/Footer";
 import ServicesScrollProgressButton from "@/components/pages/services/ServicesScrollProgressButton";
 import ServicesInitAnimations from "@/components/pages/services/ServicesInitAnimations";
 import { serviceService, Service } from "@/lib/api/serviceService";
+import { generateServiceMetadata } from "@/lib/seo/metadata";
+import { ServiceSchema, BreadcrumbSchema } from "@/components/shared/seo/StructuredData";
 
 interface ServicePageProps {
   params: Promise<{
@@ -30,21 +32,13 @@ export async function generateStaticParams() {
   }
 }
 
-// Generate metadata for each service page
+// Generate enhanced metadata for each service page
 export async function generateMetadata({ params }: ServicePageProps) {
   try {
     const { slug } = await params;
     const service = await serviceService.getServiceBySlug(slug);
     
-    return {
-      title: `${service.title} - GNX Services`,
-      description: service.description,
-      openGraph: {
-        title: service.title,
-        description: service.description,
-        images: service.image_url ? [service.image_url] : [],
-      },
-    };
+    return generateServiceMetadata(service);
   } catch (error) {
     return {
       title: 'Service Not Found - GNX',
@@ -64,8 +58,19 @@ const ServicePage = async ({ params }: ServicePageProps) => {
     notFound();
   }
 
+  // Breadcrumb data for structured data
+  const breadcrumbItems = [
+    { name: 'Home', url: '/' },
+    { name: 'Services', url: '/services' },
+    { name: service.title, url: `/services/${service.slug}` },
+  ];
+
   return (
     <div className="enterprise-app">
+      {/* SEO Structured Data */}
+      <ServiceSchema service={service} />
+      <BreadcrumbSchema items={breadcrumbItems} />
+      
       <Header />
       <main className="enterprise-main">
         <ServiceDetailsBanner service={service} />