Orvéli — Skincare Store Astro 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 Astro and Tailwind CSS v4, and all of its text lives in typed data files, so you change the copy without touching components.

Pages

• Home: 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: product grid with category tabs that filter in place
• Product pages: one static page per product, generated from a single list
• Checkout: contact, shipping and payment form beside a sticky order summary
• Contact: contact form, details and a community section with a newsletter signup
• 404

Built in

• Cart drawer: add, remove and change quantities, a free-shipping progress bar and a demo promo code. The cart is kept in the browser.
• Product search: opens from the navbar, or with ⌘K / Ctrl+K or /. It filters by name, type and category.
• Toast notifications for cart, checkout and form actions.
• Page transitions: a curtain with a loading counter between pages.
• Navbar that changes style per section and lifts on scroll, plus a full-screen phone menu.
• Motion: GSAP scroll reveals, line-by-line headings, image reveals, SVG line drawing and magnetic buttons, all driven by data attributes. 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 live in src/data/.
• Adding a product to one list creates its product page and adds it to the shop, the carousel and search.
• Colours, fonts and the type scale sit in one Tailwind file, src/styles/global.css.
• Components are styled with Tailwind utility classes in their own files.
• SEO is set up: per-page titles and descriptions, 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.
• No 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.
• Output: the build is a fully static site that deploys to Netlify, Vercel, Cloudflare Pages or any static host.
• Requirements: Node.js 22.12 or newer. npm and Bun both work.
• The included README walks through setup, content, images and deploying.