bender/c28ac08f-6b0d-454a-af65-cdbd5a1677a3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add src/app/products/[id]/page.tsx

Browse Source
This commit is contained in:
bender
2026-06-10 19:52:10 +00:00
parent 0440e611ff
commit b202545f34
1 changed files with 162 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/app/products/[id]/page.tsx Normal file
View 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>
);
}