Marketing site and lead engine · Live in production
CLEAR Technology
The site that finds and warms up an IT company's customers — a scorecard people actually finish, then follow-up that reads like it was written by a person.
Role: Positioning, funnel design, page design, and direction of the agents that wrote it.
Timeline: Ongoing — live at cleartechnow.com
- Database tables
- 24
- API endpoints
- 126
- Pages
- 17
Table definitions in shared/schema.ts (785 lines). Counted in the repository on 8 August 2026.
Registered route handlers across 42 server modules. Counted in the repository on 8 August 2026.
Public and app pages, excluding 9 admin tab components. Counted in the repository on 8 August 2026.
What was actually broken
A small IT company has no sales team, and the buyers it wants are not searching for it. The website has to do the work: turn anonymous traffic into people who are identified, qualified, and already partway to trusting you — and then keep the conversation going without anyone remembering to send the follow-up.
The usual answer is a "Contact us" form, which converts the small number of people who were already sold and wastes everyone else.
The flow I designed
The site never opens with a request. It opens with something worth doing.
The scorecard is the front door. Instead of asking for an email to see a page, it asks a series of questions about how a company currently runs its IT, and gives back a real assessment. The email comes at the end, when there is something to send. The value arrives before the ask — the same principle as letting a kid design a shirt before making an account.
Every answer is a qualifying signal. The questions were chosen to be genuinely useful to the person answering and to tell us whether they are a fit. There is no separate qualification step because the useful thing already did it.
Leaving is not losing. Half-finished assessments get a magic link that resumes exactly where the person stopped. Most funnels treat abandonment as failure; it is usually just someone who got interrupted.
Follow-up is sequenced, suppression is global. Multi-step email sequences run automatically, but every enrolment path checks one suppression list first. Someone who asked not to be contacted stays uncontacted no matter which door they came back through — that has to be enforced in one place, not remembered in five.
Qualified leads hand off into the platform. A converted lead gets a single-use link straight into their client portal in Warp. The marketing site and the platform are two products with one seam, and the seam is signed and server-side.
Interface notes
You can see how long this is
“Question 1 of 12” and a progress bar, before the first answer. Hiding the length of a form is the fastest way to lose someone halfway through it.
“Not sure” is a real answer
Given at the same visual weight as Yes and No. Forcing a guess produces a worse score and a worse conversation — and “not sure” is itself a useful finding.
No email has been asked for yet
The ask comes after the score exists. Value first, then the exchange — the same principle as letting a kid design a shirt before making an account.
The hard part
A personalised video for a prospect who has never heard of us.
The pipeline: research the company with Claude, screenshot their actual website, generate a storyboard, render slide cards to images, produce an avatar video, then composite it all with ffmpeg into a picture-in-picture clip with narration, plus an animated thumbnail for the email.
The engineering difficulty was in the caching. Slide copy is editable, with a live preview, and an early version happily served a cached video built from copy that had since been rewritten — which is the worst possible failure for a personalised outreach tool, because it is invisible to you and obvious to the recipient. The cache key had to include the copy itself, so editing a word necessarily invalidates the render.
The lesson generalises: any cache keyed on something narrower than "everything that affects the output" will eventually show someone the wrong thing.
Stack
| Frontend | React 18 + Vite, Wouter, TanStack Query |
|---|---|
| UI | shadcn/ui on Radix, Tailwind, framer-motion |
| Backend | Express + TypeScript |
| Database | PostgreSQL (Neon) + Drizzle ORM |
| Resend and Gmail API, with signed open/click tracking | |
| AI | Claude for research and fit scoring, OpenAI for template generation |
| Video | HeyGen avatars, ScreenshotOne capture, resvg slide rendering, ffmpeg compositing |
| Enrichment | Google Places, Apollo, Hunter |
| Platform link | HMAC-signed server-to-server calls into Warp — Lead identity is resolved server-side only — a client-supplied id is never trusted. |
| Hosting | Replit autoscale + Neon Postgres |
Outcome
Live at cleartechnow.com, running the top of the funnel: scorecard, cost calculator, per-client landing pages, an AI security advisor proxied from the platform, and an outbound engine that discovers prospects, scores them for fit, and enrols them into sequences.