Add src/app/products/[id]/page.tsx
This commit is contained in:
162
src/app/products/[id]/page.tsx
Normal file
162
src/app/products/[id]/page.tsx
Normal file
@@ -0,0 +1,162 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { ThemeProvider } from 'next-themes';
|
||||||
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||||
|
import TextAnimation from '@/components/text/TextAnimation';
|
||||||
|
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';
|
||||||
|
|
||||||
|
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 reviews = [
|
||||||
|
{
|
||||||
|
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: '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: '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,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-6 text-center md:text-left">
|
||||||
|
<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} />
|
||||||
|
))}
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
</main>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user