Other · Mumbai, India
I. A. Khan Construction: a considered website for a Mumbai construction practice
A React website for I. A. Khan Construction in Mumbai. It has six areas, light and dark themes, email-based enquiry forms, and imagery honestly labelled as illustrative until approved project photography is available.
Results
100
Lighthouse SEO score
Mobile and desktop, lab test, 22 Oct 2026
100
Lighthouse Best Practices score
Mobile and desktop, lab test, 22 Oct 2026
100
Lighthouse Accessibility score (mobile)
Lab test, 22 Oct 2026; 96 on desktop
Challenge
I. A. Khan Construction is a Mumbai construction practice; its site gives the founding year as 1997. Its listed services cover civil, commercial and residential construction, renovation and maintenance, project coordination, and infrastructure works. The website explains the practice's services and way of working in plain language: planning, workmanship and clear communication. It gives prospective clients a simple way to describe a project and get in touch. Approved project photography was not yet available, so the site had to look credible without implying a portfolio it could not yet show.
Solution
FKodeLabs designed and built a multi-page website with six areas: Home, About, Services, Work, Contact and a dedicated Initiate Project enquiry page. The homepage pairs a split hero ("Built with integrity. Made to last.") with a four-point approach and a three-step process. Services sets out six capabilities and a four-stage process: Understand, Plan, Build, Handover. Work shows architectural and material studies, each clearly labelled as illustrative rather than a completed company project. Two enquiry forms check required fields and then open the visitor's own email app with the details filled in, so the website itself stores nothing. A header toggle switches between light and dark themes. On phones, a stacked navigation menu appears, and a floating call button is always within reach. Discuss your project on WhatsApp: https://wa.me/971525118960
Approach
- 01
Structure
Six areas (Home, About, Services, Work, Contact, Initiate Project) with numbered approach rows and process steps that carry the planning-first message.
- 02
Design system
Brand maroon (#491E16, #32140F), gold (#D9A142), construction yellow (#F5B51B) and warm off-white (#F7F5F1). Manrope headlines, DM Sans body text and monospaced labels such as "EST.1997 // MUMBAI".
- 03
Enquiries
Contact and project-enquiry forms with required-field checks. Submitting opens the visitor's email app with the details filled in; the site does not send or store submissions.
- 04
Experience
Light and dark themes, a mobile navigation menu, a floating call button, a skip-to-content link, and reduced motion for visitors who turn it on in their system settings.
- 05
Technology
React single-page app built with Vite, Tailwind CSS, GSAP ScrollTrigger animations, Lenis smooth scrolling and Lucide icons, hosted on Vercel with HSTS.
- 06
Measured performance
Lighthouse 12.8.2 lab test, 22 Oct 2026. Mobile: Performance 78, Accessibility 100, Best Practices 100, SEO 100; LCP 3.9 s, CLS 0.074, TBT 280 ms. Desktop: Performance 84, Accessibility 96, Best Practices 100, SEO 100; LCP 0.7 s, CLS 0.305, TBT 10 ms.
Tech stack
- React
- Vite
- Tailwind CSS
- GSAP
- Lenis
- Lucide
- Google Fonts
- Vercel