Marea — Coastal property developer

Overview#

Marea is a dark, monochrome template for property developers, luxury real estate and new-build residences. Warm black-and-white photography, big typeset headlines in Inter Tight, a sand-gold accent and alternating dark and paper sections give it the calm, expensive feel of a printed property brochure.

The page shows the homes working for the buyer, not just described:

• Coast model (three.js): the centrepiece is the whole coastline as an architect's plaster site model. Contour lines follow the relief, tide lines roll out to sea, and every project stands on the land as building massing with a glowing pin. Hover or tap a pin to open the project card, filter by status, and the camera eases towards your choice. It tours the projects on its own until you take over.
• Project catalogue: a staggered two-column catalogue with price, layouts, sizes and status on every card, filterable by tier.
• Payment planner: pick a project and a price, then compare a bank mortgage with 0% instalments until handover. The monthly payment, deposit, interest, taxes and total cost update live.
• Built in the open: construction stages and a live tracker for every project under construction, with each stage's progress and a site camera.
• And more: a hero wordmark that parts as you scroll, a statement that lights up word by word, purchase steps that widen on hover, the wordmark filled with a photo, owner stories from Point A to Point B, loyalty tiers that fan out on scroll, a documents browser, an FAQ and a consultation form with validation.

Pages: a page for every residence with a photo lightbox, construction progress, the payment plan and an availability table you can filter by bedrooms, status and sort.

Highlights#

• three.js plaster model of the coast: contour lines, tide lines rolling out to sea, building massing and pins you hover or tap to open each project
• Payment planner: pick a project and price, then compare a bank mortgage with 0% instalments until handover, with a live cost breakdown
• Live construction tracker per project, owner stories from Point A to Point B, loyalty tiers that fan out on scroll and an official documents browser
• A page for every residence with a photo lightbox, a filterable availability table and the payment plan; theme tokens drive every colour, including the 3D

Screens#

What's included#

• Photo hero
• Scroll-lit statement
• 3D coast model
• Project catalogue
• Numbers & facts
• Purchase steps
• Payment planner
• Peace of mind
• Construction & live tracker
• Owner stories
• Loyalty programme
• Documents
• FAQ
• Consultation form

Getting started#

1. Install dependencies

   npm install
   

2. Run the dev server

   npm run dev   # http://localhost:5195
   

3. Add your projects

   Projects, prices, towns and copy live in src/content.ts. Each project's map sets where its pin stands on the 3D coast. Replace the demo availability in src/units.ts with your real inventory.

4. Change the theme

   Edit the tokens at the top of src/app/globals.css, or add data-theme="ocean" or data-theme="terracotta" to <html> in src/app/layout.tsx. The 3D coast follows the theme too.

5. Build the static site

   npm run build   # writes the site to out/
   

Deploying#

npm run build produces a plain static site in out/ that runs on any static host. The consultation form is front-end only; connect it to your CRM or email service.

License & credits#

Photos are free Pexels images, graded to the theme and credited in the README. Fonts are Inter and Inter Tight (SIL Open Font License). Marea, the Costa Albar, its towns, projects, owners and figures are fictional.