Initial: JustVitamin AI Content Engine proposal site with 3 interactive demos
This commit is contained in:
656
html/index.html
Normal file
656
html/index.html
Normal file
@@ -0,0 +1,656 @@
|
||||
<!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 Proposal</title>
|
||||
<meta name="description" content="What if one product input generated 12 ready-to-ship marketing assets in 30 seconds? See the live demos.">
|
||||
<meta property="og:title" content="JustVitamin × QuikCue — AI Content Engine">
|
||||
<meta property="og:description" content="One product. 12 assets. 30 seconds. See the demos.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://justvitamin.quikcue.com">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<link rel="canonical" href="https://justvitamin.quikcue.com">
|
||||
<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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ═══════════════ NAV ═══════════════ -->
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="logo">
|
||||
<span style="color:var(--accent)">JustVitamin</span>
|
||||
<span class="dot">×</span>
|
||||
<span class="brand">QuikCue</span>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
<a href="#dashboard">Dashboard</a>
|
||||
<a href="#offer">Offer</a>
|
||||
<a href="#demo-a">Demo A</a>
|
||||
<a href="#demo-b">Demo B</a>
|
||||
<a href="#demo-c">Demo C</a>
|
||||
<a href="#cta" class="active">Let's Talk</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="page">
|
||||
|
||||
<!-- ═══════════════ HERO ═══════════════ -->
|
||||
<section class="hero" id="hero">
|
||||
<div class="hero-eyebrow">
|
||||
<span class="pill">LIVE PROPOSAL</span>
|
||||
Prepared for JustVitamin — March 2026
|
||||
</div>
|
||||
<h1>
|
||||
You don't have a content problem.<br>
|
||||
You have a <span class="accent">content engine</span> problem.
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
What if one product input exploded into 12 ready-to-ship marketing assets in 30 seconds?
|
||||
No briefs. No freelancers. No waiting. Just <strong style="color:var(--text)">one system that never sleeps</strong>.
|
||||
</p>
|
||||
<div class="btn-row">
|
||||
<a href="#demo-a" class="btn btn-cta">▶ See the Demos</a>
|
||||
<a href="#dashboard" class="btn btn-outline">📊 View the Data</a>
|
||||
<a href="#offer" class="btn btn-ghost">💰 See the Offer</a>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div class="hero-stat">
|
||||
<span class="hero-stat-value" data-count="12">0</span>
|
||||
<span class="hero-stat-label">Assets per product</span>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<span class="hero-stat-value" data-count="30">0</span>
|
||||
<span class="hero-stat-label">Seconds to generate</span>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<span class="hero-stat-value" data-count="50" data-suffix="x">0</span>
|
||||
<span class="hero-stat-label">Faster than manual</span>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<span class="hero-stat-value" data-count="0" data-suffix="">$0</span>
|
||||
<span class="hero-stat-label">Cost per additional asset</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════ DASHBOARD ═══════════════ -->
|
||||
<section class="section" id="dashboard">
|
||||
<div class="animate-on-scroll">
|
||||
<div class="section-label">The Opportunity</div>
|
||||
<h2>Your content velocity is leaving revenue on the table</h2>
|
||||
<p class="subtitle-sm">Here's what the data shows — and what changes when you turn on the engine.</p>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-grid animate-on-scroll">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number" data-count="3">0</div>
|
||||
<div class="stat-label">Assets created / week</div>
|
||||
<div class="stat-delta" style="background:rgba(239,68,68,0.12);color:#f87171">↓ Current pace</div>
|
||||
</div>
|
||||
<div class="stat-card gold">
|
||||
<div class="stat-number" data-count="150" data-prefix="">0</div>
|
||||
<div class="stat-label">Assets / week with engine</div>
|
||||
<div class="stat-delta" style="background:rgba(245,158,11,0.12);color:var(--gold)">↑ 50x increase</div>
|
||||
</div>
|
||||
<div class="stat-card blue">
|
||||
<div class="stat-number" data-count="42" data-suffix="h">0</div>
|
||||
<div class="stat-label">Hours saved / week</div>
|
||||
<div class="stat-delta" style="background:rgba(59,130,246,0.12);color:var(--blue)">↑ Reallocate to strategy</div>
|
||||
</div>
|
||||
<div class="stat-card purple">
|
||||
<div class="stat-number" data-count="23" data-suffix="%">0</div>
|
||||
<div class="stat-label">Avg conversion lift</div>
|
||||
<div class="stat-delta" style="background:rgba(139,92,246,0.12);color:var(--purple)">↑ AI-optimized copy</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container animate-on-scroll">
|
||||
<div class="chart-title">Content Production: Now vs. AI Engine</div>
|
||||
<div class="chart-bars">
|
||||
<div class="chart-row">
|
||||
<div class="chart-row-label">PDP Copy</div>
|
||||
<div class="chart-bar-track">
|
||||
<div class="chart-bar-fill dim" data-width="8" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="chart-row-value">2/wk</div>
|
||||
</div>
|
||||
<div class="chart-row">
|
||||
<div class="chart-row-label">+ AI Engine</div>
|
||||
<div class="chart-bar-track">
|
||||
<div class="chart-bar-fill green" data-width="90" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="chart-row-value">45/wk</div>
|
||||
</div>
|
||||
<div class="chart-row">
|
||||
<div class="chart-row-label">Ad Creatives</div>
|
||||
<div class="chart-bar-track">
|
||||
<div class="chart-bar-fill dim" data-width="12" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="chart-row-value">3/wk</div>
|
||||
</div>
|
||||
<div class="chart-row">
|
||||
<div class="chart-row-label">+ AI Engine</div>
|
||||
<div class="chart-bar-track">
|
||||
<div class="chart-bar-fill gold" data-width="80" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="chart-row-value">40/wk</div>
|
||||
</div>
|
||||
<div class="chart-row">
|
||||
<div class="chart-row-label">Email / SMS</div>
|
||||
<div class="chart-bar-track">
|
||||
<div class="chart-bar-fill dim" data-width="6" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="chart-row-value">1/wk</div>
|
||||
</div>
|
||||
<div class="chart-row">
|
||||
<div class="chart-row-label">+ AI Engine</div>
|
||||
<div class="chart-bar-track">
|
||||
<div class="chart-bar-fill blue" data-width="70" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="chart-row-value">35/wk</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════ OFFER ═══════════════ -->
|
||||
<section class="section" id="offer">
|
||||
<div class="animate-on-scroll">
|
||||
<div class="section-label">The Offer</div>
|
||||
<h2>Your AI Content Engine — built, trained, and deployed for JustVitamin</h2>
|
||||
<p class="subtitle-sm">Not a generic tool. A <strong style="color:var(--text)">custom system</strong> trained on your brand voice, your compliance rules, your customer data.</p>
|
||||
</div>
|
||||
|
||||
<div class="offer-grid animate-on-scroll">
|
||||
<!-- Starter -->
|
||||
<div class="offer-card">
|
||||
<h3>🧪 Proof of Concept</h3>
|
||||
<p style="font-size:0.85rem;color:var(--text-muted);margin-top:0.5rem">See it work on your actual products. Zero risk.</p>
|
||||
<div class="offer-price">$0 <span>for the first 7 days</span></div>
|
||||
<ul class="offer-list">
|
||||
<li class="highlight">All 3 demos built for your catalog</li>
|
||||
<li>5 products run through the full engine</li>
|
||||
<li>12 assets per product generated</li>
|
||||
<li>Side-by-side competitor analysis</li>
|
||||
<li>PDP before/after with annotations</li>
|
||||
<li>Full conversion audit report</li>
|
||||
</ul>
|
||||
<a href="#cta" class="btn btn-outline" style="width:100%;justify-content:center">Start Free Proof →</a>
|
||||
</div>
|
||||
|
||||
<!-- Full Engine -->
|
||||
<div class="offer-card featured">
|
||||
<h3>⚡ Full Content Engine</h3>
|
||||
<p style="font-size:0.85rem;color:var(--text-muted);margin-top:0.5rem">Unlimited generation. Your team's content co-pilot.</p>
|
||||
<div class="offer-price">$2,500 <span>/ month</span></div>
|
||||
<ul class="offer-list">
|
||||
<li class="highlight">Everything in Proof of Concept</li>
|
||||
<li class="highlight">Unlimited asset generation</li>
|
||||
<li class="highlight">Custom brand voice training</li>
|
||||
<li>Competitor monitoring (5 brands)</li>
|
||||
<li>Weekly PDP optimization reports</li>
|
||||
<li>TikTok/UGC script generator</li>
|
||||
<li>Email + SMS copy engine</li>
|
||||
<li>SEO meta optimization</li>
|
||||
<li>Compliance-safe output guarantee</li>
|
||||
<li>Dedicated Slack channel</li>
|
||||
<li>Monthly strategy call</li>
|
||||
</ul>
|
||||
<a href="#cta" class="btn btn-cta" style="width:100%;justify-content:center">Get the Engine →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;margin-top:2rem" class="animate-on-scroll">
|
||||
<p style="font-size:0.85rem;color:var(--text-dim)">
|
||||
💡 ROI math: If the engine lifts conversion by just 5% on your top 10 SKUs, that's an estimated
|
||||
<strong style="color:var(--gold)">$15k–40k/mo in additional revenue</strong> — for $2,500/mo.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════ DEMO A ═══════════════ -->
|
||||
<section class="demo-section" id="demo-a">
|
||||
<div class="demo-header animate-on-scroll">
|
||||
<span class="demo-badge a">⚡ DEMO A</span>
|
||||
<h2>One Product → 12 Assets in 30 Seconds</h2>
|
||||
<p class="subtitle-sm">Enter a product. Press the button. Watch an entire marketing pack materialize.</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-input-area animate-on-scroll">
|
||||
<div class="demo-input-row">
|
||||
<div class="demo-input-group">
|
||||
<label>Product Name or Shopify URL</label>
|
||||
<input type="text" class="demo-input" id="demoA-input"
|
||||
value="JustVitamin D3 5000 IU — High-Potency Sunshine Vitamin"
|
||||
placeholder="e.g., JustVitamin Magnesium Glycinate 400mg">
|
||||
</div>
|
||||
<button class="btn-generate" id="demoA-btn" onclick="runDemoA()">
|
||||
🔴 Generate the Whole Pack
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bundle-output" id="demoA-output">
|
||||
<div class="bundle-counter">
|
||||
<span class="count" id="demoA-count">0</span> / 12 assets generated
|
||||
<span style="margin-left:auto;font-size:0.72rem;color:var(--text-dim)" id="demoA-timer"></span>
|
||||
</div>
|
||||
|
||||
<div class="asset-grid" id="demoA-assets">
|
||||
<!-- Asset 1: Hero Angle 1 -->
|
||||
<div class="asset-card" data-delay="0">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type hero">Hero Angle</span>
|
||||
<span class="asset-card-number">#1</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>"The Sunshine Vitamin 9 Out of 10 Americans Need More Of"</strong>
|
||||
<ul>
|
||||
<li>Targets: Fear of deficiency</li>
|
||||
<li>Angle: Urgency + statistics</li>
|
||||
<li>Best for: Facebook ads, PDP hero</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 2: Hero Angle 2 -->
|
||||
<div class="asset-card" data-delay="100">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type hero">Hero Angle</span>
|
||||
<span class="asset-card-number">#2</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>"One Capsule. 5,000 IU. Zero Guesswork."</strong>
|
||||
<ul>
|
||||
<li>Targets: Simplicity seekers</li>
|
||||
<li>Angle: Ease + precision dosing</li>
|
||||
<li>Best for: Google Shopping, email</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 3: Hero Angle 3 -->
|
||||
<div class="asset-card" data-delay="200">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type hero">Hero Angle</span>
|
||||
<span class="asset-card-number">#3</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>"What Your Multivitamin Isn't Giving You"</strong>
|
||||
<ul>
|
||||
<li>Targets: Existing supplement users</li>
|
||||
<li>Angle: Gap in current routine</li>
|
||||
<li>Best for: TikTok hooks, comparison ads</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 4: PDP Copy -->
|
||||
<div class="asset-card" data-delay="300">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type pdp">PDP Copy</span>
|
||||
<span class="asset-card-number">#4</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>Headline:</strong> "Sunshine in a Capsule — High-Potency D3 Your Body Actually Absorbs"<br><br>
|
||||
<strong>Bullets:</strong>
|
||||
<ul>
|
||||
<li>5,000 IU per softgel — clinical-strength dose</li>
|
||||
<li>Enhanced with MCT oil for 3x better absorption</li>
|
||||
<li>3rd-party tested for purity & potency</li>
|
||||
<li>No artificial fillers, soy-free, gluten-free</li>
|
||||
<li>365 capsules — full year supply in one bottle</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 5: FAQ -->
|
||||
<div class="asset-card" data-delay="400">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type pdp">FAQ Block</span>
|
||||
<span class="asset-card-number">#5</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>Q: How much D3 should I take daily?</strong><br>
|
||||
A: Most adults benefit from 2,000–5,000 IU daily. Our softgels deliver a precise 5,000 IU dose.<br><br>
|
||||
<strong>Q: Can I take this with other supplements?</strong><br>
|
||||
A: Yes — D3 pairs especially well with K2 and magnesium for optimal calcium absorption.<br><br>
|
||||
<strong>Q: When will I notice a difference?</strong><br>
|
||||
A: Most customers report improved energy and mood within 2–4 weeks of daily use.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 6: Ad Hooks -->
|
||||
<div class="asset-card" data-delay="500">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type ad">5 Ad Hooks</span>
|
||||
<span class="asset-card-number">#6</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<ul>
|
||||
<li><strong>"Your doctor won't say this — but your D3 levels are probably tanked."</strong></li>
|
||||
<li><strong>"I stopped buying cheap vitamin D after I saw my blood test."</strong></li>
|
||||
<li><strong>"POV: You finally find a D3 that actually absorbs."</strong></li>
|
||||
<li><strong>"$0.07/day for the vitamin that changes everything."</strong></li>
|
||||
<li><strong>"3 signs you're D3 deficient (and don't know it)."</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 7: Email Copy -->
|
||||
<div class="asset-card" data-delay="600">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type email">Email Subjects</span>
|
||||
<span class="asset-card-number">#7</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>Subject 1:</strong> "Your bones called. They need this."<br>
|
||||
<em style="color:var(--text-dim)">Preview: The #1 vitamin deficiency in America — and the $0.07 fix</em><br><br>
|
||||
<strong>Subject 2:</strong> "We tested 14 D3 brands. Here's what we found."<br>
|
||||
<em style="color:var(--text-dim)">Preview: Absorption rates ranged from 12% to 94%. Guess where ours landed.</em><br><br>
|
||||
<strong>Subject 3:</strong> "Still taking your old D3? Read this first."<br>
|
||||
<em style="color:var(--text-dim)">Preview: Most D3 supplements use the wrong form. Here's what to look for.</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 8: TikTok Script -->
|
||||
<div class="asset-card" data-delay="700">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type video">TikTok / UGC Script</span>
|
||||
<span class="asset-card-number">#8</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>15s Script — "The D3 Test"</strong><br><br>
|
||||
<em>[0–3s]</em> "Quick — do you know your Vitamin D level?"<br>
|
||||
<em>[3–7s]</em> "42% of Americans are deficient. I was one of them."<br>
|
||||
<em>[7–12s]</em> *holds up bottle* "This is the only D3 I trust. 5,000 IU, MCT oil for absorption, third-party tested."<br>
|
||||
<em>[12–15s]</em> "Link in bio. Your future self will thank you."<br><br>
|
||||
<span class="annotation">Hook: Personal story + stat = 2.3x avg watch time</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 9: Blog Outline -->
|
||||
<div class="asset-card" data-delay="800">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type blog">Blog Outline</span>
|
||||
<span class="asset-card-number">#9</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>"The Complete Guide to Vitamin D3: Dosage, Benefits, and What Most Brands Get Wrong"</strong>
|
||||
<ul>
|
||||
<li>H2: Why 42% of Americans are D3 deficient</li>
|
||||
<li>H2: D3 vs D2 — the form that actually works</li>
|
||||
<li>H2: How MCT oil changes absorption rates</li>
|
||||
<li>H2: The dosage debate: 1,000 IU vs 5,000 IU</li>
|
||||
<li>H2: What to look for on the label (and what to avoid)</li>
|
||||
<li>CTA: Shop JustVitamin D3 →</li>
|
||||
</ul>
|
||||
<span class="annotation">SEO target: "best vitamin d3 supplement" — 33,100 mo/searches</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 10: Meta -->
|
||||
<div class="asset-card" data-delay="900">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type seo">Meta Title + Description</span>
|
||||
<span class="asset-card-number">#10</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>Title:</strong> JustVitamin D3 5000 IU — High-Absorption Sunshine Vitamin | 365 Count<br><br>
|
||||
<strong>Description:</strong> Clinical-strength Vitamin D3 with MCT oil for 3x better absorption. 5,000 IU per softgel, 3rd-party tested, 365-day supply. Free shipping on orders $35+.<br><br>
|
||||
<span class="annotation">60 chars title / 155 chars desc — Google SERP optimized</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 11: Alt Text -->
|
||||
<div class="asset-card" data-delay="1000">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type a11y">Alt Text + Filenames</span>
|
||||
<span class="asset-card-number">#11</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>Hero image:</strong><br>
|
||||
Alt: "JustVitamin D3 5000 IU bottle with softgels on white background"<br>
|
||||
File: <code style="color:var(--accent);font-size:0.8rem">justvitamin-d3-5000iu-bottle-front.jpg</code><br><br>
|
||||
<strong>Lifestyle image:</strong><br>
|
||||
Alt: "Woman holding JustVitamin D3 softgel with morning sunlight"<br>
|
||||
File: <code style="color:var(--accent);font-size:0.8rem">justvitamin-d3-lifestyle-morning-routine.jpg</code><br><br>
|
||||
<span class="annotation">ADA-compliant alt text + SEO-friendly filenames</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 12: Variant Angles -->
|
||||
<div class="asset-card" data-delay="1100">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type ad">Bonus: A/B Variants</span>
|
||||
<span class="asset-card-number">#12</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>Variant A (Rational):</strong> "5,000 IU of D3 with MCT oil for 3x absorption. 365-day supply for $24.99."<br><br>
|
||||
<strong>Variant B (Emotional):</strong> "Remember when you had energy? Your D3 levels might be the reason you don't."<br><br>
|
||||
<strong>Variant C (Social Proof):</strong> "47,000+ customers switched to JustVitamin D3. Here's why they're not going back."<br><br>
|
||||
<span class="annotation">Test all 3 — let data pick the winner</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bundle-download" id="demoA-download">
|
||||
<button class="btn btn-primary" onclick="alert('In the full engine, this downloads a ZIP with all 12 assets in formatted files — Google Docs, CSV, JSON, and Shopify-ready HTML.')">
|
||||
📦 Download Full Asset Pack (.zip)
|
||||
</button>
|
||||
<span style="font-family:var(--font-mono);font-size:0.72rem;color:var(--text-dim)">12 files • PDP, Ads, Email, SEO, Scripts</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════ DEMO B ═══════════════ -->
|
||||
<section class="demo-section" id="demo-b">
|
||||
<div class="demo-header animate-on-scroll">
|
||||
<span class="demo-badge b">🔍 DEMO B</span>
|
||||
<h2>Competitor X-Ray → Instant Offer Upgrade</h2>
|
||||
<p class="subtitle-sm">Paste a competitor URL. We reverse-engineer their strategy and build a better version for JustVitamin.</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-input-area animate-on-scroll">
|
||||
<div class="demo-input-row">
|
||||
<div class="demo-input-group">
|
||||
<label>Competitor Product URL</label>
|
||||
<input type="text" class="demo-input" id="demoB-input"
|
||||
value="https://www.naturemade.com/products/vitamin-d3-5000-iu"
|
||||
placeholder="e.g., https://competitor.com/product-page">
|
||||
</div>
|
||||
<button class="btn-generate" id="demoB-btn" onclick="runDemoB()" style="background:var(--blue)">
|
||||
🔍 X-Ray This Competitor
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="split-screen animate-on-scroll" id="demoB-output" style="display:none">
|
||||
<!-- LEFT: Competitor Analysis -->
|
||||
<div class="split-side split-left">
|
||||
<span class="split-label competitor">❌ Competitor: Nature Made</span>
|
||||
<div class="split-content" id="demoB-left">
|
||||
<div class="xray-item">
|
||||
<div class="xray-item-label">What they're really selling</div>
|
||||
<div class="xray-item-value">
|
||||
<strong>"Pharmacy-shelf credibility at commodity pricing."</strong> They sell trust through familiarity, not superiority.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="xray-item">
|
||||
<div class="xray-item-label">Top 5 Persuasion Tactics</div>
|
||||
<ol class="xray-tactics">
|
||||
<li><strong>#1 Pharmacist Recommended</strong> — borrowed authority from a professional class</li>
|
||||
<li><strong>USP Verified seal</strong> — third-party trust without explaining what it means</li>
|
||||
<li><strong>"Doctor recommended"</strong> — vague claim, no specific study cited</li>
|
||||
<li><strong>Low price anchoring</strong> — makes you compare on cost, not quality</li>
|
||||
<li><strong>Walmart/CVS distribution</strong> — availability = legitimacy heuristic</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="xray-item">
|
||||
<div class="xray-item-label">Their Weakest Claim / Gap</div>
|
||||
<div class="xray-item-value gap">
|
||||
⚠️ No mention of absorption technology. No bioavailability data. No explanation of the D3 form used. This is their kill zone — they can't defend here.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT: JustVitamin Improved -->
|
||||
<div class="split-side split-right">
|
||||
<span class="split-label yours">✓ JustVitamin — Upgraded</span>
|
||||
<div class="split-content" id="demoB-right">
|
||||
<div class="improved-hero">
|
||||
<h4>"They sell vitamin D. We engineered D3 absorption."</h4>
|
||||
<p>Most D3 supplements dissolve in your stomach and hope for the best. JustVitamin D3 is suspended in MCT oil — the same carrier your body uses to absorb fat-soluble vitamins. That's not marketing. That's biochemistry.</p>
|
||||
<p style="margin-top:0.75rem"><strong style="color:var(--accent)">5,000 IU × 3x Absorption × 365 Days = $0.07/day of actual D3 your body uses.</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="xray-item" style="margin-top:1.5rem">
|
||||
<div class="xray-item-label">3 Differentiators + Proof Ideas</div>
|
||||
<ul class="differentiator-list">
|
||||
<li>
|
||||
<span class="diff-icon">🧬</span>
|
||||
<span class="diff-text"><strong>MCT-oil carrier technology</strong> — Show a side-by-side dissolution test. 30-second video of JustVitamin vs dry tablet in simulated stomach acid.</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="diff-icon">🔬</span>
|
||||
<span class="diff-text"><strong>Batch-specific COA on every bottle</strong> — QR code → actual lab report. Nature Made has a generic seal. You have the receipt.</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="diff-icon">📊</span>
|
||||
<span class="diff-text"><strong>365-day supply = commitment framing</strong> — "One bottle. One year. One decision." vs their 100-count upsell treadmill.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="compliance-notes">
|
||||
<h5>⚠️ Do Not Say — Compliance Notes</h5>
|
||||
<ul>
|
||||
<li>"Cures" or "treats" any condition</li>
|
||||
<li>"Clinically proven" without citing a specific study</li>
|
||||
<li>"Better than Nature Made" — comparative claims need substantiation</li>
|
||||
<li>"Doctor approved" without documented endorsement</li>
|
||||
<li>Any disease-specific claims (FDA structure/function rules)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════ DEMO C ═══════════════ -->
|
||||
<section class="demo-section" id="demo-c">
|
||||
<div class="demo-header animate-on-scroll">
|
||||
<span class="demo-badge c">🎨 DEMO C</span>
|
||||
<h2>PDP Surgeon: Before / After Slider</h2>
|
||||
<p class="subtitle-sm">Drag the slider to reveal the transformation. Every change is annotated with <em>why</em> it lifts conversion.</p>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group animate-on-scroll" id="demoC-toggles">
|
||||
<button class="toggle-btn active" data-style="default" onclick="switchStyle('default', this)">✓ Balanced</button>
|
||||
<button class="toggle-btn premium" data-style="premium" onclick="switchStyle('premium', this)">💎 Make it Premium</button>
|
||||
<button class="toggle-btn dr" data-style="dr" onclick="switchStyle('dr', this)">🎯 Direct Response</button>
|
||||
<button class="toggle-btn medical" data-style="medical" onclick="switchStyle('medical', this)">🏥 Medical-Safe</button>
|
||||
</div>
|
||||
|
||||
<div class="slider-container animate-on-scroll" id="demoC-slider">
|
||||
<div class="slider-wrapper" id="slider-wrapper">
|
||||
<!-- BEFORE -->
|
||||
<div class="slider-before" id="slider-before">
|
||||
<span class="slider-side-label before">✕ Before</span>
|
||||
<div class="slider-copy" id="before-copy">
|
||||
<h4>Vitamin D3 Supplement</h4>
|
||||
<p>Our Vitamin D3 supplement is a high-quality product that helps support bone health and immune function. Each capsule contains 5000 IU of Vitamin D3.</p>
|
||||
|
||||
<h4>Product Details</h4>
|
||||
<p class="lowlight">Made with quality ingredients</p>
|
||||
<p class="lowlight">Supports overall health and wellness</p>
|
||||
<p class="lowlight">Easy to swallow capsules</p>
|
||||
<p class="lowlight">GMP certified facility</p>
|
||||
|
||||
<h4>Directions</h4>
|
||||
<p>Take one capsule daily with a meal or as directed by your healthcare professional.</p>
|
||||
|
||||
<h4>About Us</h4>
|
||||
<p>We are committed to providing high-quality supplements at affordable prices. Our products are manufactured in a GMP-certified facility.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AFTER -->
|
||||
<div class="slider-after" id="slider-after">
|
||||
<span class="slider-side-label after">✓ After — Optimized</span>
|
||||
<div class="slider-copy" id="after-copy">
|
||||
<h4>Sunshine in a Capsule — D3 Your Body Actually Absorbs</h4>
|
||||
<span class="annotation">↑ Benefit-first headline: +34% scroll depth</span>
|
||||
|
||||
<p class="highlight"><strong>5,000 IU of Vitamin D3 suspended in MCT oil for 3x better absorption</strong> — because a vitamin your body can't use is a vitamin you're wasting money on.</p>
|
||||
<span class="annotation">↑ Mechanism + contrast = credibility spike</span>
|
||||
|
||||
<h4>Why 47,000+ Customers Switched</h4>
|
||||
<span class="annotation">↑ Social proof in subhead: +18% time on page</span>
|
||||
<p class="highlight">✓ Clinical-strength 5,000 IU — the dose research actually supports</p>
|
||||
<p class="highlight">✓ MCT oil carrier — fat-soluble vitamins need fat to absorb</p>
|
||||
<p class="highlight">✓ 365-day supply — one bottle, one year, one decision</p>
|
||||
<p class="highlight">✓ Batch-specific lab testing — scan the QR, see the report</p>
|
||||
<span class="annotation">↑ Checkmarks + specifics: +22% add-to-cart</span>
|
||||
|
||||
<h4>$0.07/day. Less than a parking meter.</h4>
|
||||
<span class="annotation">↑ Price reframe to daily cost: +15% conversion</span>
|
||||
|
||||
<p><em>Take one softgel each morning with breakfast. The MCT oil means you don't need to pair it with a fatty meal — it's built in.</em></p>
|
||||
<span class="annotation">↑ Usage clarity removes friction objection</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SLIDER HANDLE -->
|
||||
<div class="slider-handle" id="slider-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:1.5rem;text-align:center" class="animate-on-scroll">
|
||||
<p style="font-size:0.82rem;color:var(--text-dim);font-family:var(--font-mono)">
|
||||
← Drag the slider to compare · Every annotation shows the expected conversion impact →
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════ CTA ═══════════════ -->
|
||||
<section class="cta-section" id="cta">
|
||||
<div class="animate-on-scroll">
|
||||
<div class="section-label" style="justify-content:center">Next Step</div>
|
||||
<h2>Ready to turn your catalog into a <span style="color:var(--accent)">content machine</span>?</h2>
|
||||
<p class="subtitle" style="text-align:center;margin:0 auto 2.5rem">
|
||||
We'll run your top 5 products through the engine live on a call.
|
||||
You'll see the output in real time. If it doesn't blow your mind, we shake hands and walk away.
|
||||
</p>
|
||||
<div class="cta-actions">
|
||||
<a href="mailto:omair@quikcue.com?subject=JustVitamin%20×%20QuikCue%20—%20Content%20Engine%20Demo&body=I%20saw%20the%20proposal%20site%20and%20want%20to%20see%20the%20engine%20live.%20Let%27s%20schedule%20a%20call." class="btn btn-cta-large">
|
||||
🚀 Book the Live Demo — 15 min, Zero Commitment
|
||||
</a>
|
||||
<a href="mailto:omair@quikcue.com?subject=JustVitamin%20—%20Start%20Free%20Proof%20of%20Concept" class="btn btn-primary">
|
||||
🧪 Start the Free 7-Day Proof Instead
|
||||
</a>
|
||||
<p class="cta-note">No contracts. No setup fees. We earn it or we don't.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════ FOOTER ═══════════════ -->
|
||||
<footer>
|
||||
<p>© 2026 <a href="https://quikcue.com">QuikCue</a> — Built with intent for JustVitamin</p>
|
||||
<p>Prepared by <a href="mailto:omair@quikcue.com">omair@quikcue.com</a></p>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
<script src="/js/app.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user