AI Consulting Lead Platform
A marketing site that turns three visitor intents into three clean HubSpot rows, in five weeks.
GAIL180, an AI-first research and advisory firm, needed a website that did more than present their practice. It needed to sort visitors into three separate buying conversations (talk to us, send me the AI2030 playbook, send me the AI First playbook) and route each one into its own HubSpot pipeline, with no bot traffic slipping through to the CRM. We built the marketing site, the three lead pipelines behind it, the server-side verification gate, the booking-enabled contact flow, and the attribution layer underneath. Launched on gail180.com in about five weeks from first commit to production.
A marketing site where the real product is the intake engine behind it.
The brief
GAIL180 runs a three-tier AI consulting practice (AI Strategy, AI Implementation, AI Scale-up) plus two flagship playbooks (AI2030 and AI First) they use to start conversations with new prospects. Their existing site treated every visitor the same way. A founder wanting to book a call, a research lead wanting a playbook, and an automated bot all landed in the same inbox. They needed three distinct pipelines, a server-side gate that kept bots out of the CRM, and a booking path for high-intent prospects that did not require a back-and-forth email. The marketing surface had to be fast, on-brand, and production-grade. The architecture underneath had to route three separate lead conversations cleanly into HubSpot.
What lead-intake meant in this engagement
Lead-intake here was an engineering problem, not a marketing one. It meant three independent HubSpot pipelines, each bound to its own form GUID, so a playbook download and a strategy call request never mixed. It meant server-side reCAPTCHA v3 verification with a 0.5 score threshold, run from the API route before any payload reached HubSpot, so bot traffic never polluted the CRM. It meant an inline Tue-Thu scheduler paired with a Calendly embed on the contact flow, so prospects could self-book inside the form. And it meant preserving originating IP through the Vercel edge hop via x-forwarded-for, so attribution survived the hosting layer.
Who this is for
Advisory, consulting, and research firms with multiple offers and multiple buying conversations landing on one website. Marketing teams whose CRM gets polluted by bot traffic and whose attribution breaks at the edge. Founders who want their site to presort prospects into the right pipeline and hand the sales team three clean intent streams on day one.
Five weeks, three phases: map the intents, build the pipelines, ship the attribution.
What we did
- Next.js 15 App Router marketing site with nested layouts
- Three independent HubSpot-backed lead pipelines
- Server-side reCAPTCHA v3 verification on every submission
- Inline Tue-Thu scheduler plus Calendly embed on the contact flow
- Edge-hop IP forwarding for attribution integrity
- Centralized GA4 and GTM instrumentation
Our process
Mapped three visitor intents to three pipelines, locked in the service-tier structure (Strategy / Implementation / Scale-up), and set the three-tier information architecture (marketing shell wrapping the services shell wrapping each service page) before a single component was written.
Shipped the marketing site (App Router nested layouts, desktop mega-menu, mobile sidebar, video-led hero) and the three API routes behind it. Each route runs the same verification pipeline: parse payload, require reCAPTCHA token, hit Google’s siteverify, reject on failure or low score, forward to HubSpot. Wired the contact flow with an inline Tue-Thu scheduler plus a Calendly embed so prospects could book inside the form.
Centralized GA4 and GTM through @next/third-parties so analytics declared once at the root, not sprinkled per page. Wired x-forwarded-for into every HubSpot submission so the originating IP survived the Vercel edge hop. Verified env-key hygiene (NEXT_PUBLIC_ for site keys, server-only for secrets). Deployed to production on gail180.com.
Services covered
Three pipelines, one CRM, a verification gate, and attribution that survives the edge.
- Next.js 15 App Router with nested (marketing) and services layouts
- React 19 + TypeScript + Tailwind CSS 4
- Framer Motion for motion polish
- Desktop mega-menu and mobile sidebar navbar
- Video-led hero with first-frame poster for perceived load
- /api/submit-form: contact and booking pipeline
- /api/ai-2030: AI2030 playbook download pipeline
- /api/aiFirst: AI First playbook download pipeline
- Each route: parse -> verify reCAPTCHA -> reject on low score -> forward to HubSpot
- HubSpot Forms API as the destination for every pipeline
- Three distinct form GUIDs under one portal (342062007)
- schedule_meeting field flows as structured HubSpot data
- Google reCAPTCHA v3, server-side, with a 0.5 score threshold
- Site key exposed as NEXT_PUBLIC_, secret kept server-side
- x-forwarded-for preserved through the Vercel edge hop
- .env gitignored; no secrets in the client bundle
- react-datepicker constrained to Tuesday-Thursday
- Timezone selector on the inline scheduler
- Calendly embed as the self-serve fallback
- schedule_meeting value forwarded to HubSpot as its own field
- Three-tier IA: marketing shell -> services shell -> service page
- Each layer has its own nested layout
- Navbar, footer, and back-to-top stay consistent
- Service pages free to set their own section rhythms
Deployment pipeline
Stack summary
- HubSpot Forms APIThree distinct form GUIDs route three intents into one CRM.
- Google reCAPTCHA v3Server-side verification with a 0.5 score threshold before any submission forwards.
- Calendly embedSelf-serve booking path on the contact flow for prospects who want to skip the email back-and-forth.
- react-datepickerInline scheduler constrained to Tue-Thu with a timezone selector, booked inside the form itself.
- Google Analytics 4One GA4 ID declared once at the root layout via @next/third-parties.
- Google Tag ManagerOne GTM container, centralized the same way, with no per-page sprinkling.
- VercelProduction hosting, with x-forwarded-for preserved through the edge so attribution survives the hop.
- Env hygieneNEXT_PUBLIC_ for site keys, server-only for secrets, .env gitignored.
Key integrations
A launched marketing site with real conversion plumbing underneath.
Launched on gail180.com in roughly five weeks from first commit to production. The site serves as the public face of GAIL180's AI consulting practice and, underneath, carries the intake engine that sorts prospects into the right HubSpot pipeline.
Three distinct visitor intents ('I want to talk to you', 'send me the AI2030 playbook', 'send me the AI First playbook') land as three clean rows in HubSpot. Each pipeline is gated server-side by reCAPTCHA v3 scoring, so bot traffic never reaches the CRM. High-intent prospects can self-book inside the contact flow via an inline Tue-Thu scheduler or a Calendly embed, and the originating IP is preserved through the Vercel edge hop so attribution stays intact end to end.
- Three independent HubSpot-backed pipelines, one per visitor intent
- Server-side reCAPTCHA v3 verification with a 0.5 score threshold on every submission
- Inline Tue-Thu scheduler with timezone selector, paired with a Calendly embed
- Nested App Router IA: marketing shell, services shell, service page, each with its own layout
- Desktop mega-menu and mobile sidebar navbar, shared across the site
- Video-led hero with first-frame poster for perceived load speed
- Centralized GA4 and GTM via @next/third-parties
- IP-forwarding through the Vercel edge for attribution integrity
Innovations
Three API routes share the same verification pipeline but route to three distinct HubSpot form GUIDs. A founder booking a strategy call, a researcher downloading AI2030, and a marketer pulling AI First all end up as clean, separately-tagged rows in the same CRM: no post-hoc sorting, no merged inboxes.
reCAPTCHA v3 runs on the server, not the client. Every submission has to clear Google’s siteverify endpoint and a 0.5 score threshold before it reaches HubSpot. Low-score and missing-token submissions are rejected at the API layer, so bot traffic stays out of the CRM entirely.
The contact form couples a Tue-Thu inline scheduler with a Calendly embed. High-intent prospects can either request a meeting inside the form (with the schedule_meeting value flowing to HubSpot as structured data) or self-book on Calendly. Either path closes the loop without an email back-and-forth.
Server routes read x-forwarded-for and pass the originating IP into every HubSpot submission. Attribution stays intact end-to-end (the IP HubSpot records is the visitor's, not the Vercel edge's), so downstream reporting, enrichment, and geo-analysis all work as intended.
- Three separate buying conversations now run in parallel in HubSpot. The sales team opens GAIL180's CRM and sees three clean intent streams instead of one mixed inbox.
- Bot traffic is gated at the API layer, not filtered after the fact. The CRM stays clean on day one, not after a month of list hygiene.
- High-intent prospects can self-book inside the contact flow. Scheduling is not a separate step or a follow-up email. It is part of the same submission.
- Analytics and attribution are declared once, at the root layout, and carried all the way through to HubSpot. Future integrations can plug into the same instrumentation without new per-page wiring.
- Marketing site with three-tier IA: marketing shell, services shell, service page
- Three API routes running the same verification pipeline, routing to three HubSpot form GUIDs
- Inline Tue-Thu scheduler and Calendly embed on the contact flow
- Centralized GA4 and GTM instrumentation via @next/third-parties
- IP-forwarding layer preserving originating IP through the Vercel edge
- Production deployment on Vercel at gail180.com
- reCAPTCHA site key exposed as NEXT_PUBLIC_, secret kept server-side only
- .env gitignored; no secrets in the client bundle
- Every API route validated: parse, verify, reject on low score, forward, in that order
- Three form GUIDs confirmed against the correct HubSpot portal before go-live
- Calendly embed and inline scheduler both verified for timezone handling
- GA4 and GTM firing verified on every route before production cutover