Orvéli — Skincare Store Next.js Template

Orvéli is a storefront template for a botanical skincare or beauty brand. It has soft, earthy colours, large product photography and smooth motion throughout. It is built with Next.js 16 (App Router), React 19 and Tailwind CSS v4, and all its text lives in typed data files, so you change the copy without touching components.

Pages

• Home: an animated hero with a morphing headline, an arc product carousel, the brand mission, key features, a statement banner, a draggable testimonial ticker and a closing call to action
• About: brand story, values, a statement banner and the team
• Shop: a product grid with category tabs; the chosen category is kept in the URL
• Product pages: one page per product, generated from a single list and prerendered at build time
• Checkout: a contact, shipping and payment form beside a sticky order summary
• Contact: a contact form, contact details and a community section with a newsletter signup
• 404

Built in

• Cart drawer: add and remove products, change quantities, see a free-shipping progress bar and try a demo promo code. The cart is kept in the browser and shared with checkout.
• Product search: opens from the navbar, or with ⌘K / Ctrl+K or /, and filters by name, type and category.
• Toast notifications for cart, checkout and form actions (Sonner).
• Page transitions: a curtain with a loading counter between routes, using client-side navigation.
• Navbar: changes style for each section and lifts on scroll; phones get a full-screen menu.
• Motion: GSAP scroll reveals, line-by-line headings, image reveals, SVG line drawing and magnetic buttons, all as reusable wrapper components. Lenis handles smooth scrolling.
• Reduced motion: the site respects the visitor's reduced-motion setting.

Easy to edit

• All the text, products, navigation and footer are in data/.
• Adding a product to one list creates its page and adds it to the shop, the carousel and search.
• Colours, fonts and the type scale are Tailwind theme files in styles/.
• Components use Tailwind utility classes in their own .tsx files, and a cn() helper lets you override a component's classes.
• To animate new markup, wrap it: <Enter preset="rise-40">, <Lines>, <ImageReveal> and more.
• Images go through next/image, and fonts are self-hosted with next/font.
• SEO: every page gets its title and description from one helper, along with canonical URLs, Open Graph and Twitter tags, favicons and a web manifest.

Good to know

• Images: the photos in the download are placeholders at the exact size the design uses, labelled with their size and file name. Swap in your own.
• Payments: checkout validates the form and shows a confirmation but takes no payment. Connect your store or payment provider where marked.
• Forms: the contact and newsletter forms show sending and sent states but don't send anything yet. Point them at your form service.
• Hosting: deploy to Vercel with no configuration, or to any host that runs Next.js.
• Requirements: Node.js 20.9 or newer. npm and Bun both work.
• Setup: the included README walks through setup, content, images and deploying.