From 26532ade3c0726ac7b8eb0a910c2a2c76dbb2db8 Mon Sep 17 00:00:00 2001 From: Omair Saleh Date: Mon, 2 Mar 2026 19:29:47 +0800 Subject: [PATCH] Initial: JustVitamin AI Content Engine proposal site with 3 interactive demos --- Dockerfile | 4 + docker-compose.yml | 22 + html/404.html | 16 + html/css/style.css | 1209 ++++++++++++++++++++++++++++++++++++++++++++ html/index.html | 656 ++++++++++++++++++++++++ html/js/app.js | 378 ++++++++++++++ nginx.conf | 32 ++ 7 files changed, 2317 insertions(+) create mode 100644 Dockerfile create mode 100644 docker-compose.yml create mode 100644 html/404.html create mode 100644 html/css/style.css create mode 100644 html/index.html create mode 100644 html/js/app.js create mode 100644 nginx.conf diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..040c466 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,4 @@ +FROM nginx:alpine +COPY nginx.conf /etc/nginx/conf.d/default.conf +COPY html/ /usr/share/nginx/html/ +EXPOSE 80 diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..94cefc8 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,22 @@ +version: "3.8" + +services: + justvitamin: + image: justvitamin:latest + build: . + networks: + - dokploy-network + deploy: + labels: + - "traefik.enable=true" + - "traefik.http.routers.justvitamin.rule=Host(`justvitamin.quikcue.com`)" + - "traefik.http.routers.justvitamin.entrypoints=websecure" + - "traefik.http.routers.justvitamin.tls.certResolver=letsencrypt" + - "traefik.http.services.justvitamin.loadbalancer.server.port=80" + replicas: 1 + restart_policy: + condition: on-failure + +networks: + dokploy-network: + external: true diff --git a/html/404.html b/html/404.html new file mode 100644 index 0000000..6479d5d --- /dev/null +++ b/html/404.html @@ -0,0 +1,16 @@ + + + + + + 404 — JustVitamin × QuikCue + + + +
+

404

+

This page doesn't exist. But the content engine does.

