Premium E-commerce Product Showcase

Create a breathtaking e-commerce product page with Lovable that converts browsers into buyers:

Hero Section - Product Showcase

Image Gallery

• Main display: Large high-res product image with zoom on hover
• Thumbnail strip: 5-8 images below or side, smooth carousel
• 360° view: Interactive product rotation (drag to spin)
• Video integration: Play product demo video in gallery
• Zoom modal: Click to open fullscreen lightbox
• Image loading: Skeleton screens with blur-up effect

Product Information

• Product title: Large, prominent (28-36px)
• Brand name: Linked, styled distinctively
• Rating stars: 4.7/5 with review count "(2,384 reviews)"
• Price display:
  • Large current price with currency
  • Strikethrough original price if discounted
  • Savings badge: "Save 20%"
  • "Limited time offer" tag with countdown
• Availability: "In stock" with green dot, or "Only 3 left!"
• SKU/Product ID: Small, secondary text

Product Configuration

Variant Selector

• Color swatches: Large clickable circles with product images
• Size selector: Button group (XS, S, M, L, XL) with stock indicators
• Material options: Dropdown or button group if applicable
• Quantity picker: +/- buttons with input field
• Stock indicator: "Low stock" or "23 available" near quantity

Smart Features

• Size guide: Modal with measurement chart
• Fit predictor: "True to size" with AI recommendations
• Notify me: Email signup for out-of-stock items
• Recently viewed: Saved variant selections

Action Buttons

Primary CTAs

• Add to Cart: Large, prominent button with cart icon
  • Loading state during add
  • Success animation (checkmark + "Added!")
  • Slide-in mini cart preview
• Buy Now: Secondary CTA for express checkout
• Wishlist: Heart icon with filled/unfilled state
• Share: Social sharing options (copy link, Pinterest, Facebook)

Trust Signals

• Free shipping badge
• 30-day returns icon
• Secure checkout lock icon
• Verified seller badge

Product Details Tabs

Tab Navigation

• Clean underline or button style tabs
• Smooth content transitions
• Mobile: Accordion instead of tabs

Description Tab

• Rich content: Formatted text with headings
• Bullet points: Key features highlighted
• Benefits focus: "What you get" section
• Use cases: "Perfect for..." section
• Specifications table: Clean 2-column layout

Reviews Tab (Social Proof)

• Rating breakdown: Bar chart showing 5-4-3-2-1 star distribution
• Filter options: Sort by "Most helpful", "Recent", "Rating"
• Verified purchases: Badge on verified reviews
• Review cards:
  • User avatar and name
  • Star rating
  • Date posted
  • Review title (bold)
  • Review text (expandable if long)
  • Helpful buttons (👍 32, 👎 2)
  • Product variant reviewed
  • Photo attachments if available
• Write review button: Opens review modal
• Pagination: Load more reviews

Shipping & Returns Tab

• Shipping options: Table with prices and delivery times
• Return policy: Clear, concise explanation
• FAQ: Expandable questions
• Track order: Link to tracking page

Social Proof Elements

Customer Photos

• Gallery: User-uploaded images in masonry grid
• Click to expand: Lightbox view
• "Tag to feature": Encourage UGC

Trust Badges

• Award badges (e.g., "Best Product 2024")
• Certifications (Organic, Fair Trade)
• Press mentions

Live Activity

• "15 people viewing this"
• "3 sold in last hour"
• "Trending in Electronics"

Recommendations

"You Might Also Like"

• Product cards: 4-6 similar items
• Horizontal scroll: On mobile
• Quick view: Hover to see details
• Add to cart: From recommendation card

"Frequently Bought Together"

• Bundle builder: Checkbox selections
• Total price: Updates dynamically
• Add bundle to cart: Single click

"Recently Viewed"

• Sticky sidebar or bottom of page
• Horizontal carousel: Navigate through history

Mobile Optimization

Mobile-Specific Features

• Sticky "Add to Cart": Bottom bar always visible
• Swipeable gallery: Touch-friendly image navigation
• Collapsible sections: Accordion for details
• Bottom sheet: Variant selector slides up
• One-tap actions: Simplified checkout flow

Animations & Interactions

Micro-interactions

• Image zoom on hover
• Button hover effects (lift, glow)
• Smooth transitions between images
• Add to cart animation (item flies to cart icon)
• Wishlist heart beat animation
• Rating stars fill on hover
• Skeleton loading states
• Toast notifications for actions

Advanced Effects

• Parallax on scroll (subtle)
• Product image follow cursor
• Color swatch preview (hover shows product in that color)
• Smooth quantity increment animations

Technical Requirements

Performance

• Image optimization: WebP format, lazy loading
• Fast page load: <3 seconds
• Smooth 60fps animations
• SEO optimized: Structured data, meta tags
• Analytics tracking: View, add-to-cart, purchase events

Integrations

• Supabase: Product data, reviews, user wishlist
• Stripe/PayPal: Payment processing
• Shipping APIs: Real-time rates
• Email: Order confirmation, shipping updates

Components

• shadcn/ui for UI elements
• Embla or Swiper for carousels
• Framer Motion for animations
• React Zoom Pan Pinch for image zoom
• React Star Ratings for reviews

Design System

Colors

• Primary brand color on CTAs
• Secondary for accents
• Neutral grays for text
• Success green for "In stock"
• Warning amber for "Low stock"

Spacing

• Generous whitespace
• Consistent padding and margins
• Comfortable touch targets (min 44x44px)

Typography

• Product title: Large, bold
• Price: Extra large, brand color
• Body text: Readable (16-18px)
• Reviews: Slightly smaller but legible

Generate a stunning, conversion-optimized product page that showcases products beautifully and makes checkout irresistible!