// components.jsx — Dialed In AI v2 const { useState, useEffect, useRef } = React; const CAL_URL = "https://cal.com/dialedinai/discovery-call"; const PLAYBOOK_URL = "https://chill-relative-dd1.notion.site/GTM-Workflows-Menu-2e8c802285178009a927dd3fc1fb0337"; const SUBSTACK_URL = "https://thedialedin.substack.com/"; const INSTAGRAM_URL = "https://www.instagram.com/kyumaars/"; const LINKEDIN_URL = "https://www.linkedin.com/in/kumaresh-natarajan/"; const EMAIL_URL = "mailto:kumaresh@dialinai.com"; const WHATSAPP_URL = "https://wa.me/917358267748"; const DialMark = ({ size = 28 }) => ; /* ───────────────────────────── NAV ───────────────────────────── */ function Nav() { return ( ); } /* ───────────────────────────── HERO ───────────────────────────── */ function Hero() { return (
); } /* ───────────────────────────── LOGOS MARQUEE ───────────────────────────── */ function Logos({ speed = 18, direction = 'left', paused = false }) { // Sync --logos-duration on :root so tools marquee shares the same speed React.useEffect(() => { document.documentElement.style.setProperty('--logos-duration', `${speed}s`); }, [speed]); // Real client logos — uniform height, grayscale on cream background. const logos = [ { name: 'Everstage', file: 'everstage.png' }, { name: 'ScaleStation', file: 'scalestation.png' }, { name: 'Copyright Check AI', file: 'copyrightcheck.png' }, { name: 'Wilco Source', file: 'wilcosource.png' }, { name: 'Lirik', file: 'lirik.png' }, { name: 'Keygraph', file: 'keygraph.png' }]; const track = [...logos, ...logos, ...logos]; return (
// trusted to ship
{track.map((l, i) => {l.name} )}
); } /* ───────────────────────────── METRICS ───────────────────────────── */ function Metrics() { const ms = [ { k: '// reply rate', v: '10%', s: 'vs 3–5% B2B SaaS benchmark' }, { k: '// best variant', v: '2.73%', s: 'single-email reply rate' }, { k: '// partnership', v: 'Bitscale', s: 'partner — operator-tier access' }]; return (
{ms.map((m, i) =>
{m.k}
{m.v}
{m.s}
)}
); } /* ───────────────────────────── PROBLEM 8 ───────────────────────────── */ function Problem8() { const items = [ { p: "Hiring a GTM Engineer", c: "$100–150K/yr + 6–9mo ramp" }, { p: "15+ SaaS tools", c: "$1.5–3K/mo, no one owns it" }, { p: "Cold email infra held by duct tape", c: "deliverability & domain rep. tanks" }, { p: "Lead lists are noisy", c: "20%+ bounce-rates..." }, { p: "\u201CAI personalization\u201D is fake", c: "generic templates → 0.5% reply rates → wasted month" }, { p: "Founders doing it themselves at midnight", c: "burnout, slow shipping, opportunity cost" }, { p: "Agencies charge $5–10K/mo that don't ship", c: "bad memory of past agency experience" }, { p: "Tech stack doesn't talk to each other", c: "manual stitching, no source of truth" }]; return ( <>

// the problem

the 8 things draining your pipeline.

every B2B SaaS founder we talk to is bleeding from at least 3 of these costs.

{items.map((it, i) =>
{String(i + 1).padStart(2, '0')}.

{it.p}

// hidden cost {it.c}
)}
); } /* ───────────────────────────── CASE STUDIES ───────────────────────────── */ function CaseStudies() { const cases = [ { logo: "Everstage", tag: "// series b · sales compensation saas", problem: "5-figure SQLs leaking through their HubSpot chatbot.", built: <>AI chatbot. auto-enriches. AI-scores. routes to the rep with Slack alerts., results: [ <>3–5 SQLs/mo recovered that would've been previously missed, <><5 min routing (vs ~48hr industry avg), <>post-launch and still billing] }, { logo: "ScaleStation", tag: "// saas revops agency", problem: "Manual multi-threading and TAM expansion eating team bandwidth.", built: <>Decision-Maker Auto-Mapping + TAM Expansion (lookalikes from closed-won)., results: [ <>~10 hrs/wk saved across the team, <>~30 net-new ICP accounts/month from TAM expansion, <>6-week build] }, { logo: "Copyright Check AI", tag: "// legaltech ai saas", problem: "Inbound leads landing but not responded to fast enough.", built: <>Speed-to-lead automation. Typeform → CRM → AI scoring → instant email reply., results: [ <>Next-day → <5 min auto-response, <>21× more qualified (5-min response window), <>Inbound conversion tripled] }]; return ( <>

// case studies

what we've actually shipped.

three live engagements. real outcomes. no vanity metrics.

{cases.map((c, i) =>
{c.logo}
{c.tag}

// the problem

{c.problem}

// what we built

{c.built}

{c.results.map((r, j) =>
→ {r}
)}
)}
); } /* ───────────────────────────── TIMELINE 30/60/90 ───────────────────────────── */ function Timeline() { const stages = [ { day: "// day 0–30 · foundations + launch", num: "01", title: "ICP, infra, and first emails out the door.", body: <> Week 1: ICP architecture, campaign strategy, lead sourcing, qualification.

Week 2–3: first email sequence live, infra spun up (12 mailboxes / 3 domains warmed), LinkedIn DMs going out.

By Day 30, the system is sending. }, { day: "// day 31–60 · signal + scale", num: "02", title: "Real data starts flowing in.", body: <> First positive replies. We identify the top variants and kill the losers.

CRM enrichment automations turn on. Inbound triage automated.

LinkedIn DMs hitting inboxes. connection accepts compounding.

Slack alerts pinging the second a positive reply lands. }, { day: "// day 61–90 · steady state + decision", num: "03", title: "Pipeline visible. You decide what's next.", body: <> Source → score → send → report at full cadence. Pipeline visible in your CRM.

Second campaign launching with revised data + off the same infra.

Day 90: full system review - continue the retainer or take the playbook and run it yourself. you own the system either way. }]; const sectionRef = useRef(null); const [progress, setProgress] = useState(0); // 0 → 1 const [activeIdx, setActiveIdx] = useState(0); useEffect(() => { const onScroll = () => { const el = sectionRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const vh = window.innerHeight; const total = rect.height - vh; const scrolled = Math.min(Math.max(-rect.top, 0), total); const p = total > 0 ? scrolled / total : 0; setProgress(p); if (p < 0.34) setActiveIdx(0);else if (p < 0.67) setActiveIdx(1);else setActiveIdx(2); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, []); const fillPct = `${Math.round(progress * 100)}%`; const knobPos = `calc(24px + (100% - 48px) * ${progress})`; return ( <>

// how it works

what happens after you sign.

three stages. 45 days to your first booked meeting · 90 days for the whole system to be set up and running.

{[0, 0.5, 1].map((p, i) =>
day {[0, 30, 90][i] === 0 ? '00' : [0, 30, 90][i]} )}
{stages.map((s, i) =>

{s.day}

{s.num}

{s.title}

{s.body}

)}
); } /* ───────────────────────────── OFFER ───────────────────────────── */ function Offer() { const components = [ { name: "ICP Architecture", price: "$1,500" }, { name: "Campaign Strategy (15–25 angles)", price: "$1,500" }, { name: "Lead Sourcing (Bitscale + ZeroBounce)", price: "$2,000/mo" }, { name: "ICP Qualification (AI-tuned scorer)", price: "$1,000/mo" }, { name: "Per-Lead Personalization (real research)", price: "$1,000/mo" }, { name: "Cold Email Infrastructure (12 mailboxes)", price: "$500" }, { name: "Sequence Build & Launch (4-email, A/B tested)", price: "$1,500" }, { name: "LinkedIn DM Layer (text-first sequencing)", price: "$750/mo" }, { name: "Slack Alert Pipeline (real-time replies)", price: "$250" }, { name: "Weekly Report (Slack-delivered)", price: "$500/mo" }, { name: "Always-On Optimization", price: "$500/mo" }]; return ( <>

// the offer

The Allbound OS.

your GTM, augmented.

// founding tier · only 3 slots

$11,000/mo standalone value

$1,500 / month

or $3,000/quarter - save 33% (equivalent to one month free)

// audit & setup fee: included // excludes 3rd-party tool costs.

book a call →

// what's included

    {components.map((c, i) =>
  • {c.name} {c.price}
    • )}
// total value $11,000/mo
); } /* ───────────────────────────── LEAD MAGNET ───────────────────────────── */ function LeadMagnet() { return ( <>

// the playbook

not ready to commit?
here's 12 GTM workflows you can run yourself.

the same playbook we sell to clients. free. steal it. run them yourself, or hand them to your current agency. either way, you'll have a sharper system by Friday.

// 14+ WORKFLOWS

ICP graphs, sequence libraries, deliverability checks, AI scorers. all of it.