-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathguide.html
More file actions
175 lines (170 loc) · 10.2 KB
/
Copy pathguide.html
File metadata and controls
175 lines (170 loc) · 10.2 KB
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
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to use — Velocity Console</title>
<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=Playfair+Display:wght@600;700;800&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{--emerald:#0D6B4F;--forest:#094D3A;--navy:#0A1D37;--gold:#D4AF37;--slate:#475569;
--ink:#0B1620;--muted:#6B7B82;--line:#E6ECEA;--bg:#F4F6F5;--card:#fff;--lowc:#9FB0AE;
--head:'Playfair Display',Georgia,serif;--body:'Montserrat',-apple-system,Segoe UI,sans-serif;
--sh:0 8px 24px rgba(9,29,55,.09);}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
header{background:linear-gradient(120deg,#0D6B4F,#094D3A 55%,#0A1D37);color:#fff;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
.logo{font-family:var(--head);font-weight:700;font-size:20px}.logo .g{color:var(--gold)}
.back{text-decoration:none;color:#fff;font-size:13px;font-weight:600;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:9px 15px;border-radius:10px}
.back:hover{background:rgba(255,255,255,.2)}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}
.hero{padding:56px 0 34px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#B8941f}
.hero h1{font-family:var(--head);font-weight:800;font-size:clamp(30px,5vw,46px);line-height:1.08;color:var(--navy);margin:12px 0 14px}
.hero p{font-size:17px;color:var(--slate);max-width:64ch}
.cta{display:inline-block;margin-top:22px;background:var(--emerald);color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:13px 22px;border-radius:12px;box-shadow:var(--sh)}
.cta:hover{background:var(--forest)}
section{padding:26px 0}
h2{font-family:var(--head);font-weight:700;font-size:26px;color:var(--navy);margin-bottom:6px}
.sub{color:var(--muted);font-size:14px;margin-bottom:22px}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:720px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--sh)}
.step .n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:rgba(13,107,79,.12);color:var(--emerald);font-family:var(--head);font-weight:700;font-size:16px;margin-bottom:12px}
.step h3{font-size:18px;color:var(--navy);margin-bottom:8px}
.step p{font-size:14px;color:var(--slate)}
.step ul{margin:12px 0 0;padding-left:18px}
.step li{font-size:13.5px;color:var(--ink);margin-bottom:6px}
.step li b{color:var(--navy)}
.step .tip{margin-top:14px;font-size:12.5px;color:var(--muted);background:#F6F8F7;border-radius:10px;padding:11px 13px}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh)}
th,td{text-align:left;padding:13px 16px;font-size:14px;border-bottom:1px solid var(--line)}
th{background:#F7FAF9;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
tr:last-child td{border-bottom:0}
.pill{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:100px}
.pill.high{background:rgba(13,107,79,.13);color:var(--emerald)}
.pill.medium{background:rgba(212,175,55,.2);color:#8a6d12}
.pill.low{background:rgba(71,85,105,.12);color:var(--slate)}
.hm{background:var(--navy);color:#fff;border-radius:20px;padding:32px;margin-top:8px}
.hm h2{color:#fff}
.hm .sub{color:#aebfb8}
.hm .grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
@media(max-width:720px){.hm .grid{grid-template-columns:1fr}}
.hm h4{font-family:var(--head);font-size:16px;color:var(--gold);margin-bottom:10px}
.hm ol{padding-left:20px}.hm ol li{margin-bottom:8px;color:#dbe7e2;font-size:14px}
.hm ul{list-style:none;padding:0}.hm ul li{color:#dbe7e2;font-size:14px;margin-bottom:9px;padding-left:22px;position:relative}
.hm ul li::before{content:"\2713";position:absolute;left:0;color:#43d6a6;font-weight:700}
footer{text-align:center;padding:44px 24px 56px;color:var(--muted);font-size:13px}
footer .brand{font-family:var(--head);font-weight:700;font-size:18px;color:var(--navy)}
footer .brand .g{color:var(--gold)}
footer .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#B8941f;margin-top:6px}
</style></head>
<body>
<header>
<span class="logo">Velocity<span class="g"> Console</span> · Guide</span>
<a class="back" href="console.html">← Back to the console</a>
</header>
<div class="wrap">
<div class="hero">
<span class="eyebrow">How to use</span>
<h1>A 60-second guide to the Velocity Console.</h1>
<p>The Console is a live lead-triage tool. It takes 400 sample leads, scores every one on BANT (Budget · Authority · Need · Timeline), and lets you filter, inspect, route, and even score brand-new leads in real time. Here's how to drive it.</p>
<a class="cta" href="console.html">Open the console →</a>
</div>
<section>
<h2>Four things you can do</h2>
<div class="sub">Everything runs in your browser — no login, no server, no wait.</div>
<div class="steps">
<div class="step">
<span class="n">1</span>
<h3>Read the pipeline at a glance</h3>
<p>The strip of numbers at the top is your live snapshot. It updates instantly whenever you filter.</p>
<ul>
<li><b>Leads in view</b> · <b>High / Medium / Low</b> counts</li>
<li><b>Avg BANT / 12</b> — average score of what's shown</li>
<li><b>Never contacted</b> — leads the old manual process dropped</li>
</ul>
</div>
<div class="step">
<span class="n">2</span>
<h3>Work the queue</h3>
<p>Slice the 400 leads down to exactly what you care about.</p>
<ul>
<li><b>Search</b> — type any word (region, role, a phrase in the message)</li>
<li><b>Tier chips</b> — All / High / Medium / Low</li>
<li><b>Source</b> and <b>Sort</b> — by score, newest, or slowest response</li>
<li><b>Only never-contacted</b> — surface the dropped leads</li>
</ul>
</div>
<div class="step">
<span class="n">3</span>
<h3>Open a lead & route it</h3>
<p>Click any row. The panel on the right shows the full picture.</p>
<ul>
<li>The lead's own <b>message</b> and details</li>
<li>Its <b>BANT bars</b> and total, with the <b>reason</b></li>
<li>The <b>recommended action + SLA</b>, and how long it actually waited</li>
<li>Hit <b>Route this lead</b> to action it — the queue updates</li>
</ul>
</div>
<div class="step">
<span class="n">4</span>
<h3>Score a brand-new lead</h3>
<p>Click <b>⚡ Score a lead</b> (top-right). This is the real engine, live.</p>
<ul>
<li>Type or paste any message, or click a <b>preset</b> (Strong / Warm / Cold)</li>
<li>Pick source, role, size → <b>Score this lead</b></li>
<li>See its BANT breakdown, tier, and routing decision instantly</li>
</ul>
<div class="tip">This uses the same scoring logic as the 400 leads — proof the engine actually reads and reasons over the text, not a canned result.</div>
</div>
</div>
</section>
<section>
<h2>What the scores mean</h2>
<div class="sub">Each lead is scored 0–3 on four signals; the total (0–12) sets the priority and the routing SLA.</div>
<table>
<tr><th>Signal</th><th>What it measures</th></tr>
<tr><td><b>Budget</b></td><td>Money / approval / spend signals — is there budget to buy?</td></tr>
<tr><td><b>Authority</b></td><td>Is the writer a decision-maker or buyer? (role + language)</td></tr>
<tr><td><b>Need</b></td><td>How specific and pressing is the pain?</td></tr>
<tr><td><b>Timeline</b></td><td>How soon must they act? (deadline / buying now)</td></tr>
</table>
<table style="margin-top:18px">
<tr><th>Tier</th><th>BANT total</th><th>Routing SLA</th><th>Action</th></tr>
<tr><td><span class="pill high">High</span></td><td>8–12</td><td>5 min</td><td>Alert an AE + auto-book a call</td></tr>
<tr><td><span class="pill medium">Medium</span></td><td>3–7</td><td>60 min</td><td>SDR queue, same-hour follow-up</td></tr>
<tr><td><span class="pill low">Low</span></td><td>0–2</td><td>24 h</td><td>Automated nurture sequence</td></tr>
</table>
</section>
<section>
<div class="hm">
<span class="eyebrow" style="color:var(--gold)">For reviewers</span>
<h2 style="margin-top:8px">What this demonstrates</h2>
<div class="sub">A quick guide if you're evaluating the work behind it.</div>
<div class="grid">
<div>
<h4>30-second demo</h4>
<ol>
<li>"Here's a real intake queue — 400 leads, scored and prioritized." <i>(filter to High)</i></li>
<li>"Click a hot one — it explains why it's high and what to do." <i>(open a lead)</i></li>
<li>"And it's not a mockup —" <i>(⚡ Score a lead → a preset → Score)</i> "same logic, running live on anything you type."</li>
</ol>
</div>
<div>
<h4>Under the hood</h4>
<ul>
<li>LLM-based BANT scoring (Claude) with structured JSON outputs</li>
<li>A deterministic rules engine, ported to run client-side</li>
<li>Interactive data UI — filtering, sorting, live KPIs, routing state</li>
<li>Zero dependencies — hostable free on GitHub Pages</li>
</ul>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="brand">AceLiora<span class="g"> AI</span></div>
<div class="tag">Accelerate Change · Sustain Excellence</div>
<p style="margin-top:14px"><a href="console.html" style="color:var(--emerald);font-weight:600;text-decoration:none">← Back to the Velocity Console</a></p>
</footer>
</body></html>