← back to Instant Audit
public/index.html
249 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Instant Website Audit — a $2,000 consultant audit for $99, in minutes</title>
<meta name="description" content="A professional, consultant-grade website audit delivered in minutes. SEO, accessibility, competitor teardown, homepage concepts, and working tools — from $49.">
<style>
:root{
--ink:#1a1a1a; --paper:#faf8f4; --card:#ffffff; --line:#e4ddd2;
--accent:#8a7355; --accent-ink:#6b5840; --muted:#6b6257; --ok:#3f7d54;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Georgia,'Times New Roman',serif;background:var(--paper);color:var(--ink);line-height:1.6}
.sans{font-family:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
header{border-bottom:1px solid var(--line);background:var(--paper)}
.hd{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:1040px;margin:0 auto}
.logo{font-family:-apple-system,sans-serif;font-weight:700;letter-spacing:.02em;font-size:17px}
.logo b{color:var(--accent)}
.hd .rb{font-family:-apple-system,sans-serif;font-size:12px;color:var(--muted)}
/* hero */
.hero{text-align:center;padding:70px 24px 40px}
.eyebrow{font-family:-apple-system,sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:var(--accent)}
.hero h1{font-size:46px;line-height:1.12;letter-spacing:-.02em;margin:14px auto 10px;max-width:16ch}
.hero .sub{font-size:19px;color:var(--muted);max-width:56ch;margin:0 auto}
.hero .strike{color:#a99;text-decoration:line-through}
/* CTA form */
.auditform{max-width:620px;margin:30px auto 6px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.auditform input{font-family:-apple-system,sans-serif;font-size:16px;padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:#fff;min-width:280px;flex:1}
.auditform button{font-family:-apple-system,sans-serif;font-size:16px;font-weight:600;padding:14px 26px;border:0;border-radius:6px;background:var(--ink);color:#fff;cursor:pointer}
.auditform button:hover{background:var(--accent)}
.modehint{font-family:-apple-system,sans-serif;font-size:12px;color:var(--muted);margin-top:8px}
/* tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:56px 0}
.tier{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:26px 22px;display:flex;flex-direction:column}
.tier.feat{border-color:var(--accent);box-shadow:0 6px 26px rgba(138,115,85,.12)}
.tier .name{font-family:-apple-system,sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em}
.tier .price{font-size:40px;margin:8px 0 2px}
.tier .price span{font-size:16px;color:var(--muted)}
.tier .blurb{font-size:15px;color:var(--muted);min-height:44px}
.tier ul{list-style:none;margin:16px 0;font-family:-apple-system,sans-serif;font-size:14px}
.tier li{padding:6px 0;padding-left:22px;position:relative}
.tier li::before{content:'✓';position:absolute;left:0;color:var(--ok);font-weight:700}
.tier li.no{color:#b6ada0}
.tier li.no::before{content:'–';color:#cfc7ba}
.tier .buy{margin-top:auto;font-family:-apple-system,sans-serif;font-weight:600;font-size:15px;padding:12px;border:1px solid var(--ink);border-radius:6px;background:#fff;color:var(--ink);cursor:pointer}
.tier.feat .buy{background:var(--ink);color:#fff}
.tier .buy:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.pill{display:inline-block;font-family:-apple-system,sans-serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:#fff;padding:2px 9px;border-radius:20px;margin-bottom:6px}
/* preview */
.section-title{text-align:center;font-size:30px;margin:12px 0 4px}
.section-sub{text-align:center;color:var(--muted);font-family:-apple-system,sans-serif;font-size:15px;margin-bottom:26px}
.preview{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:0;overflow:hidden;position:relative}
.preview .bar{background:#f0ebe1;border-bottom:1px solid var(--line);padding:10px 16px;font-family:-apple-system,sans-serif;font-size:13px;color:var(--muted)}
.preview .body{padding:26px 28px;position:relative}
.preview h3{font-family:-apple-system,sans-serif;font-size:16px;margin:14px 0 6px}
.preview table{border-collapse:collapse;width:100%;font-family:-apple-system,sans-serif;font-size:13px;margin:8px 0}
.preview th,.preview td{border:1px solid var(--line);padding:7px 9px;text-align:left}
.preview th{background:#f0ebe1}
.redact{background:#d9d2c6;color:transparent;border-radius:2px;user-select:none}
.fade{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(transparent,var(--card))}
.grade{display:inline-block;font-family:-apple-system,sans-serif;font-weight:700;padding:2px 10px;border:1px solid var(--line);border-radius:3px;background:#fff}
/* trust + faq */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:56px 0;font-family:-apple-system,sans-serif}
.trust .t{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px;text-align:center}
.trust .t b{display:block;font-size:26px;margin-bottom:4px}
.trust .t span{color:var(--muted);font-size:14px}
.faq{max-width:760px;margin:0 auto 70px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 20px;margin:10px 0}
.faq summary{font-family:-apple-system,sans-serif;font-weight:600;cursor:pointer;font-size:16px}
.faq p{margin-top:10px;color:var(--muted);font-size:15px}
footer{border-top:1px solid var(--line);text-align:center;padding:30px;font-family:-apple-system,sans-serif;font-size:12px;color:var(--muted)}
@media(max-width:820px){.tiers,.trust{grid-template-columns:1fr}.hero h1{font-size:34px}}
</style>
</head>
<body>
<header>
<div class="hd">
<div class="logo">Instant<b>Audit</b></div>
<div class="rb">Delivered in minutes · from $49</div>
</div>
</header>
<section class="hero">
<div class="eyebrow">Website Audit, Productized</div>
<h1>A <span class="strike">$2,000</span> consultant website audit for $99, delivered in minutes</h1>
<p class="sub">Enter your website. Our generators run a consultant-grade audit — SEO, accessibility,
a competitor teardown, hand-built homepage concepts, and working visitor tools — and assemble a
multi-page report you can open in any browser.</p>
<form class="auditform" id="ctaForm" onsubmit="return false">
<input type="url" id="ctaUrl" placeholder="https://your-website.com" required autocomplete="url">
<button type="button" onclick="scrollToTiers()">Get my audit →</button>
</form>
<div class="modehint" id="modehint">Loading pricing…</div>
</section>
<div class="wrap">
<!-- TIERS -->
<section id="tiers">
<h2 class="section-title">Choose your depth</h2>
<p class="section-sub sans">One-time payment. No subscription. Report delivered as a private link.</p>
<div class="tiers">
<div class="tier">
<div class="name">AUDIT LITE</div>
<div class="price">$49</div>
<div class="blurb">The fast-win report to fix your fundamentals.</div>
<ul>
<li>Full site audit & grade</li>
<li>Pack of working visitor tools</li>
<li class="no">Peer survey</li>
<li class="no">Trusted-sources hub</li>
<li class="no">Competitor teardown</li>
<li class="no">Homepage concepts</li>
</ul>
<button class="buy" data-tier="lite">Get Lite — $49</button>
</div>
<div class="tier feat">
<span class="pill">Most popular</span>
<div class="name">AUDIT STANDARD</div>
<div class="price">$99</div>
<div class="blurb">The complete positioning report for your niche.</div>
<ul>
<li>Full site audit & grade</li>
<li>Pack of working visitor tools</li>
<li>Peer survey (what rivals do)</li>
<li>Trusted-sources hub</li>
<li class="no">Competitor teardown</li>
<li class="no">Homepage concepts</li>
</ul>
<button class="buy" data-tier="standard">Get Standard — $99</button>
</div>
<div class="tier">
<div class="name">AUDIT PRO</div>
<div class="price">$199</div>
<div class="blurb">Everything, plus a teardown and new homepage concepts.</div>
<ul>
<li>Full site audit & grade</li>
<li>Pack of working visitor tools</li>
<li>Peer survey (what rivals do)</li>
<li>Trusted-sources hub</li>
<li>Competitor teardown</li>
<li>Hand-built homepage concepts</li>
</ul>
<button class="buy" data-tier="pro">Get Pro — $199</button>
</div>
</div>
</section>
<!-- PREVIEW -->
<section style="margin:20px 0 56px">
<h2 class="section-title">A peek at the report</h2>
<p class="section-sub sans">Sample page — names and specifics redacted until you buy.</p>
<div class="preview">
<div class="bar">report.html · Site Audit — <span class="redact">yoursite.com</span></div>
<div class="body">
<h3>Executive grade <span class="grade">B+</span></h3>
<p class="sans" style="font-size:14px;color:var(--muted)">Homepage fundamentals for
<span class="redact">████████████</span> — the signals that drive search visibility and first-impression conversion.</p>
<h3>Core signals</h3>
<table>
<tr><th>Signal</th><th>Observed</th><th>Verdict</th></tr>
<tr><td><title> tag</td><td><span class="redact">████████████</span></td><td>Good length</td></tr>
<tr><td>Meta description</td><td>MISSING</td><td>Add one (150–160 chars)</td></tr>
<tr><td><h1> heading</td><td>Present</td><td>Pass</td></tr>
<tr><td>Schema.org markup</td><td><span class="redact">████</span></td><td>Add Organization JSON-LD</td></tr>
</table>
<h3>Top recommended additions</h3>
<p class="sans" style="font-size:14px"><span class="redact">██████████████████████████████████████████</span></p>
<p class="sans" style="font-size:14px"><span class="redact">████████████████████████████████</span></p>
<div class="fade"></div>
</div>
</div>
</section>
<!-- TRUST -->
<section class="trust">
<div class="t"><b>~ minutes</b><span>From URL to finished multi-page report</span></div>
<div class="t"><b>6 lenses</b><span>Audit · tools · peers · hub · competitors · concepts</span></div>
<div class="t"><b>Private</b><span>Your report is a confidential link, only for you</span></div>
</section>
<!-- FAQ -->
<section class="faq">
<h2 class="section-title">Questions</h2>
<p class="section-sub sans"> </p>
<details><summary>How is this a $2,000 audit for a fraction of the price?</summary>
<p>The analysis a consultant does by hand — SEO, accessibility, competitor research, homepage
concepts — is produced by our generators in minutes. Same deliverable shape, a fraction of the cost.</p></details>
<details><summary>What do I actually receive?</summary>
<p>A multi-page HTML report you open in any browser: a graded site audit, a pack of working
visitor tools, and — depending on your tier — a peer survey, a trusted-sources hub, a competitor
teardown, and hand-built homepage concepts.</p></details>
<details><summary>Do you need access to my site?</summary>
<p>No. Just the public URL. We analyze what a visitor (and a search engine) sees.</p></details>
<details><summary>How fast is delivery?</summary>
<p>Minutes. You get a private link the moment the report is assembled, plus a copy by email.</p></details>
<details><summary>Is this a subscription?</summary>
<p>No. It's a one-time payment per audit.</p></details>
</section>
</div>
<footer>
Instant Website Audit · productized on the SDCC generator stack · reports generated locally.
</footer>
<script>
let CFG = null;
async function loadCfg(){
try{
const r = await fetch('/api/sell/config'); CFG = await r.json();
const el = document.getElementById('modehint');
if(CFG.mode === 'mock') el.textContent = 'Local demo — checkout runs in MOCK mode (no charge, full report still generated).';
else if(CFG.mode === 'test') el.textContent = 'Stripe TEST mode — use card 4242 4242 4242 4242. No real charge.';
else if(CFG.mode === 'live-key-refused') el.textContent = 'Money routes disabled (live key present — TEST-mode only).';
}catch(e){ document.getElementById('modehint').textContent=''; }
}
loadCfg();
function scrollToTiers(){ document.getElementById('tiers').scrollIntoView({behavior:'smooth'}); }
document.querySelectorAll('.buy').forEach(b=>{
b.addEventListener('click', async ()=>{
const tier = b.dataset.tier;
const url = (document.getElementById('ctaUrl').value || '').trim();
if(!/^https?:\/\//i.test(url)){
document.getElementById('ctaUrl').focus();
document.getElementById('ctaUrl').scrollIntoView({behavior:'smooth',block:'center'});
document.getElementById('modehint').textContent = 'Enter your full website URL (https://…) at the top first.';
return;
}
b.disabled = true; const orig = b.textContent; b.textContent = 'Starting…';
try{
const r = await fetch('/api/checkout',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({tier,url})});
const d = await r.json();
if(d.url) window.location = d.url;
else { b.textContent = orig; b.disabled=false; alert(d.error||'Something went wrong.'); }
}catch(e){ b.textContent=orig; b.disabled=false; alert('Network error.'); }
});
});
</script>
</body>
</html>