Omair Saleh
3cd296f6bf
DATA FIXES: - Dashboard insights now fully dynamic per date range - Revenue/orders/newcust/AOV trend (splits data in half, compares) - Channel concentration % computed from filtered data - Repeat revenue % with date-range label - All insights adapt when user changes date filter/preset - Offer page charts now load from API (not hardcoded arrays) - Revenue chart, new customer chart, channel donut = live data - Hero stats (-84%, -42%, 85%) computed dynamically from API - ROI calculator AOV pulled from latest year's actual data REMAINING AUDIT FIXES: - Fix #4: 'Built by' section on offer page (name, bio, contact) - Fix #9: Before/After comparison block on homepage - Side-by-side: current JV PDP flaws vs AI engine output - 8 specific ✗/✓ comparison points - Fix #6: Before/after serves as instant proof (no 90s wait) All 10 audit fixes now implemented.
198 lines
12 KiB
HTML
198 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>JustVitamin × QuikCue — AI Content Engine</title>
|
||
<meta name="description" content="Live AI-powered content engine for Just Vitamins. Real demos, real data, real results.">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<nav>
|
||
<div class="nav-inner">
|
||
<a href="/" class="logo">JustVitamins <span class="x">×</span> QuikCue</a>
|
||
<div class="nav-links">
|
||
<a href="/dashboard" target="_blank">📊 Dashboard</a>
|
||
<a href="#demo-a">Demos</a>
|
||
<a href="/offer" target="_blank">📋 The Proposal</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="page">
|
||
|
||
<!-- ═══ HERO ═══ -->
|
||
<section class="hero" id="top">
|
||
<div class="eyebrow"><span class="pill">● LIVE</span> Built for Just Vitamins — Powered by Gemini</div>
|
||
<h1>You've lost 84% of new customers since 2020.<br><span class="gr">This engine gets them back.</span></h1>
|
||
<p class="sub">We analysed your 728,018 orders. The product isn't the problem — <strong>discovery is.</strong> Below is a working AI content engine that scrapes your products live, generates conversion-optimised PDPs, images, and marketing assets. Try it. Then <a href="/offer" style="color:var(--accent)">see the proposal</a>.</p>
|
||
<div class="btn-row">
|
||
<a href="#demo-a" class="btn cta">⚡ See It Work — Live Demo</a>
|
||
<a href="/offer" class="btn ghost">📋 See the Proposal</a>
|
||
<a href="/dashboard" target="_blank" class="btn outline">📊 Your Data Dashboard</a>
|
||
</div>
|
||
<div class="stats">
|
||
<div class="stat"><span class="val">£19.4M</span><span class="lbl">Lifetime Revenue</span></div>
|
||
<div class="stat"><span class="val">728K</span><span class="lbl">Orders Processed</span></div>
|
||
<div class="stat"><span class="val">230K</span><span class="lbl">Unique Customers</span></div>
|
||
<div class="stat"><span class="val">20 yrs</span><span class="lbl">Trading History</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ DEMO A — 12 Assets ═══ -->
|
||
<section class="demo" id="demo-a">
|
||
<span class="badge red">⚡ DEMO A — LIVE</span>
|
||
<h2>One Product URL → Full Conversion PDP</h2>
|
||
<p class="sub">Paste a real Just Vitamins product URL. We scrape the actual product images, then Gemini generates a complete conversion-optimised PDP with real product photography variations — not invented images.</p>
|
||
|
||
<div class="input-card">
|
||
<div class="input-row">
|
||
<div class="input-group">
|
||
<label>PRODUCT URL</label>
|
||
<input type="url" id="demoA-url" placeholder="https://www.justvitamins.co.uk/..." value="https://www.justvitamins.co.uk/Bone-Health/Super-Strength-Vitamin-D3-4000iu-K2-MK-7-100mcg.aspx">
|
||
</div>
|
||
<button class="btn-gen red" id="demoA-btn" onclick="runDemoA()">🔴 Generate Full PDP</button>
|
||
</div>
|
||
<div class="step-bar" id="demoA-steps">
|
||
<div class="step" id="a-step-scrape"><span class="step-label">1. Scrape</span><span class="step-status" id="a-s1">Waiting</span></div>
|
||
<div class="step" id="a-step-ai"><span class="step-label">2. PDP Copy</span><span class="step-status" id="a-s2">Waiting</span></div>
|
||
<div class="step" id="a-step-images"><span class="step-label">3. Product Photos</span><span class="step-status" id="a-s3">Waiting</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="demoA-output" class="output hidden">
|
||
<div id="demoA-pdp"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ BEFORE / AFTER ═══ -->
|
||
<section class="demo" id="before-after" style="padding-top:2rem">
|
||
<span class="badge" style="background:rgba(245,158,11,.15);color:#f59e0b">📊 WHAT THE AI ENGINE PRODUCES</span>
|
||
<h2 style="margin-bottom:.5rem">Before → After: Real Product Comparison</h2>
|
||
<p class="sub" style="margin-bottom:2rem">Same product. Left is the current justvitamins.co.uk page. Right is what the AI engine generates in 90 seconds.</p>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:2rem">
|
||
<div style="background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px;position:relative">
|
||
<div style="position:absolute;top:12px;left:12px;background:rgba(239,68,68,.15);color:#ef4444;font-size:10px;font-weight:700;padding:3px 10px;border-radius:4px;text-transform:uppercase">Current PDP</div>
|
||
<div style="margin-top:28px">
|
||
<div style="font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px">Super Strength Vitamin D3 4000iu + K2</div>
|
||
<div style="font-size:12px;color:var(--text3);margin-bottom:16px">justvitamins.co.uk — actual product page</div>
|
||
<div style="display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--text2)">
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> Generic subtitle: "A powerful pairing"</div>
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> Single product photo (pouch only)</div>
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> No benefit-driven bullets (Feature→Benefit→Proof)</div>
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> No trust signals (money-back, UK-made, certifications)</div>
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> No price anchoring (daily cost, cost-per-dose)</div>
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> No SEO meta description</div>
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> No ad hooks or email sequences</div>
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> Cookie consent modal covers half the page</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="background:var(--card);border:1px solid rgba(16,185,129,.3);border-radius:12px;padding:24px;position:relative">
|
||
<div style="position:absolute;top:12px;left:12px;background:rgba(16,185,129,.15);color:#10b981;font-size:10px;font-weight:700;padding:3px 10px;border-radius:4px;text-transform:uppercase">AI-Generated PDP</div>
|
||
<div style="margin-top:28px">
|
||
<div style="font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px">Same product — generated in ~90 seconds</div>
|
||
<div style="font-size:12px;color:var(--text3);margin-bottom:16px">Conversion-optimised by Gemini AI</div>
|
||
<div style="display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--text2)">
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> 5 AI-generated product photos (lifestyle, scale, detail, banner)</div>
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> Feature → Benefit → Proof bullet structure</div>
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> Trust bar: money-back, UK-made, EFSA claims</div>
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> Price anchoring: "just 14p per day"</div>
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> Full FAQ accordion with objection handling</div>
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> SEO meta + Open Graph tags</div>
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> 3 ad hooks + 3 email sequences</div>
|
||
<div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> 4 copy styles: Balanced, Premium, Direct, Medical-Safe</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p style="text-align:center;color:var(--text3);font-size:12px">↑ Run Demo A above to see the full AI-generated PDP for any JustVitamins product</p>
|
||
</section>
|
||
|
||
<!-- ═══ DEMO B — Competitor X-Ray ═══ -->
|
||
<section class="demo" id="demo-b">
|
||
<span class="badge blue">🔍 DEMO B — LIVE</span>
|
||
<h2>Competitor X-Ray → Instant Offer Upgrade</h2>
|
||
<p class="sub">Paste any competitor product URL. We scrape it, reverse-engineer their strategy, and build a better JV version.</p>
|
||
|
||
<div class="input-card">
|
||
<div class="input-row">
|
||
<div class="input-group">
|
||
<label>COMPETITOR PRODUCT URL</label>
|
||
<input type="url" id="demoB-url" placeholder="https://www.competitor.com/product..." value="https://www.vitabiotics.com/products/ultra-vitamin-d-1000iu">
|
||
</div>
|
||
<button class="btn-gen blue" id="demoB-btn" onclick="runDemoB()">🔍 X-Ray This Competitor</button>
|
||
</div>
|
||
<div class="step-bar" id="demoB-steps">
|
||
<div class="step"><span class="step-label">1. Scrape Competitor</span><span class="step-status" id="b-s1">Waiting</span></div>
|
||
<div class="step"><span class="step-label">2. AI Analysis</span><span class="step-status" id="b-s2">Waiting</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="demoB-output" class="output hidden">
|
||
<div class="split">
|
||
<div class="split-left" id="demoB-left"></div>
|
||
<div class="split-right" id="demoB-right"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ DEMO C — PDP Surgeon ═══ -->
|
||
<section class="demo" id="demo-c">
|
||
<span class="badge purple">🎨 DEMO C — LIVE</span>
|
||
<h2>PDP Surgeon: AI Rewrites in Any Voice</h2>
|
||
<p class="sub">Scrape a real product, then toggle between 4 conversion styles — each rewritten live by Gemini with annotations.</p>
|
||
|
||
<div class="input-card">
|
||
<div class="input-row">
|
||
<div class="input-group">
|
||
<label>JUST VITAMINS PRODUCT URL</label>
|
||
<input type="url" id="demoC-url" placeholder="https://www.justvitamins.co.uk/..." value="https://www.justvitamins.co.uk/Bone-Health/Super-Strength-Vitamin-D3-4000iu-K2-MK-7-100mcg.aspx">
|
||
</div>
|
||
<button class="btn-gen purple" id="demoC-btn" onclick="runDemoC()">🎨 Scrape & Rewrite</button>
|
||
</div>
|
||
<div class="toggle-group" id="demoC-toggles">
|
||
<button class="toggle active" data-style="balanced" onclick="switchDemoC('balanced',this)">✓ Balanced</button>
|
||
<button class="toggle" data-style="premium" onclick="switchDemoC('premium',this)">💎 Premium</button>
|
||
<button class="toggle" data-style="dr" onclick="switchDemoC('dr',this)">🎯 Direct Response</button>
|
||
<button class="toggle" data-style="medical" onclick="switchDemoC('medical',this)">🏥 Medical-Safe</button>
|
||
</div>
|
||
<div class="step-bar">
|
||
<div class="step"><span class="step-label">1. Scrape</span><span class="step-status" id="c-s1">Waiting</span></div>
|
||
<div class="step"><span class="step-label">2. AI Rewrite</span><span class="step-status" id="c-s2">Waiting</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="demoC-output" class="output hidden">
|
||
<div class="split">
|
||
<div class="split-left" id="demoC-left"></div>
|
||
<div class="split-right" id="demoC-right"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ CTA ═══ -->
|
||
<section class="cta-section" id="cta">
|
||
<h2>This isn't a mockup.<br>It's <span class="gr">running right now.</span></h2>
|
||
<p class="sub" style="text-align:center;margin:0 auto 2rem">Every demo above hits a real API, scrapes real pages, and generates real content. Your data dashboard runs against 728,018 validated orders.</p>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:.75rem">
|
||
<a href="/offer" class="btn cta lg">📋 See the Full Proposal</a>
|
||
<a href="mailto:omair@quikcue.com?subject=JustVitamin%20AI%20Engine%20%E2%80%94%20Let's%20Talk&body=Hi%20Omair%2C%0A%0AI've%20seen%20the%20demos.%20Let's%20schedule%20a%20call.%0A%0AThanks" class="btn outline">🚀 Let's Talk — 15 min call</a>
|
||
<span class="note">Built by Omair @ <a href="https://quikcue.com">QuikCue</a> · Powered by Gemini 2.5 Flash</span>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>© 2026 <a href="https://quikcue.com">QuikCue</a> — Built for Just Vitamins</p>
|
||
<p>Repo: <a href="https://git.quikcue.com/omair/justvitamin" target="_blank">git.quikcue.com/omair/justvitamin</a></p>
|
||
</footer>
|
||
|
||
</main>
|
||
|
||
<script src="/static/js/app.js"></script>
|
||
</body>
|
||
</html>
|