agentcollect/audit-buildertrend-v4-product.html at main · johnbanr/agentcollect · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AgentCollect for Buildertrend</title>
<meta property="og:title" content="AgentCollect for Buildertrend">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#FAFBFF;
  --bg-card:#ffffff;
  --bg-soft:#F4F5FB;
  --ink:#0B1B3D;
  --ink-2:#1E2856;
  --muted:#64748B;
  --line:#E5E7EB;
  --indigo:#4F46E5;
  --indigo-2:#6366F1;
  --indigo-soft:#EEF2FF;
  --green:#10B981;
  --red:#DC2626;
  --display:'Plus Jakarta Sans',-apple-system,sans-serif;
  --body:'Inter',-apple-system,sans-serif;
  --mono:'JetBrains Mono',monospace;
}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}

/* TOPBAR */
.topbar{padding:18px 36px;display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:0 auto;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:900;font-size:18px;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--indigo);margin-left:1px;vertical-align:super;margin-top:-2px;display:inline-block}
.topbar-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:var(--ink);color:#fff;border-radius:8px;font-family:var(--display);font-size:13px;font-weight:600;text-decoration:none;letter-spacing:-.005em;transition:all .15s}
.topbar-cta:hover{background:var(--indigo)}

/* HERO */
.hero{padding:80px 36px 60px;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center}

