Aurea Residences: Luxury Waterfront Astro Template

Aurea Residences is a spec project. A fictional 52-storey luxury tower in Miami’s Edgewater district, with direct Biscayne Bay frontage. I wrote the brief as if the development were real. Four weeks, one person, everything from brand to build.

Live demo · Get the template

The Problem

There are plenty of Framer and Webflow templates for this category, and even a handful of Astro and React ones. What most lack is any encoded opinion about how the thing should work. No design system, no documented conventions, no way for a developer to open the codebase and understand the rules.

I wanted to build a template where the decisions were already made and written down. Considered type pairings, a motion system that conveys elegance without complicating customisation, and full Claude Code documentation so a developer or designer could drop in, read the docs, and work with the codebase rather than against it.

Brand Direction

Premium through restraint. Considered type pairings, generous spacing, motion that earns its place. Nothing that couldn’t be swapped by changing a token.

The tone runs quiet. Short lines. Plenty of breathing room. The building gets the volume.

The Imagery

Free stock photography and AI generations from Krea AI. The discipline was maintaining a consistent visual direction across all of it: same lighting, same material palette, same context. The final library reads as one set, not a collage.

The Build

Astro 5, vanilla TypeScript, Lightning CSS. GSAP and Lenis for motion. Static output with no runtime framework.

The part I care most about is the documentation layer. The repo ships with a CLAUDE.md and a full docs/ directory covering design posture, code conventions, section map, component patterns, and a lessons file. Open the project in Claude Code, and the agent reads the docs at session start and understands the rules: which easing curve to use, how the CSS layers are ordered, what BEM conventions the components follow. Most templates leave you to figure that out. This one writes it down.

The build was pair-programmed with Claude Code throughout. It moves faster than working alone and produces cleaner code than the no-code equivalents I’ve used for projects at this level of craft.

Architecture

One page. Hero, Vision, Residences, Lifestyle, Neighbourhood, Enquiry, Footer. Anchor navigation.

On a marketing site for a single building, every page click is a chance for the buyer to leave. A scroll is not. The whole site is a single sequence from first impression to enquiry form.

Each section has a job. Hero sets the mood. Vision states the thesis. Residences covers the apartment typologies. Lifestyle reframes the amenities as a day in the building. Neighbourhood places Edgewater in context. Enquiry asks for the minimum needed to start a conversation.

I debated a map and cut it. Buyers at this price point know where Edgewater is.

Motion

Lenis controls scroll speed so the page moves as one body rather than a stack of separate events. GSAP and ScrollTrigger sequence the reveals: entry, settled, departure, handoff.

The pace is slower than a typical marketing site. Long durations, soft easings, almost no parallax. Each section lands, holds, then releases. Motion serves the mood.

The Template

Because the build is spec, I packaged the whole thing as a free Astro template on GitHub with pay-what-you-want on Gumroad. The architecture, motion system, design tokens and documentation are production-ready. Swap the content and ship.

Download the template →

What I’d Do Differently

I spent a lot of credits on Krea AI and Florafauna generating the image library. Next time: start with stock, use AI generation only for gaps where stock falls short. The budget goes further and the turnaround is faster.

Key Takeaway

Most real estate sites leave the brand on the table. The buildings are extraordinary. The sites are adequate. That gap is the opportunity. You don’t need a team or a big budget to close it.