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

Merge version_3 into main

src/app/page.tsx

@@ -12,8 +12,15 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 import { Award, Globe, Instagram, Linkedin, Sparkles, Twitter, Users } from "lucide-react";
+import { useRouter } from "next/navigation";
 
 export default function LandingPage() {
+  const router = useRouter();
+
+  const handleProductClick = (id: string) => {
+    router.push(`/product/${id}`);
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="text-stagger"
@@ -31,14 +38,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Shop", id: "products" },
-          name: "Shop",          id: "products"},
+        { name: "Our Story", id: "about" },
-        {
+        { name: "FAQ", id: "faq" },
-          name: "Our Story",          id: "about"},
+        { name: "Contact", id: "contact" },
-        {
-          name: "FAQ",          id: "faq"},
-        {
-          name: "Contact",          id: "contact"},
       ]}
       brandName="T&B"
     />
@@ -46,13 +49,11 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
-      background={{
+      background={{ variant: "radial-gradient" }}
-        variant: "radial-gradient"}}
       logoText="T&B"
       description="Crafting the future of modern essentials. Where design meets functionality in perfect harmony."
       buttons={[
-        {
+        { text: "Shop Now", href: "#products" },
-          text: "Shop Now",          href: "#products"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/female-doctor-diagnosing-melanoma-body-female-patient_23-2149365767.jpg?_wi=1"
       imageAlt="T&B Luxury Product"
@@ -67,18 +68,12 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "p1", name: "Essential Pod", price: "$129", imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072189.jpg?_wi=1", onProductClick: () => handleProductClick("p1"), priceButtonProps: { text: "Buy Now" } },
-          id: "p1",          name: "Essential Pod",          price: "$129",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072189.jpg?_wi=1", priceButtonProps: { text: "Buy Now" }},
+        { id: "p2", name: "Audio Prime", price: "$249", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-vr-glasses_23-2148847740.jpg?_wi=1", onProductClick: () => handleProductClick("p2"), priceButtonProps: { text: "Buy Now" } },
-        {
+        { id: "p3", name: "Smart Dock", price: "$89", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-laptop-amidst-stationery_23-2147768899.jpg?_wi=1", onProductClick: () => handleProductClick("p3"), priceButtonProps: { text: "Buy Now" } },
-          id: "p2",          name: "Audio Prime",          price: "$249",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-vr-glasses_23-2148847740.jpg?_wi=1", priceButtonProps: { text: "Buy Now" }},
+        { id: "p4", name: "Sonic Buds", price: "$159", imageSrc: "http://img.b2bpic.net/free-photo/headphones-laptop-home_23-2149551432.jpg?_wi=1", onProductClick: () => handleProductClick("p4"), priceButtonProps: { text: "Buy Now" } },
-        {
+        { id: "p5", name: "T&B Watch", price: "$299", imageSrc: "http://img.b2bpic.net/free-photo/young-serious-man-wearing-white-t-shirt-light-blue-denim-shirt-rolling-up-his-right-sleeve-showing-tattooed-arm-isolated-white_346278-937.jpg", onProductClick: () => handleProductClick("p5"), priceButtonProps: { text: "Buy Now" } },
-          id: "p3",          name: "Smart Dock",          price: "$89",          imageSrc: "http://img.b2bpic.net/free-photo/smartphone-laptop-amidst-stationery_23-2147768899.jpg?_wi=1", priceButtonProps: { text: "Buy Now" }},
+        { id: "p6", name: "Power Bank", price: "$69", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-hands-holding-notebook-pen_23-2149328239.jpg", onProductClick: () => handleProductClick("p6"), priceButtonProps: { text: "Buy Now" } },
-        {
-          id: "p4",          name: "Sonic Buds",          price: "$159",          imageSrc: "http://img.b2bpic.net/free-photo/headphones-laptop-home_23-2149551432.jpg?_wi=1", priceButtonProps: { text: "Buy Now" }},
-        {
-          id: "p5",          name: "T&B Watch",          price: "$299",          imageSrc: "http://img.b2bpic.net/free-photo/young-serious-man-wearing-white-t-shirt-light-blue-denim-shirt-rolling-up-his-right-sleeve-showing-tattooed-arm-isolated-white_346278-937.jpg", priceButtonProps: { text: "Buy Now" }},
-        {
-          id: "p6",          name: "Power Bank",          price: "$69",          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-hands-holding-notebook-pen_23-2149328239.jpg", priceButtonProps: { text: "Buy Now" }},
       ]}
       title="Essential Collection"
       description="Carefully curated products built for the modern lifestyle."
@@ -91,24 +86,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
+        { title: "Minimalist Design", description: "Stripped down to essentials, keeping only what truly adds value.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-silver-tin-can_23-2148785202.jpg", imageAlt: "Feature 1" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/neon-robot-vacuum-cleaner_23-2151349214.jpg", imageAlt: "Feature 2" } },
-          title: "Minimalist Design",          description: "Stripped down to essentials, keeping only what truly adds value.",          phoneOne: {
+        { title: "Premium Materials", description: "Sourced with durability and aesthetic luxury in mind.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-woman-talking-phone_23-2149530045.jpg", imageAlt: "Feature 3" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/composition-summer-elements_23-2147797695.jpg", imageAlt: "Feature 4" } },
-            imageSrc: "http://img.b2bpic.net/free-photo/high-angle-silver-tin-can_23-2148785202.jpg",            imageAlt: "Feature 1"},
+        { title: "Flawless Performance", description: "Engineered for excellence in every interaction.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/levitating-round-speaker-device_52683-138390.jpg", imageAlt: "Feature 5" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/white-leather-textures_74190-5570.jpg", imageAlt: "Feature 6" } },
-          phoneTwo: {
-            imageSrc: "http://img.b2bpic.net/free-photo/neon-robot-vacuum-cleaner_23-2151349214.jpg",            imageAlt: "Feature 2"},
-        },
-        {
-          title: "Premium Materials",          description: "Sourced with durability and aesthetic luxury in mind.",          phoneOne: {
-            imageSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-woman-talking-phone_23-2149530045.jpg",            imageAlt: "Feature 3"},
-          phoneTwo: {
-            imageSrc: "http://img.b2bpic.net/free-photo/composition-summer-elements_23-2147797695.jpg",            imageAlt: "Feature 4"},
-        },
-        {
-          title: "Flawless Performance",          description: "Engineered for excellence in every interaction.",          phoneOne: {
-            imageSrc: "http://img.b2bpic.net/free-photo/levitating-round-speaker-device_52683-138390.jpg",            imageAlt: "Feature 5"},
-          phoneTwo: {
-            imageSrc: "http://img.b2bpic.net/free-photo/white-leather-textures_74190-5570.jpg",            imageAlt: "Feature 6"},
-        },
       ]}
       showStepNumbers={false}
       title="Designed for You"
@@ -121,18 +101,10 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="The T&B Philosophy"
       metrics={[
-        {
+        { icon: Award, label: "Design Awards", value: "24+" },
-          icon: Award,
+        { icon: Users, label: "Satisfied Customers", value: "10k+" },
-          label: "Design Awards",          value: "24+"},
+        { icon: Globe, label: "Global Shipping", value: "50+" },
-        {
+        { icon: Sparkles, label: "Product Lines", value: "12" },
-          icon: Users,
-          label: "Satisfied Customers",          value: "10k+"},
-        {
-          icon: Globe,
-          label: "Global Shipping",          value: "50+"},
-        {
-          icon: Sparkles,
-          label: "Product Lines",          value: "12"},
       ]}
       metricsAnimation="blur-reveal"
     />
@@ -143,16 +115,11 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "t1", name: "Sarah Chen", date: "Jan 2024", title: "CEO, Design Labs", quote: "T&B products have completely changed my workspace aesthetic.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/handsome-man-posing-studio_23-2148532568.jpg", imageSrc: "http://img.b2bpic.net/free-photo/female-doctor-diagnosing-melanoma-body-female-patient_23-2149365767.jpg?_wi=2", imageAlt: "professional portrait minimalist" },
-          id: "t1",          name: "Sarah Chen",          date: "Jan 2024",          title: "CEO, Design Labs",          quote: "T&B products have completely changed my workspace aesthetic.",          tag: "Verified",          avatarSrc: "http://img.b2bpic.net/free-photo/handsome-man-posing-studio_23-2148532568.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/female-doctor-diagnosing-melanoma-body-female-patient_23-2149365767.jpg?_wi=2",          imageAlt: "professional portrait minimalist"},
+        { id: "t2", name: "Michael Ross", date: "Dec 2023", title: "Creative Director", quote: "Minimalism done right. The quality is simply unmatched.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/closeup-confident-adult-business-leader_1262-4819.jpg", imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072189.jpg?_wi=2", imageAlt: "professional portrait minimalist" },
-        {
+        { id: "t3", name: "Elena Gomez", date: "Nov 2023", title: "Entrepreneur", quote: "Functionality meeting beauty. Everything I need in one set.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/blurred-waiting-room_1203-1254.jpg", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-vr-glasses_23-2148847740.jpg?_wi=2", imageAlt: "professional portrait minimalist" },
-          id: "t2",          name: "Michael Ross",          date: "Dec 2023",          title: "Creative Director",          quote: "Minimalism done right. The quality is simply unmatched.",          tag: "Verified",          avatarSrc: "http://img.b2bpic.net/free-photo/closeup-confident-adult-business-leader_1262-4819.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072189.jpg?_wi=2",          imageAlt: "professional portrait minimalist"},
+        { id: "t4", name: "David Park", date: "Oct 2023", title: "Product Designer", quote: "The attention to detail is evident in every curve.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/medium-shot-man-with-messy-bun-posing_23-2149435265.jpg", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-laptop-amidst-stationery_23-2147768899.jpg?_wi=2", imageAlt: "professional portrait minimalist" },
-        {
+        { id: "t5", name: "Jessica Lee", date: "Sep 2023", title: "Tech Consultant", quote: "Elegant design that works seamlessly every single time.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/special-product-photography-studio-with-workers_23-2148970220.jpg", imageSrc: "http://img.b2bpic.net/free-photo/headphones-laptop-home_23-2149551432.jpg?_wi=2", imageAlt: "professional portrait minimalist" },
-          id: "t3",          name: "Elena Gomez",          date: "Nov 2023",          title: "Entrepreneur",          quote: "Functionality meeting beauty. Everything I need in one set.",          tag: "Verified",          avatarSrc: "http://img.b2bpic.net/free-photo/blurred-waiting-room_1203-1254.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-vr-glasses_23-2148847740.jpg?_wi=2",          imageAlt: "professional portrait minimalist"},
-        {
-          id: "t4",          name: "David Park",          date: "Oct 2023",          title: "Product Designer",          quote: "The attention to detail is evident in every curve.",          tag: "Verified",          avatarSrc: "http://img.b2bpic.net/medium-shot-man-with-messy-bun-posing_23-2149435265.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/smartphone-laptop-amidst-stationery_23-2147768899.jpg?_wi=2",          imageAlt: "professional portrait minimalist"},
-        {
-          id: "t5",          name: "Jessica Lee",          date: "Sep 2023",          title: "Tech Consultant",          quote: "Elegant design that works seamlessly every single time.",          tag: "Verified",          avatarSrc: "http://img.b2bpic.net/free-photo/special-product-photography-studio-with-workers_23-2148970220.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/headphones-laptop-home_23-2149551432.jpg?_wi=2",          imageAlt: "professional portrait minimalist"},
       ]}
       title="Loved by Creators"
       description="See why top professionals choose T&B."
@@ -164,14 +131,10 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       faqs={[
-        {
+        { id: "f1", title: "How long is shipping?", content: "We offer express global shipping within 3-5 business days." },
-          id: "f1",          title: "How long is shipping?",          content: "We offer express global shipping within 3-5 business days."},
+        { id: "f2", title: "Can I return products?", content: "Yes, we have a 30-day hassle-free return policy." },
-        {
+        { id: "f3", title: "Do you offer international shipping?", content: "Yes, we ship to over 50 countries worldwide." },
-          id: "f2",          title: "Can I return products?",          content: "Yes, we have a 30-day hassle-free return policy."},
+        { id: "f4", title: "Are products covered by warranty?", content: "All items come with a standard 12-month manufacturer warranty." },
-        {
-          id: "f3",          title: "Do you offer international shipping?",          content: "Yes, we ship to over 50 countries worldwide."},
-        {
-          id: "f4",          title: "Are products covered by warranty?",          content: "All items come with a standard 12-month manufacturer warranty."},
       ]}
       title="Frequently Asked Questions"
       description="Everything you need to know about T&B."
@@ -185,12 +148,8 @@ export default function LandingPage() {
       title="Join the T&B Inner Circle"
       description="Get exclusive early access to new releases and design insights."
       inputs={[
-        {
+        { name: "name", type: "text", placeholder: "Your Name", required: true },
-          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
+        { name: "email", type: "email", placeholder: "Your Email", required: true },
-        },
-        {
-          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/wide-shot-white-abstract-architectural-building_181624-30992.jpg"
       buttonText="Subscribe"
@@ -203,20 +162,11 @@ export default function LandingPage() {
       title="Get In Touch"
       description="Our team is here to assist you with any questions."
       inputs={[
-        {
+        { name: "name", type: "text", placeholder: "Name", required: true },
-          name: "name",          type: "text",          placeholder: "Name",          required: true,
+        { name: "email", type: "email", placeholder: "Email", required: true },
-        },
+        { name: "subject", type: "text", placeholder: "Subject", required: true },
-        {
-          name: "email",          type: "email",          placeholder: "Email",          required: true,
-        },
-        {
-          name: "subject",          type: "text",          placeholder: "Subject",          required: true,
-        },
       ]}
-      textarea={{
+      textarea={{ name: "message", placeholder: "How can we help?", rows: 4, required: true }}
-        name: "message",        placeholder: "How can we help?",        rows: 4,
-        required: true,
-      }}
       imageSrc="http://img.b2bpic.net/free-photo/corporate-building-with-minimalist-empty-room_23-2148727505.jpg"
     />
   </div>
@@ -226,15 +176,9 @@ export default function LandingPage() {
       logoText="T&B"
       copyrightText="© 2025 T&B. All rights reserved."
       socialLinks={[
-        {
+        { icon: Twitter, href: "#", ariaLabel: "Twitter" },
-          icon: Twitter,
+        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
-          href: "#",          ariaLabel: "Twitter"},
+        { icon: Linkedin, href: "#", ariaLabel: "Linkedin" },
-        {
-          icon: Instagram,
-          href: "#",          ariaLabel: "Instagram"},
-        {
-          icon: Linkedin,
-          href: "#",          ariaLabel: "Linkedin"},
       ]}
     />
   </div>

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

@@ -0,0 +1,87 @@
+"use client";
+
+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 params = useParams();
+  const productId = params?.id;
+
+  const handleShopierCheckout = () => {
+    // Integration logic for Shopier checkout process
+    window.open(`https://www.shopier.com/ShowProductNew/products.php?id=${productId}`, "_blank");
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="mediumLargeSizeMediumTitles"
+        background="blurBottom"
+        cardStyle="solid"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <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" },
+          ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}