Petalune

Petalune is a soft, editorial template for beauty, skincare and cosmetics brands. Cream, ink and

Petalune is a soft, editorial template for beauty, skincare and cosmetics brands. Cream, ink and butter-yellow colours, Cardo and Poppins type, crisp 1px borders and offset-shadow buttons give it a boutique feel. Built-in interactions make it feel like a real shop from the first click.

Pages

- Home

- Journal (blog index with a featured story)

- Article detail page (CMS, 6 sample articles)

- Legal (privacy, terms and accessibility)

- Custom 404

Highlights

- Full-screen hero with a floating bestseller card and a spinning badge

- Product carousel with drag, arrows, a progress bar and add-to-bag

- Bag drawer with quantity controls, a free-shipping meter and an upsell

- Live navbar search across products, collections, articles and pages (press / or ⌘K)

- Interactive shade finder: 4 undertones × 12 shades

- Shop-by-ritual collection tiles, a "Petal to product" process and Bloom Club reward tiers

- Auto-scrolling reviews, an Instagram-style community grid and a newsletter signup

- Journal powered by Framer CMS, with author cards, previous/next links and related stories

- Scroll-in text and image animations, hover lifts and a scroll progress bar

- Fully responsive: desktop, tablet and phone, with a mobile menu

Built to edit

- Shared colour and text styles throughout

- Reusable components: Button, Product Card, Ritual Tile, Review, Article Card, Navbar

- Page titles, descriptions, favicon and social share image already set

Setup notes

- The bag and search are front-end demos. Connect your own store (Shopify, Lemon Squeezy, Gumroad, etc.) for real checkout.

- The search list and the bag's starter items live in the code files NavSearch.tsx and CartDrawer.tsx. Update them when you change products.

- Photos are from Unsplash. Replace them with your own product shots.