/* global React, ReactDOM */ const { useState, useEffect, useRef, useMemo, useCallback } = React; /* ============================================================ * Icons (inline SVGs: small, controllable, no extra deps) * ============================================================ */ const Icon = { ArrowRight: (p) => , ArrowUpRight: (p) => , Globe: (p) => , Shield: (p) => , Sparkle: (p) => , ChevronDown: (p) => , Check: (p) => , Mail: (p) => }; /* ============================================================ * useInView: toggles a `.in` class once element scrolls in * ============================================================ */ function useInView(opts = { threshold: 0.18 }) { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { if (!ref.current || seen) return; const io = new IntersectionObserver( (entries) => { for (const e of entries) { if (e.isIntersecting) { setSeen(true); io.disconnect(); break; } } }, opts ); io.observe(ref.current); return () => io.disconnect(); }, [seen]); return [ref, seen]; } function Reveal({ as: Tag = 'div', delay = 0, className = '', children, ...rest }) { const [ref, seen] = useInView(); const delayClass = ['', 'reveal-delay-1', 'reveal-delay-2', 'reveal-delay-3', 'reveal-delay-4'][delay] || ''; return ( {children} ); } /* ============================================================ * HERO ·full-viewport, video background, navbar, headline * ============================================================ */ function Hero() { const videoRef = useRef(null); // Replicated fade-in/out from the brief: smooth crossfade-to-black loop. useEffect(() => { const v = videoRef.current; if (!v) return; v.style.opacity = '0'; let fadeRAF = null; const animateOpacity = (from, to, ms, done) => { cancelAnimationFrame(fadeRAF); const start = performance.now(); const step = (now) => { const t = Math.min(1, (now - start) / ms); v.style.opacity = String(from + (to - from) * t); if (t < 1) fadeRAF = requestAnimationFrame(step);else if (done) done(); }; fadeRAF = requestAnimationFrame(step); }; const onCanPlay = () => { v.play().catch(() => {}); animateOpacity(0, 1, 600); }; const onTimeUpdate = () => { if (!v.duration) return; if (v.duration - v.currentTime <= 0.55 && parseFloat(v.style.opacity || '1') > 0.5) { animateOpacity(parseFloat(v.style.opacity || '1'), 0, 500); } }; const onEnded = () => { v.style.opacity = '0'; setTimeout(() => { v.currentTime = 0; v.play().catch(() => {}); animateOpacity(0, 1, 500); }, 100); }; v.addEventListener('canplay', onCanPlay); v.addEventListener('timeupdate', onTimeUpdate); v.addEventListener('ended', onEnded); return () => { v.removeEventListener('canplay', onCanPlay); v.removeEventListener('timeupdate', onTimeUpdate); v.removeEventListener('ended', onEnded); cancelAnimationFrame(fadeRAF); }; }, []); return (
{/* Background video */}
); } /* ============================================================ * INTEGRATIONS ·marquee strip * ============================================================ */ const INTEGRATIONS = [ { name: 'HubSpot', slug: 'hubspot' }, { name: 'Pipedrive', slug: 'pipedrive' }, { name: 'Salesforce', slug: 'salesforce' }, { name: 'Slack', slug: 'slack' }, { name: 'Stripe', slug: 'stripe' }, { name: 'Notion', slug: 'notion' }, { name: 'Airtable', slug: 'airtable' }, { name: 'Google Sheets', slug: 'googlesheets' }, { name: 'Google Ads', slug: 'googleads' }, { name: 'Meta', slug: 'meta' }, { name: 'Google Analytics', slug: 'googleanalytics' }, { name: 'Gmail', slug: 'gmail' }, { name: 'Google Calendar', slug: 'googlecalendar' }, { name: 'Calendly', slug: 'calendly' }, { name: 'Zoom', slug: 'zoom' }, { name: 'Discord', slug: 'discord' }, { name: 'Mailchimp', slug: 'mailchimp' }, { name: 'Zapier', slug: 'zapier' }, { name: 'Make', slug: 'make' }, { name: 'n8n', slug: 'n8n' }, { name: 'QuickBooks', slug: 'quickbooks' }, { name: 'Xero', slug: 'xero' }, { name: 'Linear', slug: 'linear' }, { name: 'Asana', slug: 'asana' }, { name: 'ClickUp', slug: 'clickup' }, { name: 'Intercom', slug: 'intercom' }, { name: 'Shopify', slug: 'shopify' }, { name: 'Typeform', slug: 'typeform' }, { name: 'Webflow', slug: 'webflow' }, { name: 'Square', slug: 'square' }, { name: 'PayPal', slug: 'paypal' }, { name: 'Loom', slug: 'loom' }, { name: 'WordPress', slug: 'wordpress' }, { name: 'Cal.com', slug: 'calcom' }, { name: 'Trello', slug: 'trello' }, ]; function Integrations() { const row = [...INTEGRATIONS, ...INTEGRATIONS]; // doubled for seamless loop const icons = (typeof window !== 'undefined' && window.BRAND_ICONS) || {}; return (
Connects with the tools your business already uses
{row.map((it, i) => { const ic = icons[it.slug]; return (
{/* Subtle radial bloom */}
{ic ? ( ) : ( {it.name} )}
); })}
); } /* ============================================================ * STATS ·three sourced numbers (mirrors the prompt's * "About" + heading + supporting copy rhythm) * ============================================================ */ const STATS = [ { num: '78%', label: 'of customers buy from the company that responds first', src: 'Harvard Business Review', url: 'https://hbr.org/2011/03/the-short-life-of-online-sales-leads' }, { num: '21×', label: 'more likely to qualify a lead in 5 minutes vs. 30 minutes', src: 'MIT Sloan · Lead Response Study', url: 'https://www.leadresponsemanagement.org/lrm_study/' }, { num: '5×', label: 'cheaper to reactivate a dormant customer than acquire a new one', src: 'Bain & Company', url: 'https://www.bain.com/insights/zero-defections-quality-comes-to-services-harvard-business-review-hbr/' }]; function Stats() { return (
The cost of slow

Trust starts the moment
you respond.

{STATS.map((s, i) =>
{s.num}

{s.label}

{s.src} )}
); } /* ============================================================ * HOW WE WORK ·Innovation × Vision style 2-col + 3 steps * ============================================================ */ const STEPS = [ { no: '01', title: 'Diagnose', body: 'We map response lag, follow-up gaps, dormant pipeline, and admin work across the current workflow before recommending anything.', deliverable: 'Clear bottleneck diagnosis' }, { no: '02', title: 'Scope', body: 'We shape the automation around your actual process, data sources, and team habits.', deliverable: 'Written scope + success criteria' }, { no: '03', title: 'Build', body: 'We implement, test with real inputs, and refine until the system works as specified inside the workflow your team already runs.', deliverable: 'Working system' }]; function HowWeWork() { return (
How we work

Process over packages.

{/* Video column */}
); } /* ============================================================ * GUARANTEE ·large featured-video + overlay glass card * ============================================================ */ function Guarantee() { return (
); } /* ============================================================ * ROI CALCULATOR * ============================================================ */ function clamp(n, lo, hi) {return Math.max(lo, Math.min(hi, n));} function fmtMoney(n) { return '$' + Math.round(n).toLocaleString('en-US'); } function fmtInt(n) {return Math.round(n).toLocaleString('en-US');} function ROICalculator() { const [monthlyLeads, setMonthlyLeads] = useState(40); const [avgDeal, setAvgDeal] = useState(8000); const [responseMinutes, setResponseMinutes] = useState(45); const [unworked, setUnworked] = useState(400); const [teamHours, setTeamHours] = useState(12); const calc = useMemo(() => { // ---- directional model (tuned to match the brief's example) ---- const baseCloseRate = 0.18; // response decay: 5 min ~ 0; 60 min ~ 0.42; 1440 min ~ ~0.8 const responseRisk = clamp(Math.log10(Math.max(1, responseMinutes)) * 0.32, 0, 0.85); const slowResponseLoss = monthlyLeads * 3 * responseRisk * baseCloseRate * avgDeal; // dormant: ~2% of unworked are recoverable in 90 days const dormantRecoveryRate = 0.022; const dormantLoss = unworked * dormantRecoveryRate * avgDeal; // manual drag: 60% of admin hrs are recoverable; assume blended $65/hr const recoverableHrs = teamHours * 13 * 0.6; const manualLoss = recoverableHrs * 65; const total = slowResponseLoss + dormantLoss + manualLoss; const buckets = [ { key: 'dormant', label: 'Dormant pipeline sitting idle', sub: 'Old quotes and unworked opportunities are still holding recoverable revenue.', value: dormantLoss }, { key: 'response', label: 'Slow lead response', sub: 'Long response times are making paid leads decay before your team gets to them.', value: slowResponseLoss }, { key: 'manual', label: 'Admin work piling up', sub: 'Hours per week your team spends on follow-up and admin instead of revenue work.', value: manualLoss }]. sort((a, b) => b.value - a.value); const scores = { response: Math.round(clamp(Math.log10(Math.max(1, responseMinutes)) / Math.log10(1440) * 100, 0, 100)), dormant: Math.round(clamp(unworked / Math.max(1, monthlyLeads * 12) * 100, 0, 100)), manual: Math.round(clamp(teamHours / 40 * 100, 0, 100)) }; return { total, slowResponseLoss, dormantLoss, manualLoss, recoverableHrs, buckets, scores }; }, [monthlyLeads, avgDeal, responseMinutes, unworked, teamHours]); const [showMath, setShowMath] = useState(false); const [email, setEmail] = useState(''); const [sent, setSent] = useState(false); const [sending, setSending] = useState(false); const [sendError, setSendError] = useState(null); const submitEmail = async (e) => { e.preventDefault(); if (!email.includes('@')) return; setSending(true); setSendError(null); try { const res = await fetch('/api/diagnostic-email', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, monthlyLeads, avgDeal, responseMinutes, unworked, teamHours, total: calc.total, slowResponseLoss: calc.slowResponseLoss, dormantLoss: calc.dormantLoss, manualLoss: calc.manualLoss, recoverableHrs: calc.recoverableHrs, }), }); if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err.error || 'Could not send. Try again.'); } setSent(true); } catch (err) { setSendError(err.message || 'Could not send. Try again in a minute.'); } finally { setSending(false); } }; return (
Opportunity diagnostic

Estimate your current opportunity loss.

Enter a few current numbers. We'll show the likely cost of delayed response, dormant pipeline, and admin work across the next 90 days.

{/* Inputs */} setMonthlyLeads(clamp(v, 1, 9999))} min={1} max={500} step={1} /> setAvgDeal(clamp(v, 1, 10_000_000))} min={500} max={250000} step={500} /> setResponseMinutes(clamp(v, 1, 1440))} min={1} max={240} step={1} /> setUnworked(clamp(v, 0, 99999))} min={0} max={5000} step={10} /> setTeamHours(clamp(v, 0, 200))} min={0} max={80} step={1} />

