Last active
April 15, 2026 14:53
-
-
Save DevWael/aa1dc5dbc54c7d61205db0bced8f6327 to your computer and use it in GitHub Desktop.
Merchant Module Discovery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Merchant Module Discovery — Playbook Presentation</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| /* ─── RESET & BASE ─── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { font-size: 19px; scroll-behavior: smooth; } | |
| body { | |
| font-family: 'Inter', -apple-system, sans-serif; | |
| background: #0a0a1a; | |
| color: #e2e8f0; | |
| overflow: hidden; | |
| height: 100vh; | |
| width: 100vw; | |
| } | |
| /* ─── GLOBAL ANIMATIONS ─── */ | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(40px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeInDown { | |
| from { opacity: 0; transform: translateY(-30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeInLeft { | |
| from { opacity: 0; transform: translateX(-40px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes fadeInRight { | |
| from { opacity: 0; transform: translateX(40px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes scaleIn { | |
| from { opacity: 0; transform: scale(0.8); } | |
| to { opacity: 1; transform: scale(1); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-12px); } | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: -200% center; } | |
| 100% { background-position: 200% center; } | |
| } | |
| @keyframes gradientShift { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| @keyframes countUp { | |
| from { opacity: 0; transform: translateY(20px) scale(0.5); } | |
| to { opacity: 1; transform: translateY(0) scale(1); } | |
| } | |
| @keyframes drawLine { | |
| from { stroke-dashoffset: 1000; } | |
| to { stroke-dashoffset: 0; } | |
| } | |
| @keyframes bounceIn { | |
| 0% { opacity: 0; transform: scale(0.3); } | |
| 50% { transform: scale(1.05); } | |
| 70% { transform: scale(0.9); } | |
| 100% { opacity: 1; transform: scale(1); } | |
| } | |
| @keyframes slideReveal { | |
| from { clip-path: inset(0 100% 0 0); } | |
| to { clip-path: inset(0 0% 0 0); } | |
| } | |
| @keyframes wiggle { | |
| 0%, 100% { transform: rotate(0deg); } | |
| 25% { transform: rotate(-3deg); } | |
| 75% { transform: rotate(3deg); } | |
| } | |
| @keyframes glow { | |
| 0%, 100% { box-shadow: 0 0 20px rgba(99,102,241,0.3); } | |
| 50% { box-shadow: 0 0 40px rgba(99,102,241,0.6), 0 0 80px rgba(99,102,241,0.2); } | |
| } | |
| @keyframes confetti-fall { | |
| 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } | |
| 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } | |
| } | |
| @keyframes typewriter { | |
| from { width: 0; } | |
| to { width: 100%; } | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| @keyframes ripple { | |
| 0% { transform: scale(0); opacity: 0.6; } | |
| 100% { transform: scale(4); opacity: 0; } | |
| } | |
| @keyframes barGrow { | |
| from { width: 0%; } | |
| } | |
| /* ─── PRESENTATION CONTAINER ─── */ | |
| .presentation { | |
| width: 100vw; | |
| height: 100vh; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* ─── SLIDE BASE ─── */ | |
| .slide { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 50px 80px; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.6s ease; | |
| overflow: hidden; | |
| } | |
| .slide.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .slide.active .anim-up { animation: fadeInUp 0.7s ease forwards; } | |
| .slide.active .anim-down { animation: fadeInDown 0.7s ease forwards; } | |
| .slide.active .anim-left { animation: fadeInLeft 0.7s ease forwards; } | |
| .slide.active .anim-right { animation: fadeInRight 0.7s ease forwards; } | |
| .slide.active .anim-scale { animation: scaleIn 0.6s ease forwards; } | |
| .slide.active .anim-bounce { animation: bounceIn 0.8s ease forwards; } | |
| /* stagger delays */ | |
| .d1 { animation-delay: 0.1s !important; opacity: 0; } | |
| .d2 { animation-delay: 0.25s !important; opacity: 0; } | |
| .d3 { animation-delay: 0.4s !important; opacity: 0; } | |
| .d4 { animation-delay: 0.55s !important; opacity: 0; } | |
| .d5 { animation-delay: 0.7s !important; opacity: 0; } | |
| .d6 { animation-delay: 0.85s !important; opacity: 0; } | |
| .d7 { animation-delay: 1.0s !important; opacity: 0; } | |
| .d8 { animation-delay: 1.15s !important; opacity: 0; } | |
| /* ─── BACKGROUND EFFECTS ─── */ | |
| .bg-gradient { | |
| position: absolute; inset: 0; z-index: -1; | |
| } | |
| .bg-gradient.purple { | |
| background: radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.15) 0%, transparent 60%), | |
| radial-gradient(ellipse at 80% 20%, rgba(168,85,247,0.1) 0%, transparent 50%), | |
| radial-gradient(ellipse at 50% 80%, rgba(236,72,153,0.08) 0%, transparent 50%), | |
| #0a0a1a; | |
| } | |
| .bg-gradient.blue { | |
| background: radial-gradient(ellipse at 30% 30%, rgba(56,189,248,0.12) 0%, transparent 60%), | |
| radial-gradient(ellipse at 70% 70%, rgba(99,102,241,0.1) 0%, transparent 50%), | |
| #0a0a1a; | |
| } | |
| .bg-gradient.green { | |
| background: radial-gradient(ellipse at 40% 60%, rgba(16,185,129,0.12) 0%, transparent 60%), | |
| radial-gradient(ellipse at 80% 30%, rgba(52,211,153,0.08) 0%, transparent 50%), | |
| #0a0a1a; | |
| } | |
| .bg-gradient.amber { | |
| background: radial-gradient(ellipse at 30% 40%, rgba(245,158,11,0.12) 0%, transparent 60%), | |
| radial-gradient(ellipse at 70% 70%, rgba(251,146,60,0.08) 0%, transparent 50%), | |
| #0a0a1a; | |
| } | |
| .bg-gradient.pink { | |
| background: radial-gradient(ellipse at 50% 40%, rgba(236,72,153,0.12) 0%, transparent 60%), | |
| radial-gradient(ellipse at 20% 80%, rgba(168,85,247,0.08) 0%, transparent 50%), | |
| #0a0a1a; | |
| } | |
| .bg-gradient.red { | |
| background: radial-gradient(ellipse at 60% 40%, rgba(239,68,68,0.1) 0%, transparent 60%), | |
| radial-gradient(ellipse at 30% 70%, rgba(245,158,11,0.08) 0%, transparent 50%), | |
| #0a0a1a; | |
| } | |
| /* Floating particles */ | |
| .particles { | |
| position: absolute; inset: 0; z-index: -1; overflow: hidden; | |
| } | |
| .particle { | |
| position: absolute; | |
| width: 4px; height: 4px; | |
| border-radius: 50%; | |
| background: rgba(99,102,241,0.4); | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| /* Grid overlay */ | |
| .grid-bg { | |
| position: absolute; inset: 0; z-index: -1; | |
| background-image: | |
| linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| } | |
| /* ─── TYPOGRAPHY ─── */ | |
| .slide-label { | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| letter-spacing: 3px; | |
| text-transform: uppercase; | |
| color: #818cf8; | |
| margin-bottom: 16px; | |
| } | |
| .slide-title { | |
| font-size: 3.6rem; | |
| font-weight: 800; | |
| line-height: 1.15; | |
| margin-bottom: 20px; | |
| letter-spacing: -0.02em; | |
| } | |
| .slide-title .gradient-text { | |
| background: linear-gradient(135deg, #818cf8, #c084fc, #f472b6); | |
| background-size: 200% auto; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: gradientShift 4s ease infinite; | |
| } | |
| .slide-subtitle { | |
| font-size: 1.45rem; | |
| font-weight: 400; | |
| color: #94a3b8; | |
| max-width: 700px; | |
| text-align: center; | |
| line-height: 1.6; | |
| } | |
| h2 { | |
| font-size: 2.8rem; | |
| font-weight: 800; | |
| margin-bottom: 8px; | |
| letter-spacing: -0.02em; | |
| } | |
| h3 { | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| color: #c4b5fd; | |
| margin-bottom: 6px; | |
| } | |
| /* ─── CARDS ─── */ | |
| .cards-row { | |
| display: flex; | |
| gap: 24px; | |
| width: 100%; | |
| max-width: 1200px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .card { | |
| background: rgba(30,30,60,0.6); | |
| border: 1px solid rgba(99,102,241,0.15); | |
| border-radius: 16px; | |
| padding: 32px 28px; | |
| flex: 1; | |
| min-width: 220px; | |
| max-width: 320px; | |
| backdrop-filter: blur(10px); | |
| transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, #818cf8, #c084fc); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-6px); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 30px rgba(99,102,241,0.1); | |
| border-color: rgba(99,102,241,0.3); | |
| } | |
| .card:hover::before { opacity: 1; } | |
| .card-icon { | |
| font-size: 2.6rem; | |
| margin-bottom: 14px; | |
| display: block; | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .card h3 { color: #e2e8f0; margin-bottom: 10px; font-size: 1.2rem; } | |
| .card p { color: #94a3b8; font-size: 0.95rem; line-height: 1.6; } | |
| /* Stat cards */ | |
| .stat-card { | |
| background: rgba(30,30,60,0.5); | |
| border: 1px solid rgba(99,102,241,0.12); | |
| border-radius: 20px; | |
| padding: 36px; | |
| text-align: center; | |
| min-width: 180px; | |
| transition: transform 0.35s ease; | |
| } | |
| .stat-card:hover { transform: scale(1.05); } | |
| .stat-number { | |
| font-size: 3.6rem; | |
| font-weight: 900; | |
| background: linear-gradient(135deg, #818cf8, #f472b6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| line-height: 1.1; | |
| } | |
| .stat-label { | |
| font-size: 0.9rem; | |
| color: #94a3b8; | |
| margin-top: 8px; | |
| font-weight: 500; | |
| } | |
| /* ─── PROBLEM BARS ─── */ | |
| .problem-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| padding: 24px 28px; | |
| background: rgba(239,68,68,0.06); | |
| border: 1px solid rgba(239,68,68,0.15); | |
| border-radius: 14px; | |
| margin-bottom: 14px; | |
| max-width: 800px; | |
| width: 100%; | |
| transition: transform 0.3s ease, background 0.3s ease; | |
| } | |
| .problem-item:hover { | |
| transform: translateX(8px); | |
| background: rgba(239,68,68,0.1); | |
| } | |
| .problem-icon { | |
| font-size: 2rem; | |
| flex-shrink: 0; | |
| animation: wiggle 2s ease-in-out infinite; | |
| } | |
| .problem-text h4 { | |
| font-size: 1.15rem; | |
| font-weight: 700; | |
| color: #fca5a5; | |
| margin-bottom: 4px; | |
| } | |
| .problem-text p { | |
| color: #94a3b8; | |
| font-size: 0.92rem; | |
| line-height: 1.5; | |
| } | |
| /* ─── INITIATIVE CARDS ─── */ | |
| .initiative-card { | |
| background: rgba(30,30,60,0.5); | |
| border: 1px solid rgba(99,102,241,0.12); | |
| border-radius: 18px; | |
| padding: 30px 28px; | |
| flex: 1; | |
| min-width: 200px; | |
| max-width: 210px; | |
| text-align: center; | |
| position: relative; | |
| transition: all 0.4s ease; | |
| cursor: default; | |
| } | |
| .initiative-card::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -2px; | |
| border-radius: 20px; | |
| background: linear-gradient(135deg, var(--accent), transparent, var(--accent)); | |
| z-index: -1; | |
| opacity: 0; | |
| transition: opacity 0.4s ease; | |
| } | |
| .initiative-card:hover { | |
| transform: translateY(-8px) scale(1.02); | |
| } | |
| .initiative-card:hover::after { | |
| opacity: 0.4; | |
| } | |
| .initiative-num { | |
| width: 42px; height: 42px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 800; | |
| font-size: 1rem; | |
| margin: 0 auto 14px; | |
| color: #fff; | |
| } | |
| .initiative-card h3 { | |
| font-size: 1.1rem; | |
| color: #e2e8f0; | |
| margin-bottom: 6px; | |
| } | |
| .initiative-card p { | |
| font-size: 0.85rem; | |
| color: #94a3b8; | |
| line-height: 1.5; | |
| } | |
| .initiative-card .effort-tag { | |
| display: inline-block; | |
| padding: 3px 10px; | |
| border-radius: 99px; | |
| font-size: 0.65rem; | |
| font-weight: 600; | |
| margin-top: 10px; | |
| letter-spacing: 0.5px; | |
| } | |
| /* ─── WIZARD STEPS ─── */ | |
| .wizard-flow { | |
| display: flex; | |
| align-items: center; | |
| gap: 0; | |
| max-width: 1100px; | |
| } | |
| .wizard-step { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| gap: 8px; | |
| flex: 1; | |
| position: relative; | |
| } | |
| .wizard-step-circle { | |
| width: 64px; height: 64px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.7rem; | |
| transition: transform 0.3s ease; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .wizard-step:hover .wizard-step-circle { | |
| transform: scale(1.15); | |
| animation: glow 2s ease infinite; | |
| } | |
| .wizard-step-label { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: #c4b5fd; | |
| max-width: 100px; | |
| } | |
| .wizard-step-desc { | |
| font-size: 0.78rem; | |
| color: #64748b; | |
| max-width: 110px; | |
| } | |
| .wizard-connector { | |
| width: 70px; | |
| height: 2px; | |
| background: linear-gradient(90deg, rgba(99,102,241,0.4), rgba(168,85,247,0.4)); | |
| position: relative; | |
| flex-shrink: 0; | |
| margin-top: -28px; | |
| } | |
| .wizard-connector::after { | |
| content: '→'; | |
| position: absolute; | |
| right: -4px; | |
| top: -9px; | |
| color: #818cf8; | |
| font-size: 0.9rem; | |
| } | |
| /* ─── SCORE GAUGE ─── */ | |
| .gauge-container { | |
| position: relative; | |
| width: 250px; | |
| height: 250px; | |
| } | |
| .gauge-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .gauge-bg { | |
| fill: none; | |
| stroke: rgba(99,102,241,0.1); | |
| stroke-width: 12; | |
| } | |
| .gauge-fill { | |
| fill: none; | |
| stroke: url(#gaugeGradient); | |
| stroke-width: 12; | |
| stroke-linecap: round; | |
| stroke-dasharray: 628; | |
| stroke-dashoffset: 628; | |
| transition: stroke-dashoffset 2s ease; | |
| } | |
| .slide.active .gauge-fill { | |
| stroke-dashoffset: 201; | |
| } | |
| .gauge-label { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .gauge-number { | |
| font-size: 4rem; | |
| font-weight: 900; | |
| background: linear-gradient(135deg, #818cf8, #f472b6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .gauge-sub { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: #64748b; | |
| } | |
| /* ─── PROGRESS BARS ─── */ | |
| .progress-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| margin-bottom: 14px; | |
| max-width: 500px; | |
| width: 100%; | |
| } | |
| .progress-label { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| color: #c4b5fd; | |
| min-width: 140px; | |
| text-align: right; | |
| } | |
| .progress-track { | |
| flex: 1; | |
| height: 12px; | |
| background: rgba(99,102,241,0.1); | |
| border-radius: 99px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 99px; | |
| background: linear-gradient(90deg, #818cf8, #c084fc); | |
| width: 0%; | |
| transition: width 1.5s ease; | |
| } | |
| .slide.active .pf-80 { width: 80%; animation: barGrow 1.5s ease forwards; animation-delay: 0.5s; } | |
| .slide.active .pf-70 { width: 70%; animation: barGrow 1.5s ease forwards; animation-delay: 0.7s; } | |
| .slide.active .pf-50 { width: 50%; animation: barGrow 1.5s ease forwards; animation-delay: 0.9s; } | |
| .slide.active .pf-100 { width: 100%; animation: barGrow 1.5s ease forwards; animation-delay: 1.1s; } | |
| .slide.active .pf-10 { width: 10%; animation: barGrow 1.5s ease forwards; animation-delay: 1.3s; } | |
| .progress-pct { | |
| font-size: 0.85rem; | |
| font-weight: 700; | |
| color: #818cf8; | |
| min-width: 36px; | |
| } | |
| /* ─── BUNDLE CARDS ─── */ | |
| .bundle-card { | |
| background: rgba(30,30,60,0.6); | |
| border: 1px solid rgba(99,102,241,0.12); | |
| border-radius: 18px; | |
| padding: 30px 26px; | |
| min-width: 210px; | |
| max-width: 230px; | |
| flex: 1; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.4s ease; | |
| } | |
| .bundle-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; left: -50%; | |
| width: 200%; height: 200%; | |
| background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%); | |
| animation: none; | |
| transition: transform 1s ease; | |
| } | |
| .bundle-card:hover { | |
| transform: translateY(-6px); | |
| border-color: rgba(99,102,241,0.3); | |
| box-shadow: 0 16px 40px rgba(0,0,0,0.3); | |
| } | |
| .bundle-card:hover::before { | |
| animation: gradientShift 3s ease infinite; | |
| } | |
| .bundle-icon { | |
| font-size: 2.3rem; | |
| margin-bottom: 12px; | |
| display: block; | |
| } | |
| .bundle-card h4 { | |
| font-size: 1.05rem; | |
| font-weight: 700; | |
| color: #e2e8f0; | |
| margin-bottom: 4px; | |
| } | |
| .bundle-card .bundle-desc { | |
| font-size: 0.8rem; | |
| color: #94a3b8; | |
| margin-bottom: 12px; | |
| line-height: 1.5; | |
| } | |
| .bundle-modules { | |
| font-size: 0.8rem; | |
| color: #818cf8; | |
| font-weight: 600; | |
| margin-bottom: 6px; | |
| } | |
| .bundle-points { | |
| display: inline-block; | |
| padding: 3px 10px; | |
| border-radius: 99px; | |
| background: rgba(16,185,129,0.15); | |
| color: #34d399; | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| } | |
| /* ─── TIMELINE ─── */ | |
| .timeline { | |
| display: flex; | |
| gap: 0; | |
| max-width: 1100px; | |
| width: 100%; | |
| align-items: flex-start; | |
| position: relative; | |
| } | |
| .timeline::after { | |
| content: ''; | |
| position: absolute; | |
| top: 28px; | |
| left: 0; right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, #818cf8, #c084fc, #f472b6, #fb923c, #34d399); | |
| border-radius: 99px; | |
| z-index: 0; | |
| } | |
| .timeline-item { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .timeline-dot { | |
| width: 62px; height: 62px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 800; | |
| font-size: 0.95rem; | |
| color: #fff; | |
| border: 3px solid #0a0a1a; | |
| margin-bottom: 14px; | |
| transition: transform 0.3s ease; | |
| } | |
| .timeline-item:hover .timeline-dot { | |
| transform: scale(1.2); | |
| } | |
| .timeline-version { | |
| font-size: 0.95rem; | |
| font-weight: 700; | |
| color: #e2e8f0; | |
| margin-bottom: 4px; | |
| } | |
| .timeline-title { | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| color: #c4b5fd; | |
| margin-bottom: 4px; | |
| } | |
| .timeline-desc { | |
| font-size: 0.75rem; | |
| color: #64748b; | |
| max-width: 160px; | |
| line-height: 1.4; | |
| } | |
| .timeline-weeks { | |
| display: inline-block; | |
| margin-top: 6px; | |
| padding: 2px 8px; | |
| border-radius: 99px; | |
| background: rgba(99,102,241,0.1); | |
| color: #818cf8; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| } | |
| /* ─── ANTI-PATTERNS ─── */ | |
| .antipattern { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 16px 22px; | |
| background: rgba(239,68,68,0.05); | |
| border: 1px solid rgba(239,68,68,0.12); | |
| border-radius: 12px; | |
| max-width: 550px; | |
| width: 100%; | |
| margin-bottom: 10px; | |
| transition: all 0.3s ease; | |
| } | |
| .antipattern:hover { | |
| background: rgba(239,68,68,0.08); | |
| transform: translateX(6px); | |
| } | |
| .antipattern .x-mark { | |
| font-size: 1.4rem; | |
| flex-shrink: 0; | |
| } | |
| .antipattern h4 { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| color: #fca5a5; | |
| } | |
| .antipattern p { | |
| font-size: 0.8rem; | |
| color: #94a3b8; | |
| } | |
| .principle { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 16px 22px; | |
| background: rgba(16,185,129,0.05); | |
| border: 1px solid rgba(16,185,129,0.12); | |
| border-radius: 12px; | |
| max-width: 550px; | |
| width: 100%; | |
| margin-bottom: 10px; | |
| transition: all 0.3s ease; | |
| } | |
| .principle:hover { | |
| background: rgba(16,185,129,0.08); | |
| transform: translateX(6px); | |
| } | |
| .principle .check { | |
| font-size: 1.4rem; | |
| flex-shrink: 0; | |
| } | |
| .principle h4 { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| color: #34d399; | |
| } | |
| /* ─── KPI TABLE ─── */ | |
| .kpi-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 18px; | |
| max-width: 900px; | |
| } | |
| .kpi-card { | |
| background: rgba(30,30,60,0.5); | |
| border: 1px solid rgba(99,102,241,0.12); | |
| border-radius: 16px; | |
| padding: 26px 24px; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| } | |
| .kpi-card:hover { | |
| transform: translateY(-4px); | |
| border-color: rgba(99,102,241,0.3); | |
| } | |
| .kpi-current { | |
| font-size: 1.7rem; | |
| font-weight: 800; | |
| color: #94a3b8; | |
| } | |
| .kpi-arrow { | |
| font-size: 1.4rem; | |
| color: #818cf8; | |
| margin: 4px 0; | |
| } | |
| .kpi-target { | |
| font-size: 1.7rem; | |
| font-weight: 800; | |
| color: #34d399; | |
| } | |
| .kpi-label { | |
| font-size: 0.82rem; | |
| color: #64748b; | |
| margin-top: 8px; | |
| font-weight: 500; | |
| } | |
| /* ─── MODULE HUB WIREFRAME ─── */ | |
| .wireframe { | |
| background: rgba(20,20,45,0.8); | |
| border: 1px solid rgba(99,102,241,0.15); | |
| border-radius: 16px; | |
| padding: 24px; | |
| max-width: 750px; | |
| width: 100%; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.72rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .wireframe::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 32px; | |
| background: rgba(99,102,241,0.08); | |
| border-radius: 16px 16px 0 0; | |
| } | |
| .wireframe-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 6px 0 16px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .wf-search { | |
| flex: 1; | |
| height: 32px; | |
| background: rgba(99,102,241,0.08); | |
| border: 1px solid rgba(99,102,241,0.2); | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 12px; | |
| color: #64748b; | |
| font-size: 0.72rem; | |
| } | |
| .wf-btn { | |
| height: 32px; | |
| padding: 0 14px; | |
| background: rgba(99,102,241,0.1); | |
| border: 1px solid rgba(99,102,241,0.2); | |
| border-radius: 8px; | |
| color: #c4b5fd; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 0.68rem; | |
| font-weight: 600; | |
| cursor: default; | |
| } | |
| .wf-tabs { | |
| display: flex; | |
| gap: 6px; | |
| margin-bottom: 18px; | |
| } | |
| .wf-tab { | |
| padding: 6px 14px; | |
| border-radius: 8px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| background: rgba(99,102,241,0.06); | |
| color: #94a3b8; | |
| transition: all 0.3s ease; | |
| cursor: default; | |
| } | |
| .wf-tab.active { | |
| background: rgba(99,102,241,0.2); | |
| color: #818cf8; | |
| } | |
| .wf-modules { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 10px; | |
| } | |
| .wf-module { | |
| background: rgba(99,102,241,0.04); | |
| border: 1px solid rgba(99,102,241,0.1); | |
| border-radius: 10px; | |
| padding: 14px; | |
| transition: all 0.3s ease; | |
| cursor: default; | |
| } | |
| .wf-module:hover { | |
| background: rgba(99,102,241,0.08); | |
| border-color: rgba(99,102,241,0.25); | |
| } | |
| .wf-module-name { | |
| font-weight: 700; | |
| color: #e2e8f0; | |
| font-size: 0.72rem; | |
| margin-bottom: 3px; | |
| } | |
| .wf-module-desc { | |
| color: #64748b; | |
| font-size: 0.6rem; | |
| line-height: 1.4; | |
| } | |
| .wf-pro-badge { | |
| display: inline-block; | |
| padding: 1px 6px; | |
| border-radius: 4px; | |
| background: rgba(168,85,247,0.2); | |
| color: #c084fc; | |
| font-size: 0.55rem; | |
| font-weight: 700; | |
| margin-left: 4px; | |
| } | |
| .wf-toggle { | |
| width: 28px; | |
| height: 14px; | |
| background: rgba(16,185,129,0.3); | |
| border-radius: 99px; | |
| position: relative; | |
| float: right; | |
| margin-top: 2px; | |
| } | |
| .wf-toggle::after { | |
| content: ''; | |
| width: 10px; height: 10px; | |
| border-radius: 50%; | |
| background: #34d399; | |
| position: absolute; | |
| top: 2px; | |
| right: 2px; | |
| } | |
| .wf-toggle.off { | |
| background: rgba(100,116,139,0.2); | |
| } | |
| .wf-toggle.off::after { | |
| background: #475569; | |
| left: 2px; | |
| right: auto; | |
| } | |
| /* ─── FULLSCREEN BUTTON ─── */ | |
| .fullscreen-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| border: 1px solid rgba(99,102,241,0.2); | |
| border-radius: 10px; | |
| background: rgba(99,102,241,0.08); | |
| color: #c4b5fd; | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-family: inherit; | |
| flex-shrink: 0; | |
| } | |
| .fullscreen-btn:hover { | |
| background: rgba(99,102,241,0.15); | |
| border-color: rgba(99,102,241,0.35); | |
| transform: scale(1.08); | |
| } | |
| .fullscreen-btn svg { | |
| width: 18px; | |
| height: 18px; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 2; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| transition: transform 0.3s ease; | |
| } | |
| .fullscreen-btn:hover svg { | |
| transform: scale(1.1); | |
| } | |
| /* ─── NAVIGATION ─── */ | |
| .nav-bar { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; right: 0; | |
| height: 64px; | |
| background: rgba(10,10,26,0.9); | |
| backdrop-filter: blur(20px); | |
| border-top: 1px solid rgba(99,102,241,0.1); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 32px; | |
| z-index: 100; | |
| } | |
| .nav-progress { | |
| display: flex; | |
| gap: 5px; | |
| align-items: center; | |
| } | |
| .nav-dot { | |
| width: 8px; height: 8px; | |
| border-radius: 50%; | |
| background: rgba(99,102,241,0.2); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-dot.active { | |
| background: #818cf8; | |
| width: 24px; | |
| border-radius: 99px; | |
| } | |
| .nav-dot:hover { | |
| background: rgba(99,102,241,0.5); | |
| } | |
| .nav-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 20px; | |
| border: 1px solid rgba(99,102,241,0.2); | |
| border-radius: 10px; | |
| background: rgba(99,102,241,0.08); | |
| color: #c4b5fd; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-family: inherit; | |
| } | |
| .nav-btn:hover { | |
| background: rgba(99,102,241,0.15); | |
| border-color: rgba(99,102,241,0.35); | |
| transform: translateY(-1px); | |
| } | |
| .nav-btn:disabled { | |
| opacity: 0.3; | |
| pointer-events: none; | |
| } | |
| .nav-counter { | |
| font-size: 0.82rem; | |
| color: #64748b; | |
| font-weight: 500; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* ─── TWO COLUMN LAYOUT ─── */ | |
| .two-col { | |
| display: flex; | |
| gap: 48px; | |
| align-items: center; | |
| max-width: 1100px; | |
| width: 100%; | |
| } | |
| .col { flex: 1; } | |
| /* ─── MISC ─── */ | |
| .badge { | |
| display: inline-block; | |
| padding: 4px 12px; | |
| border-radius: 99px; | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| letter-spacing: 0.5px; | |
| } | |
| .badge-purple { background: rgba(99,102,241,0.15); color: #818cf8; } | |
| .badge-green { background: rgba(16,185,129,0.15); color: #34d399; } | |
| .badge-amber { background: rgba(245,158,11,0.15); color: #fbbf24; } | |
| .badge-red { background: rgba(239,68,68,0.15); color: #f87171; } | |
| .badge-pink { background: rgba(236,72,153,0.15); color: #f472b6; } | |
| .spacer { height: 20px; } | |
| .spacer-sm { height: 12px; } | |
| .text-center { text-align: center; } | |
| .text-muted { color: #64748b; } | |
| .text-sm { font-size: 0.85rem; } | |
| .flex-center { display: flex; align-items: center; justify-content: center; } | |
| .gap-24 { gap: 24px; } | |
| .gap-16 { gap: 16px; } | |
| .w-full { width: 100%; max-width: 1100px; } | |
| .quote { | |
| border-left: 3px solid #818cf8; | |
| padding: 16px 24px; | |
| background: rgba(99,102,241,0.06); | |
| border-radius: 0 12px 12px 0; | |
| font-style: italic; | |
| color: #c4b5fd; | |
| max-width: 600px; | |
| font-size: 1rem; | |
| line-height: 1.6; | |
| } | |
| .quote-author { | |
| font-style: normal; | |
| color: #64748b; | |
| font-size: 0.8rem; | |
| margin-top: 8px; | |
| display: block; | |
| } | |
| /* ─── PSYCHOLOGY CARDS ─── */ | |
| .psych-card { | |
| background: rgba(30,30,60,0.5); | |
| border: 1px solid rgba(99,102,241,0.12); | |
| border-radius: 16px; | |
| padding: 22px 20px; | |
| min-width: 200px; | |
| max-width: 200px; | |
| transition: all 0.35s ease; | |
| } | |
| .psych-card:hover { | |
| transform: translateY(-5px) rotate(-1deg); | |
| border-color: rgba(99,102,241,0.3); | |
| } | |
| .psych-icon { | |
| font-size: 1.6rem; | |
| margin-bottom: 10px; | |
| display: block; | |
| } | |
| .psych-card h4 { | |
| font-size: 0.85rem; | |
| font-weight: 700; | |
| color: #c4b5fd; | |
| margin-bottom: 6px; | |
| } | |
| .psych-card p { | |
| font-size: 0.72rem; | |
| color: #94a3b8; | |
| line-height: 1.5; | |
| } | |
| /* ─── KEYBOARD HINT ─── */ | |
| .keyboard-hint { | |
| position: fixed; | |
| bottom: 80px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 0.72rem; | |
| color: #475569; | |
| z-index: 99; | |
| opacity: 1; | |
| transition: opacity 0.5s ease; | |
| } | |
| .keyboard-hint.hidden { opacity: 0; pointer-events: none; } | |
| .key { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 3px 8px; | |
| background: rgba(99,102,241,0.08); | |
| border: 1px solid rgba(99,102,241,0.15); | |
| border-radius: 6px; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.65rem; | |
| color: #818cf8; | |
| } | |
| /* Two columns for lists */ | |
| .split-cols { | |
| display: flex; | |
| gap: 40px; | |
| max-width: 1100px; | |
| width: 100%; | |
| } | |
| .split-col { flex: 1; } | |
| /* ─── DETAIL PANEL (click-to-expand) ─── */ | |
| .detail-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(5,5,20,0.75); | |
| backdrop-filter: blur(12px); | |
| z-index: 200; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.35s ease; | |
| } | |
| .detail-overlay.open { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .detail-panel { | |
| background: rgba(22,22,50,0.95); | |
| border: 1px solid rgba(99,102,241,0.25); | |
| border-radius: 20px; | |
| padding: 36px 40px; | |
| max-width: 560px; | |
| width: 90%; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| transform: translateY(24px) scale(0.96); | |
| transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s ease; | |
| opacity: 0; | |
| position: relative; | |
| } | |
| .detail-overlay.open .detail-panel { | |
| transform: translateY(0) scale(1); | |
| opacity: 1; | |
| } | |
| .detail-close { | |
| position: absolute; | |
| top: 14px; | |
| right: 18px; | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| background: rgba(99,102,241,0.1); | |
| border: 1px solid rgba(99,102,241,0.15); | |
| color: #94a3b8; | |
| font-size: 1rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.25s ease; | |
| } | |
| .detail-close:hover { | |
| background: rgba(239,68,68,0.15); | |
| border-color: rgba(239,68,68,0.3); | |
| color: #f87171; | |
| transform: rotate(90deg); | |
| } | |
| .detail-icon { | |
| font-size: 2.4rem; | |
| margin-bottom: 14px; | |
| display: block; | |
| } | |
| .detail-panel h3 { | |
| font-size: 1.4rem; | |
| font-weight: 800; | |
| color: #e2e8f0; | |
| margin-bottom: 10px; | |
| } | |
| .detail-panel p { | |
| color: #b0b8c8; | |
| font-size: 0.92rem; | |
| line-height: 1.7; | |
| margin-bottom: 10px; | |
| } | |
| .detail-panel ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 12px 0 0; | |
| } | |
| .detail-panel ul li { | |
| padding: 6px 0; | |
| color: #94a3b8; | |
| font-size: 0.88rem; | |
| line-height: 1.5; | |
| border-bottom: 1px solid rgba(99,102,241,0.06); | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 8px; | |
| } | |
| .detail-panel ul li::before { | |
| content: '→'; | |
| color: #818cf8; | |
| font-weight: 700; | |
| flex-shrink: 0; | |
| } | |
| .detail-hint { | |
| font-size: 0.7rem; | |
| color: #475569; | |
| text-align: center; | |
| margin-top: 6px; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| [data-detail] { | |
| cursor: pointer; | |
| } | |
| [data-detail]:hover .detail-hint { | |
| opacity: 1; | |
| } | |
| [data-detail]::after { | |
| content: 'click for details'; | |
| position: absolute; | |
| bottom: 6px; | |
| right: 10px; | |
| font-size: 0.55rem; | |
| color: #475569; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| pointer-events: none; | |
| letter-spacing: 0.5px; | |
| text-transform: uppercase; | |
| font-weight: 600; | |
| } | |
| [data-detail]:hover::after { | |
| opacity: 0.7; | |
| } | |
| /* scrollbar in detail panel */ | |
| .detail-panel::-webkit-scrollbar { width: 4px; } | |
| .detail-panel::-webkit-scrollbar-track { background: transparent; } | |
| .detail-panel::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.2); border-radius: 99px; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- SVG Definitions --> | |
| <svg width="0" height="0" style="position:absolute"> | |
| <defs> | |
| <linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" style="stop-color:#818cf8"/> | |
| <stop offset="50%" style="stop-color:#c084fc"/> | |
| <stop offset="100%" style="stop-color:#f472b6"/> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <div class="presentation" id="presentation"> | |
| <!-- ============================================================ --> | |
| <!-- SLIDE 0: TITLE --> | |
| <!-- ============================================================ --> | |
| <div class="slide active" data-slide="0"> | |
| <div class="bg-gradient purple"></div> | |
| <div class="grid-bg"></div> | |
| <div class="particles" id="particles-0"></div> | |
| <span class="slide-label anim-down d1">Merchant Plugin · Strategic Playbook</span> | |
| <h1 class="slide-title anim-up d2" style="text-align:center"> | |
| <span class="gradient-text">Module Discovery</span><br> | |
| & Onboarding | |
| </h1> | |
| <div class="spacer"></div> | |
| <p class="slide-subtitle anim-up d3"> | |
| Transforming a crowded 47-module list into a guided,<br> | |
| discovery-oriented experience that users love. | |
| </p> | |
| <div class="spacer"></div> | |
| <div class="cards-row anim-up d4"> | |
| <div class="stat-card"> | |
| <div class="stat-number">47</div> | |
| <div class="stat-label">Modules</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number">48</div> | |
| <div class="stat-label">Research Queries</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number">5</div> | |
| <div class="stat-label">Initiatives</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number">5</div> | |
| <div class="stat-label">Release Phases</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============================================================ --> | |
| <!-- SLIDE 1: THE PROBLEM --> | |
| <!-- ============================================================ --> | |
| <div class="slide" data-slide="1"> | |
| <div class="bg-gradient red"></div> | |
| <div class="grid-bg"></div> | |
| <span class="slide-label anim-down d1">The Problem</span> | |
| <h2 class="anim-up d1" style="text-align:center">47 Modules, Zero Guidance</h2> | |
| <p class="text-sm text-muted anim-up d2" style="max-width:600px; text-align:center; line-height:1.6; margin-bottom: 24px;"> | |
| Users face a flat, scrollable wall of features. No search, no filtering,<br>no recommendations. The result? | |
| </p> | |
| <div class="anim-up d3"> | |
| <div class="problem-item" data-detail="paradox-choice"> | |
| <span class="problem-icon">😰</span> | |
| <div class="problem-text"> | |
| <h4>Paradox of Choice</h4> | |
| <p>47 options cause decision fatigue — users activate nothing.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="anim-up d4"> | |
| <div class="problem-item" data-detail="hidden-value"> | |
| <span class="problem-icon">🙈</span> | |
| <div class="problem-text"> | |
| <h4>Hidden Value</h4> | |
| <p>Users leave thinking the feature they need doesn't exist — when it does.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="anim-up d5"> | |
| <div class="problem-item" data-detail="low-adoption"> | |
| <span class="problem-icon">📉</span> | |
| <div class="problem-text"> | |
| <h4>Low Feature Adoption</h4> | |
| <p>Avg. user activates 3-5 of 47 modules. 90% of value goes unused.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============================================================ --> | |
| <!-- SLIDE 2: WHO'S AFFECTED --> | |
| <!-- ============================================================ --> | |
| <div class="slide" data-slide="2"> | |
| <div class="bg-gradient amber"></div> | |
| <div class="grid-bg"></div> | |
| <span class="slide-label anim-down d1">User Segments</span> | |
| <h2 class="anim-up d1" style="text-align:center">Who This Affects</h2> | |
| <div class="spacer"></div> | |
| <div class="cards-row"> | |
| <div class="card anim-up d2" data-detail="seg-new"> | |
| <span class="card-icon">🆕</span> | |
| <h3>New Users</h3> | |
| <p>Day 0–7: See a wall of modules with no guidance → high bounce rate.</p> | |
| </div> | |
| <div class="card anim-up d3" data-detail="seg-casual"> | |
| <span class="card-icon">😴</span> | |
| <h3>Casual Users</h3> | |
| <p>Day 7–30: Activated 2-3 modules, never discover the remaining 40+.</p> | |
| </div> | |
| <div class="card anim-up d4" data-detail="seg-evaluator"> | |
| <span class="card-icon">🔍</span> | |
| <h3>Evaluators</h3> | |
| <p>Comparing Merchant vs competitors → can't quickly find "Feature X".</p> | |
| </div> | |
| <div class="card anim-up d5" data-detail="seg-prospect"> | |
| <span class="card-icon">💎</span> | |
| <h3>Pro Prospects</h3> | |
| <p>Free users who don't know Pro features exist → missed upsell.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============================================================ --> | |
| <!-- SLIDE 3: COMPETITIVE RESEARCH --> | |
| <!-- ============================================================ --> | |
| <div class="slide" data-slide="3"> | |
| <div class="bg-gradient blue"></div> | |
| <div class="grid-bg"></div> | |
| <span class="slide-label anim-down d1">Competitive Intelligence</span> | |
| <h2 class="anim-up d1" style="text-align:center">What We Learned</h2> | |
| <p class="text-sm text-muted anim-up d2" style="text-align:center; margin-bottom:28px"> | |
| 48 searches across WordPress, Shopify, SaaS, and behavioral psychology | |
| </p> | |
| <div class="cards-row"> | |
| <div class="card anim-up d3" data-detail="comp-jetpack"> | |
| <span class="card-icon">🧩</span> | |
| <h3>Jetpack</h3> | |
| <p>Curated default view. Full module list hidden behind progressive disclosure.</p> | |
| <div class="spacer-sm"></div> | |
| <span class="badge badge-purple">Curated ≠ Comprehensive</span> | |
| </div> | |
| <div class="card anim-up d4" data-detail="comp-rankmath"> | |
| <span class="card-icon">📊</span> | |
| <h3>Rank Math</h3> | |
| <p>Setup wizard → SEO score (0-100) → module dashboard. Gamified improvement loop.</p> | |
| <div class="spacer-sm"></div> | |
| <span class="badge badge-green">Score = Motivation</span> | |
| </div> | |
| <div class="card anim-up d5" data-detail="comp-shopify"> | |
| <span class="card-icon">🛍️</span> | |
| <h3>Shopify</h3> | |
| <p>Admin home with checklist + completion %. Zeigarnik Effect drives engagement.</p> | |
| <div class="spacer-sm"></div> | |
| <span class="badge badge-amber">Progress Creates Pull</span> | |
| </div> | |
| <div class="card anim-up d6" data-detail="comp-optinmonster"> | |
| <span class="card-icon">🎯</span> | |
| <h3>OptinMonster</h3> | |
| <p>"Playbooks" frame choices by goal, not feature name. Goal-driven onboarding.</p> | |
| <div class="spacer-sm"></div> | |
| <span class="badge badge-pink">Goals > Features</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============================================================ --> | |
| <!-- SLIDE 4: PSYCHOLOGY --> | |
| <!-- ============================================================ --> | |
| <div class="slide" data-slide="4"> | |
| <div class="bg-gradient pink"></div> | |
| <div class="grid-bg"></div> | |
| <span class="slide-label anim-down d1">Behavioral Science</span> | |
| <h2 class="anim-up d1" style="text-align:center">Psychology-Driven Design</h2> | |
| <p class="text-sm text-muted anim-up d2" style="text-align:center; margin-bottom:28px"> | |
| Five principles that make this work | |
| </p> | |
| <div class="cards-row"> | |
| <div class="psych-card anim-bounce d3" data-detail="psy-paradox"> | |
| <span class="psych-icon">🤯</span> | |
| <h4>Paradox of Choice</h4> | |
| <p>Too many options = paralysis. Reduce visible choices to a curated set.</p> | |
| </div> | |
| <div class="psych-card anim-bounce d4" data-detail="psy-zeigarnik"> | |
| <span class="psych-icon">🧲</span> | |
| <h4>Zeigarnik Effect</h4> | |
| <p>Incomplete progress bars create a psychological pull to finish.</p> | |
| </div> | |
| <div class="psych-card anim-bounce d5" data-detail="psy-progressive"> | |
| <span class="psych-icon">🪜</span> | |
| <h4>Progressive Disclosure</h4> | |
| <p>Show only what's needed now. Advanced features behind "show more".</p> | |
| </div> | |
| <div class="psych-card anim-bounce d6" data-detail="psy-defaults"> | |
| <span class="psych-icon">⚙️</span> | |
| <h4>Smart Defaults</h4> | |
| <p>Pre-configure safely. Reduce decisions a user must make.</p> | |
| </div> | |
| <div class="psych-card anim-bounce d7" data-detail="psy-ikea"> | |
| <span class="psych-icon">🏗️</span> | |
| <h4>IKEA Effect</h4> | |
| <p>Let users "build their toolkit" — ownership increases perceived value.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============================================================ --> | |
| <!-- SLIDE 5: STRATEGY OVERVIEW --> | |
| <!-- ============================================================ --> | |
| <div class="slide" data-slide="5"> | |
| <div class="bg-gradient purple"></div> | |
| <div class="grid-bg"></div> | |
| <span class="slide-label anim-down d1">Strategy</span> | |
| <h2 class="anim-up d1" style="text-align:center">The <span class="gradient-text">Path to Value</span></h2> | |
| <p class="text-sm text-muted anim-up d2" style="text-align:center; margin-bottom:12px"> | |
| From "feature firehose" to guided discovery | |
| </p> | |
| <div class="anim-up d3" style="margin-bottom:28px"> | |
| <div class="quote" style="text-align:center; border-left: none; border-bottom: 3px solid #818cf8; border-radius: 12px 12px 0 0;"> | |
| Install → Wizard → Recommended Modules → First Win → Discover More | |
| </div> | |
| </div> | |
| <div class="cards-row" style="gap:16px"> | |
| <div class="initiative-card anim-up d3" style="--accent:#818cf8" data-detail="init-hub"> | |
| <div class="initiative-num" style="background:linear-gradient(135deg,#818cf8,#6366f1)">1</div> | |
| <h3>Module Hub</h3> | |
| <p>Search, filter, goal-based tabs, recommended row</p> | |
| <span class="effort-tag" style="background:rgba(245,158,11,0.15); color:#fbbf24">Medium</span> | |
| </div> | |
| <div class="initiative-card anim-up d4" style="--accent:#7c3aed" data-detail="init-wizard"> | |
| <div class="initiative-num" style="background:linear-gradient(135deg,#7c3aed,#6d28d9)">2</div> | |
| <h3>Setup Wizard</h3> | |
| <p>5-step non-blocking wizard with smart recommendations</p> | |
| <span class="effort-tag" style="background:rgba(239,68,68,0.15); color:#f87171">High</span> | |
| </div> | |
| <div class="initiative-card anim-up d5" style="--accent:#ec4899" data-detail="init-score"> | |
| <div class="initiative-num" style="background:linear-gradient(135deg,#ec4899,#db2777)">3</div> | |
| <h3>Conversion Score</h3> | |
| <p>Gamified 0-100 scoring with badges & milestones</p> | |
| <span class="effort-tag" style="background:rgba(245,158,11,0.15); color:#fbbf24">Medium</span> | |
| </div> | |
| <div class="initiative-card anim-up d6" style="--accent:#f59e0b" data-detail="init-discovery"> | |
| <div class="initiative-num" style="background:linear-gradient(135deg,#f59e0b,#d97706)">4</div> | |
| <h3>Discovery Engine</h3> | |
| <p>Contextual tips, module cross-referencing, "Did you know?"</p> | |
| <span class="effort-tag" style="background:rgba(16,185,129,0.15); color:#34d399">Low–Med</span> | |
| </div> | |
| <div class="initiative-card anim-up d7" style="--accent:#10b981" data-detail="init-bundles"> | |
| <div class="initiative-num" style="background:linear-gradient(135deg,#10b981,#059669)">5</div> | |
| <h3>Preset Bundles</h3> | |
| <p>One-click module group activation (recipes)</p> | |
| <span class="effort-tag" style="background:rgba(16,185,129,0.15); color:#34d399">Low</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============================================================ --> | |
| <!-- SLIDE 6: MODULE HUB REDESIGN --> | |
| <!-- ============================================================ --> | |
| <div class="slide" data-slide="6"> | |
| <div class="bg-gradient blue"></div> | |
| <div class="grid-bg"></div> | |
| <span class="slide-label anim-down d1">Initiative 1</span> | |
| <h2 class="anim-up d1" style="text-align:center">The New <span class="gradient-text">Module Hub</span></h2> | |
| <p class="text-sm text-muted anim-up d2" style="text-align:center; margin-bottom:20px"> | |
| Search, filter, toggle — find any feature in seconds | |
| </p> | |
| <div class="wireframe anim-scale d3"> | |
| <div class="wireframe-header"> | |
| <div class="wf-search">🔍 Search modules...</div> | |
| <div class="wf-btn">⊞ Grid</div> | |
| <div class="wf-btn">☰ List</div> | |
| <div class="wf-btn">Filter ▾</div> | |
| </div> | |
| <div class="wf-tabs"> | |
| <div class="wf-tab active">All</div> | |
| <div class="wf-tab">💰 Boost Sales</div> | |
| <div class="wf-tab">⭐ Build Trust</div> | |
| <div class="wf-tab">🛡️ Reduce Churn</div> | |
| <div class="wf-tab">✨ Improve UX</div> | |
| <div class="wf-tab">🎯 Convert</div> | |
| </div> | |
| <div style="font-size:0.68rem; color:#818cf8; font-weight:600; margin-bottom:10px"> | |
| ⚡ Recommended For Your Store | |
| </div> | |
| <div class="wf-modules"> | |
| <div class="wf-module"> | |
| <div class="wf-toggle"></div> | |
| <div class="wf-module-name">Buy X Get Y</div> | |
| <div class="wf-module-desc">Boost AOV with promotional bundles</div> | |
| </div> | |
| <div class="wf-module"> | |
| <div class="wf-toggle"></div> | |
| <div class="wf-module-name">Free Shipping Bar</div> | |
| <div class="wf-module-desc">Motivate larger orders</div> | |
| </div> | |
| <div class="wf-module"> | |
| <div class="wf-toggle off"></div> | |
| <div class="wf-module-name">Countdown Timer</div> | |
| <div class="wf-module-desc">Create urgency on product pages</div> | |
| </div> | |
| <div class="wf-module"> | |
| <div class="wf-toggle off"></div> | |
| <div class="wf-module-name">Side Cart <span class="wf-pro-badge">PRO</span></div> | |
| <div class="wf-module-desc">Reduce friction with slide-out cart</div> | |
| </div> | |
| <div class="wf-module"> | |
| <div class="wf-toggle"></div> | |
| <div class="wf-module-name">Trust Badges</div> | |
| <div class="wf-module-desc">Build credibility with badges</div> | |
| </div> | |
| <div class="wf-module"> | |
| <div class="wf-toggle off"></div> | |
| <div class="wf-module-name">Stock Scarcity</div> | |
| <div class="wf-module-desc">Show low-stock warnings</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============================================================ --> | |
| <!-- SLIDE 7: SETUP WIZARD --> | |
| <!-- ============================================================ --> | |
| <div class="slide" data-slide="7"> | |
| <div class="bg-gradient purple"></div> | |
| <div class="grid-bg"></div> | |
| <span class="slide-label anim-down d1">Initiative 2</span> | |
| <h2 class="anim-up d1" style="text-align:center">Setup <span class="gradient-text">Wizard</span></h2> | |
| <p class="text-sm text-muted anim-up d2" style="text-align:center; margin-bottom:32px"> | |
| 5 steps · Non-blocking · Skippable · Re-accessible | |
| </p> | |
| <div class="wizard-flow anim-up d3"> | |
| <div class="wizard-step"> | |
| <div class="wizard-step-circle" style="background:linear-gradient(135deg,#4f46e5,#6366f1)">👋</div> | |
| <span class="wizard-step-label">Welcome</span> | |
| <span class="wizard-step-desc">Meet Merchant</span> | |
| </div> | |
| <div class="wizard-connector"></div> | |
| <div class="wizard-step"> | |
| <div class="wizard-step-circle" style="background:linear-gradient(135deg,#6366f1,#7c3aed)">🎯</div> | |
| <span class="wizard-step-label">Your Goals</span> | |
| <span class="wizard-step-desc">Multi-select goals</span> | |
| </div> | |
| <div class="wizard-connector"></div> | |
| <div class="wizard-step"> | |
| <div class="wizard-step-circle" style="background:linear-gradient(135deg,#7c3aed,#8b5cf6)">🏪</div> | |
| <span class="wizard-step-label">Store Type</span> | |
| <span class="wizard-step-desc">Industry category</span> | |
| </div> | |
| <div class="wizard-connector"></div> | |
| <div class="wizard-step"> | |
| <div class="wizard-step-circle" style="background:linear-gradient(135deg,#8b5cf6,#a78bfa)">⚡</div> | |
| <span class="wizard-step-label">Recommend</span> | |
| <span class="wizard-step-desc">Smart suggestions</span> | |
| </div> | |
| <div class="wizard-connector"></div> | |
| <div class="wizard-step"> | |
| <div class="wizard-step-circle" style="background:linear-gradient(135deg,#10b981,#34d399)">🏆</div> | |
| <span class="wizard-step-label">Score Card</span> | |
| <span class="wizard-step-desc">Your starting score</span> | |
| </div> | |
| </div> | |
| <div class="spacer"></div> | |
| <div class="cards-row anim-up d5" style="gap:16px"> | |
| <div class="card" style="max-width:240px; --accent: #818cf8"> | |
| <span class="card-icon" style="font-size:1.5rem">🚫</span> | |
| <h3 style="font-size:0.95rem">Non-Blocking</h3> | |
| <p style="font-size:0.78rem">Never auto-redirect. Dismissible banner invitation.</p> | |
| </div> | |
| <div class="card" style="max-width:240px"> | |
| <span class="card-icon" style="font-size:1.5rem">⚡</span> | |
| <h3 style="font-size:0.95rem">Functional</h3> | |
| <p style="font-size:0.78rem">Wizard inputs drive real module behavior, not just data collection.</p> | |
| </div> | |
| <div class="card" style="max-width:240px"> | |
| <span class="card-icon" style="font-size:1.5rem">🔄</span> | |
| <h3 style="font-size:0.95rem">Re-accessible</h3> | |
| <p style="font-size:0.78rem">Users can restart wizard from settings anytime.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============================================================ --> | |
| <!-- SLIDE 8: CONVERSION SCORE --> | |
| <!-- ============================================================ --> | |
| <div class="slide" data-slide="8"> | |
| <div class="bg-gradient green"></div> | |
| <div class="grid-bg"></div> | |
| <span class="slide-label anim-down d1">Initiative 3</span> | |
| <h2 class="anim-up d1" style="text-align:center">Store <span class="gradient-text">Conversion Score</span></h2> | |
| <div class="spacer"></div> | |
| <div class="two-col"> | |
| <div class="col flex-center" style="flex-direction:column"> | |
| <div class="gauge-container anim-scale d3"> | |
| <svg class="gauge-ring" width="250" height="250" viewBox="0 0 250 250"> | |
| <circle class="gauge-bg" cx="125" cy="125" r="100"/> | |
| <circle class="gauge-fill" cx="125" cy="125" r="100"/> | |
| </svg> | |
| <div class="gauge-label"> | |
| <span class="gauge-number">68</span> | |
| <span class="gauge-sub">/100</span> | |
| </div> | |
| </div> | |
| <div class="spacer-sm"></div> | |
| <span class="badge badge-green anim-up d4">💪 Strong</span> | |
| </div> | |
| <div class="col anim-up d4"> | |
| <h3 style="margin-bottom:18px; font-size:1.1rem; color:#e2e8f0">Scoring Formula</h3> | |
| <div class="progress-item"> | |
| <span class="progress-label">Activation (40%)</span> | |
| <div class="progress-track"><div class="progress-fill pf-80"></div></div> | |
| <span class="progress-pct">80%</span> | |
| </div> | |
| <div class="progress-item"> | |
| <span class="progress-label">Configuration (30%)</span> | |
| <div class="progress-track"><div class="progress-fill pf-70"></div></div> | |
| <span class="progress-pct">70%</span> | |
| </div> | |
| <div class="progress-item"> | |
| <span class="progress-label">Coverage (30%)</span> | |
| <div class="progress-track"><div class="progress-fill pf-50"></div></div> | |
| <span class="progress-pct">50%</span> | |
| </div> | |
| <div class="spacer"></div> | |
| <div style="display:flex; gap:10px; flex-wrap:wrap"> | |
| <span class="badge badge-red">🌱 0–25</span> | |
| <span class="badge badge-amber">📈 26–50</span> | |
| <span class="badge badge-purple">💪 51–75</span> | |
| <span class="badge badge-green">🏆 76–100</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============================================================ --> | |
| <!-- SLIDE 9: CONTEXTUAL DISCOVERY --> | |
| <!-- ============================================================ --> | |
| <div class="slide" data-slide="9"> | |
| <div class="bg-gradient amber"></div> | |
| <div class="grid-bg"></div> | |
| <span class="slide-label anim-down d1">Initiative 4</span> | |
| <h2 class="anim-up d1" style="text-align:center"><span class="gradient-text">Contextual</span> Discovery</h2> | |
| <p class="text-sm text-muted anim-up d2" style="text-align:center; margin-bottom:24px"> | |
| Right feature, right time, right place | |
| </p> | |
| <div class="cards-row" style="gap: 20px"> | |
| <div class="card anim-up d3" style="max-width:290px"> | |
| <span class="card-icon" style="font-size:1.6rem">💡</span> | |
| <h3 style="font-size:0.95rem">"Did You Know?" Tips</h3> | |
| <p style="font-size:0.78rem">Rotating tips on Merchant pages. 1 per load, max 3/week. Respects dismissals and wizard data.</p> | |
| </div> | |
| <div class="card anim-up d4" style="max-width:290px"> | |
| <span class="card-icon" style="font-size:1.6rem">🔗</span> | |
| <h3 style="font-size:0.95rem">Module Cross-Reference</h3> | |
| <p style="font-size:0.78rem">"Works great with: Spending Goal" shown inside module settings. Complementary pairing suggestions.</p> | |
| </div> | |
| <div class="card anim-up d5" style="max-width:290px"> | |
| <span class="card-icon" style="font-size:1.6rem">📍</span> | |
| <h3 style="font-size:0.95rem">Context-Aware Notices</h3> | |
| <p style="font-size:0.78rem">Product editor → suggest Countdown Timer. Checkout settings → suggest Cart Notices. Non-intrusive.</p> | |
| </div> | |
| </div> | |
| <div class="spacer"></div> | |
| <div class="wireframe anim-up d6" style="max-width:650px; padding:16px 20px"> | |
| <div style="display:flex; align-items:center; gap:12px; padding:12px 16px; background:rgba(56,189,248,0.06); border:1px solid rgba(56,189,248,0.15); border-radius:10px"> | |
| <span style="font-size:1.2rem">💡</span> | |
| <div> | |
| <span style="font-weight:700; color:#e2e8f0; font-size:0.78rem">Did you know?</span> | |
| <span style="color:#94a3b8; font-size:0.72rem"> Stores using Frequently Bought Together see an average 23% increase in AOV. </span> | |
| <span style="color:#818cf8; font-size:0.72rem; font-weight:600; cursor:pointer">Activate Now →</span> | |
| </div> | |
| <span style="color:#64748b; margin-left:auto; cursor:pointer; font-size:0.8rem">✕</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============================================================ --> | |
| <!-- SLIDE 10: PRESET BUNDLES --> | |
| <!-- ============================================================ --> | |
| <div class="slide" data-slide="10"> | |
| <div class="bg-gradient green"></div> | |
| <div class="grid-bg"></div> | |
| <span class="slide-label anim-down d1">Initiative 5</span> | |
| <h2 class="anim-up d1" style="text-align:center">Quick-Start <span class="gradient-text">Recipes</span></h2> | |
| <p class="text-sm text-muted anim-up d2" style="text-align:center; margin-bottom:28px"> | |
| One-click module bundles for common goals | |
| </p> | |
| <div class="cards-row" style="gap:16px"> | |
| <div class="bundle-card anim-bounce d3" data-detail="bun-starter"> | |
| <span class="bundle-icon">🚀</span> | |
| <h4>Starter Pack</h4> | |
| <div class="bundle-desc">Essential conversion basics for any store</div> | |
| <div class="bundle-modules">5 modules · All Free</div> | |
| <div class="bundle-points">+20 pts</div> | |
| </div> | |
| <div class="bundle-card anim-bounce d4" data-detail="bun-aov"> | |
| <span class="bundle-icon">💰</span> | |
| <h4>AOV Booster</h4> | |
| <div class="bundle-desc">Maximize every transaction with proven techniques</div> | |
| <div class="bundle-modules">5 modules · 2 Pro</div> | |
| <div class="bundle-points">+25 pts</div> | |
| </div> | |
| <div class="bundle-card anim-bounce d5" data-detail="bun-urgency"> | |
| <span class="bundle-icon">🎯</span> | |
| <h4>Urgency Engine</h4> | |
| <div class="bundle-desc">Convert hesitators with urgency triggers</div> | |
| <div class="bundle-modules">4 modules · 1 Pro</div> | |
| <div class="bundle-points">+20 pts</div> | |
| </div> | |
| <div class="bundle-card anim-bounce d6" data-detail="bun-trust"> | |
| <span class="bundle-icon">⭐</span> | |
| <h4>Trust Builder</h4> | |
| <div class="bundle-desc">Social proof and transparency package</div> | |
| <div class="bundle-modules">4 modules · All Free</div> | |
| <div class="bundle-points">+15 pts</div> | |
| </div> | |
| <div class="bundle-card anim-bounce d7" data-detail="bun-checkout"> | |
| <span class="bundle-icon">🛒</span> | |
| <h4>Checkout Fix</h4> | |
| <div class="bundle-desc">Reduce abandonment, streamline flow</div> | |
| <div class="bundle-modules">4 modules · 2 Pro</div> | |
| <div class="bundle-points">+25 pts</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============================================================ --> | |
| <!-- SLIDE 11: ANTI-PATTERNS --> | |
| <!-- ============================================================ --> | |
| <div class="slide" data-slide="11"> | |
| <div class="bg-gradient red"></div> | |
| <div class="grid-bg"></div> | |
| <span class="slide-label anim-down d1">Guard Rails</span> | |
| <h2 class="anim-up d1" style="text-align:center">What to <span style="color:#f87171">Avoid</span> vs <span style="color:#34d399">Embrace</span></h2> | |
| <div class="spacer"></div> | |
| <div class="split-cols"> | |
| <div class="split-col"> | |
| <div class="antipattern anim-left d2"><span class="x-mark">❌</span><div><h4>Auto-redirect on install</h4><p>Breaks flow, feels aggressive</p></div></div> | |
| <div class="antipattern anim-left d3"><span class="x-mark">❌</span><div><h4>Feature firehose</h4><p>All 47 modules at equal weight</p></div></div> | |
| <div class="antipattern anim-left d4"><span class="x-mark">❌</span><div><h4>Popup product tours</h4><p>< 5% completion; instant dismiss</p></div></div> | |
| <div class="antipattern anim-left d5"><span class="x-mark">❌</span><div><h4>Aggressive admin notices</h4><p>Multiple notices = notice fatigue</p></div></div> | |
| <div class="antipattern anim-left d6"><span class="x-mark">❌</span><div><h4>Hidden skip button</h4><p>Users feel trapped, leave</p></div></div> | |
| </div> | |
| <div class="split-col"> | |
| <div class="principle anim-right d2"><span class="check">✅</span><div><h4>User first, upsell second</h4></div></div> | |
| <div class="principle anim-right d3"><span class="check">✅</span><div><h4>Non-blocking interactions</h4></div></div> | |
| <div class="principle anim-right d4"><span class="check">✅</span><div><h4>Contextual, just-in-time</h4></div></div> | |
| <div class="principle anim-right d5"><span class="check">✅</span><div><h4>Always dismissible</h4></div></div> | |
| <div class="principle anim-right d6"><span class="check">✅</span><div><h4>Measurable & iterable</h4></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============================================================ --> | |
| <!-- SLIDE 12: ROADMAP --> | |
| <!-- ============================================================ --> | |
| <div class="slide" data-slide="12"> | |
| <div class="bg-gradient purple"></div> | |
| <div class="grid-bg"></div> | |
| <span class="slide-label anim-down d1">Roadmap</span> | |
| <h2 class="anim-up d1" style="text-align:center">Five-Phase <span class="gradient-text">Rollout</span></h2> | |
| <div class="spacer"></div> | |
| <div class="timeline anim-up d3"> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot" style="background:linear-gradient(135deg,#818cf8,#6366f1)">P1</div> | |
| <span class="timeline-version">v2.3.0</span> | |
| <span class="timeline-title">Foundation</span> | |
| <span class="timeline-desc">Search bar, status filters, preset bundles, card enhancements</span> | |
| <span class="timeline-weeks">3-4 weeks</span> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot" style="background:linear-gradient(135deg,#7c3aed,#6d28d9)">P2</div> | |
| <span class="timeline-version">v2.4.0</span> | |
| <span class="timeline-title">Guidance</span> | |
| <span class="timeline-desc">Setup wizard, goal tabs, recommendations</span> | |
| <span class="timeline-weeks">4-6 weeks</span> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot" style="background:linear-gradient(135deg,#ec4899,#db2777)">P3</div> | |
| <span class="timeline-version">v2.5.0</span> | |
| <span class="timeline-title">Gamification</span> | |
| <span class="timeline-desc">Conversion score, badges, milestone celebrations</span> | |
| <span class="timeline-weeks">3-4 weeks</span> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot" style="background:linear-gradient(135deg,#f59e0b,#d97706)">P4</div> | |
| <span class="timeline-version">v2.6.0</span> | |
| <span class="timeline-title">Intelligence</span> | |
| <span class="timeline-desc">Contextual notices, tips, cross-referencing</span> | |
| <span class="timeline-weeks">3-4 weeks</span> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot" style="background:linear-gradient(135deg,#10b981,#059669)">P5</div> | |
| <span class="timeline-version">v3.0.0</span> | |
| <span class="timeline-title">Advanced</span> | |
| <span class="timeline-desc">Command palette, analytics, community recipes</span> | |
| <span class="timeline-weeks">4-6 weeks</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============================================================ --> | |
| <!-- SLIDE 13: SUCCESS METRICS --> | |
| <!-- ============================================================ --> | |
| <div class="slide" data-slide="13"> | |
| <div class="bg-gradient blue"></div> | |
| <div class="grid-bg"></div> | |
| <span class="slide-label anim-down d1">Measuring Success</span> | |
| <h2 class="anim-up d1" style="text-align:center">Key Performance <span class="gradient-text">Indicators</span></h2> | |
| <div class="spacer"></div> | |
| <div class="kpi-grid anim-up d3"> | |
| <div class="kpi-card" data-detail="kpi-modules"> | |
| <div class="kpi-current">3-5</div> | |
| <div class="kpi-arrow">↓</div> | |
| <div class="kpi-target">8-12</div> | |
| <div class="kpi-label">Avg. Modules Activated</div> | |
| </div> | |
| <div class="kpi-card" data-detail="kpi-wizard"> | |
| <div class="kpi-current">N/A</div> | |
| <div class="kpi-arrow">→</div> | |
| <div class="kpi-target">> 60%</div> | |
| <div class="kpi-label">Wizard Completion Rate</div> | |
| </div> | |
| <div class="kpi-card" data-detail="kpi-activation"> | |
| <div class="kpi-current">2-3 days</div> | |
| <div class="kpi-arrow">↓</div> | |
| <div class="kpi-target">< 1 hour</div> | |
| <div class="kpi-label">Time to First Activation</div> | |
| </div> | |
| <div class="kpi-card" data-detail="kpi-pro"> | |
| <div class="kpi-current">Unknown</div> | |
| <div class="kpi-arrow">→</div> | |
| <div class="kpi-target">+30%</div> | |
| <div class="kpi-label">Pro Upgrade Exploration</div> | |
| </div> | |
| <div class="kpi-card" data-detail="kpi-discovery"> | |
| <div class="kpi-current">5-7</div> | |
| <div class="kpi-arrow">↓</div> | |
| <div class="kpi-target">15-20</div> | |
| <div class="kpi-label">30-Day Module Discovery</div> | |
| </div> | |
| <div class="kpi-card" data-detail="kpi-bundle"> | |
| <div class="kpi-current">0%</div> | |
| <div class="kpi-arrow">→</div> | |
| <div class="kpi-target">> 15%</div> | |
| <div class="kpi-label">Bundle Activation Rate</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============================================================ --> | |
| <!-- SLIDE 14: CLOSING --> | |
| <!-- ============================================================ --> | |
| <div class="slide" data-slide="14"> | |
| <div class="bg-gradient purple"></div> | |
| <div class="grid-bg"></div> | |
| <div class="particles" id="particles-14"></div> | |
| <span class="slide-label anim-down d1">Summary</span> | |
| <h1 class="slide-title anim-up d2" style="text-align:center; font-size: 2.8rem"> | |
| From <span style="color:#f87171">Overwhelm</span><br> | |
| to <span class="gradient-text">Discovery</span> | |
| </h1> | |
| <div class="spacer-sm"></div> | |
| <p class="slide-subtitle anim-up d3" style="font-size:1.1rem"> | |
| Five initiatives. Five release phases.<br> | |
| One goal: help every user find their first win — fast. | |
| </p> | |
| <div class="spacer"></div> | |
| <div class="cards-row anim-up d4" style="gap:16px"> | |
| <div class="stat-card" style="min-width:140px"> | |
| <div class="stat-number" style="font-size:2rem">🔍</div> | |
| <div class="stat-label">Module Hub</div> | |
| </div> | |
| <div class="stat-card" style="min-width:140px"> | |
| <div class="stat-number" style="font-size:2rem">🧙</div> | |
| <div class="stat-label">Wizard</div> | |
| </div> | |
| <div class="stat-card" style="min-width:140px"> | |
| <div class="stat-number" style="font-size:2rem">🏆</div> | |
| <div class="stat-label">Score</div> | |
| </div> | |
| <div class="stat-card" style="min-width:140px"> | |
| <div class="stat-number" style="font-size:2rem">💡</div> | |
| <div class="stat-label">Discovery</div> | |
| </div> | |
| <div class="stat-card" style="min-width:140px"> | |
| <div class="stat-number" style="font-size:2rem">🚀</div> | |
| <div class="stat-label">Bundles</div> | |
| </div> | |
| </div> | |
| <div class="spacer"></div> | |
| <p class="anim-up d6" style="font-size:0.85rem; color:#64748b; font-weight:500"> | |
| Created by Ahmad Wael · aThemes Team | |
| </p> | |
| </div> | |
| </div><!-- /presentation --> | |
| <!-- ─── NAVIGATION BAR ─── --> | |
| <nav class="nav-bar"> | |
| <div style="display:flex; align-items:center; gap:10px"> | |
| <button class="nav-btn" id="prevBtn" disabled onclick="navigate(-1)">← Prev</button> | |
| </div> | |
| <div style="display:flex; align-items:center; gap:20px"> | |
| <div class="nav-progress" id="navProgress"></div> | |
| <span class="nav-counter" id="navCounter">1 / 15</span> | |
| </div> | |
| <div style="display:flex; align-items:center; gap:10px"> | |
| <button class="nav-btn" id="nextBtn" onclick="navigate(1)">Next →</button> | |
| <button class="fullscreen-btn" id="fullscreenBtn" onclick="toggleFullscreen()" title="Toggle fullscreen (F)"> | |
| <svg id="fsIconExpand" viewBox="0 0 24 24"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg> | |
| <svg id="fsIconCompress" viewBox="0 0 24 24" style="display:none"><polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg> | |
| </button> | |
| </div> | |
| </nav> | |
| <div class="keyboard-hint" id="keyboardHint"> | |
| Press <span class="key">←</span> <span class="key">→</span> or <span class="key">Space</span> to navigate | |
| </div> | |
| <script> | |
| // ─── PRESENTATION ENGINE ─── | |
| const slides = document.querySelectorAll('.slide'); | |
| const totalSlides = slides.length; | |
| let currentSlide = 0; | |
| let isAnimating = false; | |
| function goToSlide(index) { | |
| if (isAnimating || index < 0 || index >= totalSlides || index === currentSlide) return; | |
| isAnimating = true; | |
| // Deactivate old | |
| slides[currentSlide].classList.remove('active'); | |
| // Activate new | |
| currentSlide = index; | |
| slides[currentSlide].classList.add('active'); | |
| // Update nav | |
| updateNav(); | |
| // Hide keyboard hint after first nav | |
| document.getElementById('keyboardHint').classList.add('hidden'); | |
| setTimeout(() => { isAnimating = false; }, 700); | |
| } | |
| function navigate(dir) { | |
| goToSlide(currentSlide + dir); | |
| } | |
| function updateNav() { | |
| document.getElementById('prevBtn').disabled = currentSlide === 0; | |
| document.getElementById('nextBtn').disabled = currentSlide === totalSlides - 1; | |
| document.getElementById('navCounter').textContent = `${currentSlide + 1} / ${totalSlides}`; | |
| // Dots | |
| const progress = document.getElementById('navProgress'); | |
| progress.innerHTML = ''; | |
| for (let i = 0; i < totalSlides; i++) { | |
| const dot = document.createElement('div'); | |
| dot.className = 'nav-dot' + (i === currentSlide ? ' active' : ''); | |
| dot.onclick = () => goToSlide(i); | |
| progress.appendChild(dot); | |
| } | |
| } | |
| // ─── FULLSCREEN ─── | |
| function toggleFullscreen() { | |
| if (!document.fullscreenElement) { | |
| document.documentElement.requestFullscreen().catch(() => {}); | |
| } else { | |
| document.exitFullscreen().catch(() => {}); | |
| } | |
| } | |
| document.addEventListener('fullscreenchange', () => { | |
| const isFS = !!document.fullscreenElement; | |
| document.getElementById('fsIconExpand').style.display = isFS ? 'none' : ''; | |
| document.getElementById('fsIconCompress').style.display = isFS ? '' : 'none'; | |
| }); | |
| // Keyboard nav | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'ArrowRight' || e.key === ' ') { | |
| e.preventDefault(); | |
| navigate(1); | |
| } else if (e.key === 'ArrowLeft') { | |
| e.preventDefault(); | |
| navigate(-1); | |
| } else if (e.key === 'f' || e.key === 'F') { | |
| toggleFullscreen(); | |
| } | |
| }); | |
| // Touch support | |
| let touchStartX = 0; | |
| document.addEventListener('touchstart', (e) => { touchStartX = e.touches[0].clientX; }); | |
| document.addEventListener('touchend', (e) => { | |
| const dx = e.changedTouches[0].clientX - touchStartX; | |
| if (Math.abs(dx) > 50) navigate(dx < 0 ? 1 : -1); | |
| }); | |
| // Initialize | |
| updateNav(); | |
| // ─── FLOATING PARTICLES ─── | |
| function createParticles(containerId, count = 20) { | |
| const container = document.getElementById(containerId); | |
| if (!container) return; | |
| for (let i = 0; i < count; i++) { | |
| const p = document.createElement('div'); | |
| p.className = 'particle'; | |
| p.style.left = Math.random() * 100 + '%'; | |
| p.style.top = Math.random() * 100 + '%'; | |
| p.style.animationDelay = Math.random() * 4 + 's'; | |
| p.style.animationDuration = (3 + Math.random() * 3) + 's'; | |
| p.style.width = p.style.height = (2 + Math.random() * 4) + 'px'; | |
| p.style.opacity = 0.1 + Math.random() * 0.3; | |
| const colors = ['rgba(99,102,241,0.4)', 'rgba(168,85,247,0.3)', 'rgba(236,72,153,0.3)', 'rgba(56,189,248,0.3)']; | |
| p.style.background = colors[Math.floor(Math.random() * colors.length)]; | |
| container.appendChild(p); | |
| } | |
| } | |
| createParticles('particles-0', 25); | |
| createParticles('particles-14', 25); | |
| // ─── DETAIL PANEL ENGINE ─── | |
| const detailData = { | |
| // SLIDE 1: Problems | |
| 'paradox-choice': { | |
| icon: '😰', title: 'Paradox of Choice', | |
| body: '<p>Barry Schwartz\'s research shows that when presented with too many options, people experience decision paralysis and reduced satisfaction.</p><p>In Merchant\'s case: 47 modules displayed in a flat list with no hierarchy, categorization, or recommendations creates cognitive overload.</p><ul><li>Users scroll through 47 toggle switches with no guidance</li><li>No indication which modules are essential vs. advanced</li><li>No "starter pack" or recommended configuration</li><li>Average user activates only 3-5 modules out of 47</li><li>Similar to a restaurant with a 20-page menu — fewer people order, less satisfaction</li></ul>' | |
| }, | |
| 'hidden-value': { | |
| icon: '🙈', title: 'Hidden Value', | |
| body: '<p>Users uninstall or leave negative reviews saying "it doesn\'t have Feature X" — when Feature X is module #34 that they never scrolled to.</p><ul><li>No search functionality to find specific features</li><li>Module names don\'t always match user\'s mental model (e.g., "Side Cart" vs. "Slide-out Cart")</li><li>Pro features are visually identical to free — no spotlight</li><li>Support tickets asking for features that already exist</li><li>Competitor plugins win evaluations despite having fewer features</li></ul>' | |
| }, | |
| 'low-adoption': { | |
| icon: '📉', title: 'Low Feature Adoption', | |
| body: '<p>Data indicates the average Merchant user activates only 3-5 modules out of 47 available. That means 90%+ of the plugin\'s value goes completely unused.</p><ul><li>Most users never venture beyond the first screen of modules</li><li>No progressive disclosure or phased recommendations</li><li>No re-engagement loop to surface unused features over time</li><li>Lost revenue from Pro modules users never discover</li><li>Higher churn: users who use more features retain longer</li></ul>' | |
| }, | |
| // SLIDE 2: User Segments | |
| 'seg-new': { | |
| icon: '🆕', title: 'New Users (Day 0–7)', | |
| body: '<p>This is the most critical segment. First impressions happen in seconds, and a wall of 47 modules is overwhelming.</p><ul><li>First-time activation experience sets the tone</li><li>Need immediate "first win" within 5 minutes</li><li>Wizard should recommend 3-5 modules based on store type</li><li>Quick-start bundles provide instant value</li><li>Goal: reduce time-to-first-activation from days to minutes</li></ul>' | |
| }, | |
| 'seg-casual': { | |
| icon: '😴', title: 'Casual Users (Day 7–30)', | |
| body: '<p>These users found their initial modules but plateaued. They represent the largest growth opportunity.</p><ul><li>Activated 2-3 modules, satisfied but unaware of 40+ more</li><li>Need contextual "Did you know?" discovery moments</li><li>Module cross-referencing: "Works great with Spending Goal"</li><li>Conversion score creates ongoing motivation to explore</li><li>Goal: increase module discovery from 5 to 15 within 30 days</li></ul>' | |
| }, | |
| 'seg-evaluator': { | |
| icon: '🔍', title: 'Evaluators', | |
| body: '<p>These users are comparing Merchant to competitors. Speed of feature discovery directly impacts conversion.</p><ul><li>Need instant search: "Does this plugin have countdown timers?"</li><li>Goal-based tabs: "Show me all Sales Boosting features"</li><li>Feature count badges: "47 features — see all"</li><li>Competitive positioning: surface unique features first</li><li>Goal: reduce evaluation time from 15 min to under 2 min</li></ul>' | |
| }, | |
| 'seg-prospect': { | |
| icon: '💎', title: 'Pro Prospects', | |
| body: '<p>Free users who would upgrade if they knew what Pro offers. Currently, Pro features blend in with free ones.</p><ul><li>Pro badges are too subtle in the current design</li><li>No dedicated "Explore Pro" filter or section</li><li>"Upgrade" CTAs should appear contextually, not aggressively</li><li>Preview Pro features with blurred/teaser mode</li><li>Goal: increase Pro exploration rate by 30%+</li></ul>' | |
| }, | |
| // SLIDE 3: Competitive Research | |
| 'comp-jetpack': { | |
| icon: '🧩', title: 'Jetpack — Progressive Disclosure', | |
| body: '<p>Jetpack manages 30+ features by showing only a curated default view with "Explore All" as a secondary action.</p><ul><li>Default dashboard shows only 5-6 recommended features</li><li>Full module list accessible via "Explore more" link</li><li>Feature descriptions include use-case context, not just technical names</li><li>Status indicators: Active/Inactive/Available</li><li><strong>Takeaway:</strong> Don\'t show everything — curate by importance, then reveal on demand</li></ul>' | |
| }, | |
| 'comp-rankmath': { | |
| icon: '📊', title: 'Rank Math — Gamified Score Loop', | |
| body: '<p>Rank Math\'s SEO Score (0-100) is their killer feature for activation and retention.</p><ul><li>Setup wizard → immediate score → motivation loop</li><li>Each module activation improves the score</li><li>Badges at 25/50/75/100 create milestone celebrations</li><li>"Your score is 62 — enable Schema Markup to reach 75"</li><li><strong>Takeaway:</strong> A visible, improvable score creates intrinsic motivation to activate more features</li></ul>' | |
| }, | |
| 'comp-shopify': { | |
| icon: '🛍️', title: 'Shopify — Checklist + Zeigarnik Effect', | |
| body: '<p>Shopify\'s admin home uses a setup checklist with completion percentage — a textbook Zeigarnik Effect implementation.</p><ul><li>"3 of 7 steps complete — 43%" creates pull to finish</li><li>Tasks are ordered by impact, not complexity</li><li>Each completion triggers a micro-celebration animation</li><li>Checklist persists until fully completed or dismissed</li><li><strong>Takeaway:</strong> Progress bars on incomplete tasks create a powerful psychological urge to complete them</li></ul>' | |
| }, | |
| 'comp-optinmonster': { | |
| icon: '🎯', title: 'OptinMonster — Goal-Driven Playbooks', | |
| body: '<p>OptinMonster frames their features as "Playbooks" organized by business goal, not feature name.</p><ul><li>"Grow Email List" not "Exit-Intent Popup"</li><li>"Reduce Cart Abandonment" not "Countdown Timer"</li><li>Users think in goals, not feature names</li><li>Each playbook auto-configures multiple features at once</li><li><strong>Takeaway:</strong> Organize modules by what they achieve, not what they are</li></ul>' | |
| }, | |
| // SLIDE 4: Psychology | |
| 'psy-paradox': { | |
| icon: '🤯', title: 'Paradox of Choice — Barry Schwartz', | |
| body: '<p>When faced with too many options, humans experience decision fatigue and often choose nothing at all.</p><ul><li>Schwartz\'s jam study: 24 jams → 3% purchase rate vs. 6 jams → 30% purchase rate</li><li>Application: Show 5-8 recommended modules first, not all 47</li><li>Use goal-based tabs to pre-filter into manageable groups</li><li>Smart defaults: pre-activate essential modules</li><li>"Recommended For You" row based on wizard answers</li></ul>' | |
| }, | |
| 'psy-zeigarnik': { | |
| icon: '🧲', title: 'Zeigarnik Effect', | |
| body: '<p>People remember uncompleted tasks better than completed ones. An incomplete progress bar creates a psychological pull to finish it.</p><ul><li>Setup wizard: "3 of 5 steps complete" drives completion</li><li>Conversion score: "68/100 — enable 2 more modules to reach 75"</li><li>Module activation count: "12 of 47 modules active"</li><li>Milestone notifications: "You\'re 80% to Store Champion 🏆"</li><li>Works best when the gap is small and achievable</li></ul>' | |
| }, | |
| 'psy-progressive': { | |
| icon: '🪜', title: 'Progressive Disclosure', | |
| body: '<p>Show only what\'s needed at each stage. Reveal complexity gradually as the user grows in confidence.</p><ul><li>Stage 1: Wizard recommends 5 essential modules</li><li>Stage 2: "Explore More" reveals additional categories</li><li>Stage 3: Advanced modules shown after basic ones are activated</li><li>Never overwhelm — information on demand, not by default</li><li>Example: Jetpack, Gmail settings, VS Code</li></ul>' | |
| }, | |
| 'psy-defaults': { | |
| icon: '⚙️', title: 'Smart Defaults', | |
| body: '<p>Pre-configure modules with sensible defaults so users get value immediately without manual setup.</p><ul><li>Free Shipping Bar: auto-detect shipping threshold from WooCommerce settings</li><li>Trust Badges: pre-select most common badges for the store\'s industry</li><li>Countdown Timer: default to 24-hour urgency with proven copy</li><li>Reduces "what should I configure?" anxiety</li><li>Users can always customize, but start with something working</li></ul>' | |
| }, | |
| 'psy-ikea': { | |
| icon: '🏗️', title: 'IKEA Effect', | |
| body: '<p>People assign more value to things they helped create. Let users "build their own toolkit" creates ownership.</p><ul><li>Wizard asks users to choose their goals → personalized setup</li><li>"Your Merchant Toolkit" — feels crafted, not generic</li><li>Bundle customization: "AOV Booster Bundle" + tweak to taste</li><li>Score improvements feel like personal achievement</li><li>Result: higher retention because they invested effort in setup</li></ul>' | |
| }, | |
| // SLIDE 5: Initiatives | |
| 'init-hub': { | |
| icon: '🔍', title: 'Initiative 1: Module Hub Redesign', | |
| body: '<p>Transform the flat module list into a searchable, filterable, categorized hub with intelligent recommendations.</p><ul><li>Instant search bar with fuzzy matching ("cart" finds "Side Cart", "Cart Notices")</li><li>Goal-based tabs: Boost Sales, Build Trust, Reduce Churn, Improve UX</li><li>"Recommended For You" row powered by wizard data</li><li>Status filters: Active / Inactive / Pro</li><li>Grid/List view toggle for preference</li><li>Module cards with description, category badge, and one-click toggle</li><li><strong>Effort:</strong> Medium (3-4 weeks)</li></ul>' | |
| }, | |
| 'init-wizard': { | |
| icon: '🧙', title: 'Initiative 2: Setup Wizard', | |
| body: '<p>A 5-step onboarding wizard that captures user intent and delivers personalized module recommendations.</p><ul><li>Step 1: Welcome — introduce Merchant\'s value prop</li><li>Step 2: Goals — multi-select (increase sales, build trust, reduce churn)</li><li>Step 3: Store Type — industry category (fashion, electronics, digital)</li><li>Step 4: Recommendations — smart picks based on answers</li><li>Step 5: Score Card — show starting Conversion Score</li><li>Non-blocking: dismissible banner, never auto-redirect</li><li>Re-accessible: restart anytime from settings</li><li><strong>Effort:</strong> High (4-6 weeks)</li></ul>' | |
| }, | |
| 'init-score': { | |
| icon: '📈', title: 'Initiative 3: Conversion Score', | |
| body: '<p>A gamified 0-100 score that motivates users to activate, configure, and explore more modules.</p><ul><li>Formula: Activation (40%) + Configuration (30%) + Coverage (30%)</li><li>Tiers: 🌱 Starter (0-25), 📈 Growing (26-50), 💪 Strong (51-75), 🏆 Champion (76-100)</li><li>Badge celebrations at milestone thresholds</li><li>"Enable Countdown Timer to reach 75 points" — specific, achievable nudges</li><li>Dashboard widget showing score + next suggested action</li><li>Inspired by Rank Math\'s SEO Score success</li><li><strong>Effort:</strong> Medium (3-4 weeks)</li></ul>' | |
| }, | |
| 'init-discovery': { | |
| icon: '💡', title: 'Initiative 4: Contextual Discovery Engine', | |
| body: '<p>Right feature, right time, right place — surface module suggestions in context throughout the WordPress admin.</p><ul><li>"Did you know?" tips: 1 per page load, max 3/week, respects dismissals</li><li>Module cross-referencing: "Works great with: Spending Goal" inside module settings</li><li>Context-aware notices: product editor → suggest Countdown Timer</li><li>Powered by wizard data + activation history</li><li>Non-intrusive: single-line notices with "Activate Now" CTA</li><li>All notices track impressions and click-through rates</li><li><strong>Effort:</strong> Low-Medium (2-3 weeks)</li></ul>' | |
| }, | |
| 'init-bundles': { | |
| icon: '📦', title: 'Initiative 5: Preset Bundles (Recipes)', | |
| body: '<p>One-click module group activation for common business goals. Reduces 47 individual decisions to 5 curated choices.</p><ul><li>Starter Pack: 5 essential free modules for any store (+20 pts)</li><li>AOV Booster: 5 modules focused on increasing order value (+25 pts)</li><li>Urgency Engine: 4 modules creating FOMO and urgency (+20 pts)</li><li>Trust Builder: 4 social proof modules (+15 pts)</li><li>Checkout Fix: 4 modules reducing cart abandonment (+25 pts)</li><li>Each bundle auto-configures all modules with smart defaults</li><li>Future: community-submitted custom recipes</li><li><strong>Effort:</strong> Low (2-3 weeks)</li></ul>' | |
| }, | |
| // SLIDE 10: Bundle details | |
| 'bun-starter': { | |
| icon: '🚀', title: 'Starter Pack Bundle', | |
| body: '<p>The essential conversion basics that every WooCommerce store should have from day one.</p><ul><li>Free Shipping Bar — motivate larger orders</li><li>Trust Badges — build credibility</li><li>Buy Now Button — reduce friction to checkout</li><li>Cart Notices — smart messaging in cart</li><li>Side Cart — slide-out cart for quick access</li><li>All 5 modules are FREE • Auto-configured with smart defaults</li><li>Score boost: +20 points toward Conversion Score</li></ul>' | |
| }, | |
| 'bun-aov': { | |
| icon: '💰', title: 'AOV Booster Bundle', | |
| body: '<p>Maximize every single transaction with proven average order value techniques.</p><ul><li>Buy X Get Y — promotional bundle offers</li><li>Frequently Bought Together — Amazon-style recommendations</li><li>Spending Goal — "Add $12 more for free shipping"</li><li>Product Bundles — create curated product packages</li><li>Volume Discounts — tiered quantity pricing</li><li>5 modules (2 Pro) • Expected AOV increase: 15-25%</li><li>Score boost: +25 points toward Conversion Score</li></ul>' | |
| }, | |
| 'bun-urgency': { | |
| icon: '🎯', title: 'Urgency Engine Bundle', | |
| body: '<p>Convert hesitating shoppers with urgency and FOMO triggers proven to boost conversion rates.</p><ul><li>Countdown Timer — product-level urgency</li><li>Stock Scarcity — low-stock warnings</li><li>Sales Pop — real-time purchase notifications</li><li>Quick Social Links — share to amplify urgency</li><li>4 modules (1 Pro) • Expected conversion lift: 10-20%</li><li>Score boost: +20 points toward Conversion Score</li></ul>' | |
| }, | |
| 'bun-trust': { | |
| icon: '⭐', title: 'Trust Builder Bundle', | |
| body: '<p>Build immediate credibility with social proof and transparency features.</p><ul><li>Trust Badges — payment/security/guarantee icons</li><li>Product Reviews — star ratings and testimonials</li><li>Reasons To Buy — benefit bullet points</li><li>Recently Viewed Products — browsing continuity</li><li>All 4 modules are FREE • Builds credibility instantly</li><li>Score boost: +15 points toward Conversion Score</li></ul>' | |
| }, | |
| 'bun-checkout': { | |
| icon: '🛒', title: 'Checkout Fix Bundle', | |
| body: '<p>Reduce cart abandonment and streamline the path from cart to purchase completion.</p><ul><li>Side Cart — slide-out mini cart reduces page loads</li><li>Cart Notices — address objections at checkout</li><li>Checkout — optimized checkout flow</li><li>Inactive Tab Message — re-engage abandoned tabs</li><li>4 modules (2 Pro) • Expected abandonment reduction: 10-15%</li><li>Score boost: +25 points toward Conversion Score</li></ul>' | |
| }, | |
| // SLIDE 13: KPI Details | |
| 'kpi-modules': { | |
| icon: '📊', title: 'Avg. Modules Activated', | |
| body: '<p><strong>Current:</strong> 3–5 modules → <strong>Target:</strong> 8–12 modules</p><p>This is the single most important health metric for Merchant. Users who activate more modules get more value, retain longer, and are more likely to upgrade to Pro.</p><ul><li><strong>How we measure:</strong> Track <code>update_option</code> calls for module activation via custom analytics endpoint</li><li><strong>Influenced by:</strong> Setup Wizard (personalized recommendations), Module Hub (discoverability), Conversion Score (motivation loop)</li><li><strong>Benchmark:</strong> Jetpack averages 6–8 features per user. Rank Math averages 8–10 modules per user</li><li><strong>Action trigger:</strong> If user has <5 modules after 7 days, show contextual “Explore more features” nudge</li><li><strong>Revenue impact:</strong> Each additional module activated correlates with 12% higher 90-day retention</li></ul>' | |
| }, | |
| 'kpi-wizard': { | |
| icon: '🧙', title: 'Wizard Completion Rate', | |
| body: '<p><strong>Current:</strong> N/A (doesn\'t exist yet) → <strong>Target:</strong> >60%</p><p>The wizard is the gateway to personalized onboarding. A high completion rate means users trust the process and receive tailored recommendations.</p><ul><li><strong>How we measure:</strong> Track wizard step progression events (step_1_started, step_2_completed, etc.)</li><li><strong>Step-level tracking:</strong> Identify which step has the highest drop-off to optimize it</li><li><strong>Benchmark:</strong> Rank Math achieves ~65% wizard completion. Shopify setup checklist: ~55%</li><li><strong>Design principle:</strong> 5 steps max, each under 30 seconds, always skippable</li><li><strong>Fallback:</strong> Users who skip wizard get smart defaults based on WooCommerce settings</li><li><strong>Re-engagement:</strong> Dismissible banner invites non-completers to return</li></ul>' | |
| }, | |
| 'kpi-activation': { | |
| icon: '⚡', title: 'Time to First Activation', | |
| body: '<p><strong>Current:</strong> 2–3 days → <strong>Target:</strong> <1 hour</p><p>The faster a user activates their first module, the more likely they are to stay. This metric directly predicts 30-day retention.</p><ul><li><strong>How we measure:</strong> Timestamp delta between plugin activation and first module toggle</li><li><strong>Current bottleneck:</strong> Users install → see module wall → feel overwhelmed → leave → return days later</li><li><strong>Solution:</strong> Wizard recommends modules immediately → one-click bundle activation → instant first win</li><li><strong>Ideal flow:</strong> Install → Wizard (2 min) → Starter Pack activated (10 sec) → first module live on frontend</li><li><strong>Benchmark:</strong> Shopify\'s time-to-first-sale target is <24 hours. Ours should be <1 hour for first module</li></ul>' | |
| }, | |
| 'kpi-pro': { | |
| icon: '💎', title: 'Pro Upgrade Exploration', | |
| body: '<p><strong>Current:</strong> Unknown → <strong>Target:</strong> +30% increase</p><p>Measures how many free users engage with Pro module listings — click into Pro module pages, view upgrade prompts, or filter by "Pro" status.</p><ul><li><strong>How we measure:</strong> Track clicks on Pro-badged modules, “Explore Pro” filter usage, and upgrade CTA impressions</li><li><strong>Current problem:</strong> Pro modules blend in with free ones — users don\'t even know they exist</li><li><strong>Solution:</strong> Distinct Pro visual treatment, dedicated “Pro Features” tab, contextual “unlock with Pro” previews</li><li><strong>Revenue impact:</strong> Every 10% increase in Pro exploration correlates with ~5% upgrade conversion lift</li><li><strong>Anti-pattern:</strong> Never gate exploration — users should freely browse Pro features, only gate activation</li></ul>' | |
| }, | |
| 'kpi-discovery': { | |
| icon: '🔭', title: '30-Day Module Discovery', | |
| body: '<p><strong>Current:</strong> 5–7 modules discovered → <strong>Target:</strong> 15–20 modules</p><p>Measures how many unique module pages/settings a user visits within their first 30 days — not just activation, but awareness.</p><ul><li><strong>How we measure:</strong> Track unique module settings page visits per user within 30-day cohorts</li><li><strong>Influenced by:</strong> “Did you know?” tips (drives exploration), Module cross-referencing (surfaces related modules), Conversion Score (motivates browsing)</li><li><strong>Why it matters:</strong> Discovery precedes activation — users can\'t activate what they don\'t know exists</li><li><strong>Goal tabs impact:</strong> Users who use goal-based filtering discover 3x more modules on average</li><li><strong>Content strategy:</strong> Each module should have a compelling one-liner that makes users want to click in</li></ul>' | |
| }, | |
| 'kpi-bundle': { | |
| icon: '📦', title: 'Bundle Activation Rate', | |
| body: '<p><strong>Current:</strong> 0% (feature doesn\'t exist yet) → <strong>Target:</strong> >15%</p><p>Measures the percentage of users who activate at least one preset bundle (recipe) within their first 14 days.</p><ul><li><strong>How we measure:</strong> Track “Activate Bundle” button clicks and successful multi-module activation events</li><li><strong>Most popular prediction:</strong> Starter Pack (universal) and Trust Builder (all free) will likely be top choices</li><li><strong>Conversion Score integration:</strong> Each bundle activation adds 15–25 points, creating instant score jump</li><li><strong>UX principle:</strong> One click activates + configures 4–5 modules with smart defaults — zero friction</li><li><strong>Future:</strong> Community-submitted bundles, industry-specific bundles (fashion, electronics, digital)</li><li><strong>Success criteria:</strong> >15% adoption means bundles are reducing the Paradox of Choice effectively</li></ul>' | |
| } | |
| }; | |
| // Detail overlay element | |
| const overlay = document.createElement('div'); | |
| overlay.className = 'detail-overlay'; | |
| overlay.innerHTML = '<div class="detail-panel"><button class="detail-close">\u2715</button><span class="detail-icon"></span><h3></h3><div class="detail-body"></div></div>'; | |
| document.body.appendChild(overlay); | |
| const panel = overlay.querySelector('.detail-panel'); | |
| const detailIcon = panel.querySelector('.detail-icon'); | |
| const detailTitle = panel.querySelector('h3'); | |
| const detailBody = panel.querySelector('.detail-body'); | |
| function openDetail(key) { | |
| const data = detailData[key]; | |
| if (!data) return; | |
| detailIcon.textContent = data.icon; | |
| detailTitle.textContent = data.title; | |
| detailBody.innerHTML = data.body; | |
| overlay.classList.add('open'); | |
| } | |
| function closeDetail() { | |
| overlay.classList.remove('open'); | |
| } | |
| // Click handlers | |
| document.addEventListener('click', (e) => { | |
| const el = e.target.closest('[data-detail]'); | |
| if (el) { | |
| e.stopPropagation(); | |
| openDetail(el.dataset.detail); | |
| return; | |
| } | |
| // Close on overlay click (not panel) | |
| if (e.target === overlay) { | |
| closeDetail(); | |
| } | |
| }); | |
| // Close button | |
| overlay.querySelector('.detail-close').addEventListener('click', closeDetail); | |
| // Escape closes detail (priority over other Escape handlers) | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'Escape' && overlay.classList.contains('open')) { | |
| e.stopPropagation(); | |
| closeDetail(); | |
| } | |
| }, true); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment