Vinhos Demonstration project
Quinta do Vale Alto — wine estate shop with tasting bookings
A premium e-commerce site for a fictional Colares wine estate: seven wines drawn as typographic bottle silhouettes, a working cart with quantities and shipping logic, a tasting-booking flow and a monospaced harvest log — bordeaux, stone and gold hairlines throughout.
feitura.pt/demo/vale-alto — Live
We are the third generation making Ramisco and Malvasia on sand-floor vineyards at Colares, and our wine still sells by phone. We need a shop that feels like the estate — slow, serious, beautiful — where people can order our seven wines, book a weekend tasting in the cellar, and read the story of the three generations. No stock photos of vineyards that are not ours.
What's inside
- Terroir design system — deep bordeaux, stone and gold hairlines, large Georgia serif display
- Seven wines rendered as refined SVG bottle silhouettes with typographic labels — zero photography
- Working shop: type filters, add-to-cart drawer, quantities, free-shipping threshold and order totals
- Tasting booking flow: two tasting formats, date and time-slot picker with sold-out states, party stepper and live total
- Heritage section telling three generations of the estate, with a roman-numeral timeline
- Monospaced harvest log table — dates, rainfall and yields year by year
- Full PT/EN bilingual dictionary with an accessible language toggle
- Mobile-first layout recomposing at tablet and desktop, 44 px touch targets
- AA contrast, semantic HTML, aria-labelled controls and reduced-motion support
Build log
- Art direction and design tokens — bordeaux/stone/gold palette, serif display scale, first bottle silhouette studies
- Hero with vineyard line-art landscape, sticky header, estate stats and anchor navigation
- Wine catalogue — seven SKUs with vintages, castas and EUR pricing; SVG bottles with typographic labels
- Cart drawer: line items, quantity steppers, free-shipping threshold, totals and checkout demo flow
- Tasting bookings — two formats, date and slot picker with sold-out logic, party size and booking summary
- Heritage section for three generations and the monospaced harvest log table
- Full PT/EN copywriting pass, bilingual dictionary wiring and language toggle
- Accessibility and polish — AA contrast audit, touch targets, reduced motion, responsive recomposition at 768 and 1100 px
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
94
Performance
100
Accessibility
100
Best practices
100
SEO