A luxury editorial storefront template crafted for beauty, organic skincare, fragrance, and botanical wellness brands. Built with Next.js 16 App Router, React 19, TypeScript, and Tailwind CSS 4, Ætheria Botanicals pairs high-fashion editorial aesthetics with complete e-commerce user journeys.

Live Preview

• Live Demo: https://aetheria-ecomerce.vercel.app/

What makes it different

Most e-commerce templates follow generic boxed grid layouts. Ætheria Botanicals provides a warm, editorial layout inspired by high-end luxury beauty houses:

• Interactive Skin Quiz: Guided multi-step diagnostic quiz that maps customer skin types and concerns to recommended skincare rituals.
• Botanical Ingredients Directory: Dedicated ingredient encyclopedia explaining active botanicals, skin benefits, and formulation science.
• Full Commerce Experience: Category filtering, product detail gallery with accordions, sliding cart drawer, full-page cart, multi-step checkout simulation, and order lookup.
• Customer Account Portal: Profile management, saved addresses, payment methods, order history, and wishlist.

Included Pages & Flows (35 Routes)

• Storefront & Catalog:
  • Editorial Home / Landing with micro-animations and spotlight curation
  • Catalog Shop page with faceted filters (price, skin type, rating, category)
  • Rich Product Detail pages (/shop/[productId]) with variant selection, usage rituals, and ingredients
  • Dedicated Collection and Brand showcase pages
• Discovery & Content:
  • Interactive Skin Quiz with customized routine recommendations
  • Ingredients Index with active component spotlights
  • Editorial Magazine & Blog (/blogs and /blogs/[slug])
  • About Us, Sustainability, and Brand Story
  • FAQ, Contact Studio with interactive map mockup, Shipping & Returns policy
• Cart & Checkout:
  • Sliding Cart Drawer + dedicated /cart full-page overview
  • 4-step Checkout UI (Contact -> Shipping -> Payment -> Confirmation)
  • Order Lookup and Real-time Status Tracker
• Customer Account:
  • Dashboard Overview, Order History, Address Book, Payment Options, Wishlist

Technology Stack

• Framework: Next.js 16.4.0 (App Router, Turbopack)
• Library: React 19.3.0, TypeScript 5.8+ (Strict mode)
• Styling: Tailwind CSS 4 with custom design tokens
• UI Primitives: Radix UI (shadcn/ui architecture pattern)
• Icons: Lucide Icons & Simple Icons
• Animations: GSAP 3.15 + Motion for React
• State & Forms: Zustand, React Hook Form + Zod validation
• Internationalization: next-intl integration (messages/en.json)

Please Note (Limitations)

• Frontend Only: Runs on bundled local demo data (src/data/catalog/raw). Checkout, user authentication, and contact forms run in local browser state (localStorage); no real financial transactions, payment gateways, or live database are connected out of the box.
• Assets & Imagery: Demo product mockups and textures are original synthetic AI creations generated via Gemini 3.1 Flash Image (Nano Banana 2). Auxiliary editorial photos are sourced under the Unsplash License for demonstration purposes only. Buyers should replace demo assets with their authentic product imagery before commercial launch (see docs/asset-register.md and docs/customization.md).
• Browsers Tested: Tested in Chromium desktop (1440×900) and mobile emulation (Pixel 7).