Ætheria Botanicals — Luxury Skincare Next.js Template

Ætheria Botanicals is a luxury editorial skincare and botanical e-commerce storefront template built with Next.js 16 (App Router), React 19, TypeScript, and Tailwind CSS v4. Designed with a warm French-apothecary aesthetic, it pairs Cormorant Garamond, Outfit, and Inter typography with a semantic OKLCH color token system and smooth GSAP + Motion interactions.

35 Production-Structured Routes (30 Static + 5 Dynamic): Complete storefront journey covering Flagship Home, Clinical Formula Catalog, Product Dossier, Diagnostic Skin Quiz, Seasonal Collections, Active Ingredients Index, Editorial Blog Chronicle, Partner Brand Houses, Cart, 4-Step Checkout, Order Lookup, Auth Views, and a 6-route Customer Account Vault.

Editorial Storytelling & Mega Menu Navigation: Designed like a luxury print monograph—combining warm alabaster surfaces, rich editorial mega-menus, and concern-first formula discovery.

Multi-Facet Catalog & Seasonal Collections (/shop, /collection): Filter 60+ botanical formulas by skin concern, category, price range, and format, complete with grid/list view switching and curated seasonal edits.

Clinical Product Dossier & Active Ingredients Index (/shop/[productId], /ingredients): 4-plate media gallery, volume & skin-type variant selectors, subscription/refill cadence picker, 5 clinical specification tabs, FAQs, verified reviews, and a traceable active ingredients glossary.

Interactive 5-Step Diagnostic Skin Quiz (/skin-quiz): Guides shoppers through a 5-question barrier assessment and dynamically computes a personalized AM/PM skincare ritual (The Barrier Repair Ritual) with direct add-to-bag actions.

Slide-Over Bag, 4-Step Checkout Atelier & Order Lookup (/cart, /checkout, /checking-order): Persistent cart and wishlist state, free-shipping threshold bar, promo code validation, a 4-stage checkout ledger, and live dispatch telemetry lookup.

Customer Account Vault, OKLCH Design System & 390px Mobile Craft (/account/*): Dedicated member portal (profile, orders, addresses, payments, wishlist), semantic OKLCH token palette (src/palette.css), and verified responsive layouts down to 390px.

Framework: Next.js 16.4 (App Router), React 19.3, TypeScript 6 (Strict Mode)

Styling & Tokens: Tailwind CSS v4, Semantic OKLCH Palette, 8px Grid Discipline

UI & Motion: Radix UI / shadcn/ui primitives, Lucide Icons, GSAP 3, Motion

Testing: 132 automated Playwright E2E tests verifying routes, interactive journeys, WCAG AA accessibility, and zero horizontal overflow across 390px mobile and 1440px desktop viewports.