AJ
Back to Builds
WebComplete

Anukrupa Real Estate

A 5-theme marketing site for an 11-year-old Indore property consultancy, with a property listings catalogue, testimonial carousel, and animated trust-stat counters built on Next.js and Tailwind.

Next.js 16React 19Tailwind CSS 4Motion

Overview

Anukrupa Real Estate is a marketing and property-listings site for an 11-year-old property consultancy in Indore, Madhya Pradesh. It presents dynamic property pages under /properties/[slug], a services overview, testimonials, and a 5-theme switcher (Heritage Gold, Royal Indore, Emerald Estate, Terracotta Earth, Modern Slate) so the same layout can carry different regional-luxury identities. Trust signals (11+ years, 850+ properties delivered, 2400+ happy families, 30+ localities covered) are surfaced as animated stat counters rather than static text.

Why it was built

A client project for a locally-established property consultancy that wanted a web presence matching the trust it had already built offline over a decade, in a market where buyers lean heavily on perceived credibility and local reputation before ever contacting an agent.

5-Theme Regional Identity System

A themes module defines 5 full palettes (Heritage Gold, Royal Indore, Emerald Estate, Terracotta Earth, Modern Slate), each a 3-color swatch, selected via a ThemeSwitcher and persisted under a dedicated localStorage key.

Dynamic Property Detail Pages

properties/[slug]/page.tsx renders any listing from a typed properties data array, paired with a gallery component for images and filters on the listing index for filtering by type or locality.

Animated Trust Stat Counters

A StatCounter component counts up the four headline stats (years of trust, properties delivered, happy families, localities covered) when scrolled into view, sourced from a single typed stats array rather than hardcoded in the component.

Tech Breakdown

Next.js 16 dynamic routes

properties/[slug] lets each listing get its own shareable URL and metadata without hand-building a router, appropriate for a catalogue that will grow as new properties are added.

Typed data modules per domain

Splitting content by domain (properties, services, team, testimonials) rather than one large data file keeps each file focused and makes it clear where to add a new entry without touching unrelated code.

lucide-react

A consistent icon set across property cards, service cards, and navigation without shipping custom SVGs for every glyph.

Tailwind CSS 4 with a themes module driving CSS variables

5 full color identities are defined as data rather than 5 sets of hardcoded Tailwind classes, so the theme switcher only needs to write one attribute and the CSS variables it maps to do the rest.

Challenges
  • 1

    5 independent themes across property cards, galleries, and a testimonial carousel means every component's styling has to route through the CSS variable layer consistently, since a single hardcoded color anywhere breaks 4 of the 5 themes silently.

  • 2

    A property listings catalogue implies content that changes more often than a typical marketing site's copy; keeping properties data as the single typed source of truth was necessary to keep updates low-risk.

What's Next

A logical next addition would be a lead-capture step before the WhatsApp handoff (basic name/budget/locality) so the consultancy's team arrives at the conversation with context, rather than a cold WhatsApp message.

See it live

Check out the deployed site.