Azeite Demonstration project
Lagar — estate olive oil with lot-level traceability
An engraving-inspired store for a family olive-oil estate in Moura: three single-estate oils with format pricing, a lot tracker that opens a full dossier over an SVG parcel map, an animated tasting wheel and a subscription club — all composed in stone cream and deep leaf green.
feitura.pt/demo/lagar — Live
A third-generation family estate in Moura — 140 hectares, three olive varieties, their own mill since 1957 — sells extraordinary extra virgin at supermarket-refill prices because nobody online can tell the difference. They need a store that justifies €14 a bottle through radical traceability: every lot traceable to its parcels, its harvest dates and the miller's initials.
What's inside
- Estate-classic design system — stone cream, deep leaf green, olive gold — with engraved olive-branch SVG art
- Circular estate seal drawn in SVG and reused as brand mark, dossier watermark and stamped order confirmation
- Three label-style product cards with 250 ml / 500 ml / 3 L format picker and honest price-per-litre
- Lot tracker: any bottle code opens a dossier with harvest window, varieties, acidity, peroxides and miller's initials
- Hand-drawn SVG map of the estate's five named parcels, highlighting each lot's origin
- Animated tasting wheel — a five-axis radar that morphs between the three oils, with a three-step tasting micro-guide
- Twelve-month circular calendar of the grove's year with the current month marked
- Slide-in cart with free-shipping progress bar and a mock MB Way / card checkout
- Lagar Club configurator: frequency × format with 12% member pricing and yearly totals
- Bilingual PT/EN copy, reduced-motion support and full keyboard operability
Build log
- Art direction — engraving studies, olive-branch SVG, estate seal with circular type, cream/green/gold tokens
- Hero, harvest-numbers strip and label-card product grid with format picker and cart state
- Lot registry and dossier — parcel map SVG, deterministic lot data, error and empty states
- Tasting wheel: radar geometry, animated morphing between oils, tasting notes and the three-step guide
- Estate section, mill story, circular year calendar and the Lagar Club configurator with member pricing
- Cart drawer, mock checkout with MB Way and card, seal-stamp confirmation, full PT-PT and EN copy pass
- Accessibility and polish — focus states, aria wiring, reduced motion, tablet and desktop recomposition
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
97
Performance
98
Accessibility
100
Best practices
100
SEO