Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #5.
This commit is contained in:
@@ -1,162 +1,199 @@
|
||||
'use client';
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
|
||||
import { ThemeProvider } from 'next-themes';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import TextAnimation from '@/components/text/TextAnimation';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import { Sparkles, Star } from 'lucide-react';
|
||||
import TextAnimation from '@/components/text/TextAnimation';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export default function ProductDetailPage() {
|
||||
const book = {
|
||||
id: 'the-alchemist',
|
||||
title: 'The Alchemist',
|
||||
author: 'Paulo Coelho',
|
||||
description: 'A captivating novel about a young shepherd who journeys to the Egyptian desert in search of a treasure. His quest leads him to discover a different kind of treasure than he originally envisioned.',
|
||||
price: '$12.99',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-alchemist.png',
|
||||
imageAlt: 'The Alchemist book cover',
|
||||
rating: 4.8,
|
||||
reviewCount: 1500,
|
||||
};
|
||||
const pathname = usePathname();
|
||||
const productId = pathname.split('/').pop();
|
||||
|
||||
const reviews = [
|
||||
const [product, setProduct] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate fetching product details
|
||||
const dummyProducts = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Sophia M.',
|
||||
role: 'Avid Reader',
|
||||
testimonial: 'An inspiring and thought-provoking read that I couldn\'t put down. Highly recommended!',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/customer-avatar-1.jpg',
|
||||
icon: Star,
|
||||
id: "prod1", brand: "BrandA", name: "Stylish Shirt", price: "$29.99", rating: 4.5,
|
||||
reviewCount: "120", imageSrc: "https://via.placeholder.com/600x400?text=Product+1", imageAlt: "Stylish Shirt", description: "A very stylish shirt made from premium cotton. Perfect for any occasion.", details: ["100% Cotton", "Machine Washable", "Available in S, M, L, XL"],
|
||||
reviews: [
|
||||
{ author: "Alice", text: "Great shirt, very comfortable!", rating: 5 },
|
||||
{ author: "Bob", text: "Good quality for the price.", rating: 4 },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'John D.',
|
||||
role: 'Book Enthusiast',
|
||||
testimonial: 'The story is beautifully written and full of wisdom. A true classic that everyone should read.',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/customer-avatar-2.jpg',
|
||||
icon: Star,
|
||||
id: "prod2", brand: "BrandB", name: "Comfy Jeans", price: "$49.99", rating: 4.2,
|
||||
reviewCount: "85", imageSrc: "https://via.placeholder.com/600x400?text=Product+2", imageAlt: "Comfy Jeans", description: "Comfortable and durable jeans, perfect for everyday wear.", details: ["98% Cotton, 2% Spandex", "Regular Fit", "Multiple sizes available"],
|
||||
reviews: [
|
||||
{ author: "Charlie", text: "My new favorite jeans!", rating: 5 },
|
||||
{ author: "Diana", text: "A bit snug, but good overall.", rating: 3 },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Emily R.',
|
||||
role: 'Philosophy Student',
|
||||
testimonial: 'Changed my perspective on life and destiny. Deeply moving and thought-provoking.',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/customer-avatar-3.jpg',
|
||||
icon: Star,
|
||||
id: "prod3", brand: "BrandC", name: "Running Shoes", price: "$79.99", rating: 4.8,
|
||||
reviewCount: "200", imageSrc: "https://via.placeholder.com/600x400?text=Product+3", imageAlt: "Running Shoes", description: "High-performance running shoes designed for ultimate comfort and speed.", details: ["Lightweight design", "Breathable mesh", "Shock-absorbing sole"],
|
||||
reviews: [
|
||||
{ author: "Eve", text: "Amazing shoes for long runs.", rating: 5 },
|
||||
{ author: "Frank", text: "Worth every penny.", rating: 5 },
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
const relatedProducts = [
|
||||
{
|
||||
id: 'little-prince',
|
||||
name: 'The Little Prince',
|
||||
price: '$9.99',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-little-prince.png',
|
||||
imageAlt: 'The Little Prince book cover',
|
||||
},
|
||||
{
|
||||
id: 'siddhartha',
|
||||
name: 'Siddhartha',
|
||||
price: '$11.50',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-siddhartha.png',
|
||||
imageAlt: 'Siddhartha book cover',
|
||||
},
|
||||
{
|
||||
id: 'jonathan-seagull',
|
||||
name: 'Jonathan Livingston Seagull',
|
||||
price: '$8.75',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-jonathan-seagull.png',
|
||||
imageAlt: 'Jonathan Livingston Seagull book cover',
|
||||
},
|
||||
{
|
||||
id: 'the-prophet',
|
||||
name: 'The Prophet',
|
||||
price: '$10.25',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-prophet.png',
|
||||
imageAlt: 'The Prophet book cover',
|
||||
},
|
||||
const foundProduct = dummyProducts.find(p => p.id === productId);
|
||||
setProduct(foundProduct);
|
||||
}, [productId]);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Cart", id: "/cart" },
|
||||
{ name: "Checkout", id: "/checkout" },
|
||||
{ name: "Order Conf", id: "/order-confirmation" },
|
||||
{ name: "Products", id: "/products/1" },
|
||||
{ name: "Collections", id: "/collections/all" }
|
||||
];
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered navItems={navItems} brandName="Webild" logoSrc="https://via.placeholder.com/40" />
|
||||
</div>
|
||||
<main className="flex min-h-screen flex-col items-center justify-center p-24">
|
||||
<p>Loading product details...</p>
|
||||
</main>
|
||||
<FooterBaseReveal
|
||||
logoText="Webild"
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2023 Webild. All rights reserved."
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'Products', id: '/products' },
|
||||
{ name: 'About', id: '/#about' }
|
||||
]}
|
||||
brandName="Bookish"
|
||||
button={{ text: 'Sign Up', href: '/#contact' }}
|
||||
/>
|
||||
<main className="flex min-h-screen flex-col items-center justify-start p-8 md:p-16 relative z-10">
|
||||
{/* Book Information Section */}
|
||||
<section id="book-info" data-section="book-info" className="w-full max-w-6xl py-16 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
<div className="flex justify-center md:justify-end">
|
||||
<img
|
||||
src={book.imageSrc}
|
||||
alt={book.imageAlt}
|
||||
className="w-full max-w-xs md:max-w-sm rounded-lg shadow-2xl transition-transform duration-300 hover:scale-105"
|
||||
/>
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered navItems={navItems} brandName="Webild" logoSrc="https://via.placeholder.com/40" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 text-center md:text-left">
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
||||
<div id="product-detail-hero" data-section="product-detail-hero" className="w-full max-w-4xl mx-auto">
|
||||
<div className="text-center my-8">
|
||||
<TextAnimation
|
||||
title={book.title}
|
||||
type="entrance-slide"
|
||||
className="text-5xl md:text-6xl font-extrabold text-foreground leading-tight"
|
||||
/>
|
||||
<p className="text-xl text-primary-cta font-medium">By {book.author}</p>
|
||||
<p className="text-lg text-foreground-lighter">{book.description}</p>
|
||||
<div className="flex items-center justify-center md:justify-start gap-2 text-xl text-yellow-500">
|
||||
{Array.from({ length: Math.floor(book.rating) }).map((_, i) => (
|
||||
<Star key={i} fill="currentColor" stroke="none" size={20} />
|
||||
className="text-4xl font-bold mb-4"
|
||||
>
|
||||
{`Details for ${product?.name || 'Product'}`}
|
||||
</TextAnimation>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 my-10">
|
||||
<div className="relative aspect-video">
|
||||
<img src={product.imageSrc} alt={product.imageAlt} className="w-full h-full object-cover rounded-lg shadow-lg" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold mb-2">{product.name}</h2>
|
||||
<p className="text-2xl text-primary-cta font-semibold mb-4">{product.price}</p>
|
||||
<div className="flex items-center mb-4">
|
||||
<span className="text-yellow-500 mr-1">{'★'.repeat(Math.floor(product.rating))}</span>
|
||||
<span className="text-gray-400">{'★'.repeat(5 - Math.floor(product.rating))}</span>
|
||||
<span className="ml-2 text-sm text-gray-600">({product.reviewCount} Reviews)</span>
|
||||
</div>
|
||||
<p className="text-gray-700 mb-6">{product.description}</p>
|
||||
<h3 className="text-xl font-semibold mb-2">Product Details</h3>
|
||||
<ul className="list-disc list-inside text-gray-600 mb-6">
|
||||
{product.details.map((detail: string, index: number) => (
|
||||
<li key={index}>{detail}</li>
|
||||
))}
|
||||
<span className="text-foreground text-base ml-1">({book.rating} / {book.reviewCount} reviews)</span>
|
||||
</div>
|
||||
<p className="text-4xl font-bold text-foreground mt-4">{book.price}</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center md:justify-start gap-4 mt-6">
|
||||
<input
|
||||
type="number"
|
||||
defaultValue={1}
|
||||
min={1}
|
||||
className="w-20 p-3 border border-border-light rounded-md text-center bg-card text-foreground focus:ring-2 focus:ring-primary-cta focus:border-transparent transition-all duration-200"
|
||||
</ul>
|
||||
<ButtonTextShift
|
||||
text="Add to Cart"
|
||||
onClick={() => alert(`Added ${product.name} to cart!`)}
|
||||
className="w-full py-3 text-lg"
|
||||
textClassName="font-bold"
|
||||
/>
|
||||
<ButtonTextShift text="Add to Cart" className="w-full sm:w-auto px-8 py-3 rounded-lg font-semibold" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Reviews Section */}
|
||||
<div id="reviews" data-section="reviews" className="w-full py-16">
|
||||
<TestimonialCardTwo
|
||||
testimonials={reviews}
|
||||
title="What Our Readers Say"
|
||||
description="Hear from our satisfied customers about their experience with this book."
|
||||
animationType="blur-reveal"
|
||||
carouselMode="buttons"
|
||||
uniformGridCustomHeightClasses="min-h-none"
|
||||
tag="Reviews"
|
||||
tagIcon={Sparkles}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Related Products Section */}
|
||||
<div id="related-products" data-section="related-products" className="w-full py-16">
|
||||
<ProductCardThree
|
||||
products={relatedProducts}
|
||||
title="You Might Also Like"
|
||||
description="Discover other captivating titles that share similar themes."
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
tag="More Books"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<div className="my-10">
|
||||
<h3 className="text-2xl font-bold mb-4 text-center">Customer Reviews</h3>
|
||||
{product.reviews.length > 0 ? (
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{product.reviews.map((review: any, index: number) => (
|
||||
<div key={index} className="bg-card p-6 rounded-lg shadow-md">
|
||||
<div className="flex items-center mb-2">
|
||||
<span className="text-yellow-500 mr-1">{'★'.repeat(review.rating)}</span>
|
||||
<span className="text-gray-400">{'★'.repeat(5 - review.rating)}</span>
|
||||
<span className="ml-2 font-semibold">{review.author}</span>
|
||||
</div>
|
||||
<p className="text-gray-700">{review.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-center text-gray-600">No reviews yet for this product.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<FooterBaseReveal
|
||||
logoText="Webild"
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2023 Webild. All rights reserved."
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user