// React + Framer Motion - scroll-triggered project card reveal import { motion } from "framer-motion"; const ProjectCard = ({ project }) => ( <motion.div initial={{ opacity: 0, y: 40 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-80px" }} transition={{ duration: 0.6, ease: "easeOut" }} className="project-card" > <img src={project.image} alt={project.title} /> <h3>{project.title}</h3> <p>{project.description}</p> </motion.div> );

Frontend

AVP & Sathyam Builders - Corporate Website

A modern React site for a 60-year-old construction firm.

Live Website

AVP & Sathyam Builders - Corporate Website main screen

60+

Years in Business

20+

Projects shown

React 18

Tech Stack

React 18ViteFramer MotionRadix UIReact RouterLucide React

The problem

AVP & Sathyam Builders had 60 years of experience constructing hospitals, tech parks, and luxury apartments - but they had no website. When potential clients searched for them online, there was nothing to find. A company with that track record was being passed over simply because it was invisible.

The challenge

AVP & Sathyam Builders had decades of project experience, including Hewlett Packard, Bangalore Baptist Hospital, Software Tech Parks, and luxury apartments, but no digital presence for modern clients. The website needed to present that history, organize commercial and residential work, and turn visits from architects and developers into inquiries.

Frontend Architecture

Single-page React 18 + Vite application with React Router for multi-page navigation. Framer Motion powers scroll-triggered animations across the project pages and hero sections. Radix UI primitives provide accessible modal, dropdown, and tooltip components. Lucide React and Font Awesome 6 handle iconography. Google Fonts serves Epilogue for headings and Manrope for body text. The project data layer is static JSON, so the build can deploy to a CDN without a backend.

Results

The live site at avpsathyambuilders.com presents AVP & Sathyam Builders' full project catalogue - spanning pharmaceutical manufacturing facilities (Wrigley India, US FDA compliant), tech campuses (Hewlett Packard Electronic City), hospitals (Bangalore Baptist Hospital - zero disruption to ongoing operations), and luxury residential projects - with animated storytelling and a structured inquiry flow for new client enquiries.

Gallery & Demos

Live Website

avpsathyambuilders.com as it is today.

Click any image or video to expand · ← → keys navigate

Live Demos

Live Website

https://avpsathyambuilders.com/

More from Freelance

AVP & Sathyam - Digital Platform

Product definition and ownership for the digital debut of A.V.Paramashivan & Sathyam Builders - a 60-year-old Bengaluru construction firm. Defined the information architecture, content hierarchy, and lead-generation conversion flow for a traditionally offline business going digital for the first time.

Client DiscoveryContent StrategyInformation Architecture

Interested in this work?

I can walk through the architecture and code during an interview.

Get in Touch All Projects

The challenge

Frontend Architecture

Results