Storefront

The storefront is the public-facing shopping experience. All pages share a common layout with StoreHeader (navigation, cart icon, search) and StoreFooter (links, newsletter, social media).

Homepage

Route: /

The homepage features:

• Hero banner — full-width promotional banner with CTA
• Category grid — shop by category cards
• Featured products carousel — horizontally scrollable product highlights
• Testimonials — customer review carousel

import { HeroBanner } from "@/components/storefront/hero-banner"
import { CategoryGrid } from "@/components/storefront/category-grid"
import { FeaturedCarousel } from "@/components/storefront/featured-carousel"

Product Listing

Route: /products

A responsive product grid with sidebar filters:

• Filters — category, price range, size, color, rating
• Sort — price (low/high), newest, rating, bestselling
• View toggle — grid or list view
• Pagination — page navigation

The ProductFilters component uses collapsible sections and checkbox/radio groups. On mobile, filters slide out in a Sheet.

Product Detail

Route: /products/[slug]

Individual product pages include:

• Product gallery — multi-image carousel with thumbnail navigation
• Variant selector — size, color options
• Quantity selector — increment/decrement with direct input
• Product tabs — Description, Reviews, Specifications
• Related products — product cards for similar items

import { ProductGallery } from "@/components/storefront/product-gallery"
import { VariantSelector } from "@/components/storefront/variant-selector"
import { ProductTabs } from "@/components/storefront/product-tabs"

Category Pages

Route: /categories/[slug]

Filtered product listing for a specific category. Uses the same ProductGrid and ProductFilters components as the main products page.

Search

Route: /search

Full-text search with:

• Search input with keyboard shortcut hint
• Real-time result count
• Product grid with the same card component

Wishlist

Route: /wishlist

Saved products displayed in a grid. Each card has a remove button and an "Add to Cart" action.

Compare

Route: /compare

Side-by-side product comparison using the ComparisonTable component. Compares specs, price, ratings, and availability across up to 4 products.

Info Pages

The storefront includes 10 informational pages:

Route	Content
/about	Company story, values, team stats
/contact	Contact form with email, phone, address
/faqs	Grouped accordion FAQ sections
/shipping	Shipping methods and delivery times table
/returns	Return policy with step-by-step process
/size-guide	Measurement tables for clothing and shoes
/privacy	Privacy policy
/terms	Terms of service
/careers	Job listings
/press	Press mentions and media contact

All info pages are Server Components with no client-side JavaScript.