Matahari Hills

How we built a premium digital platform for a sustainable real-estate project in Bali.

Matahari Hills Digital Platform

Matahari Hills is a visionary real-estate project in Bali focused on sustainable living. Our task was to translate the project's philosophy — environmental awareness, investment value, and architectural harmony — into a modern web experience that could engage investors and buyers alike.

Challenge

The client needed significantly more than a presentation page. Required was a digital system that:

  • conveys a premium brand experience
  • convinces investors through facts, transparency and storytelling
  • consistently provides bilingual content (English/Indonesian)
  • bundles analytics, CRM and lead funnel in a unified platform
  • achieves maximum speed and SEO performance (Mobile-First)

In short: Brand Experience + Conversion Engine + scalable technical architecture.

Challenge

Approach

1 — Architecture & Technology

We completely rebuilt the platform based on a modern, scalable stack:

  • Next.js 14 + React for performance and SEO-optimized rendering
  • Storyblok CMS for flexible content structures
  • Static Site Generation for international loading speed
  • lit-element components for reusable UI building blocks
  • Swiper.js for immersive, visual storytelling sequences
  • Deployment via Vercel, including HTTP/3, CDN caching, automatic deployments

The result: an extremely fast, stable foundation, optimized for growth.

2 — Integrated Analytics and CRM Flow

We developed a complete analytics ecosystem that measures all touchpoints:

  • Google Tag Manager, GA4, Facebook Pixel, Yandex Metrica
  • Event tracking for scroll depth, map interactions, CTA clicks
  • CRM integration via Make webhooks
  • Central lead processing in a Notion-based CRM
  • Real-time notifications for the sales team

This creates a fully automated funnel without data loss – from first impression to qualified inquiry.

2 — Integrated Analytics and CRM Flow

3 — UX & Visual Identity

The website follows a clear, linear narrative structure: Hero → Vision → Location Map → Architecture → Investment Offer We developed:

  • a consistent brandbook (typography, color palette, tone of voice)
  • interactive modules like Google Maps, WhatsApp Chat, micro-animations
  • a calm, trustworthy aesthetic that reflects premium real estate
  • mobile-optimized page layouts for international audiences

The experience combines emotion (storytelling) with structure (investment arguments).

4 — Conversion System & Funnel

Every module became part of a data-driven sales funnel:

  • Reverse Squeeze Page → Lead magnet / Downloads
  • Application Form → Qualification and automatic data enrichment
  • Thank-You Page → Onboarding & handover to CRM
  • A/B tests for headlines, CTAs and visuals
  • Automatic lead scoring based on user behavior

This created a measurable, optimizable funnel for performance marketing.

4 — Conversion System & Funnel

Results

  • Delivered a high-performance Next.js website with 97/100 Lighthouse score
  • Reduced page load time by 60% compared to the previous version
  • Generated qualified leads via Google and Facebook ads at an average CPL of $64
  • Enabled real-time reporting and CRM sync through Make automations
  • Created a consistent brand identity for web, social media and investor materials
Results

Insights

  • Premium UX and performance directly impact trust in high-value B2C products.
  • Integrating CRM and analytics from day one saves dozens of hours of manual work each month.
  • Building with Next.js and Storyblok provides startup-grade flexibility even for traditional industries like real estate.

Tech Stack

Frontend: Next.js 14 · React · Tailwind CSS

CMS: Storyblok CMS

Components: lit-element · Swiper

Integrations: Google Maps API · WhatsApp Chat

Analytics: GTM · GA4 · FB Pixel

Deployment: Vercel

Automation: Make CRM Webhook

Case Studies

Matahari Hills — Premium Real-Estate Platform | H-Studio