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

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

@@ -1,17 +1,19 @@
 "use client";
 
-import { useParams } from "next/navigation";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import FooterCard from '@/components/sections/footer/FooterCard';
+import { useParams } from "next/navigation";
 import { Twitter, Instagram, Linkedin } from "lucide-react";
 
 export default function ProductDetailPage() {
-  const { id } = useParams();
+  const params = useParams();
+  const productId = params?.id;
 
-  const handleCheckout = () => {
-    window.location.href = "https://www.shopier.com/checkout";
+  const handleShopierCheckout = () => {
+    // Integration logic for Shopier checkout process
+    window.open(`https://www.shopier.com/ShowProductNew/products.php?id=${productId}`, "_blank");
   };
 
   return (
@@ -19,7 +21,7 @@ export default function ProductDetailPage() {
         defaultButtonVariant="text-stagger"
         defaultTextAnimation="reveal-blur"
         borderRadius="rounded"
-        contentWidth="medium"
+        contentWidth="smallMedium"
         sizing="mediumLargeSizeMediumTitles"
         background="blurBottom"
         cardStyle="solid"
@@ -28,25 +30,56 @@ export default function ProductDetailPage() {
         headingFontWeight="light"
     >
       <ReactLenis root>
-        <NavbarStyleCentered navItems={[{ name: "Back to Shop", id: "products" }]} brandName="T&B" />
-        <div className="min-h-screen pt-32 pb-20 px-6 max-w-4xl mx-auto text-center">
-            <h1 className="text-5xl font-light mb-6">Product ID: {id}</h1>
-            <p className="text-xl mb-12 opacity-80">Explore the refined details of our premium product collection. Built with precision for your lifestyle.</p>
-            <button 
-                onClick={handleCheckout}
-                className="px-8 py-4 bg-primary text-white rounded hover:opacity-90 transition-all"
-            >
-                Complete Checkout with Shopier
-            </button>
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Shop", id: "/" },
+          ]}
+          brandName="T&B"
+        />
+
+        <div className="container mx-auto py-20 px-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+            <div className="w-full aspect-square bg-gray-100 rounded-lg overflow-hidden">
+                <img src="http://img.b2bpic.net/free-photo/female-doctor-diagnosing-melanoma-body-female-patient_23-2149365767.jpg?_wi=1" alt="Product Image" className="w-full h-full object-cover" />
+            </div>
+            <div className="flex flex-col space-y-6">
+                <h1 className="text-4xl font-bold">Premium Product {productId}</h1>
+                <p className="text-2xl text-gray-600">$199.00</p>
+                
+                <div className="space-y-2">
+                    <label className="block font-medium">Select Variant</label>
+                    <select className="w-full p-3 border rounded-md">
+                        <option>Standard Edition</option>
+                        <option>Limited Edition</option>
+                    </select>
+                </div>
+
+                <div className="flex flex-col gap-4 pt-6">
+                    <button 
+                        onClick={handleShopierCheckout} 
+                        className="w-full py-4 bg-black text-white rounded-md font-bold hover:opacity-90 transition"
+                    >
+                        Add to Cart
+                    </button>
+                    <button 
+                        onClick={handleShopierCheckout} 
+                        className="w-full py-4 border-2 border-black rounded-md font-bold hover:bg-gray-50 transition"
+                    >
+                        Buy Now
+                    </button>
+                </div>
+            </div>
+          </div>
         </div>
+
         <FooterCard
-            logoText="T&B"
-            copyrightText="© 2025 T&B. All rights reserved."
-            socialLinks={[
-                { icon: Twitter, href: "#", ariaLabel: "Twitter" },
-                { icon: Instagram, href: "#", ariaLabel: "Instagram" },
-                { icon: Linkedin, href: "#", ariaLabel: "Linkedin" },
-            ]}
+          logoText="T&B"
+          copyrightText="© 2025 T&B. All rights reserved."
+          socialLinks={[
+            { icon: Twitter, href: "#", ariaLabel: "Twitter" },
+            { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+            { icon: Linkedin, href: "#", ariaLabel: "Linkedin" },
+          ]}
         />
       </ReactLenis>
     </ThemeProvider>