Amber House: a one-page real estate template for new-build developments

Amber House is a one-page real estate website template for a single residential development: new-build apartments, a boutique housing scheme or an off-plan launch. It suits property developers, estate agents marketing new homes and sales teams who need a polished development site before completion. Every section a buyer looks for is already designed, responsive and connected to the CMS, so launching means replacing content, not building structure.

What’s included

• A landing page with 12 sections, linked from an anchor navigation: Hero, Overview, The Development, Residences, Floor Plans, Availability, Gallery, Specification, Location, Developer, Enquiries and FAQ
• A Plots CMS collection that powers both the Floor Plans tabs and the Availability table
• 8 supporting pages: Style Guide, Instructions, Licenses, Changelog, Terms of Use, Privacy Policy, 404 and Password
• 11 components, including Navbar, Footer, Hero, Button, Page Header, Residence Listing, Floor Plan, Spec Card and FAQ Item

Built for how a development actually sells

• Overview stats: number of residences, starting price, bedroom range and completion date
• Residence types: one, two and three bedroom homes, each with internal area, bathrooms, outdoor space and starting price, plus a swipeable slider on mobile
• Floor plans by type (1-Bed, 2-Bed, 3-Bed, Penthouse), pulled from the CMS. Each plot shows floor, internal and external area, orientation, price and status
• Availability table with a status for every plot (Available or Reserved), managed with one switch in the CMS
• Gallery with a lightbox for interior and exterior imagery
• Nine specification cards covering kitchen, bathrooms, bedrooms, interiors, security, comfort and efficiency, shared spaces and building management
• Location with the address and travel times to nearby cafés, the station, the seafront and the city centre
• A developer section that builds trust, and an enquiry form with a residence-type preference

Designed as a system

• Finsweet Client-First class naming throughout
• Colour, typography, spacing and corner radius run on Webflow Variables, with Tablet, Mobile Landscape and Mobile Portrait modes, so changing one variable restyles the site
• Scroll and load animations use native Webflow Interactions set by a single data-anim attribute, and respect reduced-motion settings
• No custom JavaScript. The only script is the Webflow Way Validator snippet required for review, which you can delete
• Accessible form labels, visible focus states, and SEO and Open Graph fields on every page

Getting started

The Instructions page covers the class system, design tokens, components, the Plots collection, interactions, responsive behaviour and a pre-launch checklist.

Font: Mona Sans. Icons: Tabler Icons. All images are documented on the Licenses page.