AV Cranes
B2B marketing site for an industrial crane manufacturer in Ahmedabad. Full product catalog with 12 crane lines, multi-theme switcher, WhatsApp integration, and animated hero sections.
Overview
AV Cranes is a full B2B marketing and product catalogue website for a real crane and lifting equipment manufacturer based in Ahmedabad, India, with 500+ cranes delivered since 2010. The site presents 12 product lines including EOT cranes, gantry cranes, hoists, and winches, and is built to generate quote requests and WhatsApp leads rather than handle e-commerce.
Why it was built
A client project. The company needed a professional web presence to reach India's infrastructure and manufacturing sectors. The brief was to make the site feel premium and industrial while keeping it fast and easy to maintain: no CMS, no database, just a well-structured static site that a non-technical team could hand off cleanly.
4-Theme System
Full CSS variable theming with 4 named themes (Industrial, Ocean, Gold, Crimson). Theme persists via localStorage and applies via a data-theme attribute on <html>, with zero flash on reload.
Live Product Search
The products page has a sticky filter bar with category pills and a live text search that matches both product name and description simultaneously, all client-side with no API.
12 Static Product Pages
Each product has its own slug-based route pre-rendered at build time using generateStaticParams. Every page shows specs, feature checklist, related products by category, and two direct-dial phone CTAs.
Tech Breakdown
Static generation via generateStaticParams is the right fit for a product catalogue with stable data. No server needed at runtime, just a CDN.
All 12 products live in a typed array with a Product interface. getProductBySlug is a simple .find() call and the compiler catches any schema drift.
Rather than toggling Tailwind class variants, all theme values are CSS vars declared per data-theme in globals.css. A single gradient-bg class automatically picks up the active theme with zero runtime JS overhead.
Used specifically for useInView-triggered scroll animations and AnimatePresence for navbar and mobile menu transitions. Nothing more, kept intentionally lean.
- 1
Multi-theme system required every single colour reference across ~12 files to use CSS var tokens: no hardcoded Tailwind colours allowed, otherwise themes would partially break.
- 2
The sticky filter bar sits at top-16 md:top-20 to account for the fixed navbar height, requiring consistent height values across all breakpoints.
Knowledge Hub, Leadership, and Projects pages are in the nav but not yet built. The next logical step is adding a simple quote request form with EmailJS so leads can be captured directly from product pages.
See it live
Check out the deployed site.