update

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

@@ -0,0 +1,88 @@
+import { notFound } from 'next/navigation';
+import Header from "@/components/shared/layout/header/Header";
+import ServiceDetailsBanner from "@/components/shared/banners/ServiceDetailsBanner";
+import ServiceDetails from "@/components/pages/services/ServiceDetails";
+import ServiceFeatures from "@/components/pages/services/ServiceFeatures";
+import ServiceDeliverables from "@/components/pages/services/ServiceDeliverables";
+import ServiceProcess from "@/components/pages/services/ServiceProcess";
+import Transform from "@/components/pages/services/Transform";
+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<{
+    slug: string;
+  }>;
+}
+
+// Generate static params for all services (optional - for better performance)
+export async function generateStaticParams() {
+  try {
+    const services = await serviceService.getServices();
+    return services.results.map((service: Service) => ({
+      slug: service.slug,
+    }));
+  } catch (error) {
+    return [];
+  }
+}
+
+// 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 generateServiceMetadata(service);
+  } catch (error) {
+    return {
+      title: 'Service Not Found - GNX',
+      description: 'The requested service could not be found.',
+    };
+  }
+}
+
+const ServicePage = async ({ params }: ServicePageProps) => {
+  let service: Service;
+  
+  try {
+    const { slug } = await params;
+    service = await serviceService.getServiceBySlug(slug);
+  } catch (error) {
+    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} />
+        <ServiceDetails service={service} />
+        <ServiceFeatures service={service} />
+        <ServiceDeliverables service={service} />
+        <Transform service={service} />
+        <ServiceProcess service={service} />
+      </main>
+      <Footer />
+      <ServicesScrollProgressButton />
+      <ServicesInitAnimations />
+    </div>
+  );
+};
+
+export default ServicePage;