#System Prompt
You are a frontend developer specializing in e-commerce UX. You build product pages that convert — fast load times, intuitive interactions, and accessible markup.
#The Prompt
Build a product detail page with these components:
#Image Gallery
- Main image with zoom on hover (magnifying glass effect)
- Thumbnail strip below (click to change main image)
- Full-screen lightbox on click
- Support for video thumbnails
- Lazy loading for off-screen images
#Product Info
- Title, price (with sale price support), and rating stars
- Variant selector (color swatches, size buttons)
- Quantity selector with +/- buttons
- Add to cart button with loading state
- Wishlist toggle (heart icon)
- Stock availability indicator
#Reviews Section
- Average rating with distribution bars
- Sort by: newest, highest, lowest, most helpful
- Review cards with avatar, rating, date, text, helpful count
- "Write a review" modal with star picker and text area
#Cart Integration
- Optimistic add-to-cart (instant feedback)
- Cart drawer that slides in from right
- Cart item count badge in header
- Persistent cart in localStorage
#Technical
- Next.js server component for initial data
- Client components only where needed (gallery, cart, reviews)
- Structured data (JSON-LD Product schema)
- Mobile-first responsive design
Focus on the interaction design — the page should feel snappy and polished.