← back to Ventura Corridor
public/sales-nav-signup.html
255 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sales Navigator signup helper · DW</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>(function(){try{var t=localStorage.getItem('vc-theme');document.documentElement.dataset.theme=(t==='light'||t==='dark')?t:'dark';}catch(e){document.documentElement.dataset.theme='dark';}})();</script>
<link rel="stylesheet" href="/theme.css">
<script src="/theme.js" defer></script>
<style>
:root {
--noir: #0a0a0c; --noir-rise: #131316; --ink: #f0ece2;
--ink-mute: #888475; --metal: #b89968; --metal-glow: #d4b683;
--rule: #2a2622;
--serif: 'Cormorant Garamond', 'Times New Roman', serif;
--sans: 'Inter', -apple-system, system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
--li: #0a66c2; --green: #6a9b73; --amber: #c4a05c; --red: #b66565;
}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Inter:wght@200;300;400;500;600&family=JetBrains+Mono:wght@200;300;400&display=swap');
html, body { margin: 0; background: var(--noir); color: var(--ink); font-family: var(--sans); font-weight: 300; }
* { box-sizing: border-box; }
header { position: sticky; top: 0; z-index: 10;
background: linear-gradient(180deg, rgba(10,10,12,.97) 70%, rgba(10,10,12,0));
padding: 22px 32px 16px; border-bottom: 1px solid var(--rule);
display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
header h1 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0; }
header h1 em { font-style: italic; color: var(--metal); }
.sub { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-mute); margin-top: 2px; }
nav.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
nav.tabs a { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-mute); text-decoration: none; padding: 5px 10px; border: 1px solid var(--rule); }
nav.tabs a.active, nav.tabs a:hover { color: var(--metal); border-color: var(--metal); }
.stack { padding: 24px 32px; max-width: 1100px; }
section { margin-bottom: 28px; padding: 22px 26px; border: 1px solid var(--rule); background: var(--noir-rise); }
section h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; margin: 0 0 12px; color: var(--ink); }
section h2 em { color: var(--metal); font-style: normal; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; vertical-align: middle; margin-left: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); font-weight: 400; }
tr.recommended { background: rgba(184,153,104,0.04); }
tr.recommended td:first-child { border-left: 3px solid var(--metal); }
td.tier { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--metal); }
td.cost { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--metal-glow); font-variant-numeric: tabular-nums; }
td.unique { font-size: 11px; color: var(--ink); line-height: 1.55; }
.signup-cta {
display: inline-block; padding: 14px 24px; margin: 12px 8px 4px 0;
border: 1px solid var(--li); background: var(--li); color: white;
font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
text-decoration: none; font-family: var(--sans); font-weight: 500;
transition: all 200ms ease;
}
.signup-cta:hover { background: transparent; color: var(--li); }
.signup-cta.secondary { background: transparent; color: var(--metal); border-color: var(--metal); }
.signup-cta.secondary:hover { background: rgba(184,153,104,0.08); }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: 10px 0 10px 28px; border-bottom: 1px solid var(--rule); position: relative; font-size: 12px; line-height: 1.55; color: var(--ink); }
.checklist li:before { content: '☐'; position: absolute; left: 0; top: 8px; color: var(--metal); font-size: 16px; }
.checklist li small { display: block; color: var(--ink-mute); font-size: 10px; margin-top: 4px; font-family: var(--mono); letter-spacing: .08em; }
.status-card {
padding: 16px 20px; background: var(--noir); border: 1px solid var(--rule);
margin-bottom: 14px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.status-card .label { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-mute); }
.status-card .val { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--metal); font-variant-numeric: tabular-nums; }
.status-card.warn { border-color: var(--amber); background: rgba(196,160,92,0.04); }
.status-card.warn .val { color: var(--amber); }
.status-card.danger { border-color: var(--red); background: rgba(182,101,101,0.04); }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-top: 12px; }
.form-row label { display: flex; flex-direction: column; gap: 4px; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); }
.form-row select, .form-row input { background: var(--noir); border: 1px solid var(--rule); color: var(--ink); padding: 6px 10px; font-family: var(--sans); font-size: 12px; }
button {
background: transparent; border: 1px solid var(--metal); color: var(--metal);
padding: 7px 14px; cursor: pointer; font-family: inherit;
font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
}
button:hover { background: rgba(184,153,104,0.06); }
</style>
</head>
<body>
<header>
<div>
<h1>Sales Navigator <em>signup</em> helper</h1>
<div class="sub">decision support · trial tracker · post-signup setup</div>
</div>
<nav class="tabs">
<a href="/today.html">today</a>
<a href="/pitches.html">pitches</a>
<a href="/walk-route.html">walk route</a>
<a href="/responses.html">responses</a>
<a href="/postcards.html">postcards</a>
<a href="/buildings.html">buildings</a>
<a href="/crawl-derby.html">🏇 derby</a>
<a href="/linkedin.html">linkedin</a>
<a href="/sales-nav-signup.html" class="active">signup</a>
<span class="theme-toggle-host" style="display:inline-flex;align-items:center;margin-left:6px"></span>
</nav>
</header>
<div class="stack">
<section>
<h2>Current state<em>your subscription</em></h2>
<div id="status"></div>
<div class="form-row">
<label>Tier
<select id="tier">
<option value="none">None</option>
<option value="premium-business">Premium Business ($60/mo)</option>
<option value="sales-nav-core">Sales Nav Core ($80/mo)</option>
<option value="sales-nav-advanced">Sales Nav Advanced ($130/mo)</option>
</select>
</label>
<label>Trial ends
<input type="date" id="trial-ends">
</label>
<label>Active since
<input type="date" id="active-since">
</label>
<button id="save-sub">Save</button>
</div>
</section>
<section>
<h2>Tier comparison<em>what you actually get</em></h2>
<table>
<thead><tr><th>Tier</th><th>Cost</th><th>InMails</th><th>Genuinely unique value</th><th>Verdict</th></tr></thead>
<tbody>
<tr><td class="tier">Premium Career</td><td class="cost">$30/mo</td><td>5</td><td class="unique">Who viewed your profile · resume insights — NOT for outbound sales</td><td style="color:var(--red)">skip</td></tr>
<tr><td class="tier">Premium Business</td><td class="cost">$60/mo</td><td>15</td><td class="unique">15 InMails + advanced search · low ceiling for B2B outreach</td><td style="color:var(--red)">skip</td></tr>
<tr class="recommended"><td class="tier">Sales Nav Core ⭐</td><td class="cost">$80/mo</td><td>50</td><td class="unique">50 InMails to non-connections · job-change alerts · "posted recently" feed · saved leads w/ CRM sync</td><td style="color:var(--green)">recommend (start here)</td></tr>
<tr><td class="tier">Sales Nav Advanced</td><td class="cost">$130/mo</td><td>50</td><td class="unique"><strong>TeamLink mutual-connection intros</strong> (4-5× reply rate over cold InMail) · Buyer Intent signals · Smart Links engagement tracking</td><td style="color:var(--amber)">if 500+ existing connections</td></tr>
<tr><td class="tier">Recruiter</td><td class="cost">$170/mo</td><td>30</td><td class="unique">Built for recruiting candidates — not B2B sales · 30 InMails actually fewer than Core</td><td style="color:var(--red)">skip</td></tr>
<tr><td class="tier">Sales Insights API</td><td class="cost">$1,600+/yr</td><td>—</td><td class="unique">Programmatic API access · enterprise partner-only · for at-scale automation</td><td style="color:var(--red)">overkill</td></tr>
</tbody>
</table>
</section>
<section>
<h2>Sign up<em>30-day free trial · either tier</em></h2>
<p style="color:var(--ink-mute);font-size:12px;line-height:1.6">My honest recommendation: <strong>sign up for Advanced</strong> — you can downgrade after testing TeamLink during the trial, but you can't upgrade-test it the other way around. Both tiers offer 30-day free trials. <strong>You can cancel before day 30 with zero charge.</strong></p>
<div style="margin-top:14px">
<a class="signup-cta" href="https://www.linkedin.com/sales/signup" target="_blank">Sign up Sales Navigator ↗</a>
<a class="signup-cta secondary" href="https://www.linkedin.com/premium/products" target="_blank">Compare all tiers on LI ↗</a>
</div>
<p style="color:var(--ink-mute);font-size:11px;margin-top:14px">After signing up, come back here and update the form above with your tier + trial-end date. The dashboard will track your usage.</p>
</section>
<section>
<h2>Day-1 setup checklist<em>do these immediately after signing up</em></h2>
<ol class="checklist">
<li><strong>Build saved search 1: "Ventura Corridor — Trade"</strong>
<small>Filters: industry IN (Wallcoverings · Furniture · Interior Design · Furnishings) + geography 25mi from 91423 + seniority Owner/Founder/Principal</small>
</li>
<li><strong>Build saved search 2: "Ventura Corridor — Hospitality"</strong>
<small>industry IN (Restaurants · Hotels · Spas · Bars) + same geography + seniority Owner/GM</small>
</li>
<li><strong>Build saved search 3: "Ventura Corridor — Professional Services"</strong>
<small>industry IN (Law Practice · Medical Practice · Real Estate) + same geography + seniority Partner/Principal</small>
</li>
<li><strong>Run TeamLink against existing connections</strong>
<small>Click any walking-distance pitch → see "X of your connections know someone here." If ≥10 mutual intros surface → keep Advanced. <5 → downgrade to Core.</small>
</li>
<li><strong>Set up "lead alert" on each saved search</strong>
<small>Alerts you when a new person matches your filter — you'll catch fresh hires + new entrants weekly</small>
</li>
<li><strong>Pick your daily window: 15 min</strong>
<small>Sales Nav delivers value only if you check it daily. Set a calendar block — same time, every weekday.</small>
</li>
<li><strong>Send your first 3 InMails by end of week 1</strong>
<small>Use the pre-drafted li_message from the pitches table — Copy DM button on /linkedin.html. Track response rate.</small>
</li>
</ol>
</section>
<section>
<h2>Trial decision rubric<em>day 25 reminder</em></h2>
<p style="color:var(--ink-mute);font-size:12px">5 days before trial ends, the dashboard will show a banner. Decide based on these numbers:</p>
<table>
<thead><tr><th>Metric</th><th>Renew if…</th><th>Cancel if…</th></tr></thead>
<tbody>
<tr><td>InMails sent in trial</td><td>≥30 (you used the tool)</td><td><15 (you didn't bother)</td></tr>
<tr><td>Reply rate</td><td>≥10% (it's working)</td><td><5% (cold to your audience)</td></tr>
<tr><td>TeamLink intros found (Advanced)</td><td>≥10 mutual paths to corridor targets</td><td><5 — downgrade to Core</td></tr>
<tr><td>Pipeline value created</td><td>≥$5K in conversations started</td><td>$0 — pipeline cold</td></tr>
</tbody>
</table>
</section>
</div>
<script>
async function loadStatus() {
const r = await fetch('/api/linkedin/subscription').then(r => r.json());
const status = document.getElementById('status');
const tier = r.tier || 'none';
if (tier === 'none') {
status.innerHTML = `
<div class="status-card danger">
<div><div class="label">Subscription</div><div class="val">Not subscribed</div></div>
<div style="color:var(--ink-mute);font-size:12px;flex:1;min-width:200px">No paid LinkedIn yet. Pick a tier below + sign up. After signup, come back to this form to track your trial.</div>
</div>`;
} else {
const cls = r.trial_status === 'ending_soon' ? 'warn' : r.trial_status === 'expired' ? 'danger' : '';
status.innerHTML = `
<div class="status-card ${cls}">
<div><div class="label">Tier</div><div class="val">${tier}</div></div>
<div><div class="label">Cost / mo</div><div class="val">$${r.monthly_cost_usd || '0'}</div></div>
<div><div class="label">Quota</div><div class="val">${r.monthly_inmail_quota}</div></div>
<div><div class="label">Used this month</div><div class="val">${r.used_this_month || 0}</div></div>
<div><div class="label">Remaining</div><div class="val">${r.credits_remaining || 0}</div></div>
<div><div class="label">Replies</div><div class="val">${r.replied_this_month || 0}</div></div>
${r.trial_ends_at ? `<div><div class="label">Trial ends</div><div class="val">${r.trial_days_remaining} days</div></div>` : ''}
</div>
${r.trial_status === 'ending_soon' ? '<div style="padding:12px 16px;border:1px solid var(--amber);background:rgba(196,160,92,0.04);font-size:12px;color:var(--amber);margin-bottom:12px"><strong>Trial ends in ' + r.trial_days_remaining + ' days.</strong> Decide using the rubric below — renew, downgrade to Core, or cancel.</div>' : ''}
${r.trial_status === 'expired' ? '<div style="padding:12px 16px;border:1px solid var(--red);background:rgba(182,101,101,0.04);font-size:12px;color:var(--red);margin-bottom:12px"><strong>Trial expired.</strong> Either you\\'re paying now, or you cancelled. Update the form to reflect.</div>' : ''}
`;
}
document.getElementById('tier').value = tier;
if (r.trial_ends_at) document.getElementById('trial-ends').value = r.trial_ends_at.split('T')[0];
if (r.active_since) document.getElementById('active-since').value = r.active_since.split('T')[0];
}
document.getElementById('save-sub').addEventListener('click', async () => {
const tier = document.getElementById('tier').value;
const trialEnds = document.getElementById('trial-ends').value || null;
const activeSince = document.getElementById('active-since').value || null;
const quota = tier === 'sales-nav-core' ? 50 : tier === 'sales-nav-advanced' ? 50 : tier === 'premium-business' ? 15 : tier === 'premium-career' ? 5 : 0;
const cost = tier === 'sales-nav-core' ? 80 : tier === 'sales-nav-advanced' ? 130 : tier === 'premium-business' ? 60 : tier === 'premium-career' ? 30 : 0;
await fetch('/api/linkedin/subscription', {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
tier,
trial_ends_at: trialEnds,
active_since: activeSince,
monthly_inmail_quota: quota,
monthly_cost_usd: cost,
})
});
loadStatus();
});
loadStatus();
</script>
</body>
</html>