VNR Infra Developers

Overview

VNR Infra Developers Pvt. Ltd. is a real-estate and infrastructure company in Hyderabad specialising in HMDA and DTCP-approved open plots, farm plots, landlord-share flats, and property advisory. I designed, developed, and now maintain their public marketing website — a data-driven single-page build with a full lead-capture pipeline, deployed to the client's own domain.

The site presents two active projects — Nidhi Avenue (a DTCP-approved, TS RERA-registered gated layout on the Warangal Highway) and Anvita High 9 (a luxury 15-acre, 9-tower community marketed by VNR in Kollur) — alongside the company's services, delivery history, and office details.

Client context

The company is led by a managing director with an MBA in finance and 25+ years in Hyderabad — over a decade in MNC accounts and corporate operations, then 15+ years in real estate. That finance-first discipline shaped the site's content: it leads with approvals, clear titles, and verified infrastructure rather than marketing gloss.

• Focus markets: Yadadri Bhuvanagiri, Kollur–Nandigama–Shankarpally, Kothur–Shadnagar, Sangareddy–Sadashivpet, Zaheerabad.
• Core promise: HMDA/DTCP-approved layouts, clear-title chains, spot registration, no surprises at handover.
• Track record the site surfaces: 860+ families settled, direct delivery of documents and layout maps on visit.

The brief

The client needed a professional presence that did three things: present property listings credibly, capture leads from prospective buyers, and work reliably on every device. Because the business depends on phone calls and WhatsApp enquiries, the site also had to make contact frictionless from any point on the page.

Design & content

A single scrolling page organised as a persuasion funnel: hero with proof stats and an auto-advancing image carousel, a scrolling approvals marquee (HMDA approved · TS RERA registered · bank loan eligible), the current projects, past delivered projects, six services, a "why us" section, a four-step visit-to-registration process, company about/MD profile, vision-mission-values, and a contact section with an embedded office map.

• Project cards are not hardcoded — each is rendered from a JSON record (name, location, approvals, features, price, location highlights, map embed, gallery) and carries its own image carousel.
• Clicking a card opens a rich detail modal: approvals, feature grid, price list, location points, gallery with a keyboard-navigable lightbox, and an embedded map.
• Offer badges (e.g. a "10% OFF · ₹9,999" launch circle on Nidhi Avenue) are data-driven per project, so promotions update without touching page markup.
• Every image is served through a jsDelivr CDN in front of the repo's assets branch — long-cache headers and compression, with branded placeholders that show until real imagery lands.

Architecture

No framework — a vanilla JavaScript ES-module system with a deliberate emphasis on maintainability for a solo client build that will evolve.

• Thirteen focused modules orchestrated from a single entry point: projects, project-detail modal, lead form, section pager, hero/about carousels, marquee, enquiry modal, welcome toast, nav, and a shared carousel factory.
• One config.js holds every site-wide constant — phone, WhatsApp, email, CDN base URL, Web3Forms endpoint and access key, partial URLs. Change one file, the whole site follows.
• Header and footer are fetched partials with {{TOKEN}} substitution, so contact details are injected from config rather than duplicated across markup.
• Event delegation throughout — usable even though components mount asynchronously after the header, footer, and project data load.
• Accessibility-minded details: modals trap and restore focus, Escape and arrow keys work, aria roles/labels are set, and reveal animations respect reduced-motion.

Lead generation

The site's real job is qualified leads, and every call-to-action routes into one pipeline.

• Serverless form backend: submissions POST to Web3Forms — no server to run or maintain, with the recipient set in one config value.
• Uniform lead routing: every button — hero CTAs, project-card chip buttons, buttons inside the detail modal, and the mobile sticky bar — carries action/project context and pre-fills the enquiry form, auto-guessing the matching "interested in" option.
• Validated input: name + 10-digit phone checks with inline error states and a digit-only phone mask.
• Conversion touches: a welcome enquiry modal (shown once per session), a bottom-right welcome toast, a floating WhatsApp button, and a persistent mobile Call / WhatsApp / Site Visit bar.

SEO & deployment

• Open Graph and Twitter card meta, JSON-LD Organization schema with contactPoint, and a descriptive title/meta description.
• sitemap.xml, a custom 404 page, favicon/apple-touch icons, and a Google site-verification file for Search Console.
• Deployed on GitHub Pages to the client's own domain — vnrinfradevelopers.com — via a CNAME record; the git history shows a real iterative maintenance cycle (brand refresh, project additions, offer updates, CDN switch, SEO pass).

Outcome

The site took the company from no web presence to a live, data-driven product hosted on its own domain — presenting two revenue-bearing projects with verified approvals, and funnelling every enquiry into the client's inbox and phone. This is an ongoing engagement: as the client adds projects, changes offers, or refreshes imagery, the single config-and-data architecture makes each update a small, safe change.