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

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

@@ -0,0 +1,54 @@
+"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 { Twitter, Instagram, Linkedin } from "lucide-react";
+
+export default function ProductDetailPage() {
+  const { id } = useParams();
+
+  const handleCheckout = () => {
+    window.location.href = "https://www.shopier.com/checkout";
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="mediumLargeSizeMediumTitles"
+        background="blurBottom"
+        cardStyle="solid"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="radial-glow"
+        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>
+        </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" },
+            ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}