Omair Saleh
09d837a660
- Flask + gunicorn backend replacing static nginx - 3 live AI demos powered by Gemini 2.5 Flash - Nano Banana + Nano Banana Pro for product image generation - Real JV ecommerce dashboard (728K orders, 230K customers, 4MB data) - AI Infrastructure Proposal + Offer pages - Live product scraper for justvitamins.co.uk + competitor pages - API: /api/scrape, /api/generate-pack, /api/competitor-xray, /api/pdp-surgeon, /api/generate-images
162 lines
8.1 KiB
HTML
162 lines
8.1 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="#demos">Demos</a>
|
||
<a href="/proposal" target="_blank">Proposal</a>
|
||
<a href="/offer" target="_blank">Offer</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="page">
|
||
|
||
<!-- ═══ HERO ═══ -->
|
||
<section class="hero" id="top">
|
||
<div class="eyebrow"><span class="pill">● LIVE</span> AI Content Engine — Powered by Gemini</div>
|
||
<h1>Your content engine is<br><span class="gr">real and running.</span></h1>
|
||
<p class="sub">Paste any Just Vitamins product link. The AI scrapes it live, rewrites every word, generates new product images, and builds a full marketing pack — all in seconds. <strong>No mocks. No fakes. Try it.</strong></p>
|
||
<div class="btn-row">
|
||
<a href="#demo-a" class="btn cta">⚡ Try Demo A — 12 Assets</a>
|
||
<a href="#demo-b" class="btn ghost">🔍 Competitor X-Ray</a>
|
||
<a href="#demo-c" class="btn ghost">🎨 PDP Surgeon</a>
|
||
<a href="/dashboard" target="_blank" class="btn outline">📊 Real 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 → 12 Assets in Seconds</h2>
|
||
<p class="sub">Paste a real Just Vitamins product URL. Gemini scrapes it, then generates a full marketing pack.</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 the Whole Pack</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. AI Generate</span><span class="step-status" id="a-s2">Waiting</span></div>
|
||
<div class="step" id="a-step-images"><span class="step-label">3. Image Gen</span><span class="step-status" id="a-s3">Waiting</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="demoA-output" class="output hidden">
|
||
<div class="output-meta" id="demoA-meta"></div>
|
||
<div class="asset-grid" id="demoA-assets"></div>
|
||
<div id="demoA-images" class="img-section hidden">
|
||
<h3>🎨 AI-Generated Product Images</h3>
|
||
<p class="sub-sm">Generated with Nano Banana / Nano Banana Pro — unique images that don't exist anywhere else.</p>
|
||
<div class="img-grid" id="demoA-img-grid"></div>
|
||
</div>
|
||
</div>
|
||
</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.hollandandbarrett.com/shop/product/holland-barrett-vitamin-d3-tablets-25ug-1000-i-u--60001496">
|
||
</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 on this page hits a real API, scrapes real pages, and generates real content. The data dashboard shows real £19.4M in revenue across 728,000 orders.</p>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:.75rem">
|
||
<a href="mailto:omair@quikcue.com?subject=JustVitamin%20AI%20Engine%20—%20Let's%20Talk" class="btn cta lg">🚀 Let's Talk — 15 min call</a>
|
||
<a href="/dashboard" target="_blank" class="btn outline">📊 Explore the Full Dashboard</a>
|
||
<span class="note">Built by <a href="https://quikcue.com">QuikCue</a> · Powered by Gemini 2.5 Flash + Nano Banana Pro</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>
|