Sumadhura Industrial & Logistics Parks

The ideology

The visitor arrives at the park the way a truck does, and then gets the numbers a leasing head needs.

• One cinematic act per page

  The film sits at the top of the home page. Everything after it is dense content that is easy to scan: master plans, specifications, an estimator and FAQs.

• Only published numbers

  Every figure comes from the brochure, the client brief or published press coverage. Where they disagreed, the park pages follow the brochure, and figures that have not been published, such as clear height, are left out.

• Amber as a signal

  The brochure's amber marks active states, calls to action and the highlighted block on a plan. Warm coal and cream carry the rest of the page.

• Motion follows the scroll

  The film and the image parallax are tied to scroll position, so they stop when the visitor stops, and headline reveals play once. We avoided bounce easing, counting numbers and logo marquees, and visitors who prefer reduced motion see the still poster frame.

• Next.js 16 (App Router)Pre-renders every page, so they load quickly and search engines can read them. Live headers show x-nextjs-prerender and x-nextjs-cache.
• React 19Runs the interactive parts: the estimator, the gate to dock tabs, the island navigation and the forms.
• Tailwind CSS 4Layout and the shared colour and type tokens: coal, cream, amber and teal.
• GSAP 3.15 with @gsap/reactLine-by-line headline reveals, sections that hold in place while content changes, master plan highlights and the dynamic island animation, all wrapped in reduced-motion checks.
• LenisSmooth scrolling, so the film moves evenly frame by frame.
• Custom canvas player for the image sequencePlays the 180-frame AVIF hero film by scroll. It chooses 960, 1600 or 2304 px frames for the device and only decodes the frames near the current position.
• next/font (Neulis Sans from a local file, JetBrains Mono from Google Fonts at build time)Serves both typefaces from the site itself, so the browser makes no call to Google.
• Custom next/image loaderServes pre-sized image variants from 480 to 2400 px on a host that cannot run the default image optimiser.
• Inline SVG master plansRedraws the Hoskote and Chennai plans as SVG drawings in which each block lights up as its row in the list scrolls past, showing its published area.
• Schema.org JSON-LDOrganization data on every page, plus Article, FAQPage and BreadcrumbList on the Insights articles.
• Hostinger Node.js hosting with hcdnServes the standalone Next.js build through Hostinger's CDN. Live headers show platform: hostinger and server: hcdn.

• Scroll to drive in

  The home page film has six chapters: Approach, Arrival, Gate, Park, Dock and Aerial. Each chapter shows its own facts, such as NH-75 at 12 km, the 80 tonne twin-platform weighbridge, 30 m RCC roads and one dock door per 10,000 sq ft.

• Master plans that follow the scroll

  The Hoskote and Red Hills plans are redrawn as SVG. On larger screens, scrolling through the block list lights each block in amber, beside its status and its published area in square metres and lakh square feet.

• Space estimator

  Visitors enter monthly pallet throughput, storage type and mezzanine share. The estimator returns an indicative carpet area, dock doors, levellers and power, and points to the park that fits best.

• Gate to dock tabs

  Four tabs follow a truck through the estate: at the gate, in the park, at the dock and across the estate. Each tab lists the specification that matters at that point.

• Specification sheet with section links

  Seven sections cover structure, flooring, docks, power, fire safety, site and amenities. Each one has its own link, so the leasing team can send an occupier straight to it.

• Dynamic island navigation

  A single glass pill shows the name of the current section and a progress ring as you scroll. It opens into the full menu on hover, tap or keyboard focus.