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';
|
'use client';
|
||||||
|
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||||
|
|
||||||
import { ThemeProvider } from 'next-themes';
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||||
import TextAnimation from '@/components/text/TextAnimation';
|
|
||||||
import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';
|
import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';
|
||||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
import TextAnimation from '@/components/text/TextAnimation';
|
||||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||||
import { Sparkles, Star } from 'lucide-react';
|
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
export default function ProductDetailPage() {
|
export default function ProductDetailPage() {
|
||||||
const book = {
|
const pathname = usePathname();
|
||||||
id: 'the-alchemist',
|
const productId = pathname.split('/').pop();
|
||||||
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 reviews = [
|
const [product, setProduct] = useState<any>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Simulate fetching product details
|
||||||
|
const dummyProducts = [
|
||||||
{
|
{
|
||||||
id: '1',
|
id: "prod1", brand: "BrandA", name: "Stylish Shirt", price: "$29.99", rating: 4.5,
|
||||||
name: 'Sophia M.',
|
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"],
|
||||||
role: 'Avid Reader',
|
reviews: [
|
||||||
testimonial: 'An inspiring and thought-provoking read that I couldn\'t put down. Highly recommended!',
|
{ author: "Alice", text: "Great shirt, very comfortable!", rating: 5 },
|
||||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/customer-avatar-1.jpg',
|
{ author: "Bob", text: "Good quality for the price.", rating: 4 },
|
||||||
icon: Star,
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '2',
|
id: "prod2", brand: "BrandB", name: "Comfy Jeans", price: "$49.99", rating: 4.2,
|
||||||
name: 'John D.',
|
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"],
|
||||||
role: 'Book Enthusiast',
|
reviews: [
|
||||||
testimonial: 'The story is beautifully written and full of wisdom. A true classic that everyone should read.',
|
{ author: "Charlie", text: "My new favorite jeans!", rating: 5 },
|
||||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/customer-avatar-2.jpg',
|
{ author: "Diana", text: "A bit snug, but good overall.", rating: 3 },
|
||||||
icon: Star,
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '3',
|
id: "prod3", brand: "BrandC", name: "Running Shoes", price: "$79.99", rating: 4.8,
|
||||||
name: 'Emily R.',
|
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"],
|
||||||
role: 'Philosophy Student',
|
reviews: [
|
||||||
testimonial: 'Changed my perspective on life and destiny. Deeply moving and thought-provoking.',
|
{ author: "Eve", text: "Amazing shoes for long runs.", rating: 5 },
|
||||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/customer-avatar-3.jpg',
|
{ author: "Frank", text: "Worth every penny.", rating: 5 },
|
||||||
icon: Star,
|
]
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const relatedProducts = [
|
const foundProduct = dummyProducts.find(p => p.id === productId);
|
||||||
{
|
setProduct(foundProduct);
|
||||||
id: 'little-prince',
|
}, [productId]);
|
||||||
name: 'The Little Prince',
|
|
||||||
price: '$9.99',
|
const navItems = [
|
||||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-little-prince.png',
|
{ name: "Home", id: "/" },
|
||||||
imageAlt: 'The Little Prince book cover',
|
{ name: "Cart", id: "/cart" },
|
||||||
},
|
{ name: "Checkout", id: "/checkout" },
|
||||||
{
|
{ name: "Order Conf", id: "/order-confirmation" },
|
||||||
id: 'siddhartha',
|
{ name: "Products", id: "/products/1" },
|
||||||
name: 'Siddhartha',
|
{ name: "Collections", id: "/collections/all" }
|
||||||
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',
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
|
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 (
|
return (
|
||||||
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
|
<ThemeProvider
|
||||||
<NavbarLayoutFloatingInline
|
defaultButtonVariant="hover-magnetic"
|
||||||
navItems={[
|
defaultTextAnimation="entrance-slide"
|
||||||
{ name: 'Home', id: '/' },
|
borderRadius="rounded"
|
||||||
{ name: 'Products', id: '/products' },
|
contentWidth="medium"
|
||||||
{ name: 'About', id: '/#about' }
|
sizing="medium"
|
||||||
]}
|
background="none"
|
||||||
brandName="Bookish"
|
cardStyle="solid"
|
||||||
button={{ text: 'Sign Up', href: '/#contact' }}
|
primaryButtonStyle="gradient"
|
||||||
/>
|
secondaryButtonStyle="glass"
|
||||||
<main className="flex min-h-screen flex-col items-center justify-start p-8 md:p-16 relative z-10">
|
headingFontWeight="bold"
|
||||||
{/* 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 id="nav" data-section="nav">
|
||||||
<div className="flex justify-center md:justify-end">
|
<NavbarStyleCentered navItems={navItems} brandName="Webild" logoSrc="https://via.placeholder.com/40" />
|
||||||
<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"
|
|
||||||
/>
|
|
||||||
</div>
|
</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
|
<TextAnimation
|
||||||
title={book.title}
|
|
||||||
type="entrance-slide"
|
type="entrance-slide"
|
||||||
className="text-5xl md:text-6xl font-extrabold text-foreground leading-tight"
|
className="text-4xl font-bold mb-4"
|
||||||
/>
|
>
|
||||||
<p className="text-xl text-primary-cta font-medium">By {book.author}</p>
|
{`Details for ${product?.name || 'Product'}`}
|
||||||
<p className="text-lg text-foreground-lighter">{book.description}</p>
|
</TextAnimation>
|
||||||
<div className="flex items-center justify-center md:justify-start gap-2 text-xl text-yellow-500">
|
</div>
|
||||||
{Array.from({ length: Math.floor(book.rating) }).map((_, i) => (
|
|
||||||
<Star key={i} fill="currentColor" stroke="none" size={20} />
|
<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>
|
</ul>
|
||||||
</div>
|
<ButtonTextShift
|
||||||
<p className="text-4xl font-bold text-foreground mt-4">{book.price}</p>
|
text="Add to Cart"
|
||||||
<div className="flex flex-col sm:flex-row items-center justify-center md:justify-start gap-4 mt-6">
|
onClick={() => alert(`Added ${product.name} to cart!`)}
|
||||||
<input
|
className="w-full py-3 text-lg"
|
||||||
type="number"
|
textClassName="font-bold"
|
||||||
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"
|
|
||||||
/>
|
/>
|
||||||
<ButtonTextShift text="Add to Cart" className="w-full sm:w-auto px-8 py-3 rounded-lg font-semibold" />
|
|
||||||
</div>
|
</div>
|
||||||
</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 className="my-10">
|
||||||
<div id="related-products" data-section="related-products" className="w-full py-16">
|
<h3 className="text-2xl font-bold mb-4 text-center">Customer Reviews</h3>
|
||||||
<ProductCardThree
|
{product.reviews.length > 0 ? (
|
||||||
products={relatedProducts}
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
title="You Might Also Like"
|
{product.reviews.map((review: any, index: number) => (
|
||||||
description="Discover other captivating titles that share similar themes."
|
<div key={index} className="bg-card p-6 rounded-lg shadow-md">
|
||||||
gridVariant="four-items-2x2-equal-grid"
|
<div className="flex items-center mb-2">
|
||||||
animationType="slide-up"
|
<span className="text-yellow-500 mr-1">{'★'.repeat(review.rating)}</span>
|
||||||
tag="More Books"
|
<span className="text-gray-400">{'★'.repeat(5 - review.rating)}</span>
|
||||||
textboxLayout="default"
|
<span className="ml-2 font-semibold">{review.author}</span>
|
||||||
useInvertedBackground={false}
|
</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>
|
</div>
|
||||||
</main>
|
</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>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user