01The problem
Builder websites in Indian metros usually show glossy renders and a phone number, but buyers want to see legal approvals, travel times and real plot availability, and landowners need a way to start a joint-venture conversation in their own language. The spec asked for a site that works as a sales engine for both audiences: trust signals up front, live inventory and progress, gated pricing for lead capture, and a bilingual land-acquisition flow.
02Who it is for
Real estate developers and their marketing agencies in Indian cities (built for Hyderabad, adaptable to any metro); buyers of the template on Srini's site.
03Features
- Video hero with poster fallback that respects reduced motion and data saver
- Legal trust ribbon: TS-RERA, HMDA/DTCP permits, title opinion, bank pre-approvals
- IT-corridor map (Leaflet + OpenStreetMap) with travel-time estimates and a rush-hour toggle
- SVG plot grid: 30 plots in 3 blocks, colour-coded Available/Blocked/Sold, keyboard-accessible, 'Book a Site Visit for Plot [No.]' modal
- Construction milestones by phase with a monthly update slider
- Pricing and brochures gated behind name + WhatsApp number with OTP verification
- Landowner engine with full English ⇄ Telugu toggle, JV vs outright-sale calculator and 3-step form with document upload and pin-drop
- Project listing with URL-synced filters, shortlist and compare up to 3
- Buyer tools: EMI, Telangana stamp duty/registration and acres/guntas/sq yd converter
- One webhook for all leads (Sheets, Zapier, Make, n8n, CRM) with UTM capture and a honeypot
- NRI Corner, channel-partner programme, blog, legal pages, floating WhatsApp widget
- Reference backend (Node + Express + SQLite) with PostgreSQL schema and OpenAPI spec
04Pages & screens
- Home
- Projects listing
- Apartment project page
- Plotted layout project page
- Landowners (land acquisition)
- NRI Corner
- Channel partners
- Calculators / buyer tools
- About
- Contact + careers
- Blog
- Blog article
- Legal (privacy, terms, RERA)
- Thank-you
- 404
- Style guide
05Stack
06How I built it with AI
Built with AI tools from a two-page specification that also contained the generation prompts. The spec defined three module groups (home-page trust architecture, high-converting project pages, a B2B land-acquisition engine) and prompts such as Create an interactive SVG-based grid… 30 plots across 3 distinct blocks… Available (Green, #22C55E), Blocked/Pending (Yellow, #EAB308), and Sold (Red, #EF4444)
and Build a state-driven language translation system that completely toggles all UI text elements between clear English and formal Telugu.
The spec's prompts suggested React and Tailwind. The delivered template is dependency-light vanilla HTML/CSS/JS that opens straight from disk, with no build step.
07Design highlights
Trust before sales: approvals and RERA numbers sit directly under the hero, ahead of any pricing
Inventory as an interface: the plot grid turns a static master plan into a bookable, filterable map with live counts
Gated pricing works as a lead-capture step: OTP-verified WhatsApp numbers unlock prices across the whole site
A Telugu-first landowner journey with a JV calculator, written for farmers rather than buyers
Licence-clean for resale: original code and SVG illustrations, OFL fonts, ISC/BSD libraries, no unDraw art bundled
08Gallery
Screens from the working build; click any image to zoom. Names, contacts and figures in the screens are demo content.