Auréva is a premium, production-ready template for skincare labels, cosmetics brands, fragrance houses, haircare lines, spas, wellness studios, and curated clean-beauty shops. Built on Next.js 16, React 19, and TypeScript, it ships with 19 page templates covering 39 prerendered routes, a thirteen-product catalogue, an editorial journal, a working storefront with cart and checkout, and a fully editable content layer — no CMS or backend required.

It's styled with a hand-crafted CSS design system (no utility-framework lock-in) in a warm parchment palette, with Libre Caslon Condensed headlines set against Inter and scroll-linked motion applied with restraint. Every product, article, and listing order lives in an MDX or JSON file — so you can launch a real beauty storefront in hours without touching the component code.

Live demo: https://aureva-nextjs.vercel.app

Tech Stack

• Next.js 16 — App Router, server components, all 39 routes prerendered to static HTML
• React 19 — latest features; interactivity isolated to one script layer plus the cart
• TypeScript — strict mode, fully typed
• MDX content — products and articles as .mdx files (frontmatter parsed with gray-matter), served by [slug] dynamic routes
• Hand-crafted CSS design system — colors, type scale, and spacing as CSS custom-property tokens in one :root block; re-theme everything in one place
• Self-hosted fonts — Inter and Libre Caslon Condensed served locally, no third-party font CDN
• No animation library — scroll reveals, endless belts, scroll-linked sections and split-text statements in one TypeScript file, no GSAP
• Client-side storefront — cart and order state in localStorage, no database, no vendor SDK

Included Pages and Templates

• Home — a scroll-driven story: the announcement belt, the animated hero with its quick-add card, the product showcase, the brand intro, the scroll-linked why-choose stack, the split-text statement, the category explorer, testimonials, the FAQ, and featured journal entries
• About — the brand story, the founder profile, animated studio statistics, the ingredient narrative, and three featured articles
• Shop — an eight-product grid with two wide feature slots, plus a product category page
• Product — 13 detail pages with a main shot, four supporting shots, a three-tab panel covering shipping, usage and key ingredients, the category/SKU/tag row, add-to-cart, and a related-product strip
• Gallery — an editorial image wall with pointer-tracking captions and hover zoom
• Blogs — a five-slot editorial directory, plus 8 articles with a hero, a share row, a full-width break image, and a related strip
• Storefront — two cart drawers in the navigation bar, checkout, a PayPal checkout variant, and an order confirmation page
• Contact — enquiry form and studio details
• Utility — Style Guide, Changelog, License, Privacy, Terms, 401 (password), 404

19 page templates, 39 prerendered routes.

Easy Content Editing

No CMS needed — content lives in editable files you can change in any text editor:

• Products — src/content/products/*.mdx. Frontmatter carries the name, price, standfirst, the five images, the corner flash, the category, SKU and tag, and the SKU the basket stores the item under. The body holds the shipping, return, usage and key-ingredient copy that fills the three tabs.
• Articles — src/content/blog/*.mdx. Frontmatter carries the title, date, and the hero and mid-article images.
• Writing a body — plain prose, not markdown: paragraphs, ## headings and - list items. The page component puts each one inside the design's own markup, so the words are yours and the layout stays exactly as designed. No special syntax to learn.
• Listing order — src/content/collections.json records what a per-item file cannot state: which five posts fill the blog directory's five slots and the size of each, the shop's eight slots and which two take the wide thumbnail, each category's grid, and the three-item strips. Every listing card lives here too, so editing an article never changes how it looks in a grid.
• Theme — brand colors, fonts, type scale, and spacing are CSS custom properties at the top of public/assets/css/styles.css — change them once to re-skin the whole site.
• Announcement belt, navigation, footer and cards — shared components edited once in src/components/.

Performance and SEO

• Static-rendered pages out of the box (App Router) — all 39 routes prerendered, including every product and article page
• Lazy-loaded imagery throughout, WebP artwork with responsive srcsets
• Self-hosted fonts — no third-party CDN requests at runtime
• Per-page titles and metadata via the Next.js Metadata API (generateMetadata on dynamic routes), with Open Graph and Twitter cards
• Semantic HTML structure, a single H1 per page, a route-aware active navigation state, and clean, crawlable URLs
• Keyboard-navigable tabs and menus, and every animation respects the reduced motion setting

Deployment

One-click deploy to Vercel — build settings are auto-detected. Also runs on Netlify, AWS Amplify, Cloudflare Pages, or any Node 20+ host.

What You Get

• Full Next.js 16 + TypeScript source code
• 19 page templates covering 39 prerendered routes
• Content collections: 13 products and 8 articles as MDX, plus the listing order as JSON
• A working cart and checkout flow, ready to point at your payment provider
• Self-contained HTML documentation
• Comprehensive README with setup and editing guide
• Friendly buyer support

Requirements

• Node.js 20 or higher
• Basic familiarity with the command line
• A text editor (VS Code recommended)