Directional estimate only. On the diagnostic call, we validate the real bottleneck with your actual workflow, lead mix, and sales cycle before scoping anything.

{/* Output */}
Directional estimate · next 90 days Updates live
{fmtMoney(calc.total)}

Estimated opportunity currently leaking from delayed response, dormant demand, and admin work piling up.

{/* Buckets */}
{calc.buckets.slice(0, 2).map((b, i) =>
{i === 0 ? 'Primary leak' : 'Secondary leak'}
{b.label}
{b.sub}
{fmtMoney(b.value)}
)}
{/* Hours line */}
Recoverable operating time in 90 days {fmtInt(calc.recoverableHrs)} hrs
{/* Score bars */}
{/* How we got here */} {showMath &&
} {/* Email capture */}
{!sent ? <>
Email me these results

Get this breakdown sent to your inbox so you can share it with your team.

setEmail(e.target.value)} placeholder="you@yourcompany.com" disabled={sending} className="flex-1 bg-transparent text-white placeholder:text-white/40 text-sm focus:outline-none py-2 disabled:opacity-60" /> {sendError && (

{sendError}

)} : <>
Sent to {email}.

Check your inbox in the next minute. If you don't see it, peek in spam.

}
Book a diagnostic call
); } function NumberRow({ label, value, onChange, min, max, step, prefix, suffix }) { return ( ); } function ScoreBar({ label, value }) { return (
{label} {value}/100
); } function MathRow({ label, v, note }) { return (
{label}
{note}
{v}
); } /* ============================================================ * CONTACT FORM * ============================================================ */ const BUSINESS_TYPES = ['SaaS / software', 'E-commerce', 'Professional services / agency', 'Service business (field / trades)', 'Marketplace', 'Education', 'Healthcare', 'Real estate', 'Finance / insurance', 'Other']; const LEAD_RANGES = ['Under 20', '20–50', '50–150', '150–500', '500+']; const DEAL_RANGES = ['Under $1k', '$1k–$5k', '$5k–$25k', '$25k–$100k', '$100k+']; const STACK_OPTIONS = ['HubSpot', 'Salesforce', 'Pipedrive', 'Notion', 'Airtable', 'Slack', 'Google Sheets', 'Linear', 'Asana', 'ClickUp', 'Intercom', 'Zapier', 'Make', 'n8n', 'Mailchimp', 'ActiveCampaign', 'Calendly', 'QuickBooks', 'ChatGPT / OpenAI', 'Anthropic / Claude', 'Shopify', 'Stripe', 'Webflow', 'WordPress']; const LEAK_OPTIONS = ['Slow lead response', 'Dormant pipeline', 'Manual follow-up', 'Reporting & visibility', 'Internal ops / busywork', 'Custom AI build', 'Not sure yet']; function ContactForm() { const [form, setForm] = useState({ name: '', email: '', company: '', bizType: '', leadVol: '', dealVal: '', stack: [], stackOther: '', leak: '', notes: '' }); const [open, setOpen] = useState({ biz: false, stack: false, help: false }); const [submitted, setSubmitted] = useState(false); const [submitting, setSubmitting] = useState(false); const [submitError, setSubmitError] = useState(null); const upd = (k, v) => setForm((f) => ({ ...f, [k]: v })); const toggleStack = (t) => setForm((f) => ({ ...f, stack: f.stack.includes(t) ? f.stack.filter((x) => x !== t) : [...f.stack, t] })); const submit = async (e) => { e.preventDefault(); if (!form.name || !form.email || !form.company) return; setSubmitting(true); setSubmitError(null); try { const res = await fetch('/api/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form), }); if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err.error || 'Could not send. Try again.'); } setSubmitted(true); } catch (err) { setSubmitError(err.message || 'Could not send. Try again or email tiago@verconai.com directly.'); } finally { setSubmitting(false); } }; return (
Contact

Book a diagnostic call.

Tell us a bit about your operation. We'll come prepared with a specific plan for your situation.

{submitted ?

Got it. We'll be in touch.

We'll review your details and reach out within one business day. If you'd rather move faster, grab a slot directly:

Book a slot now :

Only name, email, and company are required. The more you share, the more useful our first call will be. We'll come prepared with a specific plan instead of asking the basics.

{/* Section 1 */}
upd('name', e.target.value)} placeholder="Alex Rivera" className="form-input" /> upd('email', e.target.value)} placeholder="alex@yourcompany.com" className="form-input" /> upd('company', e.target.value)} placeholder="e.g. Northwind Co." className="form-input" />
{/* Section 2 */} setOpen((o) => ({ ...o, biz: !o.biz }))}>
upd('bizType', v)} /> upd('leadVol', v)} /> upd('dealVal', v)} />
{/* Section 3 */} setOpen((o) => ({ ...o, stack: !o.stack }))}>
{STACK_OPTIONS.map((opt) => { const on = form.stack.includes(opt); return ( ); })}
upd('stackOther', e.target.value)} placeholder="e.g. internal CRM, custom dashboard" className="form-input" />
{/* Section 4 */} setOpen((o) => ({ ...o, help: !o.help }))}>
upd('leak', v)} />