SoloProduct — Single Product Store

SoloProduct is a high-end, fully responsive e-commerce storefront template designed for brands that sell a single hero product. Built with Next.js 16, Tailwind CSS 4, GSAP animations, and Zustand state management.

Pages (8)

• Homepage

  • Animated hero slider

  • Product catalog with category tabs

  • Feature grid

  • Brand story with founder quote

  • Customer reviews

  • Blog section

  • Newsletter signup

  • Footer
    

• Shop

  • Full product grid

  • Filter sidebar (category, price range, tags)

  • Sort dropdown

  • Active filter chips

  • Mobile filter drawer

  • “Shop by Category” links
    

• Category Pages

  • Dynamic routes (/shop/bags, /shop/accessories, etc.)

  • Breadcrumbs

  • Filtered grid

  • Sort functionality

  • Cross-category navigation
    

• Product Page

  • Image gallery

  • Color / size / material selectors

  • Add-to-cart

  • Size guide modal

  • Trust badges

  • Reviews

  • Related products
    

• Cart Page

  • Quantity controls

  • Promo code input

  • Order summary

  • Free shipping progress bar
    

• Checkout

  • Single-page checkout

  • Contact, shipping, and payment forms

  • Redirect to order confirmation
    

• Order Confirmed

  • Thank-you page

  • Order details

  • “What happens next” timeline

  • Tracking link
    

• My Account

  • Dashboard with tabs:

    • Overview

    • Orders

    • Wishlist

    • Settings
      

Features

• GSAP + ScrollTrigger animations (hero, product cards, sections)

• Lenis smooth scrolling

• Zustand cart with localStorage persistence (survives reloads)

• Hydration-safe rendering

• Full-screen search modal with live filtering

• Sale popup with countdown timer and email capture (once per session)

• Slide-out cart drawer with shipping progress bar

• Mobile buy bar (sticky bottom CTA)

• Side menu navigation

• Size guide modal
  

SEO & Accessibility

• Per-page metadata with Open Graph tags

• Auto-generated OG share image (1200×630)

• Branded SVG favicon

• Rich JSON-LD structured data (Product schema with reviews, shipping, returns)

• Organization schema

• robots.txt and sitemap.xml

• Focus trapping in modals and drawers

• Skip-to-content link

• ESC to close overlays

• Semantic HTML with ARIA labels
  

Tech Stack

• Next.js 16 (App Router)

• Tailwind CSS 4

• TypeScript

• GSAP + ScrollTrigger

• Zustand (with persist middleware)

• Lenis smooth scroll

• Space Grotesk + DM Sans (Google Fonts)

Design

• Light luxury aesthetic with off-white backgrounds

• Custom design tokens (colors, typography scale, spacing)

• 60-30-10 color rule:

  • Off-white (dominant)

  • Navy (secondary)

  • Sky blue (accent)

  • Gold (details)

• Fully responsive (mobile, tablet, desktop)

• Centralized product data in lib/product-data.ts for easy customization