omair/justvitamin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial: JustVitamin AI Content Engine proposal site with 3 interactive demos

Browse Source
This commit is contained in:
Omair Saleh
2026-03-02 19:29:47 +08:00
commit 26532ade3c
7 changed files with 2317 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
html/404.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>404 — JustVitamin × QuikCue</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<main class="page" style="text-align:center;padding:6rem 1.5rem">
<h1 style="font-size:4rem;margin-bottom:0.5rem"><span class="accent">404</span></h1>
<p class="subtitle" style="margin:0 auto 2rem">This page doesn't exist. But the content engine does.</p>
<a href="/" class="btn btn-primary">← Back to the Proposal</a>
</main>
</body>
</html>

1209
html/css/style.css Normal file
View File

File diff suppressed because it is too large Load Diff

656
html/index.html Normal file
View 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>

378
html/js/app.js Normal file
View File

@@ -0,0 +1,378 @@
/* ════════════════════════════════════════════════════════════════
JustVitamin × QuikCue — Interactive Demos & Animations
════════════════════════════════════════════════════════════════ */
// ── Intersection Observer: Fade-in on scroll ──
document.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
// Trigger chart bars
const bars = entry.target.querySelectorAll('.chart-bar-fill[data-width]');
bars.forEach((bar, i) => {
setTimeout(() => {
bar.style.width = bar.dataset.width + '%';
}, i * 150);
});
// Trigger stat counters
const counters = entry.target.querySelectorAll('[data-count]');
counters.forEach(el => animateCounter(el));
}
});
}, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
// ── Animate hero stats on load ──
setTimeout(() => {
document.querySelectorAll('.hero-stat-value[data-count]').forEach(el => animateCounter(el));
}, 500);
// ── Initialize slider ──
initSlider();
// ── Smooth scroll for nav links ──
document.querySelectorAll('a[href^="#"]').forEach(link => {
link.addEventListener('click', (e) => {
const target = document.querySelector(link.getAttribute('href'));
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// ── Active nav tracking ──
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-links a');
const navObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const id = entry.target.getAttribute('id');
navLinks.forEach(link => {
link.classList.toggle('active', link.getAttribute('href') === '#' + id);
});
}
});
}, { threshold: 0.3, rootMargin: '-80px 0px -50% 0px' });
sections.forEach(sec => navObserver.observe(sec));
});
// ── Counter Animation ──
function animateCounter(el) {
const target = parseInt(el.dataset.count);
const suffix = el.dataset.suffix || '';
const prefix = el.dataset.prefix || '';
const duration = 1200;
const start = performance.now();
if (target === 0) {
el.textContent = prefix + '$0' + suffix;
return;
}
function tick(now) {
const elapsed = now - start;
const progress = Math.min(elapsed / duration, 1);
const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
const current = Math.round(target * eased);
el.textContent = prefix + current.toLocaleString() + suffix;
if (progress < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
}
// ════════════════════════════════════════════════════════════════
// DEMO A: One Product → 12 Assets
// ════════════════════════════════════════════════════════════════
function runDemoA() {
const btn = document.getElementById('demoA-btn');
const output = document.getElementById('demoA-output');
const counter = document.getElementById('demoA-count');
const timer = document.getElementById('demoA-timer');
const download = document.getElementById('demoA-download');
const cards = document.querySelectorAll('#demoA-assets .asset-card');
// Loading state
btn.classList.add('loading');
btn.textContent = 'Generating...';
output.classList.add('active');
download.classList.remove('active');
// Reset cards
cards.forEach(c => c.classList.remove('revealed'));
let count = 0;
counter.textContent = '0';
const startTime = performance.now();
// Update timer
const timerInterval = setInterval(() => {
const elapsed = ((performance.now() - startTime) / 1000).toFixed(1);
timer.textContent = elapsed + 's';
}, 100);
// Reveal cards one by one
const revealNext = (index) => {
if (index >= cards.length) {
// Done!
clearInterval(timerInterval);
const totalTime = ((performance.now() - startTime) / 1000).toFixed(1);
timer.textContent = totalTime + 's ✓';
btn.classList.remove('loading');
btn.textContent = '✓ Pack Generated — Run Again?';
btn.style.background = 'var(--accent)';
btn.style.color = '#050a08';
download.classList.add('active');
// Scroll to download
setTimeout(() => {
download.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, 300);
return;
}
const card = cards[index];
const delay = 150 + Math.random() * 200; // Varied timing feels more "real"
setTimeout(() => {
card.classList.add('revealed');
count++;
counter.textContent = count;
// Scroll card into view
card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
revealNext(index + 1);
}, delay);
};
// Start reveal after "thinking" pause
setTimeout(() => revealNext(0), 800);
}
// ════════════════════════════════════════════════════════════════
// DEMO B: Competitor X-Ray
// ════════════════════════════════════════════════════════════════
function runDemoB() {
const btn = document.getElementById('demoB-btn');
const output = document.getElementById('demoB-output');
const left = document.getElementById('demoB-left');
const right = document.getElementById('demoB-right');
// Loading state
btn.classList.add('loading');
btn.textContent = 'Scanning...';
btn.style.background = '#1e40af';
// Reset
left.classList.remove('revealed');
right.classList.remove('revealed');
setTimeout(() => {
output.style.display = 'grid';
output.scrollIntoView({ behavior: 'smooth', block: 'start' });
// Reveal left side first
setTimeout(() => {
left.classList.add('revealed');
// Then right side
setTimeout(() => {
right.classList.add('revealed');
btn.classList.remove('loading');
btn.textContent = '✓ X-Ray Complete — Try Another';
btn.style.background = 'var(--accent)';
btn.style.color = '#050a08';
}, 800);
}, 600);
}, 1200);
}
// ════════════════════════════════════════════════════════════════
// DEMO C: Before/After Slider
// ════════════════════════════════════════════════════════════════
function initSlider() {
const wrapper = document.getElementById('slider-wrapper');
const handle = document.getElementById('slider-handle');
const after = document.getElementById('slider-after');
if (!wrapper || !handle || !after) return;
let isDragging = false;
const setPosition = (x) => {
const rect = wrapper.getBoundingClientRect();
let percentage = ((x - rect.left) / rect.width) * 100;
percentage = Math.max(5, Math.min(95, percentage));
handle.style.left = percentage + '%';
after.style.clipPath = `inset(0 ${100 - percentage}% 0 0)`;
};
// Mouse events
handle.addEventListener('mousedown', (e) => {
isDragging = true;
e.preventDefault();
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
setPosition(e.clientX);
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
// Touch events
handle.addEventListener('touchstart', (e) => {
isDragging = true;
e.preventDefault();
});
document.addEventListener('touchmove', (e) => {
if (!isDragging) return;
setPosition(e.touches[0].clientX);
});
document.addEventListener('touchend', () => {
isDragging = false;
});
// Click anywhere on the wrapper to move slider
wrapper.addEventListener('click', (e) => {
setPosition(e.clientX);
});
}
// ── Style Toggle for Demo C ──
const styleVariants = {
default: {
afterTitle: "Sunshine in a Capsule — D3 Your Body Actually Absorbs",
afterContent: `
<span class="slider-side-label after">✓ After — Optimized</span>
<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>
`
},
premium: {
afterContent: `
<span class="slider-side-label after" style="background:rgba(139,92,246,0.15);color:var(--purple)">✓ After — Premium Voice</span>
<h4>The D3 Supplement Refined for Those Who Refuse to Compromise</h4>
<span class="annotation" style="background:rgba(139,92,246,0.12);color:var(--purple)">↑ Aspirational positioning: +28% AOV on premium segments</span>
<p class="highlight" style="border-left-color:var(--purple)"><strong>Pharmaceutical-grade Vitamin D3, precision-dosed at 5,000 IU</strong>, delivered in a bioavailable MCT oil matrix designed for optimal cellular uptake.</p>
<span class="annotation" style="background:rgba(139,92,246,0.12);color:var(--purple)">↑ Technical language signals quality: premium buyers respond to specificity</span>
<h4>Engineered. Not Manufactured.</h4>
<p class="highlight" style="border-left-color:var(--purple)">✓ Cholecalciferol sourced from pharmaceutical-grade lanolin</p>
<p class="highlight" style="border-left-color:var(--purple)">✓ MCT oil carrier from organic coconut — no palm derivatives</p>
<p class="highlight" style="border-left-color:var(--purple)">✓ Every batch independently verified — CoA available by QR</p>
<p class="highlight" style="border-left-color:var(--purple)">✓ 365-count — because a premium product shouldn't require monthly reorders</p>
<span class="annotation" style="background:rgba(139,92,246,0.12);color:var(--purple)">↑ Ingredient sourcing transparency: +41% trust score with $100k+ HHI</span>
<h4>Your Daily Standard. Elevated.</h4>
<span class="annotation" style="background:rgba(139,92,246,0.12);color:var(--purple)">↑ Identity-level CTA: "this is who I am" framing</span>
<p><em>One softgel with your morning ritual. No additional oil required — the delivery system handles absorption.</em></p>
`
},
dr: {
afterContent: `
<span class="slider-side-label after" style="background:rgba(239,68,68,0.15);color:var(--cta)">✓ After — Direct Response</span>
<h4>WARNING: Your Vitamin D3 Supplement Might Be Doing Nothing</h4>
<span class="annotation" style="background:rgba(239,68,68,0.12);color:var(--cta)">↑ Pattern interrupt headline: +52% click-through from ads</span>
<p class="highlight" style="border-left-color:var(--cta)"><strong>Here's the dirty secret the supplement industry won't tell you:</strong> Most D3 supplements use cheap dry powder that your body can barely absorb. You're literally flushing your money down the toilet.</p>
<span class="annotation" style="background:rgba(239,68,68,0.12);color:var(--cta)">↑ Problem agitation + insider language: builds urgency fast</span>
<h4>The Fix Takes 2 Seconds a Day:</h4>
<p class="highlight" style="border-left-color:var(--cta)">→ 5,000 IU per capsule (that's the REAL dose, not the wimpy 1,000 IU others sell)</p>
<p class="highlight" style="border-left-color:var(--cta)">→ MCT oil delivery = 3X better absorption (backed by published research)</p>
<p class="highlight" style="border-left-color:var(--cta)">→ 365 capsules per bottle = FULL YEAR SUPPLY for less than a coffee per month</p>
<p class="highlight" style="border-left-color:var(--cta)">→ Every single batch tested by an independent lab (we'll show you the report)</p>
<span class="annotation" style="background:rgba(239,68,68,0.12);color:var(--cta)">↑ Arrow bullets + emphasis caps: +38% read-through rate</span>
<h4>⚡ 47,293 Customers Can't Be Wrong — Get Yours Before We Sell Out Again</h4>
<span class="annotation" style="background:rgba(239,68,68,0.12);color:var(--cta)">↑ Exact social proof number + urgency/scarcity: +44% conversion</span>
<p><strong>🔥 SPECIAL: Order today and get FREE shipping + our D3 Absorption Guide (PDF) — $19 value, yours free.</strong></p>
<span class="annotation" style="background:rgba(239,68,68,0.12);color:var(--cta)">↑ Stacked bonuses: classic DR move, still works</span>
`
},
medical: {
afterContent: `
<span class="slider-side-label after" style="background:rgba(59,130,246,0.15);color:var(--blue)">✓ After — Medical-Safe</span>
<h4>Vitamin D3 (Cholecalciferol) 5,000 IU — High-Potency Dietary Supplement</h4>
<span class="annotation" style="background:rgba(59,130,246,0.12);color:var(--blue)">↑ Clinical nomenclature: builds trust with health-conscious buyers</span>
<p class="highlight" style="border-left-color:var(--blue)">Each softgel provides 5,000 IU (125 mcg) of Vitamin D3 as cholecalciferol, delivered in a medium-chain triglyceride (MCT) oil base to support bioavailability.*</p>
<span class="annotation" style="background:rgba(59,130,246,0.12);color:var(--blue)">↑ Precise units (mcg + IU) + asterisk for disclaimer = FDA-compliant</span>
<h4>Key Product Attributes</h4>
<p class="highlight" style="border-left-color:var(--blue)">• Vitamin D contributes to the normal function of the immune system*</p>
<p class="highlight" style="border-left-color:var(--blue)">• Vitamin D is needed for normal calcium absorption and bone maintenance*</p>
<p class="highlight" style="border-left-color:var(--blue)">• Third-party tested for identity, purity, potency, and composition</p>
<p class="highlight" style="border-left-color:var(--blue)">• Free from: soy, gluten, dairy, artificial colors, and preservatives</p>
<p class="highlight" style="border-left-color:var(--blue)">• 365 softgels per container (12-month supply at 1 softgel/day)</p>
<span class="annotation" style="background:rgba(59,130,246,0.12);color:var(--blue)">↑ Structure/function claims only — no disease claims, fully compliant</span>
<h4>Suggested Use</h4>
<p>Take one (1) softgel daily with a meal, or as recommended by your healthcare practitioner. Do not exceed recommended daily intake.</p>
<p style="margin-top:1rem;font-size:0.78rem;color:var(--text-dim)"><em>*These statements have not been evaluated by the Food and Drug Administration. This product is not intended to diagnose, treat, cure, or prevent any disease.</em></p>
<span class="annotation" style="background:rgba(59,130,246,0.12);color:var(--blue)">↑ FDA-mandated disclaimer: required for all supplement claims</span>
`
}
};
function switchStyle(style, clickedBtn) {
// Update toggle buttons
document.querySelectorAll('#demoC-toggles .toggle-btn').forEach(btn => {
btn.classList.remove('active');
});
clickedBtn.classList.add('active');
// Update after content
const afterCopy = document.getElementById('after-copy');
const variant = styleVariants[style];
if (variant && afterCopy) {
afterCopy.innerHTML = variant.afterContent;
}
}
// ── Keyboard shortcut: press 1/2/3 to jump to demos ──
document.addEventListener('keydown', (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
if (e.key === '1') document.getElementById('demo-a')?.scrollIntoView({ behavior: 'smooth' });
if (e.key === '2') document.getElementById('demo-b')?.scrollIntoView({ behavior: 'smooth' });
if (e.key === '3') document.getElementById('demo-c')?.scrollIntoView({ behavior: 'smooth' });
});