Iconic Centre

The Challenge

Iconic Centre operates in NSW’s modular construction sector — a market created by the state government’s Low & Mid-Rise (LMR) housing policy. The policy enables faster residential development through pattern book compliance and CDC (Complying Development Certificate) fast-track approval: instead of a traditional DA process that takes 12-18 months and involves council negotiation, eligible projects achieve approval in weeks through private certification.

The market opportunity is substantial but unusually complex for a website to communicate. Three specific problems made this project different from a standard construction site:

Eligibility is suburb-specific. LMR policy designates which suburbs qualify for fast-track development. A landowner in Pagewood might be eligible; a landowner in Mosman might not. The website needed to answer “does my suburb qualify?” before anything else — because if the answer is no, nothing else on the site matters.

The product requires education. Modular construction with regulatory compliance isn’t intuitive. Most property owners have never heard of CDC approval, pattern book compliance, or factory-built construction. The site needed to move prospects from “what is this?” to “my site might qualify” to “I should talk to someone” — and that’s a content challenge, not just a design challenge.

The sales team’s time is expensive. Not every enquiry is a real prospect. A site qualification call takes 30-45 minutes. Spending that time on a landowner whose suburb isn’t eligible, or whose site doesn’t meet setback requirements, is wasted capacity. The website needed to filter leads before they reached a human.

Why This Tech Stack

Astro 5 + Svelte 5 + Sanity CMS

The decision to use Astro with Svelte instead of Next.js or WordPress came down to one requirement: 171+ suburb pages generated at build time without a Node.js server or ongoing compute costs.

Svelte 5 specifically (not Svelte 4) was chosen because runes ($state, $derived, $effect) provide reactive state without stores or subscriptions. The interactive components — project gallery cards, form analytics, custom cursor, cookie consent — are cleaner and more predictable with runes than with Svelte 4’s reactive declarations.

GSAP Over CSS Animations

The homepage hero uses GSAP ScrollTrigger, not CSS scroll-driven animations. The decision was practical: the hero requires a two-phase pin-and-wipe sequence where one full-viewport section pins, then wipes horizontally to reveal a second section. CSS scroll-timeline can handle simple parallax but breaks down with pinning, coordinated multi-element staggering, and scroll-position-dependent state changes. GSAP handles this natively with pin: true and timeline sequencing.

The trade-off: GSAP is a 27KB dependency. For a site with one complex scroll interaction, that’s acceptable. If the animation were simpler (fade-in on scroll, basic parallax), CSS would have been the right choice.

The GSAP Scroll-Wipe Hero

This is the site’s signature interaction — the first thing a visitor experiences, designed to communicate three things in under 10 seconds: “we build premium projects”, “we deliver fast”, and “here’s how to start.”

Phase 1: Project Showcase

A featured development render fills the viewport. Three statistics animate in — residences count, construction timeline (6-9 months), and approval type (Fast Track CDC). The image is pulled from the typed project data system, so it updates automatically when the featured project changes. The stats use the formatProjectStats() helper to parse timeline strings consistently.

Phase 2: Brand Messaging

As the user scrolls, the project showcase wipes horizontally to reveal the value proposition underneath. Three badges stagger in (“Pattern Book Compliant”, “Private Certification Pathway”, “Modular Delivery in 6-9 Months”), followed by two CTAs: “Check If Your Site Qualifies” (primary) and “Book a Free Site Feasibility Call” (secondary).

Custom Cursor

A custom cursor (Cursor.svelte) tracks across both phases, replacing the default pointer with a branded element. This is a small detail that signals design sophistication — the kind of thing a property developer notices, even subconsciously, when evaluating whether this company delivers premium work.

Motion Accessibility

The entire hero sequence respects prefers-reduced-motion. If the OS-level setting is enabled, the wipe transition is replaced with a simple crossfade, and statistics appear without stagger delays. The content is identical; the motion is removed.

171+ Dynamic Suburb Pages

The SEO Architecture

This is the site’s acquisition engine. When a landowner searches “modular homes Pagewood” or “townhouse development Epping”, they need to land on a page that speaks directly to their suburb.

Every LMR-eligible suburb in NSW gets its own page, generated at build time from src/data/suburbs.ts. The data file contains suburb names, postcodes, eligibility status, and any suburb-specific notes. Astro’s getStaticPaths() generates 171+ routes in a single build — each suburb becomes /suburbs/[suburb-name] with its own <title>, <meta description>, and structured content.

Each suburb page includes:

Why This Approach Works

At 171+ pages, manual maintenance is impossible. When NSW policy changes (and it does — suburb eligibility can shift with legislative updates), one edit to suburbs.ts and a rebuild updates every suburb page simultaneously. No one touches 171 individual pages.

The Google Maps integration uses a per-client Google Cloud project to isolate API usage within the free tier (10K loads). This was a deliberate infrastructure decision: Google Maps on 171+ pages with shared API keys would quickly exceed free tier limits.

Typed Project Portfolio

Schema Design

The project data system demonstrates a specific architectural choice: structured JSON data with TypeScript types, rather than free-form CMS content.

src/data/
├── projects.json     # Source of truth (data)
├── projects.ts       # Types + helper functions
├── PROJECTS_README.md  # Schema documentation
└── suburbs.ts        # Suburb eligibility data

Each project record in projects.json has 12 typed fields:

Helper functions in projects.ts provide filtered views:

• getProjectsByStatus('completed') — for the portfolio grid
• getProjectsByType('townhouse') — for type-specific pages
• getFeaturedProjects(3) — for the homepage
• formatProjectStats(project) — parses “6-9 months” into { value: "6-9", label: "Months" } for consistent stat rendering
• getProjectImagePath(id, index) — generates responsive image paths from project IDs

This system was chosen over Sanity CMS for projects because project data changes infrequently (new projects are added quarterly, not daily) and the typed JSON schema provides compile-time validation. A typo in a project type field is caught at build time, not discovered by a user on the live site.

Lead Qualification Flow

Funnel, Not Form

The Get Started page (/get-started) is designed to qualify prospects, not just collect contact details. The flow:

1. Suburb eligibility check — is their suburb LMR-eligible?
2. Site characteristics — lot size, current structure, development goals
3. Consultation booking — qualified leads book a feasibility call

Form analytics (FormAnalytics.svelte) instrument every step: where prospects drop off, which suburbs generate the most interest, which development types are most requested. This data feeds back into marketing — if 40% of prospects come from 5 suburbs, those suburbs get more targeted content.

A Quick Lead Capture component (QuickLeadCapture.astro) appears on content pages for prospects who want to skip the full flow. Both pathways route through cookie consent management (CookieConsent.svelte) and page-level analytics (PageAnalytics.astro).

Blog with MDX Components

Authority Through Education

In an emerging market, the company that educates wins the customer. Iconic Centre’s blog targets the knowledge gap: most landowners don’t know what CDC approval means, how modular construction differs from traditional, or whether their suburb qualifies for LMR development.

The blog is powered by Sanity CMS with 7 custom MDX components that enable richer content than standard markdown:

A LatestArticles component on the homepage automatically surfaces the most recent posts, keeping the site current without manual homepage updates.

Analytics and Infrastructure

Layered Measurement

Deployment

Cloudflare Pages via Wrangler CLI, with edge functions configured through wrangler.toml. Sanity Studio embedded at /studio — content editors access the CMS at the same domain, no separate admin URL. Builds triggered by content changes via Sanity webhook.

Technical Specifications

The Result

A modular construction platform where every architectural decision serves a specific business purpose. The GSAP hero creates premium positioning within seconds. 171+ suburb pages capture the long-tail search traffic that a manual approach could never maintain. The typed project system ensures portfolio data is consistent and validated at build time. The qualification flow filters leads before they reach the sales team.

• 171+ suburb landing pages generated from structured data, each with localised eligibility content and Google Maps integration
• 2-phase GSAP scroll-wipe hero with ScrollTrigger, stat overlays, and custom cursor — accessible with reduced-motion fallback
• Typed project system with JSON schema, TypeScript interfaces, 5 helper functions, and Svelte 5 gallery cards
• Sanity CMS with embedded studio, MDX blog with 7 custom components, and automatic homepage article feeds
• Lead qualification funnel with suburb eligibility check, form analytics instrumentation, and quick capture alternative
• Design system — Clash Display + Inter typography, terracotta/walnut/cream/sage palette drawn from construction materials
• Full analytics stack — GA4, Clarity session recordings, custom form funnel tracking, cookie consent management
• Edge-delivered via Cloudflare Pages with isolated Google Maps API project per client
• Zero server maintenance — 171+ pages are static HTML, no Node.js runtime, no database, no security patches