shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Make a scent legible with this perfume product card for Vue with Ark UI. A hairline frame with a divider holds, at the start, a drawn bottle that grows with its size, the name, the price and a longevity bar, and the one Shine Button that adds it to the bag. At the end is a scent pyramid of three stacked layers, Top, Heart and Base, as a Toggle Group: the pressed layer lists three notes and when they show. Below it a Segment Group picks the strength, EDT, EDP or Parfum, which redraws the bar (about 4, 7 or 10 hours), and a Select picks 30, 50 or 100 ml. Both re-price from a typed table in cents. Nothing is stored or bought. For perfume houses and any product sold in strengths and sizes.
FAQ
How do I change the prices?
Edit STRENGTHS and SIZES. The price is the strength's price per millilitre, times the millilitres, less the size's discount, rounded once to the cent.
Where do the notes come from?
They are typed in LAYERS: three notes per layer and a sentence for when the layer shows. Every layer has the same number of notes, so the panel keeps its height.
Is the longevity real?
No. The hours are typed for a fictional scent, and skin, weather and application change real wear. The bar is drawn from the same number as the text beside it.
What stays local, and how do I wire it for real?
The layer, strength, size and bag are page state; nothing is stored, charged or sent. Replace the bodies of add and undo with calls to your cart.
