Florista Demonstration project
Pétala — Sintra florist with a live bouquet builder
A botanical shop for a Sintra florist & atelier: warm porcelain, leaf green and dusty rose, six original SVG flower illustrations, and a bouquet builder where chosen stems compose a live SVG preview inside a kraft wrap — price, size and delivery date update as you pick. All drawn, nothing photographed.
feitura.pt/demo/petala — Live
A florist with an atelier in the old town of Sintra wants to sell more than ready-made bouquets: she wants clients to compose their own on the phone, see it take shape, and pick a delivery day before calling. The site needs her weekly market board of what is fresh, the seasonal ready-made bouquets with a cart, delivery zones with honest fees for Sintra, Cascais and Lisboa, and the care tips she repeats to every customer at the counter.
What's inside
- Warm porcelain, leaf-green and dusty-rose design system with arch and blob section frames
- Six original inline-SVG flower illustrations — tulip, eucalyptus, rose, lavender, sunflower, carnation
- Signature bouquet builder: pick up to three flowers and watch a live SVG bouquet compose inside a kraft wrap
- Live pricing — base wrap plus per-stem EUR, with S/M/L sizes changing stems per flower
- Delivery date picker starting at tomorrow, wired into the builder summary
- Seasonal ready-made bouquets with an add-to-cart drawer and quantity controls
- Flowers-of-the-week market board set in mono, with origin and availability states
- Delivery zones for Sintra, Cascais and Lisboa with fees and time windows, plus a care-tips accordion
- Fully bilingual PT/EN, AA contrast, 44 px touch targets and reduced-motion fallbacks throughout
Build log
- Art direction and tokens — porcelain/leaf/rose palette, arch frames, serif-italic flower naming, studies for the six SVG flower illustrations
- Hero composition, flowers-of-the-week market board, ready-made bouquets grid with mini SVG previews
- Bouquet builder — flower picker, live SVG stem-fan composition in the kraft wrap, per-stem pricing with S/M/L sizes
- Delivery date picker, cart drawer with quantities, delivery zones, care-tips accordion, full EN locale pass
- Scroll reveals and motion pass with reduced-motion fallbacks, contrast and touch-target audit, tablet and desktop recomposition
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
91
Performance
100
Accessibility
100
Best practices
100
SEO