An IT consultancy site for an APAC services firm. A conversational chatbot replaces the contact form, a video hero replaces the stock photography, a testimonial carousel replaces the wall of logos. The whole stack runs on Next.js with thirty-plus shadcn primitives and a state machine that turns every visitor into a qualified lead.
Most IT services marketing sites are a hero, a grid of capabilities, a wall of logos, and a contact form. We replaced the contact form with a conversational chatbot that opens, qualifies, captures, and hands off to sales — and rebuilt the rest of the site around it. Next.js 15 with thirty-plus shadcn primitives, Framer Motion entrance work where it pays off, Embla for the testimonial carousel, and a chatbot state machine clean enough to read.
The firm runs an IT consultancy in a high-volume APAC market. Their old site read like every other consultancy site — generic hero, services grid, case studies, contact form. The fill rate on the contact form was ~1%, which the marketing lead suspected was less about the offer and more about the channel. People don't fill out forms when they're partway through deciding. They ask a question, and the friction of typing it into a structured form kills the intent before it lands.
The brief, plainly: replace the form. Build the lead-capture surface around the way prospects already behave — they open a chat, they ask a question, they want a fast answer, and they're willing to share their context if the conversation feels like a conversation. The chatbot is not a gimmick; it's the actual product.
“People don't fill out forms when they're partway through deciding. They ask a question. The chatbot is not a gimmick; it's the lead-capture surface.”
The rest of the site needed to come along too. The capabilities grid had to be specific, not generic. The hero had to communicate the firm's register (technical, regional, established) without resorting to stock photography. The testimonial carousel needed to ship a real social proof flow, not a static logo wall.
Five states, typed transitions. The chatbot is a state machine in code, not a rented widget.
Most agencies that quoted this work shipped marketing sites that were beautiful and identical. The firm wanted something distinguishable — a real shadcn-grade component library underneath, a chatbot built as a state machine rather than a third-party widget, animations calibrated to the brand rather than to a Dribbble shot. We were comfortable in all three registers and could ship them in a single coherent design system.
We also took the chatbot brief literally. The team that proposed embedding Intercom or Crisp was solving a different problem. The brief was a *state machine* embedded in the site — debuggable by us, extensible by the firm's team, ownable as code rather than rented from a SaaS. That's a frontend engineering shape, not a tool-procurement shape.
Welcome → name → intent qualification → info collection → hand-off. Each transition is a typed state with explicit guards and a side-effect contract. Adding a new intent path (e.g., 'cloud migration vs. internal tools') is a state-extension change, not a rewrite.
A short, looping video background plays at hero scale with a content-aware fallback poster for slow connections. The video is encoded for the actual playback profile and lazy-mounts behind the LCP.
Thirty-plus shadcn primitives — buttons, dialogs, cards, sheets, dropdowns, command palettes, navigation menus, hover cards, tooltips, popovers — composed into the marketing surfaces. Theme-tunable, fully typed, no CDN dependency.
A horizontally-scrolling testimonial carousel using Embla under the hood. Each testimonial card has its own entrance animation, calibrated for a single read rather than a constant rotation.
Each capability card pairs a category with a concrete outcome rather than a generic adjective. Animated entrance via Framer Motion, sticky CTA that converts to the chatbot when the visitor commits.
Lighthouse runs in CI on every PR. Bundle size budgets per route. Image transforms via next/image. The result is a site that loads in under two seconds on a 3G profile — important for the firm's market.
Specific outcomes, not generic adjectives. The grid does the qualifying work the homepage hero usually skips.
MethodologyPerformance metrics are CI-enforced with Lighthouse and bundle-size budgets per route. Lead-capture metrics are tracked in the firm's CRM downstream of the chatbot hand-off endpoint.
The chatbot turned out to be the entire sales motion. People who used to bounce now talk to us. It feels like our site, not someone's template.
Case-study deep dives with embedded media. A blog with technical depth that matches the firm's actual engineering register. And a small client-portal surface where ongoing engagements can be reviewed by the customer.
If your services firm is converting at single digits on a generic template — the answer is rarely 'better copy on the same shape.' We can scope a marketing site with conversational lead capture and a real in-house component library in 6–10 weeks.