src/app/product/[id]/page.tsx

@@ -3,9 +3,8 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-// Placeholder imports for components that might not be in the registry but are implied by errors.
-// These should be replaced with actual component imports if they existed in the project structure.
-
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
@@ -37,6 +36,8 @@ export default function ProductDetailPage() {
     ],
   };
 
+  const genericFeatureImage = "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPSYpjXlk69WrIECU6nXnUWdiQ/abstract-glowing-circuit-board-design-in-1774389483110-201c3510.png";
+
   const features = [
     { title: "Precision Engineering" },
     { title: "Sapphire Crystal" },
@@ -79,32 +80,71 @@ export default function ProductDetailPage() {
         </div>
 
         <div id="product-details" data-section="product-details">
-          <ProductDisplay
-            product={productData}
+          <ProductCardTwo
+            products={[
+              {
+                id: productData.id,
+                brand: "Horologium Lux",                name: productData.name,
+                price: productData.price,
+                rating: 5,
+                reviewCount: "1",                imageSrc: productData.images[0].src,
+                imageAlt: productData.images[0].alt,
+              },
+            ]}
+            gridVariant="uniform-all-items-equal"
+            animationType="opacity"
+            title={productData.name}
+            description={productData.description}
+            textboxLayout="default"
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="features-list" data-section="features-list">
-          <FeatureListDisplay
+          <FeatureCardSix
             title="Key Features"
             description="Discover the core attributes that define this timepiece."
-            features={features}
+            features={features.map((f, index) => ({
+              id: index + 1,
+              title: f.title,
+              description: `Focuses on the ${f.title.toLowerCase()}.`,
+              imageSrc: genericFeatureImage,
+              imageAlt: `${f.title} illustration`,
+            }))}
+            textboxLayout="default"
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="tech-specs" data-section="tech-specs">
-          <FeatureListDisplay
+          <FeatureCardSix
             title="Technical Specifications"
             description="Detailed information about the watch's engineering."
-            features={techSpecs}
+            features={techSpecs.map((f, index) => ({
+              id: index + 1,
+              title: f.title,
+              description: `Specifics about the ${f.title.toLowerCase()}.`,
+              imageSrc: genericFeatureImage,
+              imageAlt: `${f.title} illustration`,
+            }))}
+            textboxLayout="default"
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="materials" data-section="materials">
-          <FeatureListDisplay
+          <FeatureCardSix
             title="Materials & Craftsmanship"
             description="The finest components and meticulous hand-assembly."
-            features={materialFeatures}
+            features={materialFeatures.map((f, index) => ({
+              id: index + 1,
+              title: f.title,
+              description: `Information on the ${f.title.toLowerCase()}.`,
+              imageSrc: genericFeatureImage,
+              imageAlt: `${f.title} illustration`,
+            }))}
+            textboxLayout="default"
+            useInvertedBackground={false}
           />
         </div>