Imobiliária Demonstration project
Atlântico Properties — coastal real-estate agency
A light, sea-and-sand website for an independent Cascais agency: a filterable property portfolio with tabular pricing, listing detail views, an interactive coastline map and a free-valuation lead funnel.
feitura.pt/demo/atlantico — Live
An independent real-estate agency in Cascais needs a site that feels as calm and premium as the coast it sells. Buyers must filter the portfolio by typology, price and municipality in seconds on a phone, and sellers must be funnelled into a free-valuation request without friction.
What's inside
- Filterable listing grid: typology T1–T4, price bracket and municipality combined in real time
- Listing detail modal with full specs, energy rating and a visit-request action
- Interactive SVG coastline map — tapping a municipality filters the portfolio
- Free-valuation lead form with inline confirmation state
- Tabular IBM Plex Mono numerals for prices and areas across the whole site
- Custom sand-and-sea design system with abstract horizon artwork per listing
- Mobile-first layout recomposing at tablet and desktop breakpoints
- Self-hosted fonts, zero external requests, reduced-motion support
Build log
- Art direction: sand/sea palette, type scale, horizon artwork system
- Design system tokens + header, hero and stats row
- Listing data model and card grid with generated horizon art
- Combined filters (typology, price, municipality) + empty state
- Listing detail modal: specs table, extras, visit request
- SVG coastline map wired to the filters; valuation lead form
- Responsive pass at 768/1100, contrast audit, reduced-motion, copy polish
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
Lighthouse
95
Performance
100
Accessibility
100
Best practices
100
SEO