.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--indigo);text-transform:uppercase;letter-spacing:.12em;background:var(--indigo-soft);padding:8px 14px;border-radius:6px;margin-bottom:28px}
.hero-eyebrow .pulse{width:6px;height:6px;border-radius:50%;background:var(--indigo);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.product-name{font-family:var(--display);font-size:14px;font-weight:600;color:var(--muted);margin-bottom:14px;letter-spacing:-.005em}
.product-name strong{color:var(--ink);font-weight:800}

.headline{font-family:var(--display);font-size:clamp(40px,5.8vw,76px);font-weight:800;line-height:1;letter-spacing:-.035em;color:var(--ink);margin-bottom:28px}
.headline .accent{background:linear-gradient(135deg,var(--indigo) 0%,#7c3aed 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.deck{font-family:var(--body);font-size:18px;line-height:1.6;color:var(--muted);max-width:540px;margin-bottom:36px}
.deck strong{color:var(--ink);font-weight:600}

.cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:36px}
.cta-primary{display:inline-flex;align-items:center;gap:10px;padding:18px 30px;background:var(--ink);color:#fff;border-radius:12px;font-family:var(--display);font-size:15px;font-weight:700;text-decoration:none;letter-spacing:-.005em;transition:all .2s}
.cta-primary:hover{background:var(--indigo);transform:translateY(-1px);box-shadow:0 12px 32px rgba(79,70,229,.3)}
.cta-primary .arrow{transition:transform .2s}
.cta-primary:hover .arrow{transform:translateX(3px)}
.cta-secondary{font-family:var(--body);font-size:14px;color:var(--muted)}
.cta-secondary a{color:var(--indigo);text-decoration:none;font-weight:500;border-bottom:1px solid var(--indigo-soft)}

.hero-trust{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.hero-trust strong{color:var(--ink);font-weight:600;font-family:var(--display)}

/* HERO RIGHT — AUDIO CARD */
.hero-card{background:var(--ink);color:#fff;border-radius:24px;padding:36px 40px;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(11,27,61,.05),0 30px 60px rgba(11,27,61,.18)}
.hero-card::before{content:'';position:absolute;top:0;right:0;width:300px;height:300px;background:radial-gradient(circle,rgba(99,102,241,.25) 0%,transparent 60%);pointer-events:none}

.card-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;font-family:var(--mono);font-size:11px;color:#94a3b8;position:relative;z-index:1}
.card-live{display:inline-flex;align-items:center;gap:6px;color:#fca5a5;font-weight:600}
.card-live::before{content:'';width:7px;height:7px;border-radius:50%;background:#dc2626;box-shadow:0 0 12px #dc2626;animation:pulse 1.5s ease-in-out infinite}

.card-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:600;color:#a5b4fc;text-transform:uppercase;letter-spacing:.12em;padding:5px 10px;background:rgba(99,102,241,.15);border-radius:6px;margin-bottom:18px;position:relative;z-index:1}

.card-quote{font-family:var(--display);font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.015em;color:#fff;margin-bottom:24px;position:relative;z-index:1}

.card-attrib{font-family:var(--mono);font-size:11px;color:#94a3b8;margin-bottom:28px;position:relative;z-index:1}
.card-attrib strong{color:#fff;font-weight:600}

.play-btn{display:inline-flex;align-items:center;gap:12px;padding:14px 24px;background:#fff;color:var(--ink);border:0;border-radius:100px;font-family:var(--display);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:-.005em;position:relative;z-index:1}
.play-btn:hover{background:var(--indigo);color:#fff}
.play-btn.playing{background:var(--red);color:#fff}

/* STATS BAND */
.stats-band{background:var(--ink);color:#fff;padding:64px 36px;position:relative;overflow:hidden}
.stats-band::before{content:'';position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:1200px;height:600px;background:radial-gradient(ellipse at center,rgba(99,102,241,.18) 0%,transparent 60%);pointer-events:none}
.stats-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:48px;position:relative;z-index:1}
.stat-cell{text-align:left}
.stat-label{font-family:var(--mono);font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px;font-weight:500}
.stat-value{font-family:var(--display);font-size:clamp(36px,4.4vw,52px);font-weight:900;letter-spacing:-.035em;line-height:1;margin-bottom:10px}
.stat-value.gradient{background:linear-gradient(135deg,#a5b4fc 0%,#7c3aed 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-value.red{color:#fca5a5}
.stat-value.green{color:#6ee7b7}
.stat-sub{font-family:var(--body);font-size:13px;color:#cbd5e1;font-weight:400}

/* FEATURES */
.features{padding:100px 36px;max-width:1280px;margin:0 auto}
.features-head{text-align:center;margin-bottom:72px;max-width:780px;margin-left:auto;margin-right:auto}
.features-eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--indigo);text-transform:uppercase;letter-spacing:.12em;margin-bottom:18px}
.features-title{font-family:var(--display);font-size:clamp(32px,4.4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--ink);margin-bottom:18px}
.features-title .accent{background:linear-gradient(135deg,var(--indigo) 0%,#7c3aed 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.features-deck{font-family:var(--body);font-size:17px;color:var(--muted);line-height:1.6}

.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:36px 32px;transition:all .2s}
.feature:hover{transform:translateY(-4px);border-color:var(--indigo);box-shadow:0 1px 2px rgba(11,27,61,.04),0 18px 40px rgba(11,27,61,.08)}
.feature-icon{width:44px;height:44px;border-radius:12px;background:var(--indigo-soft);color:var(--indigo);display:inline-flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;margin-bottom:24px;font-family:var(--display)}
.feature-title{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin-bottom:10px;line-height:1.25}
.feature-desc{font-family:var(--body);font-size:14px;color:var(--muted);line-height:1.6}
.feature-desc strong{color:var(--ink);font-weight:600}

/* COMPARISON BIG */
.compare-section{padding:100px 36px;max-width:1280px;margin:0 auto;text-align:center}
.compare-eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--indigo);text-transform:uppercase;letter-spacing:.12em;margin-bottom:18px}
.compare-title{font-family:var(--display);font-size:clamp(32px,4.4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--ink);margin-bottom:60px;max-width:780px;margin-left:auto;margin-right:auto}

.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;text-align:left}
.compare-card{padding:48px 44px;border-radius:20px;border:1px solid var(--line)}
.compare-card.bad{background:var(--bg-card)}
.compare-card.good{background:linear-gradient(135deg,var(--ink) 0%,#1e1b4b 100%);color:#fff;border:0}
.compare-card-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;padding:6px 12px;border-radius:6px;margin-bottom:24px}
.compare-card.bad .compare-card-tag{background:#FEF2F2;color:var(--red)}
.compare-card.good .compare-card-tag{background:rgba(99,102,241,.2);color:#a5b4fc}
.compare-card-time{font-family:var(--display);font-size:clamp(48px,6.4vw,80px);font-weight:900;letter-spacing:-.035em;line-height:1;margin-bottom:16px}
.compare-card.bad .compare-card-time{color:var(--red)}
.compare-card.good .compare-card-time{color:#fff}
.compare-card-desc{font-family:var(--body);font-size:15px;line-height:1.55}
.compare-card.bad .compare-card-desc{color:var(--ink-2)}
.compare-card.good .compare-card-desc{color:#cbd5e1}
.compare-card-desc strong{font-weight:600}
.compare-card.bad .compare-card-desc strong{color:var(--ink)}
.compare-card.good .compare-card-desc strong{color:#fff}

/* CTA BAND */
.cta-band{padding:100px 36px;background:linear-gradient(135deg,var(--ink) 0%,#1e1b4b 100%);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;top:-50%;right:-20%;width:800px;height:800px;background:radial-gradient(circle,rgba(99,102,241,.18) 0%,transparent 60%);pointer-events:none}
.cta-band-inner{max-width:780px;margin:0 auto;position:relative;z-index:1}
.cta-band-title{font-family:var(--display);font-size:clamp(36px,4.6vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:#fff;margin-bottom:20px}
.cta-band-title .accent{color:#a5b4fc}
.cta-band-deck{font-family:var(--body);font-size:17px;color:#cbd5e1;margin-bottom:40px;line-height:1.6;max-width:580px;margin-left:auto;margin-right:auto}
.cta-band-btn{display:inline-flex;align-items:center;gap:14px;padding:22px 40px;background:#fff;color:var(--ink);border-radius:14px;font-family:var(--display);font-size:16px;font-weight:800;text-decoration:none;letter-spacing:-.01em;transition:all .2s}
.cta-band-btn:hover{background:#a5b4fc;transform:translateY(-2px);box-shadow:0 18px 40px rgba(165,180,252,.3)}
.cta-band-arrow{transition:transform .2s}
.cta-band-btn:hover .cta-band-arrow{transform:translateX(4px)}

/* TRUSTBAR */
.trustbar{padding:48px 36px;text-align:center;border-top:1px solid var(--line);max-width:1280px;margin:0 auto}
.trust-label{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:24px;font-weight:500}
.trust-logos{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap;opacity:.55}
.trust-logos span{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.02em}

/* FOOTER */
.footer{padding:32px 36px;border-top:1px solid var(--line);max-width:1280px;margin:0 auto;font-family:var(--mono);font-size:11px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
.footer strong{color:var(--ink)}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:48px;padding:50px 24px 40px}
  .stats-inner{grid-template-columns:repeat(2,1fr);gap:36px}
  .features-grid{grid-template-columns:1fr;gap:16px}
  .compare-grid{grid-template-columns:1fr;gap:16px}
  .features,.compare-section,.cta-band{padding:60px 24px}
  .stats-band{padding:48px 24px}
  .topbar{padding:14px 24px}
  .trust-logos{gap:24px}
  .trust-logos span{font-size:16px}
}
</style>
</head>
<body>

<audio id="callRec" preload="metadata" src="https://dxc03zgurdly9.cloudfront.net/1d8ed916283711fb0849b820d64e57a0bd764be0cc681efd90868a954228d02d/recording.wav"></audio>

<header class="topbar">
  <a href="https://agentcollect.com" class="brand">AgentCollect<span class="dot"></span></a>
  <a href="https://cal.com/johnb/30" class="topbar-cta">Book 15 min →</a>
</header>

<!-- HERO -->
<section class="hero">

  <div>
    <div class="hero-eyebrow"><span class="pulse"></span>For Dan Houghton · CEO Buildertrend</div>
    <div class="product-name"><strong>AgentCollect</strong> for Buildertrend</div>
    <h1 class="headline">We listened to your billing line. <span class="accent">It's leaking $1.4M a year.</span></h1>
    <p class="deck">A real Buildertrend customer called us this morning trying to settle a $1,247 invoice with a Visa in his hand. Eighteen minutes and thirty-five seconds later, the card was still in his pocket. <strong>Press play on the right.</strong></p>
    <div class="cta-row">
      <a href="https://cal.com/johnb/30" class="cta-primary">Book 15 minutes <span class="arrow">→</span></a>
      <div class="cta-secondary">Or reply: <a href="mailto:j@agentcollect.com">j@agentcollect.com</a></div>
    </div>
    <div class="hero-trust">
      Trusted by <strong>Microsoft</strong> · <strong>Dell</strong> · <strong>Plaid</strong> · <strong>Vanta</strong> · <strong>Checkr</strong>
    </div>
  </div>

  <div class="hero-card">
    <div class="card-meta">
      <span class="card-live">LIVE RECORDING</span>
      <span>18:35 total</span>
    </div>
    <div class="card-tag">@ 15:30 of the call</div>
    <div class="card-quote">"I've typed it in fifty billion ways. And I cannot find a Mike Foster related to Foster Construction."</div>
    <div class="card-attrib">— <strong>Tanya</strong>, your billing line · 1-888-226-5300</div>
    <button class="play-btn" onclick="playMoment(this, 930, 950)">▶ Hear it (20 sec)</button>
  </div>

</section>

<!-- STATS BAND -->
<section class="stats-band">
  <div class="stats-inner">
    <div class="stat-cell">
      <div class="stat-label">Annual leak</div>
      <div class="stat-value gradient">$1.4M</div>
      <div class="stat-sub">in unrecovered AR</div>
    </div>
    <div class="stat-cell">
      <div class="stat-label">That call</div>
      <div class="stat-value red">18:35</div>
      <div class="stat-sub">Card never charged</div>
    </div>
    <div class="stat-cell">
      <div class="stat-label">AgentCollect version</div>
      <div class="stat-value green">0:40</div>
      <div class="stat-sub">Card charged · receipt sent</div>
    </div>
    <div class="stat-cell">
      <div class="stat-label">Friction loss</div>
      <div class="stat-value">7.6%</div>
      <div class="stat-sub">of past-due AR observed</div>
    </div>
  </div>
</section>

<!-- FEATURES -->
<section class="features">
  <div class="features-head">
    <div class="features-eyebrow">What AgentCollect does for Buildertrend</div>
    <h2 class="features-title">A new <span class="accent">billing operations layer.</span></h2>
    <p class="features-deck">Built for exactly the call we just played you. Already running on Microsoft, Dell, Plaid, Vanta and Checkr — answering billing lines, finding accounts in two seconds, taking credit cards by voice.</p>
  </div>
  <div class="features-grid">
    <div class="feature">
      <div class="feature-icon">⚡</div>
      <div class="feature-title">Two-second account lookup</div>
      <div class="feature-desc">Phonetic + fuzzy match across your full customer base. Tanya searched fifty billion ways. <strong>AgentCollect finds the right Mike Foster in two.</strong></div>
    </div>
    <div class="feature">
      <div class="feature-icon">💳</div>
      <div class="feature-title">Card payment by voice</div>
      <div class="feature-desc">PCI DSS Level 1 compliant. Customer never touches a portal. <strong>Card taken, receipt emailed, invoice settled — in one call.</strong></div>
    </div>
    <div class="feature">
      <div class="feature-icon">🤝</div>
      <div class="feature-title">Human escalation on demand</div>
      <div class="feature-desc">87% of calls resolved by AI alone. <strong>The other 13% routed to your team with full context attached</strong> — never starts over.</div>
    </div>
  </div>
</section>

<!-- COMPARISON -->
<section class="compare-section">
  <div class="compare-eyebrow">The same exact call</div>
  <h2 class="compare-title">Same customer.<br>Two completely different outcomes.</h2>
  <div class="compare-grid">
    <div class="compare-card bad">
      <div class="compare-card-tag">Buildertrend today</div>
      <div class="compare-card-time">18:35</div>
      <p class="compare-card-desc">Two reps refused the credit card. Tanya in billing searched fifty billion ways. Resolution: <strong>"send us an email."</strong> The $1,247 invoice is still open today.</p>
    </div>
    <div class="compare-card good">
      <div class="compare-card-tag">AgentCollect</div>
      <div class="compare-card-time">0:40</div>
      <p class="compare-card-desc">Account found in 2 seconds. Card taken by voice. Receipt emailed before the call ended. <strong>$1,247 settled, customer thanked, account clean.</strong></p>
    </div>
  </div>
</section>

<!-- CTA BAND -->
<section class="cta-band">
  <div class="cta-band-inner">
    <h2 class="cta-band-title">Want to hear the AgentCollect <span class="accent">version of that call?</span></h2>
    <p class="cta-band-deck">Fifteen minutes on my calendar. I'll play you both recordings, side by side, and walk you through the seven other findings the audit surfaced.</p>
    <a href="https://cal.com/johnb/30" class="cta-band-btn">Book 15 minutes <span class="cta-band-arrow">→</span></a>
  </div>
</section>

<!-- TRUSTBAR -->
<div class="trustbar">
  <div class="trust-label">Already running on</div>
  <div class="trust-logos">
    <span>Microsoft</span>
    <span>Dell</span>
    <span>Plaid</span>
    <span>Vanta</span>
    <span>Checkr</span>
  </div>
</div>

<footer class="footer">
  <div>DOC <strong>#BLDR-001</strong> · Confidential · Based on one live mystery-shopped call</div>
  <div>By <strong>John Banner</strong> · AgentCollect · Y Combinator S23</div>
</footer>

<script>
  const audio=document.getElementById('callRec');let activeBtn=null;let stopAt=0;
  function playMoment(btn,start,end){if(activeBtn)activeBtn.classList.remove('playing');activeBtn=btn;btn.classList.add('playing');stopAt=end;audio.currentTime=start;audio.play();}
  audio.addEventListener('timeupdate',()=>{if(stopAt>0&&audio.currentTime>=stopAt){audio.pause();stopAt=0;if(activeBtn){activeBtn.classList.remove('playing');activeBtn=null;}}});
</script>

</body>
</html>