Update src/app/product/[id]/page.tsx
This commit is contained in:
@@ -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."
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user