From 7761bb5d6487f66d3a88bf157be55acd39ebca23 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 6 Mar 2026 17:34:39 +0000
Subject: [PATCH] Update src/app/product/[id]/page.tsx

---
 src/app/product/[id]/page.tsx | 388 ++++------------------------------
 1 file changed, 37 insertions(+), 351 deletions(-)

diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx
index d39d0dc..cf1635f 100644
--- a/src/app/product/[id]/page.tsx
+++ b/src/app/product/[id]/page.tsx
@@ -2,205 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
-import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
-import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
 import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import { useParams } from "next/navigation";
-import { Heart, Mail, CheckCircle, Star } from "lucide-react";
-import Link from "next/link";
-
-export default function ProductDetailsPage() {
-  const params = useParams();
-  const productId = params?.id as string;
-
-  // Mock product details data
-  const productDetails: Record<string, any> = {
-    "prod-1": {
-      id: "prod-1",
-      name: "Complete Python Programming Guide",
-      brand: "Digital Store",
-      price: "$29.99",
-      rating: 5,
-      reviewCount: "2.3k",
-      imageSrc: "http://img.b2bpic.net/free-photo/funny-little-girl-headphones-with-laptop-plays-games-game-addiction-concept_169016-53925.jpg?_wi=7",
-      description: "Master Python from basics to advanced concepts with this comprehensive guide covering data structures, algorithms, web development, and more.",
-      features: [
-        {
-          title: "Step-by-Step Learning",
-          description: "Start from the fundamentals and progress to advanced Python concepts with clear explanations and practical examples.",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-female-working-art-studio_23-2148372142.jpg?_wi=7",
-          imageAlt: "Learning Materials"
-        },
-        {
-          title: "Real-World Projects",
-          description: "Build practical applications and projects that you can use in your portfolio to showcase your Python skills.",
-          imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-29382.jpg?_wi=3",
-          imageAlt: "Project Examples"
-        },
-        {
-          title: "Expert-Led Content",
-          description: "Learn from industry professionals with years of experience in Python development and software engineering.",
-          imageSrc: "http://img.b2bpic.net/free-photo/call-center-senior-agent-providing-guidance-help-customers-using-ai_482257-126049.jpg?_wi=3",
-          imageAlt: "Expert Guidance"
-        },
-        {
-          title: "Lifetime Access",
-          description: "Purchase once and access the course materials forever. Get all future updates and improvements at no extra cost.",
-          imageSrc: "http://img.b2bpic.net/free-vector/digital-cloud-computing-futuristic-background-cyber-service_1017-56275.jpg?_wi=3",
-          imageAlt: "Lifetime Access"
-        }
-      ]
-    },
-    "prod-2": {
-      id: "prod-2",
-      name: "Web Design Templates Bundle",
-      brand: "Digital Store",
-      price: "$49.99",
-      rating: 5,
-      reviewCount: "1.8k",
-      imageSrc: "http://img.b2bpic.net/free-photo/happy-female-working-art-studio_23-2148372142.jpg?_wi=8",
-      description: "Professional web design templates ready to customize. Includes responsive layouts, components, and design systems for modern websites.",
-      features: [
-        {
-          title: "Responsive Design",
-          description: "All templates are fully responsive and optimized for desktop, tablet, and mobile devices for seamless user experience.",
-          imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-29382.jpg?_wi=4",
-          imageAlt: "Responsive Templates"
-        },
-        {
-          title: "Customizable Components",
-          description: "Pre-built UI components and design elements that you can easily customize to match your brand identity and style.",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-female-working-art-studio_23-2148372142.jpg?_wi=9",
-          imageAlt: "Design Components"
-        },
-        {
-          title: "Modern Aesthetics",
-          description: "Stay ahead with current design trends including minimalist layouts, bold typography, and sophisticated color schemes.",
-          imageSrc: "http://img.b2bpic.net/free-vector/digital-cloud-computing-futuristic-background-cyber-service_1017-56275.jpg?_wi=4",
-          imageAlt: "Modern Design"
-        },
-        {
-          title: "Complete Documentation",
-          description: "Detailed guides and documentation for implementing and customizing each template to your specific needs.",
-          imageSrc: "http://img.b2bpic.net/free-photo/call-center-senior-agent-providing-guidance-help-customers-using-ai_482257-126049.jpg?_wi=4",
-          imageAlt: "Documentation"
-        }
-      ]
-    },
-    "prod-3": {
-      id: "prod-3",
-      name: "Digital Marketing Masterclass",
-      brand: "Digital Store",
-      price: "$39.99",
-      rating: 5,
-      reviewCount: "3.1k",
-      imageSrc: "http://img.b2bpic.net/free-photo/funny-little-girl-headphones-with-laptop-plays-games-game-addiction-concept_169016-53925.jpg?_wi=8",
-      description: "Comprehensive digital marketing course covering SEO, social media, content marketing, and conversion optimization strategies.",
-      features: [
-        {
-          title: "SEO Mastery",
-          description: "Learn advanced search engine optimization techniques to rank higher and drive organic traffic to your website.",
-          imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-29382.jpg?_wi=5",
-          imageAlt: "SEO Training"
-        },
-        {
-          title: "Social Media Strategy",
-          description: "Master platform-specific strategies for Facebook, Instagram, LinkedIn, and TikTok to build engaged communities.",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-female-working-art-studio_23-2148372142.jpg?_wi=10",
-          imageAlt: "Social Media"
-        },
-        {
-          title: "Content Marketing",
-          description: "Create compelling content that attracts, engages, and converts your audience into loyal customers.",
-          imageSrc: "http://img.b2bpic.net/free-vector/digital-cloud-computing-futuristic-background-cyber-service_1017-56275.jpg?_wi=5",
-          imageAlt: "Content Strategy"
-        },
-        {
-          title: "Analytics & ROI",
-          description: "Track, measure, and optimize your marketing campaigns using data-driven insights and analytics tools.",
-          imageSrc: "http://img.b2bpic.net/free-photo/call-center-senior-agent-providing-guidance-help-customers-using-ai_482257-126049.jpg?_wi=5",
-          imageAlt: "Analytics"
-        }
-      ]
-    }
-  };
-
-  const current = productDetails[productId] || productDetails["prod-1"];
-
-  const relatedProducts = [
-    {
-      id: "prod-4",
-      brand: "Digital Store",
-      name: "Advanced JavaScript eBook",
-      price: "$24.99",
-      rating: 5,
-      reviewCount: "1.5k",
-      imageSrc: "http://img.b2bpic.net/free-vector/online-learning-landing-page-design_23-2149058254.jpg?_wi=8",
-      imageAlt: "JavaScript eBook"
-    },
-    {
-      id: "prod-5",
-      brand: "Digital Store",
-      name: "UI/UX Design System Kit",
-      price: "$59.99",
-      rating: 5,
-      reviewCount: "2.7k",
-      imageSrc: "http://img.b2bpic.net/free-photo/happy-female-working-art-studio_23-2148372142.jpg?_wi=11",
-      imageAlt: "Design System Kit"
-    },
-    {
-      id: "prod-6",
-      brand: "Digital Store",
-      name: "SEO Optimization Blueprint",
-      price: "$34.99",
-      rating: 5,
-      reviewCount: "2.1k",
-      imageSrc: "http://img.b2bpic.net/free-vector/online-learning-landing-page-design_23-2149058254.jpg?_wi=9",
-      imageAlt: "SEO Guide"
-    }
-  ];
-
-  const testimonials = [
-    {
-      id: "test-1",
-      name: "Sarah Johnson",
-      role: "CEO",
-      company: "TechCorp Solutions",
-      rating: 5,
-      imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg?_wi=2",
-      imageAlt: "Sarah Johnson"
-    },
-    {
-      id: "test-2",
-      name: "Michael Chen",
-      role: "Founder",
-      company: "Innovate Lab",
-      rating: 5,
-      imageSrc: "http://img.b2bpic.net/free-photo/confident-entrepreneur-satisfied-with-own-success_1163-5474.jpg?_wi=2",
-      imageAlt: "Michael Chen"
-    },
-    {
-      id: "test-3",
-      name: "Emily Rodriguez",
-      role: "Marketing Director",
-      company: "Growth Co",
-      rating: 5,
-      imageSrc: "http://img.b2bpic.net/free-photo/content-business-woman-talking-smartphone-outdoors_1262-20534.jpg?_wi=2",
-      imageAlt: "Emily Rodriguez"
-    },
-    {
-      id: "test-4",
-      name: "David Kim",
-      role: "Product Manager",
-      company: "StartUp XYZ",
-      rating: 5,
-      imageSrc: "http://img.b2bpic.net/free-photo/portrait-professional-businesswoman-indoors_23-2148824826.jpg?_wi=2",
-      imageAlt: "David Kim"
-    }
-  ];
+import { Mail } from "lucide-react";
 
+export default function ProductDetailPage({ params }: { params: { id: string } }) {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-bubble"
@@ -208,7 +14,7 @@ export default function ProductDetailsPage() {
       borderRadius="pill"
       contentWidth="smallMedium"
       sizing="largeSmallSizeMediumTitles"
-      background="grid"
+      background="circleGradient"
       cardStyle="gradient-bordered"
       primaryButtonStyle="shadow"
       secondaryButtonStyle="solid"
@@ -217,11 +23,11 @@ export default function ProductDetailsPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
           navItems={[
-            { name: "Home", id: "home" },
-            { name: "Products", id: "products" },
+            { name: "Home", id: "/" },
+            { name: "Products", id: "/products" },
             { name: "Features", id: "features" },
             { name: "Support", id: "contact" },
-            { name: "Account", id: "account" }
+            { name: "Account", id: "/account" },
           ]}
           brandName="Digital Store"
           bottomLeftText="Digital Product Marketplace"
@@ -229,176 +35,56 @@ export default function ProductDetailsPage() {
         />
       </div>
 
-      <div className="min-h-screen bg-white">
-        {/* Product Details Hero Section */}
-        <div className="mx-auto px-4 md:px-6 py-12 md:py-20">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
-            {/* Product Image */}
-            <div className="flex items-center justify-center">
-              <img
-                src={current.imageSrc}
-                alt={current.name}
-                className="w-full h-auto rounded-2xl object-cover shadow-lg"
-              />
-            </div>
-
-            {/* Product Info */}
-            <div className="flex flex-col justify-center">
-              <span className="text-sm font-semibold text-green-600 uppercase tracking-wide mb-2">
-                {current.brand}
-              </span>
-              <h1 className="text-3xl md:text-4xl font-extrabold text-black mb-4">
-                {current.name}
-              </h1>
-
-              {/* Rating */}
-              <div className="flex items-center gap-2 mb-6">
-                <div className="flex gap-1">
-                  {[...Array(5)].map((_, i) => (
-                    <Star key={i} size={18} className="fill-yellow-400 text-yellow-400" />
-                  ))}
-                </div>
-                <span className="text-sm text-gray-600">({current.reviewCount} reviews)</span>
-              </div>
-
-              {/* Price */}
-              <div className="mb-6">
-                <p className="text-4xl font-extrabold text-green-700 mb-2">
-                  {current.price}
-                </p>
-                <p className="text-gray-600">One-time purchase • Lifetime access</p>
-              </div>
-
-              {/* Description */}
-              <p className="text-gray-700 mb-8 leading-relaxed">
-                {current.description}
-              </p>
-
-              {/* Action Buttons */}
-              <div className="flex flex-col sm:flex-row gap-4 mb-8">
-                <button className="px-8 py-3 bg-green-700 text-white font-bold rounded-full hover:bg-green-800 transition-colors shadow-lg">
-                  Purchase Now
-                </button>
-                <button className="px-8 py-3 border-2 border-green-700 text-green-700 font-bold rounded-full hover:bg-green-50 transition-colors flex items-center justify-center gap-2">
-                  <Heart size={20} />
-                  Save for Later
-                </button>
-              </div>
-
-              {/* Features List */}
-              <div className="space-y-3">
-                <div className="flex items-start gap-3">
-                  <CheckCircle size={20} className="text-green-700 flex-shrink-0 mt-1" />
-                  <span className="text-gray-700">Instant download after purchase</span>
-                </div>
-                <div className="flex items-start gap-3">
-                  <CheckCircle size={20} className="text-green-700 flex-shrink-0 mt-1" />
-                  <span className="text-gray-700">30-day money-back guarantee</span>
-                </div>
-                <div className="flex items-start gap-3">
-                  <CheckCircle size={20} className="text-green-700 flex-shrink-0 mt-1" />
-                  <span className="text-gray-700">Secure payment processing</span>
-                </div>
-              </div>
-            </div>
-          </div>
+      <div className="min-h-screen bg-white py-12 px-4">
+        <div className="max-w-4xl mx-auto">
+          <h1 className="text-4xl font-extrabold text-black mb-4">Product Details</h1>
+          <p className="text-gray-600 text-lg">Product ID: {params.id}</p>
+          <p className="text-gray-500 mt-4">Detailed product information and purchase options would be displayed here.</p>
         </div>
+      </div>
 
-        {/* Features Section */}
-        <div id="features" data-section="features">
-          <FeatureCardOne
-            features={current.features}
-            title="Why This Product?"
-            description="Get the most out of your investment with comprehensive content and lifelong support."
-            tag="Key Benefits"
-            tagIcon={CheckCircle}
-            tagAnimation="slide-up"
-            textboxLayout="default"
-            animationType="slide-up"
-            useInvertedBackground={true}
-            gridVariant="four-items-2x2-equal-grid"
-          />
-        </div>
-
-        {/* Related Products Section */}
-        <div id="related-products" data-section="related-products">
-          <ProductCardTwo
-            products={relatedProducts}
-            title="You Might Also Like"
-            description="Discover other premium products that complement this purchase."
-            tag="Related"
-            tagIcon={Star}
-            tagAnimation="slide-up"
-            textboxLayout="default"
-            animationType="slide-up"
-            useInvertedBackground={false}
-            gridVariant="three-columns-all-equal-width"
-          />
-        </div>
-
-        {/* Testimonials Section */}
-        <div id="testimonials" data-section="testimonials">
-          <TestimonialCardOne
-            testimonials={testimonials}
-            title="What Customers Are Saying"
-            description="See how people are succeeding with our premium digital products."
-            tag="Success Stories"
-            tagIcon={Star}
-            tagAnimation="slide-up"
-            textboxLayout="default"
-            animationType="slide-up"
-            useInvertedBackground={true}
-            gridVariant="four-items-2x2-equal-grid"
-          />
-        </div>
-
-        {/* Contact/Newsletter Section */}
-        <div id="contact" data-section="contact">
-          <ContactCenter
-            tag="Newsletter"
-            title="Stay Updated with New Releases"
-            description="Subscribe to our newsletter and be the first to discover new digital products, exclusive deals, and special offers."
-            tagIcon={Mail}
-            tagAnimation="slide-up"
-            background={{ variant: "grid" }}
-            useInvertedBackground={true}
-            inputPlaceholder="Enter your email address"
-            buttonText="Subscribe"
-            termsText="We respect your privacy. Unsubscribe at any time from our newsletter."
-          />
-        </div>
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Newsletter"
+          title="Stay Updated with New Releases"
+          description="Subscribe to our newsletter and be the first to discover new digital products, exclusive deals, and special offers."
+          tagIcon={Mail}
+          tagAnimation="slide-up"
+          background={{ variant: "animated-grid" }}
+          useInvertedBackground={true}
+          inputPlaceholder="Enter your email address"
+          buttonText="Subscribe"
+          termsText="We respect your privacy. Unsubscribe at any time from our newsletter."
+        />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterBaseReveal
           columns={[
             {
-              title: "Product",
-              items: [
+              title: "Product",              items: [
                 { label: "Browse Products", href: "/products" },
                 { label: "Categories", href: "/products" },
                 { label: "New Releases", href: "/products" },
-                { label: "Best Sellers", href: "/products" }
-              ]
+                { label: "Best Sellers", href: "/products" },
+              ],
             },
             {
-              title: "Company",
-              items: [
+              title: "Company",              items: [
                 { label: "About Us", href: "#" },
                 { label: "Blog", href: "#" },
                 { label: "Careers", href: "#" },
-                { label: "Contact", href: "/contact" }
-              ]
+                { label: "Contact", href: "contact" },
+              ],
             },
             {
-              title: "Support",
-              items: [
+              title: "Support",              items: [
                 { label: "Help Center", href: "#" },
-                { label: "Account", href: "/auth" },
-                { label: "Downloads", href: "/my-downloads" },
-                { label: "Report Issue", href: "#" }
-              ]
-            }
+                { label: "Account", href: "#" },
+                { label: "Downloads", href: "#" },
+                { label: "Report Issue", href: "#" },
+              ],
+            },
           ]}
           copyrightText="© 2025 Digital Store. All rights reserved."
         />