+ ← Back to the Proposal +
+ + diff --git a/html/css/style.css b/html/css/style.css new file mode 100644 index 0000000..21d3932 --- /dev/null +++ b/html/css/style.css @@ -0,0 +1,1209 @@ +/* ════════════════════════════════════════════════════════════════ + JustVitamin × QuikCue — AI Content Engine Proposal + Dark premium theme. Conversion-optimized. + ════════════════════════════════════════════════════════════════ */ + +:root { + --bg: #050a08; + --bg-alt: #0a100e; + --bg-card: #0d1613; + --bg-card-hover: #111d19; + --bg-glass: rgba(13, 22, 19, 0.7); + --text: #e4e4e7; + --text-muted: #8b9a94; + --text-dim: #4a5d55; + --accent: #10b981; + --accent-bright: #34d399; + --accent-dim: #059669; + --accent-glow: rgba(16, 185, 129, 0.12); + --accent-glow-strong: rgba(16, 185, 129, 0.25); + --cta: #ef4444; + --cta-hover: #f87171; + --cta-glow: rgba(239, 68, 68, 0.2); + --gold: #f59e0b; + --gold-dim: #d97706; + --blue: #3b82f6; + --purple: #8b5cf6; + --border: #162822; + --border-light: #1e3830; + --border-accent: rgba(16, 185, 129, 0.2); + --font-mono: 'SF Mono','Fira Code','JetBrains Mono','Cascadia Code',monospace; + --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; + --max-w: 1100px; + --max-w-narrow: 780px; +} + +*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } +html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 80px; } +body { + background: var(--bg); + color: var(--text); + font-family: var(--font-sans); + line-height: 1.65; + min-height: 100vh; + -webkit-font-smoothing: antialiased; + overflow-x: hidden; +} + +/* ── Animations ── */ +@keyframes fadeUp { + from { opacity: 0; transform: translateY(30px); } + to { opacity: 1; transform: translateY(0); } +} +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} +@keyframes slideRight { + from { opacity: 0; transform: translateX(-20px); } + to { opacity: 1; transform: translateX(0); } +} +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} +@keyframes glow { + 0%, 100% { box-shadow: 0 0 20px var(--accent-glow); } + 50% { box-shadow: 0 0 40px var(--accent-glow-strong); } +} +@keyframes shimmer { + 0% { background-position: -200% 0; } + 100% { background-position: 200% 0; } +} +@keyframes countUp { + from { opacity: 0; transform: scale(0.5); } + to { opacity: 1; transform: scale(1); } +} +@keyframes cardReveal { + from { opacity: 0; transform: translateY(20px) scale(0.95); } + to { opacity: 1; transform: translateY(0) scale(1); } +} +@keyframes typing { + from { width: 0; } + to { width: 100%; } +} +@keyframes blink { + 50% { border-color: transparent; } +} +@keyframes gradientShift { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} +.animate-on-scroll { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.7s ease, transform 0.7s ease; +} +.animate-on-scroll.visible { + opacity: 1; + transform: translateY(0); +} + +/* ── Nav ── */ +nav { + position: sticky; + top: 0; + z-index: 100; + background: rgba(5, 10, 8, 0.88); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-bottom: 1px solid var(--border); + padding: 0.75rem 1.5rem; +} +.nav-inner { + max-width: var(--max-w); + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} +.logo { + font-family: var(--font-mono); + font-size: 0.95rem; + font-weight: 700; + color: var(--accent); + text-decoration: none; + letter-spacing: -0.02em; + display: flex; + align-items: center; + gap: 0.35rem; +} +.logo .dot { color: var(--text-dim); font-weight: 400; } +.logo .brand { color: var(--text); font-weight: 600; } +.nav-links { + display: flex; + gap: 0.25rem; +} +.nav-links a { + font-family: var(--font-mono); + font-size: 0.78rem; + color: var(--text-muted); + text-decoration: none; + padding: 0.35rem 0.65rem; + border-radius: 6px; + transition: all 0.15s ease; +} +.nav-links a:hover, .nav-links a.active { + color: var(--text); + background: var(--bg-card); +} + +/* ── Page Container ── */ +.page { + max-width: var(--max-w); + margin: 0 auto; + padding: 0 1.5rem; +} + +/* ── Section ── */ +.section { + padding: 6rem 0; + position: relative; +} +.section + .section { + border-top: 1px solid var(--border); +} +.section-label { + font-family: var(--font-mono); + font-size: 0.72rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--accent-dim); + margin-bottom: 1rem; + display: flex; + align-items: center; + gap: 0.5rem; +} +.section-label::before { + content: ''; + display: inline-block; + width: 24px; + height: 1px; + background: var(--accent-dim); +} + +/* ── Typography ── */ +h1 { + font-family: var(--font-sans); + font-size: clamp(2.4rem, 6vw, 3.8rem); + font-weight: 800; + line-height: 1.1; + letter-spacing: -0.03em; + color: var(--text); + margin-bottom: 1.25rem; +} +h1 .accent { color: var(--accent); } +h1 .accent-gold { color: var(--gold); } +h2 { + font-family: var(--font-sans); + font-size: clamp(1.6rem, 4vw, 2.2rem); + font-weight: 700; + line-height: 1.2; + letter-spacing: -0.02em; + color: var(--text); + margin-bottom: 1rem; +} +h3 { + font-family: var(--font-sans); + font-size: 1.15rem; + font-weight: 600; + color: var(--text); + margin-bottom: 0.5rem; +} +.subtitle { + font-size: 1.15rem; + color: var(--text-muted); + line-height: 1.7; + max-width: 640px; +} +.subtitle-sm { + font-size: 0.95rem; + color: var(--text-muted); + line-height: 1.7; + max-width: 540px; +} + +/* ── Hero ── */ +.hero { + padding: 5rem 0 4rem; + position: relative; +} +.hero::before { + content: ''; + position: absolute; + top: -20%; + right: -10%; + width: 600px; + height: 600px; + background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); + pointer-events: none; + z-index: 0; +} +.hero > * { position: relative; z-index: 1; } +.hero-eyebrow { + font-family: var(--font-mono); + font-size: 0.82rem; + font-weight: 600; + color: var(--accent); + margin-bottom: 1.25rem; + display: flex; + align-items: center; + gap: 0.5rem; +} +.hero-eyebrow .pill { + font-size: 0.68rem; + background: var(--accent-glow-strong); + color: var(--accent-bright); + padding: 0.2rem 0.6rem; + border-radius: 99px; + border: 1px solid var(--border-accent); +} +.hero .subtitle { + font-size: 1.2rem; + max-width: 600px; +} +.hero-stats { + display: flex; + gap: 2.5rem; + margin-top: 2.5rem; + flex-wrap: wrap; +} +.hero-stat { + display: flex; + flex-direction: column; + gap: 0.15rem; +} +.hero-stat-value { + font-family: var(--font-mono); + font-size: 1.6rem; + font-weight: 800; + color: var(--accent); +} +.hero-stat-label { + font-size: 0.78rem; + color: var(--text-dim); + font-weight: 500; +} + +/* ── Buttons ── */ +.btn-row { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 2rem; +} +.btn { + display: inline-flex; + align-items: center; + gap: 0.4rem; + font-family: var(--font-sans); + font-size: 0.88rem; + font-weight: 600; + padding: 0.7rem 1.4rem; + border-radius: 10px; + text-decoration: none; + transition: all 0.2s ease; + cursor: pointer; + border: none; + position: relative; + overflow: hidden; +} +.btn-primary { + background: var(--accent); + color: #050a08; +} +.btn-primary:hover { + background: var(--accent-bright); + transform: translateY(-2px); + box-shadow: 0 8px 25px var(--accent-glow-strong); +} +.btn-cta { + background: var(--cta); + color: #fff; + font-size: 0.95rem; + padding: 0.85rem 1.8rem; +} +.btn-cta:hover { + background: var(--cta-hover); + transform: translateY(-2px); + box-shadow: 0 8px 25px var(--cta-glow); +} +.btn-cta-large { + background: var(--cta); + color: #fff; + font-size: 1.05rem; + font-weight: 700; + padding: 1rem 2.4rem; + border-radius: 12px; +} +.btn-cta-large:hover { + background: var(--cta-hover); + transform: translateY(-3px); + box-shadow: 0 12px 35px var(--cta-glow); +} +.btn-outline { + background: transparent; + color: var(--text-muted); + border: 1px solid var(--border-light); +} +.btn-outline:hover { + color: var(--text); + border-color: var(--text-muted); + transform: translateY(-1px); +} +.btn-ghost { + background: transparent; + color: var(--accent); + border: 1px solid var(--border-accent); +} +.btn-ghost:hover { + background: var(--accent-glow); + transform: translateY(-1px); +} + +/* ── Cards ── */ +.card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + padding: 1.5rem; + transition: all 0.2s ease; +} +.card:hover { + border-color: var(--border-light); + transform: translateY(-2px); +} +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 1rem; + margin-top: 1.5rem; +} +.card-grid-3 { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + margin-top: 1.5rem; +} + +/* ── Dashboard Section ── */ +.dashboard-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1rem; + margin-top: 2rem; +} +.stat-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + padding: 1.5rem; + text-align: center; + position: relative; + overflow: hidden; +} +.stat-card::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 2px; + background: linear-gradient(90deg, transparent, var(--accent), transparent); +} +.stat-card.gold::before { + background: linear-gradient(90deg, transparent, var(--gold), transparent); +} +.stat-card.blue::before { + background: linear-gradient(90deg, transparent, var(--blue), transparent); +} +.stat-card.purple::before { + background: linear-gradient(90deg, transparent, var(--purple), transparent); +} +.stat-number { + font-family: var(--font-mono); + font-size: 2.2rem; + font-weight: 800; + color: var(--accent); + line-height: 1.1; + margin-bottom: 0.35rem; +} +.stat-card.gold .stat-number { color: var(--gold); } +.stat-card.blue .stat-number { color: var(--blue); } +.stat-card.purple .stat-number { color: var(--purple); } +.stat-label { + font-size: 0.82rem; + color: var(--text-muted); + font-weight: 500; +} +.stat-delta { + font-family: var(--font-mono); + font-size: 0.72rem; + font-weight: 600; + color: var(--accent); + margin-top: 0.5rem; + display: inline-flex; + align-items: center; + gap: 0.2rem; + padding: 0.15rem 0.5rem; + background: var(--accent-glow); + border-radius: 99px; +} + +/* ── Comparison Chart ── */ +.chart-container { + margin-top: 2.5rem; + padding: 2rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; +} +.chart-title { + font-family: var(--font-mono); + font-size: 0.82rem; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.08em; + margin-bottom: 1.5rem; +} +.chart-bars { + display: flex; + flex-direction: column; + gap: 1.25rem; +} +.chart-row { + display: grid; + grid-template-columns: 140px 1fr 60px; + align-items: center; + gap: 1rem; +} +.chart-row-label { + font-size: 0.82rem; + color: var(--text-muted); + font-weight: 500; + text-align: right; +} +.chart-bar-track { + height: 32px; + background: var(--bg-alt); + border-radius: 8px; + overflow: hidden; + position: relative; +} +.chart-bar-fill { + height: 100%; + border-radius: 8px; + transition: width 1.5s ease; + width: 0; + display: flex; + align-items: center; + padding-left: 0.75rem; +} +.chart-bar-fill.green { background: linear-gradient(90deg, var(--accent-dim), var(--accent)); } +.chart-bar-fill.dim { background: linear-gradient(90deg, #1a2420, #243330); } +.chart-bar-fill.gold { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); } +.chart-bar-fill.blue { background: linear-gradient(90deg, #2563eb, var(--blue)); } +.chart-row-value { + font-family: var(--font-mono); + font-size: 0.82rem; + font-weight: 700; + color: var(--text); +} + +/* ── Offer Section ── */ +.offer-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + margin-top: 2rem; +} +.offer-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + padding: 2rem; + position: relative; + overflow: hidden; +} +.offer-card.featured { + border-color: var(--accent-dim); + box-shadow: 0 0 40px var(--accent-glow); +} +.offer-card.featured::before { + content: 'RECOMMENDED'; + position: absolute; + top: 0; right: 0; + font-family: var(--font-mono); + font-size: 0.65rem; + font-weight: 700; + color: #050a08; + background: var(--accent); + padding: 0.25rem 0.75rem 0.25rem 1rem; + border-radius: 0 0 0 10px; +} +.offer-price { + font-family: var(--font-mono); + font-size: 2rem; + font-weight: 800; + color: var(--text); + margin: 1rem 0; +} +.offer-price span { + font-size: 0.9rem; + font-weight: 400; + color: var(--text-dim); +} +.offer-list { + list-style: none; + display: flex; + flex-direction: column; + gap: 0.6rem; + margin: 1.5rem 0; +} +.offer-list li { + font-size: 0.88rem; + color: var(--text-muted); + padding-left: 1.5rem; + position: relative; +} +.offer-list li::before { + content: '✓'; + position: absolute; + left: 0; + color: var(--accent); + font-weight: 700; +} +.offer-list li.highlight { + color: var(--text); + font-weight: 600; +} + +/* ── Demo Sections ── */ +.demo-section { + padding: 5rem 0; + border-top: 1px solid var(--border); +} +.demo-badge { + font-family: var(--font-mono); + font-size: 0.68rem; + font-weight: 700; + padding: 0.25rem 0.7rem; + border-radius: 6px; + display: inline-flex; + align-items: center; + gap: 0.35rem; + margin-bottom: 1rem; +} +.demo-badge.a { background: rgba(239, 68, 68, 0.15); color: var(--cta); border: 1px solid rgba(239, 68, 68, 0.25); } +.demo-badge.b { background: rgba(59, 130, 246, 0.15); color: var(--blue); border: 1px solid rgba(59, 130, 246, 0.25); } +.demo-badge.c { background: rgba(139, 92, 246, 0.15); color: var(--purple); border: 1px solid rgba(139, 92, 246, 0.25); } + +.demo-header { + margin-bottom: 2rem; +} +.demo-header h2 { + margin-bottom: 0.5rem; +} + +/* ── Demo A: Input + Generate ── */ +.demo-input-area { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + padding: 1.5rem; + margin-bottom: 1.5rem; +} +.demo-input-row { + display: flex; + gap: 0.75rem; + align-items: flex-end; +} +.demo-input-group { + flex: 1; + display: flex; + flex-direction: column; + gap: 0.35rem; +} +.demo-input-group label { + font-family: var(--font-mono); + font-size: 0.72rem; + font-weight: 600; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: 0.06em; +} +.demo-input { + background: var(--bg); + border: 1px solid var(--border-light); + border-radius: 8px; + padding: 0.7rem 1rem; + color: var(--text); + font-family: var(--font-sans); + font-size: 0.9rem; + outline: none; + transition: border-color 0.2s; + width: 100%; +} +.demo-input:focus { + border-color: var(--accent); + box-shadow: 0 0 0 3px var(--accent-glow); +} +.demo-input::placeholder { + color: var(--text-dim); +} +textarea.demo-input { + resize: vertical; + min-height: 100px; +} +.btn-generate { + background: var(--cta); + color: #fff; + font-family: var(--font-mono); + font-size: 0.88rem; + font-weight: 700; + padding: 0.7rem 1.5rem; + border: none; + border-radius: 8px; + cursor: pointer; + white-space: nowrap; + transition: all 0.2s ease; + min-width: 180px; +} +.btn-generate:hover { + background: var(--cta-hover); + transform: translateY(-2px); + box-shadow: 0 8px 25px var(--cta-glow); +} +.btn-generate:active { + transform: translateY(0); +} +.btn-generate.loading { + background: #7f1d1d; + pointer-events: none; +} +.btn-generate.loading::after { + content: ''; + display: inline-block; + width: 14px; + height: 14px; + border: 2px solid rgba(255,255,255,0.3); + border-top-color: #fff; + border-radius: 50%; + animation: spin 0.6s linear infinite; + margin-left: 0.5rem; +} +@keyframes spin { + to { transform: rotate(360deg); } +} + +/* ── Asset Bundle Output ── */ +.bundle-output { + display: none; + margin-top: 1rem; +} +.bundle-output.active { + display: block; +} +.bundle-counter { + font-family: var(--font-mono); + font-size: 0.82rem; + color: var(--accent); + margin-bottom: 1rem; + display: flex; + align-items: center; + gap: 0.5rem; +} +.bundle-counter .count { + font-weight: 800; + font-size: 1.1rem; +} +.asset-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 1rem; +} +.asset-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 10px; + padding: 1.25rem; + opacity: 0; + transform: translateY(15px); + transition: all 0.4s ease; +} +.asset-card.revealed { + opacity: 1; + transform: translateY(0); +} +.asset-card-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0.75rem; +} +.asset-type { + font-family: var(--font-mono); + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + padding: 0.15rem 0.5rem; + border-radius: 4px; +} +.asset-type.hero { background: rgba(239, 68, 68, 0.15); color: var(--cta); } +.asset-type.pdp { background: rgba(16, 185, 129, 0.15); color: var(--accent); } +.asset-type.ad { background: rgba(245, 158, 11, 0.15); color: var(--gold); } +.asset-type.email { background: rgba(59, 130, 246, 0.15); color: var(--blue); } +.asset-type.video { background: rgba(139, 92, 246, 0.15); color: var(--purple); } +.asset-type.blog { background: rgba(236, 72, 153, 0.15); color: #ec4899; } +.asset-type.seo { background: rgba(99, 102, 241, 0.15); color: #6366f1; } +.asset-type.a11y { background: rgba(107, 114, 128, 0.15); color: #9ca3af; } +.asset-card-number { + font-family: var(--font-mono); + font-size: 0.68rem; + color: var(--text-dim); +} +.asset-content { + font-size: 0.85rem; + color: var(--text-muted); + line-height: 1.6; +} +.asset-content strong { + color: var(--text); + font-weight: 600; +} +.asset-content ul { + list-style: none; + margin-top: 0.5rem; +} +.asset-content ul li { + padding-left: 1rem; + position: relative; + margin-bottom: 0.3rem; +} +.asset-content ul li::before { + content: '›'; + position: absolute; + left: 0; + color: var(--accent); + font-weight: 700; +} +.bundle-download { + margin-top: 1.5rem; + display: none; + align-items: center; + gap: 1rem; +} +.bundle-download.active { + display: flex; +} +.bundle-download .btn { + animation: glow 2s ease infinite; +} + +/* ── Demo B: Split Screen ── */ +.split-screen { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0; + margin-top: 1.5rem; + border: 1px solid var(--border); + border-radius: 12px; + overflow: hidden; + min-height: 500px; +} +.split-side { + padding: 1.5rem; + position: relative; +} +.split-left { + background: #0d0a0a; + border-right: 1px solid var(--border); +} +.split-right { + background: var(--bg-card); +} +.split-label { + font-family: var(--font-mono); + font-size: 0.68rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 1rem; + padding: 0.25rem 0.6rem; + border-radius: 4px; + display: inline-block; +} +.split-label.competitor { + background: rgba(239, 68, 68, 0.15); + color: var(--cta); +} +.split-label.yours { + background: rgba(16, 185, 129, 0.15); + color: var(--accent); +} +.split-content { + opacity: 0; + transition: opacity 0.5s ease; +} +.split-content.revealed { + opacity: 1; +} +.xray-item { + margin-bottom: 1.25rem; +} +.xray-item-label { + font-family: var(--font-mono); + font-size: 0.7rem; + font-weight: 600; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: 0.06em; + margin-bottom: 0.35rem; +} +.xray-item-value { + font-size: 0.88rem; + color: var(--text-muted); + line-height: 1.6; +} +.xray-item-value strong { color: var(--text); } +.xray-item-value.gap { + color: var(--cta); + font-weight: 600; +} +.xray-tactics { + list-style: none; + display: flex; + flex-direction: column; + gap: 0.4rem; +} +.xray-tactics li { + font-size: 0.85rem; + color: var(--text-muted); + padding-left: 1.25rem; + position: relative; +} +.xray-tactics li::before { + content: ''; + position: absolute; + left: 0; + top: 0.5rem; + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--cta); +} +.improved-hero { + background: var(--bg); + border: 1px solid var(--border-accent); + border-radius: 10px; + padding: 1.5rem; + margin-top: 1rem; +} +.improved-hero h4 { + font-size: 1.1rem; + font-weight: 700; + color: var(--accent-bright); + margin-bottom: 0.75rem; + line-height: 1.3; +} +.improved-hero p { + font-size: 0.85rem; + color: var(--text-muted); + line-height: 1.6; +} +.differentiator-list { + list-style: none; + margin-top: 1rem; +} +.differentiator-list li { + padding: 0.6rem 0; + border-bottom: 1px solid var(--border); + font-size: 0.85rem; + display: flex; + align-items: flex-start; + gap: 0.5rem; +} +.differentiator-list li:last-child { border: none; } +.diff-icon { + font-size: 0.8rem; + flex-shrink: 0; + margin-top: 0.1rem; +} +.diff-text { color: var(--text-muted); } +.diff-text strong { color: var(--text); } +.compliance-notes { + margin-top: 1rem; + padding: 1rem; + background: rgba(239, 68, 68, 0.05); + border: 1px solid rgba(239, 68, 68, 0.15); + border-radius: 8px; +} +.compliance-notes h5 { + font-family: var(--font-mono); + font-size: 0.72rem; + color: var(--cta); + text-transform: uppercase; + letter-spacing: 0.08em; + margin-bottom: 0.5rem; +} +.compliance-notes ul { + list-style: none; +} +.compliance-notes ul li { + font-size: 0.82rem; + color: #f87171; + padding-left: 1rem; + position: relative; + margin-bottom: 0.25rem; +} +.compliance-notes ul li::before { + content: '✕'; + position: absolute; + left: 0; + font-weight: 700; +} + +/* ── Demo C: Before/After Slider ── */ +.slider-container { + margin-top: 1.5rem; + position: relative; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + overflow: hidden; +} +.slider-wrapper { + position: relative; + min-height: 460px; + user-select: none; +} +.slider-before, .slider-after { + padding: 2rem; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; +} +.slider-before { + z-index: 1; + background: #0d0a0a; +} +.slider-after { + z-index: 2; + clip-path: inset(0 50% 0 0); + background: var(--bg-card); +} +.slider-handle { + position: absolute; + top: 0; + bottom: 0; + left: 50%; + width: 4px; + background: var(--accent); + z-index: 10; + cursor: ew-resize; + transform: translateX(-50%); +} +.slider-handle::before { + content: '⟨⟩'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 36px; + height: 36px; + background: var(--accent); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.7rem; + font-weight: 700; + color: #050a08; + box-shadow: 0 0 20px var(--accent-glow-strong); +} +.slider-side-label { + font-family: var(--font-mono); + font-size: 0.68rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + padding: 0.25rem 0.6rem; + border-radius: 4px; + display: inline-block; + margin-bottom: 1rem; +} +.slider-side-label.before { + background: rgba(239, 68, 68, 0.15); + color: var(--cta); +} +.slider-side-label.after { + background: rgba(16, 185, 129, 0.15); + color: var(--accent); +} +.slider-copy { + font-size: 0.9rem; + color: var(--text-muted); + line-height: 1.8; +} +.slider-copy h4 { + font-size: 1rem; + color: var(--text); + font-weight: 700; + margin: 0.75rem 0 0.5rem; +} +.slider-copy .highlight { + background: var(--accent-glow); + border-left: 2px solid var(--accent); + padding: 0.3rem 0.5rem; + margin: 0.35rem 0; + display: block; + border-radius: 0 4px 4px 0; +} +.slider-copy .lowlight { + background: rgba(239, 68, 68, 0.08); + border-left: 2px solid var(--cta); + padding: 0.3rem 0.5rem; + margin: 0.35rem 0; + display: block; + border-radius: 0 4px 4px 0; + text-decoration: line-through; + text-decoration-color: rgba(239, 68, 68, 0.4); +} +.annotation { + font-family: var(--font-mono); + font-size: 0.68rem; + color: var(--accent); + background: var(--accent-glow); + padding: 0.2rem 0.5rem; + border-radius: 4px; + display: inline-block; + margin: 0.3rem 0; +} + +/* ── Style Toggles ── */ +.toggle-group { + display: flex; + gap: 0.5rem; + margin-top: 1.5rem; + flex-wrap: wrap; +} +.toggle-btn { + font-family: var(--font-mono); + font-size: 0.78rem; + font-weight: 600; + padding: 0.5rem 1rem; + border: 1px solid var(--border-light); + border-radius: 8px; + background: transparent; + color: var(--text-muted); + cursor: pointer; + transition: all 0.2s; +} +.toggle-btn:hover { + border-color: var(--text-dim); + color: var(--text); +} +.toggle-btn.active { + background: var(--accent-glow); + border-color: var(--accent-dim); + color: var(--accent); +} +.toggle-btn.active.premium { + background: rgba(139, 92, 246, 0.12); + border-color: rgba(139, 92, 246, 0.3); + color: var(--purple); +} +.toggle-btn.active.dr { + background: rgba(239, 68, 68, 0.12); + border-color: rgba(239, 68, 68, 0.3); + color: var(--cta); +} +.toggle-btn.active.medical { + background: rgba(59, 130, 246, 0.12); + border-color: rgba(59, 130, 246, 0.3); + color: var(--blue); +} + +/* ── CTA Section ── */ +.cta-section { + text-align: center; + padding: 6rem 0; +} +.cta-section h2 { + margin-bottom: 0.75rem; +} +.cta-section .subtitle { + margin: 0 auto 2rem; + text-align: center; +} +.cta-actions { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} +.cta-note { + font-family: var(--font-mono); + font-size: 0.72rem; + color: var(--text-dim); + margin-top: 0.5rem; +} + +/* ── Footer ── */ +footer { + margin-top: 0; + padding: 2rem 0; + border-top: 1px solid var(--border); + display: flex; + align-items: center; + justify-content: space-between; +} +footer p { + font-family: var(--font-mono); + font-size: 0.75rem; + color: var(--text-dim); +} +footer a { + color: var(--accent-dim); + text-decoration: none; +} +footer a:hover { + color: var(--accent); +} + +/* ── Responsive ── */ +@media (max-width: 900px) { + .dashboard-grid { grid-template-columns: repeat(2, 1fr); } + .offer-grid { grid-template-columns: 1fr; } + .split-screen { grid-template-columns: 1fr; } + .split-left { border-right: none; border-bottom: 1px solid var(--border); } + .card-grid-3 { grid-template-columns: 1fr; } + .chart-row { grid-template-columns: 100px 1fr 50px; } +} + +@media (max-width: 640px) { + .page { padding: 0 1rem; } + .section { padding: 3.5rem 0; } + .hero { padding: 3rem 0 2rem; } + h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); } + .hero-stats { gap: 1.5rem; } + .demo-input-row { flex-direction: column; } + .btn-generate { width: 100%; } + .dashboard-grid { grid-template-columns: 1fr 1fr; } + .asset-grid { grid-template-columns: 1fr; } + .btn-row { flex-direction: column; } + .btn-row .btn { width: 100%; justify-content: center; } + .slider-wrapper { min-height: 600px; } + .toggle-group { justify-content: center; } + footer { flex-direction: column; gap: 0.5rem; text-align: center; } +} +@media (max-width: 420px) { + .dashboard-grid { grid-template-columns: 1fr; } + .hero-stats { flex-direction: column; gap: 1rem; } + .nav-links a { font-size: 0.7rem; padding: 0.25rem 0.4rem; } +} diff --git a/html/index.html b/html/index.html new file mode 100644 index 0000000..311631e --- /dev/null +++ b/html/index.html @@ -0,0 +1,656 @@ + + + + + + JustVitamin × QuikCue — AI Content Engine Proposal + + + + + + + + + + + + + + + + + +
+ + +
+
+ LIVE PROPOSAL + Prepared for JustVitamin — March 2026 +
+

+ You don't have a content problem.
+ You have a content engine problem. +

+

+ What if one product input exploded into 12 ready-to-ship marketing assets in 30 seconds? + No briefs. No freelancers. No waiting. Just one system that never sleeps. +

+
+ ▶ See the Demos + 📊 View the Data + 💰 See the Offer +
+
+
+ 0 + Assets per product +
+
+ 0 + Seconds to generate +
+
+ 0 + Faster than manual +
+
+ $0 + Cost per additional asset +
+
+
+ + +
+
+
The Opportunity
+

Your content velocity is leaving revenue on the table

+

Here's what the data shows — and what changes when you turn on the engine.

+
+ +
+
+
0
+
Assets created / week
+
↓ Current pace
+
+
+
0
+
Assets / week with engine
+
↑ 50x increase
+
+
+
0
+
Hours saved / week
+
↑ Reallocate to strategy
+
+
+
0
+
Avg conversion lift
+
↑ AI-optimized copy
+
+
+ +
+
Content Production: Now vs. AI Engine
+
+
+
PDP Copy
+
+
+
+
2/wk
+
+
+
+ AI Engine
+
+
+
+
45/wk
+
+
+
Ad Creatives
+
+
+
+
3/wk
+
+
+
+ AI Engine
+
+
+
+
40/wk
+
+
+
Email / SMS
+
+
+
+
1/wk
+
+
+
+ AI Engine
+
+
+
+
35/wk
+
+
+
+
+ + +
+
+
The Offer
+

Your AI Content Engine — built, trained, and deployed for JustVitamin

+

Not a generic tool. A custom system trained on your brand voice, your compliance rules, your customer data.

+
+ +
+ +
+

🧪 Proof of Concept

+

See it work on your actual products. Zero risk.

+
$0 for the first 7 days
+
    +
  • All 3 demos built for your catalog
    • +
  • 5 products run through the full engine
    • +
  • 12 assets per product generated
    • +
  • Side-by-side competitor analysis
    • +
  • PDP before/after with annotations
    • +
  • Full conversion audit report
    • +
+ Start Free Proof → +
+ + +
+

⚡ Full Content Engine

+

Unlimited generation. Your team's content co-pilot.

+
$2,500 / month
+
    +
  • Everything in Proof of Concept
    • +
  • Unlimited asset generation
    • +
  • Custom brand voice training
    • +
  • Competitor monitoring (5 brands)
    • +
  • Weekly PDP optimization reports
    • +
  • TikTok/UGC script generator
    • +
  • Email + SMS copy engine
    • +
  • SEO meta optimization
    • +
  • Compliance-safe output guarantee
    • +
  • Dedicated Slack channel
    • +
  • Monthly strategy call
    • +
+ Get the Engine → +
+
+ +
+

+ 💡 ROI math: If the engine lifts conversion by just 5% on your top 10 SKUs, that's an estimated + $15k–40k/mo in additional revenue — for $2,500/mo. +

+
+
+ + +
+
+ ⚡ DEMO A +

One Product → 12 Assets in 30 Seconds

+

Enter a product. Press the button. Watch an entire marketing pack materialize.

+
+ +
+
+
+ + +
+ +
+
+ +
+
+ 0 / 12 assets generated + +
+ +
+ +
+
+ Hero Angle + #1 +
+
+ "The Sunshine Vitamin 9 Out of 10 Americans Need More Of" +
    +
  • Targets: Fear of deficiency
    • +
  • Angle: Urgency + statistics
    • +
  • Best for: Facebook ads, PDP hero
    • +
+
+
+ + +
+
+ Hero Angle + #2 +
+
+ "One Capsule. 5,000 IU. Zero Guesswork." +
    +
  • Targets: Simplicity seekers
    • +
  • Angle: Ease + precision dosing
    • +
  • Best for: Google Shopping, email
    • +
+
+
+ + +
+
+ Hero Angle + #3 +
+
+ "What Your Multivitamin Isn't Giving You" +
    +
  • Targets: Existing supplement users
    • +
  • Angle: Gap in current routine
    • +
  • Best for: TikTok hooks, comparison ads
    • +
+
+
+ + +
+
+ PDP Copy + #4 +
+
+ Headline: "Sunshine in a Capsule — High-Potency D3 Your Body Actually Absorbs"

+ Bullets: +
    +
  • 5,000 IU per softgel — clinical-strength dose
    • +
  • Enhanced with MCT oil for 3x better absorption
    • +
  • 3rd-party tested for purity & potency
    • +
  • No artificial fillers, soy-free, gluten-free
    • +
  • 365 capsules — full year supply in one bottle
    • +
+
+
+ + +
+
+ FAQ Block + #5 +
+
+ Q: How much D3 should I take daily?
+ A: Most adults benefit from 2,000–5,000 IU daily. Our softgels deliver a precise 5,000 IU dose.

+ Q: Can I take this with other supplements?
+ A: Yes — D3 pairs especially well with K2 and magnesium for optimal calcium absorption.

+ Q: When will I notice a difference?
+ A: Most customers report improved energy and mood within 2–4 weeks of daily use. +
+
+ + +
+
+ 5 Ad Hooks + #6 +
+
+
    +
  • "Your doctor won't say this — but your D3 levels are probably tanked."
    • +
  • "I stopped buying cheap vitamin D after I saw my blood test."
    • +
  • "POV: You finally find a D3 that actually absorbs."
    • +
  • "$0.07/day for the vitamin that changes everything."
    • +
  • "3 signs you're D3 deficient (and don't know it)."
    • +
+
+
+ + +
+
+ + #7 +
+
+ Subject 1: "Your bones called. They need this."
+ Preview: The #1 vitamin deficiency in America — and the $0.07 fix

+ Subject 2: "We tested 14 D3 brands. Here's what we found."
+ Preview: Absorption rates ranged from 12% to 94%. Guess where ours landed.

+ Subject 3: "Still taking your old D3? Read this first."
+ Preview: Most D3 supplements use the wrong form. Here's what to look for. +
+
+ + +
+
+ TikTok / UGC Script + #8 +
+
+ 15s Script — "The D3 Test"

+ [0–3s] "Quick — do you know your Vitamin D level?"
+ [3–7s] "42% of Americans are deficient. I was one of them."
+ [7–12s] *holds up bottle* "This is the only D3 I trust. 5,000 IU, MCT oil for absorption, third-party tested."
+ [12–15s] "Link in bio. Your future self will thank you."

+ Hook: Personal story + stat = 2.3x avg watch time +
+
+ + +
+
+ Blog Outline + #9 +
+
+ "The Complete Guide to Vitamin D3: Dosage, Benefits, and What Most Brands Get Wrong" +
    +
  • H2: Why 42% of Americans are D3 deficient
    • +
  • H2: D3 vs D2 — the form that actually works
    • +
  • H2: How MCT oil changes absorption rates
    • +
  • H2: The dosage debate: 1,000 IU vs 5,000 IU
    • +
  • H2: What to look for on the label (and what to avoid)
    • +
  • CTA: Shop JustVitamin D3 →
    • +
+ SEO target: "best vitamin d3 supplement" — 33,100 mo/searches +
+
+ + +
+
+ Meta Title + Description + #10 +
+
+ Title: JustVitamin D3 5000 IU — High-Absorption Sunshine Vitamin | 365 Count

+ Description: 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+.

+ 60 chars title / 155 chars desc — Google SERP optimized +
+
+ + +
+
+ Alt Text + Filenames + #11 +
+
+ Hero image:
+ Alt: "JustVitamin D3 5000 IU bottle with softgels on white background"
+ File: justvitamin-d3-5000iu-bottle-front.jpg

+ Lifestyle image:
+ Alt: "Woman holding JustVitamin D3 softgel with morning sunlight"
+ File: justvitamin-d3-lifestyle-morning-routine.jpg

+ ADA-compliant alt text + SEO-friendly filenames +
+
+ + +
+
+ Bonus: A/B Variants + #12 +
+
+ Variant A (Rational): "5,000 IU of D3 with MCT oil for 3x absorption. 365-day supply for $24.99."

+ Variant B (Emotional): "Remember when you had energy? Your D3 levels might be the reason you don't."

+ Variant C (Social Proof): "47,000+ customers switched to JustVitamin D3. Here's why they're not going back."

+ Test all 3 — let data pick the winner +
+
+
+ +
+ + 12 files • PDP, Ads, Email, SEO, Scripts +
+
+
+ + +
+
+ 🔍 DEMO B +

Competitor X-Ray → Instant Offer Upgrade

+

Paste a competitor URL. We reverse-engineer their strategy and build a better version for JustVitamin.

+
+ +
+
+
+ + +
+ +
+
+ + +
+ + +
+
+ 🎨 DEMO C +

PDP Surgeon: Before / After Slider

+

Drag the slider to reveal the transformation. Every change is annotated with why it lifts conversion.

+
+ +
+ + + + +
+ +
+
+ +
+ ✕ Before +
+

Vitamin D3 Supplement

+

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.

+ +

Product Details

+

Made with quality ingredients

+

Supports overall health and wellness

+

Easy to swallow capsules

+

GMP certified facility

+ +

Directions

+

Take one capsule daily with a meal or as directed by your healthcare professional.

+ +

About Us

+

We are committed to providing high-quality supplements at affordable prices. Our products are manufactured in a GMP-certified facility.

+
+
+ + +
+ ✓ After — Optimized +
+

Sunshine in a Capsule — D3 Your Body Actually Absorbs

+ ↑ Benefit-first headline: +34% scroll depth + +

5,000 IU of Vitamin D3 suspended in MCT oil for 3x better absorption — because a vitamin your body can't use is a vitamin you're wasting money on.

+ ↑ Mechanism + contrast = credibility spike + +

Why 47,000+ Customers Switched

+ ↑ Social proof in subhead: +18% time on page +

✓ Clinical-strength 5,000 IU — the dose research actually supports

+

✓ MCT oil carrier — fat-soluble vitamins need fat to absorb

+

✓ 365-day supply — one bottle, one year, one decision

+

✓ Batch-specific lab testing — scan the QR, see the report

+ ↑ Checkmarks + specifics: +22% add-to-cart + +

$0.07/day. Less than a parking meter.

+ ↑ Price reframe to daily cost: +15% conversion + +

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.

+ ↑ Usage clarity removes friction objection +
+
+ + +
+
+
+ +
+

+ ← Drag the slider to compare · Every annotation shows the expected conversion impact → +

+
+
+ + +
+
+
Next Step
+

Ready to turn your catalog into a content machine?

+

+ 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. +

+
+ + 🚀 Book the Live Demo — 15 min, Zero Commitment + + + 🧪 Start the Free 7-Day Proof Instead + +

No contracts. No setup fees. We earn it or we don't.

+
+
+
+ + + + +
+ + + + + diff --git a/html/js/app.js b/html/js/app.js new file mode 100644 index 0000000..b8ea5f2 --- /dev/null +++ b/html/js/app.js @@ -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: ` + ✓ After — Optimized +

Sunshine in a Capsule — D3 Your Body Actually Absorbs

+ ↑ Benefit-first headline: +34% scroll depth + +

5,000 IU of Vitamin D3 suspended in MCT oil for 3x better absorption — because a vitamin your body can't use is a vitamin you're wasting money on.

+ ↑ Mechanism + contrast = credibility spike + +

Why 47,000+ Customers Switched

+ ↑ Social proof in subhead: +18% time on page +

✓ Clinical-strength 5,000 IU — the dose research actually supports

+

✓ MCT oil carrier — fat-soluble vitamins need fat to absorb

+

✓ 365-day supply — one bottle, one year, one decision

+

✓ Batch-specific lab testing — scan the QR, see the report

+ ↑ Checkmarks + specifics: +22% add-to-cart + +

$0.07/day. Less than a parking meter.

+ ↑ Price reframe to daily cost: +15% conversion + +

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.

+ ↑ Usage clarity removes friction objection + ` + }, + premium: { + afterContent: ` + ✓ After — Premium Voice +

The D3 Supplement Refined for Those Who Refuse to Compromise

+ ↑ Aspirational positioning: +28% AOV on premium segments + +

Pharmaceutical-grade Vitamin D3, precision-dosed at 5,000 IU, delivered in a bioavailable MCT oil matrix designed for optimal cellular uptake.

+ ↑ Technical language signals quality: premium buyers respond to specificity + +

Engineered. Not Manufactured.

+

✓ Cholecalciferol sourced from pharmaceutical-grade lanolin

+

✓ MCT oil carrier from organic coconut — no palm derivatives

+

✓ Every batch independently verified — CoA available by QR

+

✓ 365-count — because a premium product shouldn't require monthly reorders

+ ↑ Ingredient sourcing transparency: +41% trust score with $100k+ HHI + +

Your Daily Standard. Elevated.

+ ↑ Identity-level CTA: "this is who I am" framing + +

One softgel with your morning ritual. No additional oil required — the delivery system handles absorption.

+ ` + }, + dr: { + afterContent: ` + ✓ After — Direct Response +

WARNING: Your Vitamin D3 Supplement Might Be Doing Nothing

+ ↑ Pattern interrupt headline: +52% click-through from ads + +

Here's the dirty secret the supplement industry won't tell you: Most D3 supplements use cheap dry powder that your body can barely absorb. You're literally flushing your money down the toilet.

+ ↑ Problem agitation + insider language: builds urgency fast + +

The Fix Takes 2 Seconds a Day:

+

→ 5,000 IU per capsule (that's the REAL dose, not the wimpy 1,000 IU others sell)

+

→ MCT oil delivery = 3X better absorption (backed by published research)

+

→ 365 capsules per bottle = FULL YEAR SUPPLY for less than a coffee per month

+

→ Every single batch tested by an independent lab (we'll show you the report)

+ ↑ Arrow bullets + emphasis caps: +38% read-through rate + +

⚡ 47,293 Customers Can't Be Wrong — Get Yours Before We Sell Out Again

+ ↑ Exact social proof number + urgency/scarcity: +44% conversion + +

🔥 SPECIAL: Order today and get FREE shipping + our D3 Absorption Guide (PDF) — $19 value, yours free.

+ ↑ Stacked bonuses: classic DR move, still works + ` + }, + medical: { + afterContent: ` + ✓ After — Medical-Safe +

Vitamin D3 (Cholecalciferol) 5,000 IU — High-Potency Dietary Supplement

+ ↑ Clinical nomenclature: builds trust with health-conscious buyers + +

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.*

+ ↑ Precise units (mcg + IU) + asterisk for disclaimer = FDA-compliant + +

Key Product Attributes

+

• Vitamin D contributes to the normal function of the immune system*

+

• Vitamin D is needed for normal calcium absorption and bone maintenance*

+

• Third-party tested for identity, purity, potency, and composition

+

• Free from: soy, gluten, dairy, artificial colors, and preservatives

+

• 365 softgels per container (12-month supply at 1 softgel/day)

+ ↑ Structure/function claims only — no disease claims, fully compliant + +

Suggested Use

+

Take one (1) softgel daily with a meal, or as recommended by your healthcare practitioner. Do not exceed recommended daily intake.

+ +

*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.

+ ↑ FDA-mandated disclaimer: required for all supplement claims + ` + } +}; + +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' }); +}); diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..eafe4be --- /dev/null +++ b/nginx.conf @@ -0,0 +1,32 @@ +server { + listen 80; + server_name justvitamin.quikcue.com; + root /usr/share/nginx/html; + index index.html; + + absolute_redirect off; + + location / { + try_files $uri $uri/ =404; + } + + location /css/ { + expires 7d; + add_header Cache-Control "public, immutable"; + } + + location /js/ { + expires 7d; + add_header Cache-Control "public, immutable"; + } + + add_header X-Frame-Options "SAMEORIGIN" always; + add_header X-Content-Type-Options "nosniff" always; + add_header Referrer-Policy "strict-origin-when-cross-origin" always; + + gzip on; + gzip_types text/html text/css application/javascript text/plain; + gzip_min_length 256; + + error_page 404 /404.html; +}