Last active
May 7, 2026 14:18
-
-
Save csorgod/621ffe199d5e9ba5a525febfe9dfd408 to your computer and use it in GitHub Desktop.
Landing page
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="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Experimentação — Decida com dados, não com achismo</title> | |
| <style> | |
| /* ─── Reset & Tokens ─────────────────────────────── */ | |
| *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } | |
| :root { | |
| --p: #FF6200; | |
| --p-dk: #CC4E00; | |
| --v: #F88104; | |
| --g: #FA9F09; | |
| --g-dk: #B86E00; | |
| --dark: #000B40; | |
| --d2: #1E293B; | |
| --mid: #475569; | |
| --muted: #94A3B8; | |
| --bg: #F5F6F8; | |
| --white: #FFFFFF; | |
| --line: #EDE0D8; | |
| --grad: linear-gradient(135deg, #FF6200, #FA9F09); | |
| --r: 12px; | |
| --sh: 0 4px 24px rgba(0,0,0,.07); | |
| --sh-lg: 0 20px 60px rgba(0,0,0,.12); | |
| --f: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; | |
| } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: var(--f); | |
| color: var(--d2); | |
| background: var(--bg); | |
| line-height: 1.65; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ─── Typography ─────────────────────────────────── */ | |
| h1 { font-size: clamp(2rem, 5.5vw, 3.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } | |
| h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; } | |
| h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.3; } | |
| p { color: var(--mid); font-size: 1rem; } | |
| /* ─── Layout Utilities ───────────────────────────── */ | |
| .wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; } | |
| .sec { padding: 96px 0; } | |
| .tag { | |
| display: inline-block; | |
| background: rgba(255,98,0,.1); | |
| color: var(--p); | |
| font-size: .72rem; | |
| font-weight: 700; | |
| letter-spacing: .1em; | |
| text-transform: uppercase; | |
| padding: 5px 14px; | |
| border-radius: 100px; | |
| margin-bottom: 16px; | |
| } | |
| .sec-hd { margin-bottom: 14px; } | |
| .sec-sub { font-size: 1.05rem; max-width: 540px; margin-bottom: 56px; } | |
| /* ─── Button ─────────────────────────────────────── */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 13px 30px; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| font-size: .95rem; | |
| text-decoration: none; | |
| cursor: pointer; | |
| transition: transform .2s, box-shadow .2s, background .2s, color .2s; | |
| border: none; | |
| } | |
| .btn-lg { padding: 16px 40px; font-size: 1.05rem; } | |
| .btn-pri { | |
| background: var(--grad); | |
| color: #fff; | |
| box-shadow: 0 4px 18px rgba(255,98,0,.32); | |
| } | |
| .btn-pri:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,98,0,.45); } | |
| .btn-out { | |
| background: transparent; | |
| color: var(--p); | |
| border: 2px solid var(--p); | |
| padding: 11px 28px; | |
| } | |
| .btn-out.btn-lg { padding: 14px 38px; } | |
| .btn-out:hover { background: var(--p); color: #fff; } | |
| .btn-acc { | |
| background: var(--g); | |
| color: #fff; | |
| box-shadow: 0 4px 18px rgba(250,159,9,.35); | |
| } | |
| .btn-acc:hover { background: var(--g-dk); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(250,159,9,.48); } | |
| .btn-ghost { | |
| background: transparent; | |
| color: rgba(255,255,255,.8); | |
| border: 2px solid rgba(255,255,255,.25); | |
| padding: 11px 28px; | |
| } | |
| .btn-ghost.btn-lg { padding: 14px 38px; } | |
| .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); } | |
| /* ─── Nav ────────────────────────────────────────── */ | |
| nav { | |
| position: fixed; top: 0; left: 0; right: 0; z-index: 200; | |
| background: rgba(255,255,255,.88); | |
| backdrop-filter: blur(14px); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .nav-in { | |
| max-width: 1140px; margin: 0 auto; padding: 0 24px; | |
| height: 64px; | |
| display: flex; align-items: center; justify-content: space-between; | |
| } | |
| .logo { | |
| font-weight: 800; font-size: 1.15rem; | |
| color: var(--dark); text-decoration: none; | |
| display: flex; align-items: center; gap: 8px; | |
| } | |
| .logo-img { height: 28px; width: auto; display: block; } | |
| .logo .grd { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } | |
| .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } | |
| .nav-links a { text-decoration: none; color: var(--mid); font-size: .9rem; font-weight: 500; transition: color .2s; } | |
| .nav-links a:hover { color: var(--p); } | |
| /* ─── Dropdown ───────────────────────────────────── */ | |
| .nav-dropdown { position: relative; } | |
| .nav-dropdown-trigger { | |
| display: flex; align-items: center; gap: 5px; | |
| color: var(--mid); font-size: .9rem; font-weight: 500; | |
| cursor: pointer; background: none; border: none; | |
| padding: 0; transition: color .2s; | |
| font-family: var(--f); | |
| } | |
| .nav-dropdown-trigger:hover, | |
| .nav-dropdown.open .nav-dropdown-trigger { color: var(--p); } | |
| .nav-dropdown-trigger svg { | |
| transition: transform .2s; | |
| } | |
| .nav-dropdown.open .nav-dropdown-trigger svg { transform: rotate(180deg); } | |
| .nav-dropdown-menu { | |
| position: absolute; | |
| top: calc(100% + 14px); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| padding: 6px; | |
| min-width: 220px; | |
| box-shadow: 0 12px 40px rgba(0,0,0,.1); | |
| opacity: 0; | |
| pointer-events: none; | |
| transform: translateX(-50%) translateY(-6px); | |
| transition: opacity .18s ease, transform .18s ease; | |
| } | |
| .nav-dropdown.open .nav-dropdown-menu { | |
| opacity: 1; | |
| pointer-events: all; | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| .nav-dropdown-menu a { | |
| display: flex; align-items: center; gap: 12px; | |
| padding: 10px 14px; | |
| border-radius: 8px; | |
| text-decoration: none; | |
| color: var(--d2); | |
| font-size: .88rem; font-weight: 500; | |
| transition: background .15s, color .15s; | |
| } | |
| .nav-dropdown-menu a:hover { background: rgba(255,98,0,.06); color: var(--p); } | |
| .dd-icon { | |
| width: 32px; height: 32px; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| flex-shrink: 0; | |
| background: var(--line); | |
| } | |
| .dd-icon img { | |
| width: 100%; height: 100%; | |
| object-fit: contain; | |
| display: block; | |
| } | |
| .dd-text { display: flex; flex-direction: column; gap: 1px; } | |
| .dd-title { font-weight: 600; color: var(--dark); font-size: .85rem; } | |
| .dd-sub { font-size: .75rem; color: var(--muted); font-weight: 400; } | |
| /* ─── Hero ───────────────────────────────────────── */ | |
| #hero { | |
| padding: 168px 0 104px; | |
| background: linear-gradient(170deg, #EEF1F7 0%, #F3F5F9 40%, var(--bg) 100%); | |
| position: relative; overflow: hidden; | |
| } | |
| #hero::before { | |
| content: ''; position: absolute; | |
| top: -180px; right: -140px; | |
| width: 640px; height: 640px; | |
| background: radial-gradient(circle, rgba(255,98,0,.08) 0%, transparent 68%); | |
| border-radius: 50%; | |
| } | |
| #hero::after { | |
| content: ''; position: absolute; | |
| bottom: -80px; left: 15%; | |
| width: 360px; height: 360px; | |
| background: radial-gradient(circle, rgba(248,129,4,.06) 0%, transparent 68%); | |
| border-radius: 50%; | |
| } | |
| .hero-inner { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 64px; | |
| align-items: center; | |
| } | |
| .hero-body { position: relative; z-index: 1; } | |
| /* ─── Hero Visual (mock card) ────────────────────── */ | |
| .hero-visual { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1; | |
| } | |
| .mock-card { | |
| background: #fff; | |
| border-radius: 20px; | |
| padding: 28px 28px 24px; | |
| box-shadow: 0 24px 64px rgba(0,0,0,.13); | |
| width: 100%; | |
| max-width: 380px; | |
| border: 1px solid var(--line); | |
| position: relative; | |
| } | |
| .mock-head { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 6px; | |
| } | |
| .mock-title { font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; } | |
| .mock-live { | |
| display: inline-flex; align-items: center; gap: 5px; | |
| background: rgba(255,98,0,.1); | |
| color: var(--p); | |
| font-size: .68rem; font-weight: 700; | |
| padding: 3px 10px; | |
| border-radius: 100px; | |
| } | |
| .mock-live::before { | |
| content: ''; | |
| width: 6px; height: 6px; | |
| background: var(--p); | |
| border-radius: 50%; | |
| animation: blink 2s infinite; | |
| } | |
| .mock-name { font-size: 1rem; font-weight: 700; color: var(--d2); margin-bottom: 22px; } | |
| .mock-variants { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; } | |
| .var-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; } | |
| .var-lbl { font-size: .78rem; font-weight: 600; color: var(--mid); display: flex; align-items: center; gap: 6px; } | |
| .var-win-badge { | |
| font-size: .62rem; font-weight: 700; background: rgba(255,98,0,.12); | |
| color: var(--p); padding: 1px 7px; border-radius: 100px; | |
| } | |
| .var-pct { font-size: .85rem; font-weight: 700; color: var(--d2); } | |
| .var-track { | |
| height: 8px; | |
| background: var(--bg); | |
| border-radius: 100px; | |
| overflow: hidden; | |
| } | |
| .var-fill { | |
| height: 100%; | |
| border-radius: 100px; | |
| background: var(--line); | |
| } | |
| .var-fill.hot { | |
| background: var(--grad); | |
| } | |
| .mock-divider { border: none; border-top: 1px solid var(--line); margin: 0 0 16px; } | |
| .mock-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .mock-stat { display: flex; flex-direction: column; gap: 2px; } | |
| .mock-stat-lbl { font-size: .67rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } | |
| .mock-stat-val { font-size: .92rem; font-weight: 800; color: var(--d2); } | |
| .mock-stat-val.pos { color: var(--p); } | |
| .deco-float { | |
| position: absolute; | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| padding: 9px 14px; | |
| font-size: .75rem; | |
| font-weight: 700; | |
| color: var(--d2); | |
| box-shadow: var(--sh); | |
| white-space: nowrap; | |
| } | |
| .deco-1 { top: -18px; right: -24px; color: var(--p); border-color: rgba(255,98,0,.2); } | |
| .deco-2 { bottom: -16px; left: -20px; } | |
| .hero-pill { | |
| display: inline-flex; align-items: center; gap: 10px; | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: 100px; | |
| padding: 8px 20px; | |
| font-size: .82rem; font-weight: 600; color: var(--p); | |
| margin-bottom: 32px; | |
| box-shadow: var(--sh); | |
| } | |
| .pulse { | |
| width: 8px; height: 8px; | |
| background: var(--g); | |
| border-radius: 50%; | |
| animation: blink 2.2s ease-in-out infinite; | |
| } | |
| @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} } | |
| .hero-title { color: var(--dark); margin-bottom: 22px; } | |
| .hero-title .hl { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } | |
| .hero-sub { font-size: 1.15rem; color: var(--mid); margin-bottom: 40px; max-width: 560px; } | |
| .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } | |
| .hero-stats { | |
| margin-top: 72px; | |
| display: flex; gap: 0; flex-wrap: wrap; | |
| border-top: 1px solid rgba(255,98,0,.15); | |
| padding-top: 40px; | |
| } | |
| .stat { flex: 1 0 140px; padding-right: 32px; } | |
| .stat-n { font-size: 2.2rem; font-weight: 800; color: var(--dark); line-height: 1; } | |
| .stat-l { font-size: .78rem; color: var(--muted); margin-top: 5px; line-height: 1.4; } | |
| /* ─── O que é ─────────────────────────────────────── */ | |
| #o-que-e { background: #fff; } | |
| .step-row { | |
| display: grid; | |
| grid-template-columns: repeat(3,1fr); | |
| gap: 0; | |
| position: relative; | |
| } | |
| .step-card { padding: 0 32px 0; text-align: center; position: relative; } | |
| .step-card:not(:last-child)::after { | |
| content: '→'; | |
| position: absolute; | |
| right: -10px; top: 28px; | |
| font-size: 1.2rem; | |
| color: var(--p); | |
| opacity: .3; | |
| } | |
| .step-ico { | |
| width: 88px; height: 88px; | |
| border-radius: 24px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 2.2rem; | |
| margin: 0 auto 28px; | |
| } | |
| .ico-b { background: rgba(255,98,0,.08); } | |
| .ico-v { background: rgba(248,129,4,.1); } | |
| .ico-g { background: rgba(250,159,9,.1); } | |
| .step-num { | |
| font-size: .68rem; font-weight: 700; | |
| letter-spacing: .12em; text-transform: uppercase; | |
| color: var(--muted); margin-bottom: 8px; | |
| } | |
| .step-card h3 { color: var(--dark); margin-bottom: 12px; } | |
| /* ─── Por que ─────────────────────────────────────── */ | |
| #por-que { background: var(--bg); } | |
| .feat-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); | |
| gap: 22px; | |
| } | |
| .feat-card { | |
| background: #fff; | |
| border-radius: var(--r); | |
| padding: 32px 28px; | |
| border: 1px solid var(--line); | |
| transition: transform .3s, box-shadow .3s, border-color .3s; | |
| } | |
| .feat-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: transparent; } | |
| .feat-ico { font-size: 2.1rem; margin-bottom: 20px; } | |
| .feat-card h3 { color: var(--dark); margin-bottom: 10px; } | |
| /* ─── Como Começar ───────────────────────────────── */ | |
| #como-comecar { background: #fff; } | |
| .steps-list { display: flex; flex-direction: column; max-width: 680px; } | |
| .st { | |
| display: flex; gap: 24px; | |
| position: relative; | |
| } | |
| .st:not(:last-child)::before { | |
| content: ''; | |
| position: absolute; | |
| left: 20px; top: 46px; bottom: -8px; | |
| width: 2px; | |
| background: var(--line); | |
| } | |
| .st-num { | |
| width: 42px; height: 42px; min-width: 42px; | |
| border-radius: 50%; | |
| background: var(--grad); | |
| color: #fff; | |
| display: flex; align-items: center; justify-content: center; | |
| font-weight: 700; font-size: .88rem; | |
| position: relative; z-index: 1; | |
| flex-shrink: 0; | |
| } | |
| .st-body { padding-bottom: 40px; } | |
| .st-body h3 { color: var(--dark); margin-bottom: 8px; } | |
| /* ─── Plataformas ─────────────────────────────────── */ | |
| #plataformas { | |
| background: linear-gradient(180deg, var(--bg) 0%, #E8ECF4 100%); | |
| } | |
| .comp-wrap { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 24px; | |
| max-width: 880px; | |
| margin: 0 auto; | |
| } | |
| .plat-card { | |
| background: #fff; | |
| border-radius: 20px; | |
| border: 2px solid var(--line); | |
| overflow: hidden; | |
| transition: transform .3s, box-shadow .3s; | |
| } | |
| .plat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); } | |
| .plat-hd { | |
| padding: 30px 30px 22px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .plat-badge { | |
| display: inline-block; | |
| padding: 4px 12px; | |
| border-radius: 100px; | |
| font-size: .68rem; font-weight: 700; | |
| letter-spacing: .08em; text-transform: uppercase; | |
| margin-bottom: 14px; | |
| } | |
| .bg-starter { background: #FDF0E8; color: #B06828; } | |
| .bg-pro { background: #FDE4CC; color: #8A4E1E; } | |
| .plat-name-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } | |
| .plat-logo { | |
| width: 36px; height: 36px; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| background: var(--line); | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .plat-logo img { width: 100%; height: 100%; object-fit: contain; display: block; } | |
| .plat-name { font-size: 1.5rem; font-weight: 800; color: var(--dark); } | |
| .plat-desc { font-size: .88rem; color: var(--mid); } | |
| .plat-ft { padding: 22px 30px 30px; } | |
| .ft-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } | |
| .ft-item { display: flex; align-items: center; gap: 11px; font-size: .88rem; color: var(--d2); } | |
| .chk { | |
| width: 20px; height: 20px; min-width: 20px; | |
| border-radius: 50%; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: .65rem; font-weight: 700; | |
| } | |
| .chk-y { background: rgba(250,159,9,.14); color: var(--g-dk); } | |
| .chk-n { background: rgba(148,163,184,.14); color: var(--muted); } | |
| .ideal { | |
| background: var(--bg); | |
| border-radius: var(--r); | |
| padding: 14px 18px; | |
| margin-bottom: 22px; | |
| } | |
| .ideal-lbl { font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } | |
| .ideal p { font-size: .83rem; margin: 0; } | |
| .btn-full { width: 100%; justify-content: center; } | |
| /* ─── Decision Banner ────────────────────────────── */ | |
| .decide-banner { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 24px; | |
| background: #fff; | |
| border: 1.5px solid var(--line); | |
| border-radius: 16px; | |
| padding: 24px 32px; | |
| flex-wrap: wrap; | |
| } | |
| .decide-left { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; } | |
| .decide-ico { | |
| width: 52px; height: 52px; min-width: 52px; | |
| border-radius: 14px; | |
| background: rgba(255,98,0,.08); | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 1.5rem; | |
| } | |
| .decide-text h3 { color: var(--dark); margin-bottom: 4px; font-size: 1rem; } | |
| .decide-text p { font-size: .88rem; margin: 0; } | |
| /* ─── Decision Modal ────────────────────────────── */ | |
| .dm-overlay { | |
| position: fixed; inset: 0; z-index: 500; | |
| background: rgba(15,23,42,.6); | |
| backdrop-filter: blur(6px); | |
| display: flex; align-items: center; justify-content: center; | |
| padding: 24px; | |
| opacity: 0; pointer-events: none; | |
| transition: opacity .25s ease; | |
| } | |
| .dm-overlay.open { opacity: 1; pointer-events: all; } | |
| .dm-box { | |
| background: #fff; | |
| border-radius: 20px; | |
| width: 100%; max-width: 520px; | |
| box-shadow: 0 32px 80px rgba(0,0,0,.2); | |
| overflow: hidden; | |
| transform: translateY(20px) scale(.97); | |
| transition: transform .28s ease; | |
| } | |
| .dm-overlay.open .dm-box { transform: translateY(0) scale(1); } | |
| /* Progress bar */ | |
| .dm-progress { | |
| display: flex; | |
| height: 4px; | |
| background: var(--line); | |
| } | |
| .dm-prog-fill { | |
| height: 100%; | |
| background: var(--grad); | |
| transition: width .35s ease; | |
| } | |
| .dm-body { padding: 36px 36px 32px; } | |
| /* Step counter */ | |
| .dm-counter { | |
| display: flex; align-items: center; justify-content: space-between; | |
| margin-bottom: 28px; | |
| } | |
| .dm-steps { | |
| display: flex; gap: 6px; | |
| } | |
| .dm-dot { | |
| width: 8px; height: 8px; | |
| border-radius: 50%; | |
| background: var(--line); | |
| transition: background .3s, transform .3s; | |
| } | |
| .dm-dot.done { background: var(--g); } | |
| .dm-dot.active { background: var(--p); transform: scale(1.35); } | |
| .dm-step-lbl { | |
| font-size: .72rem; font-weight: 700; | |
| letter-spacing: .1em; text-transform: uppercase; | |
| color: var(--muted); | |
| } | |
| /* Question */ | |
| .dm-question { | |
| font-size: 1.15rem; font-weight: 700; | |
| color: var(--dark); line-height: 1.35; | |
| margin-bottom: 20px; | |
| } | |
| /* Select */ | |
| .dm-select-wrap { position: relative; margin-bottom: 32px; } | |
| .dm-select { | |
| width: 100%; | |
| appearance: none; | |
| -webkit-appearance: none; | |
| padding: 13px 44px 13px 16px; | |
| border: 1.5px solid var(--line); | |
| border-radius: 10px; | |
| font-family: var(--f); | |
| font-size: .95rem; | |
| color: var(--d2); | |
| background: #fff; | |
| cursor: pointer; | |
| transition: border-color .2s, box-shadow .2s; | |
| outline: none; | |
| } | |
| .dm-select:focus { border-color: var(--p); box-shadow: 0 0 0 3px rgba(255,98,0,.12); } | |
| .dm-select-wrap::after { | |
| content: ''; | |
| position: absolute; | |
| right: 16px; top: 50%; | |
| transform: translateY(-50%); | |
| width: 10px; height: 6px; | |
| pointer-events: none; | |
| background: var(--muted); | |
| clip-path: polygon(0 0, 100% 0, 50% 100%); | |
| } | |
| /* Nav */ | |
| .dm-nav { | |
| display: flex; align-items: center; justify-content: space-between; | |
| } | |
| .dm-back { | |
| background: none; border: none; cursor: pointer; | |
| color: var(--muted); font-size: .88rem; font-weight: 600; | |
| font-family: var(--f); | |
| transition: color .2s; padding: 0; | |
| } | |
| .dm-back:hover { color: var(--dark); } | |
| .dm-next { min-width: 130px; justify-content: center; } | |
| .dm-next:disabled { opacity: .4; cursor: not-allowed; transform: none !important; box-shadow: none !important; } | |
| .dm-close { | |
| position: absolute; top: 16px; right: 20px; | |
| background: none; border: none; cursor: pointer; | |
| color: var(--muted); font-size: 1.5rem; line-height: 1; | |
| transition: color .2s; z-index: 1; | |
| } | |
| .dm-close:hover { color: var(--dark); } | |
| /* Result screen */ | |
| .dm-result { display: none; text-align: center; } | |
| .dm-result.show { display: block; } | |
| .dm-question-wrap { display: block; } | |
| .dm-question-wrap.hide { display: none; } | |
| .dm-result-ico { | |
| width: 72px; height: 72px; | |
| border-radius: 20px; | |
| background: rgba(255,98,0,.08); | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 2rem; | |
| margin: 0 auto 20px; | |
| } | |
| .dm-result-tag { | |
| font-size: .72rem; font-weight: 700; | |
| letter-spacing: .1em; text-transform: uppercase; | |
| color: var(--p); margin-bottom: 8px; | |
| } | |
| .dm-result h3 { | |
| font-size: 1.3rem; color: var(--dark); | |
| margin-bottom: 10px; | |
| } | |
| .dm-result p { font-size: .92rem; margin-bottom: 28px; } | |
| .dm-result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } | |
| .dm-restart { | |
| background: none; border: none; cursor: pointer; | |
| color: var(--muted); font-size: .85rem; font-weight: 600; | |
| font-family: var(--f); margin-top: 16px; | |
| transition: color .2s; display: block; width: 100%; | |
| } | |
| .dm-restart:hover { color: var(--dark); } | |
| .dm-reasons { | |
| background: var(--bg); | |
| border-radius: 12px; | |
| padding: 16px 20px; | |
| margin-bottom: 24px; | |
| text-align: left; | |
| } | |
| .dm-reasons-title { | |
| font-size: .68rem; font-weight: 700; | |
| letter-spacing: .1em; text-transform: uppercase; | |
| color: var(--muted); margin-bottom: 12px; | |
| } | |
| .dm-reasons-list { list-style: none; display: flex; flex-direction: column; gap: 9px; } | |
| .dm-reason-item { | |
| display: flex; align-items: flex-start; gap: 10px; | |
| font-size: .85rem; color: var(--d2); line-height: 1.45; | |
| } | |
| .dm-reason-check { | |
| width: 18px; height: 18px; min-width: 18px; | |
| border-radius: 50%; | |
| background: rgba(255,98,0,.12); | |
| color: var(--p); | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: .6rem; font-weight: 800; | |
| margin-top: 1px; | |
| } | |
| /* Loading */ | |
| .dm-loading { display: none; text-align: center; padding: 16px 0 8px; } | |
| .dm-loading.show { display: block; } | |
| .dm-spinner { | |
| width: 48px; height: 48px; | |
| border: 3px solid var(--line); | |
| border-top-color: var(--p); | |
| border-radius: 50%; | |
| margin: 0 auto 24px; | |
| animation: dm-spin .8s linear infinite; | |
| } | |
| @keyframes dm-spin { to { transform: rotate(360deg); } } | |
| .dm-loading-steps { | |
| display: flex; flex-direction: column; gap: 10px; | |
| text-align: left; max-width: 260px; margin: 0 auto; | |
| } | |
| .dm-lstep { | |
| display: flex; align-items: center; gap: 10px; | |
| font-size: .85rem; color: var(--muted); | |
| opacity: 0; | |
| transition: opacity .3s ease; | |
| } | |
| .dm-lstep.on { opacity: 1; } | |
| .dm-lstep.done { color: var(--dark); } | |
| .dm-lstep-dot { | |
| width: 18px; height: 18px; min-width: 18px; | |
| border-radius: 50%; | |
| border: 2px solid var(--line); | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: .6rem; | |
| transition: background .3s, border-color .3s; | |
| } | |
| .dm-lstep.done .dm-lstep-dot { | |
| background: var(--g); border-color: var(--g); color: #fff; | |
| } | |
| .dm-lstep.active .dm-lstep-dot { | |
| border-color: var(--p); | |
| animation: dm-pulse-dot 1s ease-in-out infinite; | |
| } | |
| @keyframes dm-pulse-dot { | |
| 0%, 100% { box-shadow: 0 0 0 0 rgba(255,98,0,.4); } | |
| 50% { box-shadow: 0 0 0 5px rgba(255,98,0,0); } | |
| } | |
| /* ─── CTA Final ──────────────────────────────────── */ | |
| #cta-final { | |
| background: var(--dark); | |
| padding: 112px 0; | |
| position: relative; overflow: hidden; | |
| } | |
| #cta-final::before { | |
| content: ''; | |
| position: absolute; | |
| top: -160px; right: -160px; | |
| width: 480px; height: 480px; | |
| background: radial-gradient(circle, rgba(250,159,9,.18) 0%, transparent 68%); | |
| border-radius: 50%; | |
| } | |
| .cta-in { text-align: center; max-width: 580px; margin: 0 auto; position: relative; z-index: 1; } | |
| #cta-final h2 { color: #fff; margin-bottom: 14px; } | |
| #cta-final p { color: rgba(255,255,255,.58); margin-bottom: 40px; font-size: 1.05rem; } | |
| .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } | |
| /* ─── Footer ─────────────────────────────────────── */ | |
| footer { | |
| background: var(--dark); | |
| border-top: 1px solid rgba(255,255,255,.06); | |
| padding: 28px 0; | |
| } | |
| .ft-in { | |
| display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; | |
| } | |
| footer p { font-size: .82rem; color: rgba(255,255,255,.35); margin: 0; } | |
| /* ─── Fade-in Animations ─────────────────────────── */ | |
| .fi { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } | |
| .fi.on { opacity: 1; transform: translateY(0); } | |
| .fi-d1 { transition-delay: .1s; } | |
| .fi-d2 { transition-delay: .2s; } | |
| .fi-d3 { transition-delay: .3s; } | |
| /* ─── Responsive ─────────────────────────────────── */ | |
| @media (max-width: 900px) { | |
| .step-row { grid-template-columns: 1fr; gap: 40px; } | |
| .step-row::before { display: none; } | |
| .step-card::after { display: none; } | |
| .step-card { padding: 0; text-align: left; display: flex; gap: 20px; align-items: flex-start; } | |
| .step-ico { margin: 0; flex-shrink: 0; width: 56px; height: 56px; font-size: 1.6rem; } | |
| .comp-wrap { grid-template-columns: 1fr; max-width: 480px; } | |
| .plat-card.hot { order: -1; } | |
| } | |
| @media (max-width: 768px) { | |
| .hero-inner { grid-template-columns: 1fr; gap: 48px; } | |
| .hero-visual { display: none; } | |
| .sec { padding: 64px 0; } | |
| #hero { padding: 120px 0 64px; } | |
| .nav-links { display: none; } | |
| .hero-stats { gap: 24px 0; } | |
| .stat { flex: 0 0 50%; } | |
| } | |
| @media (max-width: 480px) { | |
| .hero-ctas, .cta-btns { flex-direction: column; align-items: stretch; } | |
| .hero-ctas .btn, .cta-btns .btn { justify-content: center; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ─── Nav ──────────────────────────────────────────── --> | |
| <nav> | |
| <div class="nav-in"> | |
| <!-- CUSTOMIZAR: substitua o src pelo caminho real do logo PNG --> | |
| <a class="logo" href="#"> | |
| <img class="logo-img" src="" alt="Experimentos"> | |
| </a> | |
| <ul class="nav-links"> | |
| <li><a href="#o-que-e">O que é</a></li> | |
| <li><a href="#por-que">Por que testar</a></li> | |
| <li><a href="#como-comecar">Como começar</a></li> | |
| <li><a href="#plataformas">Plataformas</a></li> | |
| <li class="nav-dropdown" id="docsDropdown"> | |
| <button class="nav-dropdown-trigger" onclick="toggleDropdown()"> | |
| Docs | |
| <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <polyline points="2 4 6 8 10 4"/> | |
| </svg> | |
| </button> | |
| <div class="nav-dropdown-menu"> | |
| <!-- CUSTOMIZAR: URLs reais das documentações --> | |
| <!-- CUSTOMIZAR: substitua o src pelo logo real de cada plataforma --> | |
| <a href="#"> | |
| <span class="dd-icon"> | |
| <img src="" alt="Plataforma A"> | |
| </span> | |
| <span class="dd-text"> | |
| <span class="dd-title">Plataforma A</span> | |
| <span class="dd-sub">Guias, API e referências</span> | |
| </span> | |
| </a> | |
| <a href="#"> | |
| <span class="dd-icon"> | |
| <img src="" alt="Plataforma B"> | |
| </span> | |
| <span class="dd-text"> | |
| <span class="dd-title">Plataforma B</span> | |
| <span class="dd-sub">Guias, API e referências</span> | |
| </span> | |
| </a> | |
| </div> | |
| </li> | |
| </ul> | |
| <a href="#plataformas" class="btn btn-pri">Começar agora</a> | |
| </div> | |
| </nav> | |
| <!-- ─── Hero ─────────────────────────────────────────── --> | |
| <section id="hero"> | |
| <div class="wrap"> | |
| <div class="hero-inner"> | |
| <!-- Coluna esquerda: texto --> | |
| <div class="hero-body"> | |
| <div class="hero-pill"> | |
| <span class="pulse"></span> | |
| Decisões baseadas em dados, não em achismo | |
| </div> | |
| <h1 class="hero-title"> | |
| Pare de adivinhar.<br> | |
| Comece a <span class="hl">experimentar</span>. | |
| </h1> | |
| <p class="hero-sub"> | |
| Antes de lançar para todo mundo, teste com uma parte. Descubra o que realmente funciona — com dados, não com opiniões — e tome decisões mais inteligentes a cada ciclo. | |
| </p> | |
| <div class="hero-ctas"> | |
| <a href="#plataformas" class="btn btn-pri btn-lg">Quero escolher minha plataforma</a> | |
| <a href="#o-que-e" class="btn btn-out btn-lg">Entender primeiro</a> | |
| </div> | |
| <div class="hero-stats"> | |
| <div class="stat"> | |
| <span class="stat-n">3×</span> | |
| <span class="stat-l">mais rápido<br>para validar ideias</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-n">↓ 80%</span> | |
| <span class="stat-l">menos risco<br>ao lançar mudanças</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-n">100%</span> | |
| <span class="stat-l">baseado em<br>comportamento real</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Coluna direita: mock visual --> | |
| <div class="hero-visual"> | |
| <div class="mock-card"> | |
| <div class="mock-head"> | |
| <span class="mock-title">Experimento #24</span> | |
| <span class="mock-live">Ao vivo</span> | |
| </div> | |
| <div class="mock-name">Novo texto do botão de compra</div> | |
| <div class="mock-variants"> | |
| <div> | |
| <div class="var-top"> | |
| <span class="var-lbl">Variante A — Controle</span> | |
| <span class="var-pct">42%</span> | |
| </div> | |
| <div class="var-track"><div class="var-fill" style="width:42%"></div></div> | |
| </div> | |
| <div> | |
| <div class="var-top"> | |
| <span class="var-lbl">Variante B <span class="var-win-badge">Vencendo</span></span> | |
| <span class="var-pct" style="color:var(--p)">67%</span> | |
| </div> | |
| <div class="var-track"><div class="var-fill hot" style="width:67%"></div></div> | |
| </div> | |
| </div> | |
| <hr class="mock-divider"> | |
| <div class="mock-footer"> | |
| <div class="mock-stat"> | |
| <span class="mock-stat-lbl">Confiança</span> | |
| <span class="mock-stat-val pos">95%</span> | |
| </div> | |
| <div class="mock-stat"> | |
| <span class="mock-stat-lbl">Uplift</span> | |
| <span class="mock-stat-val pos">+25%</span> | |
| </div> | |
| <div class="mock-stat"> | |
| <span class="mock-stat-lbl">Usuários</span> | |
| <span class="mock-stat-val">4.830</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="deco-float deco-1">🏆 Variante B venceu</div> | |
| <div class="deco-float deco-2">📊 p-value: 0.032</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ─── O que é ────────────────────────────────────────── --> | |
| <section id="o-que-e" class="sec"> | |
| <div class="wrap"> | |
| <div class="fi"> | |
| <span class="tag">O que é experimentação</span> | |
| <h2 class="sec-hd">Uma ideia simples. Um impacto enorme.</h2> | |
| <p class="sec-sub">Experimentação é mostrar versões diferentes do seu produto para grupos reais de usuários — e deixar os dados decidirem qual funciona melhor.</p> | |
| </div> | |
| <div class="step-row"> | |
| <div class="step-card fi fi-d1"> | |
| <div class="step-ico ico-b">💡</div> | |
| <div> | |
| <div class="step-num">Passo 01</div> | |
| <h3>Tenha uma hipótese</h3> | |
| <p style="margin-top:10px">"Se mudarmos o texto do botão, mais pessoas vão clicar." Toda experiência começa com uma pergunta clara e uma suposição testável.</p> | |
| </div> | |
| </div> | |
| <div class="step-card fi fi-d2"> | |
| <div class="step-ico ico-v">⚗️</div> | |
| <div> | |
| <div class="step-num">Passo 02</div> | |
| <h3>Teste com usuários reais</h3> | |
| <p style="margin-top:10px">Dois grupos veem versões diferentes. O grupo A vê o original. O grupo B vê a variação. Ambos usam o produto normalmente, sem saber do teste.</p> | |
| </div> | |
| </div> | |
| <div class="step-card fi fi-d3"> | |
| <div class="step-ico ico-g">📊</div> | |
| <div> | |
| <div class="step-num">Passo 03</div> | |
| <h3>Os dados decidem</h3> | |
| <p style="margin-top:10px">Com amostra suficiente, os resultados apontam o vencedor. Não é opinião — é evidência. Aí você implementa o que funcionou.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ─── Por que ────────────────────────────────────────── --> | |
| <section id="por-que" class="sec"> | |
| <div class="wrap"> | |
| <div class="fi"> | |
| <span class="tag">Por que experimentar</span> | |
| <h2 class="sec-hd">O que muda quando você para de adivinhar</h2> | |
| <p class="sec-sub">Times que experimentam sistematicamente chegam mais longe — porque constroem o que funciona, não o que achavam que ia funcionar.</p> | |
| </div> | |
| <div class="feat-grid"> | |
| <div class="feat-card fi fi-d1"> | |
| <div class="feat-ico">🎯</div> | |
| <h3>Fim do achismo</h3> | |
| <p>Chega de reuniões intermináveis sobre qual versão é melhor. Os dados dizem. A decisão fica fácil.</p> | |
| </div> | |
| <div class="feat-card fi fi-d2"> | |
| <div class="feat-ico">🛡️</div> | |
| <h3>Menos risco ao lançar</h3> | |
| <p>Você testa com uma fração dos usuários antes de lançar para todos. Se algo der errado, o impacto é mínimo e controlado.</p> | |
| </div> | |
| <div class="feat-card fi fi-d1"> | |
| <div class="feat-ico">🚀</div> | |
| <h3>Mais velocidade</h3> | |
| <p>Com hipóteses claras e processos definidos, você valida ideias mais rápido e chega ao mercado com o que realmente importa.</p> | |
| </div> | |
| <div class="feat-card fi fi-d2"> | |
| <div class="feat-ico">📈</div> | |
| <h3>Aprendizado acumulado</h3> | |
| <p>Cada experimento, mesmo os que "perderam", gera conhecimento. Com o tempo, seu produto evolui de forma intencional.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ─── Como Começar ──────────────────────────────────── --> | |
| <section id="como-comecar" class="sec"> | |
| <div class="wrap"> | |
| <div class="fi"> | |
| <span class="tag">Como começar</span> | |
| <h2 class="sec-hd">Do zero ao primeiro teste em 4 passos</h2> | |
| <p class="sec-sub">Mais simples do que parece. Você não precisa ser cientista de dados — precisa de uma boa pergunta.</p> | |
| </div> | |
| <div class="steps-list"> | |
| <div class="st fi fi-d1"> | |
| <div class="st-num">1</div> | |
| <div class="st-body"> | |
| <h3>Escolha o que você quer melhorar</h3> | |
| <p>Defina uma métrica: taxa de cliques, conversão, tempo de sessão. Foque em uma só coisa. Menos é mais.</p> | |
| </div> | |
| </div> | |
| <div class="st fi fi-d2"> | |
| <div class="st-num">2</div> | |
| <div class="st-body"> | |
| <h3>Formule sua hipótese</h3> | |
| <p>Crie uma afirmação testável: "Se X, então Y vai acontecer." Quanto mais específica, mais claro o resultado.</p> | |
| </div> | |
| </div> | |
| <div class="st fi fi-d1"> | |
| <div class="st-num">3</div> | |
| <div class="st-body"> | |
| <h3>Configure e rode o experimento</h3> | |
| <p>Escolha sua plataforma, defina as variantes e o tamanho da amostra. A plataforma distribui o tráfego e coleta os dados automaticamente.</p> | |
| </div> | |
| </div> | |
| <div class="st fi fi-d2"> | |
| <div class="st-num">4</div> | |
| <div class="st-body"> | |
| <h3>Analise, decida, repita</h3> | |
| <p>Veja os resultados, implemente o vencedor e já pense no próximo teste. A mágica está no ciclo contínuo.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ─── Plataformas ───────────────────────────────────── --> | |
| <section id="plataformas" class="sec"> | |
| <div class="wrap"> | |
| <div class="fi" style="text-align:center"> | |
| <span class="tag">Nossas plataformas</span> | |
| <h2 class="sec-hd">Qual plataforma é a sua?</h2> | |
| <p class="sec-sub" style="margin: 0 auto 40px">Temos dois caminhos. Escolha o que melhor se encaixa no seu momento — ou deixe a gente te ajudar.</p> | |
| </div> | |
| <!-- Banner de decisão --> | |
| <div style="max-width:880px; margin: 0 auto 40px;"> | |
| <div class="decide-banner fi"> | |
| <div class="decide-left"> | |
| <div class="decide-ico">🤔</div> | |
| <div class="decide-text"> | |
| <h3>Não sabe por qual começar?</h3> | |
| <p>Responda 3 perguntas rápidas e descobrimos juntos qual plataforma faz mais sentido pra você.</p> | |
| </div> | |
| </div> | |
| <button class="btn btn-pri" onclick="openDecideModal()">Me ajude a decidir →</button> | |
| </div> | |
| </div> | |
| <div class="comp-wrap"> | |
| <!-- Plataforma 1 — Starter --> | |
| <!-- CUSTOMIZAR: nome, descrição, recursos e URL do botão --> | |
| <div class="plat-card fi fi-d1"> | |
| <div class="plat-hd"> | |
| <span class="plat-badge bg-starter">Para começar</span> | |
| <div class="plat-name-row"> | |
| <span class="plat-logo"><img src="" alt="Plataforma A"></span> | |
| <span class="plat-name">Plataforma A</span> | |
| </div> | |
| <p class="plat-desc">Ideal para quem está dando os primeiros passos e quer validar ideias com agilidade e sem fricção.</p> | |
| </div> | |
| <div class="plat-ft"> | |
| <ul class="ft-list"> | |
| <li class="ft-item"><span class="chk chk-y">✓</span> Testes A/B simples</li> | |
| <li class="ft-item"><span class="chk chk-y">✓</span> Dashboard de resultados</li> | |
| <li class="ft-item"><span class="chk chk-y">✓</span> Segmentação básica</li> | |
| <li class="ft-item"><span class="chk chk-y">✓</span> Integração rápida</li> | |
| <li class="ft-item"><span class="chk chk-y">✓</span> Relatórios exportáveis</li> | |
| <li class="ft-item"><span class="chk chk-n">—</span> Testes multivariados</li> | |
| <li class="ft-item"><span class="chk chk-n">—</span> Segmentação avançada</li> | |
| <li class="ft-item"><span class="chk chk-n">—</span> Análise estatística avançada</li> | |
| </ul> | |
| <div class="ideal"> | |
| <div class="ideal-lbl">Ideal para</div> | |
| <p>Times iniciando em experimentação, projetos menores e quem quer aprender sem complexidade técnica.</p> | |
| </div> | |
| <!-- CUSTOMIZAR: substitua "#" pela URL real da Plataforma A --> | |
| <a href="#" class="btn btn-out btn-full">Acessar Plataforma A →</a> | |
| </div> | |
| </div> | |
| <!-- Plataforma 2 — Pro (destacada) --> | |
| <!-- CUSTOMIZAR: nome, descrição, recursos e URL do botão --> | |
| <div class="plat-card hot fi fi-d2"> | |
| <div class="plat-hd"> | |
| <span class="plat-badge bg-pro">Mais completa</span> | |
| <div class="plat-name-row"> | |
| <span class="plat-logo"><img src="" alt="Plataforma B"></span> | |
| <span class="plat-name">Plataforma B</span> | |
| </div> | |
| <p class="plat-desc">Para times com mais maturidade que precisam de controle, profundidade e escala nos experimentos.</p> | |
| </div> | |
| <div class="plat-ft"> | |
| <ul class="ft-list"> | |
| <li class="ft-item"><span class="chk chk-y">✓</span> Testes A/B avançados</li> | |
| <li class="ft-item"><span class="chk chk-y">✓</span> Dashboard completo</li> | |
| <li class="ft-item"><span class="chk chk-y">✓</span> Segmentação avançada</li> | |
| <li class="ft-item"><span class="chk chk-y">✓</span> Múltiplas integrações</li> | |
| <li class="ft-item"><span class="chk chk-y">✓</span> Testes multivariados</li> | |
| <li class="ft-item"><span class="chk chk-y">✓</span> Análise estatística avançada</li> | |
| <li class="ft-item"><span class="chk chk-y">✓</span> Feature flags</li> | |
| <li class="ft-item"><span class="chk chk-y">✓</span> Suporte dedicado</li> | |
| </ul> | |
| <div class="ideal"> | |
| <div class="ideal-lbl">Ideal para</div> | |
| <p>Times com cultura de experimentação consolidada, alta volumetria e necessidade de análises mais profundas.</p> | |
| </div> | |
| <!-- CUSTOMIZAR: substitua "#" pela URL real da Plataforma B --> | |
| <a href="#" class="btn btn-pri btn-full">Acessar Plataforma B →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ─── CTA Final ─────────────────────────────────────── --> | |
| <section id="cta-final"> | |
| <div class="wrap"> | |
| <div class="cta-in fi"> | |
| <h2>Pronto para o seu primeiro experimento?</h2> | |
| <p>Responda 3 perguntas rápidas e descubra qual plataforma faz mais sentido para o seu momento.</p> | |
| <div class="cta-btns"> | |
| <button class="btn btn-acc btn-lg" onclick="openDecideModal()">Descobrir minha plataforma →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ─── Footer ────────────────────────────────────────── --> | |
| <footer> | |
| <div class="wrap"> | |
| <div class="ft-in"> | |
| <p>© 2025 — Experimentação interna</p> | |
| <p>Construído para times que decidem com dados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- ─── Decision Modal ───────────────────────────────── --> | |
| <div class="dm-overlay" id="dm"> | |
| <div class="dm-box" style="position:relative"> | |
| <button class="dm-close" onclick="dmClose()">×</button> | |
| <div class="dm-progress"><div class="dm-prog-fill" id="dm-fill"></div></div> | |
| <div class="dm-body"> | |
| <!-- Pergunta --> | |
| <div class="dm-question-wrap" id="dm-qwrap"> | |
| <div class="dm-counter"> | |
| <div class="dm-steps" id="dm-dots"></div> | |
| <span class="dm-step-lbl" id="dm-lbl"></span> | |
| </div> | |
| <p class="dm-question" id="dm-q"></p> | |
| <div class="dm-select-wrap"> | |
| <select class="dm-select" id="dm-sel" onchange="dmOnSelect()"> | |
| <option value="">Selecione uma opção...</option> | |
| </select> | |
| </div> | |
| <div class="dm-nav"> | |
| <button class="dm-back" id="dm-back" onclick="dmBack()">← Voltar</button> | |
| <button class="btn btn-pri dm-next" id="dm-next" onclick="dmNext()" disabled>Próximo →</button> | |
| </div> | |
| </div> | |
| <!-- Loading --> | |
| <div class="dm-loading" id="dm-loading"> | |
| <div class="dm-spinner"></div> | |
| <div class="dm-loading-steps"> | |
| <div class="dm-lstep" id="dml-1"> | |
| <div class="dm-lstep-dot">1</div> | |
| Analisando suas respostas | |
| </div> | |
| <div class="dm-lstep" id="dml-2"> | |
| <div class="dm-lstep-dot">2</div> | |
| Comparando com os perfis de uso | |
| </div> | |
| <div class="dm-lstep" id="dml-3"> | |
| <div class="dm-lstep-dot">3</div> | |
| Preparando sua recomendação | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Resultado --> | |
| <div class="dm-result" id="dm-result"> | |
| <div class="dm-result-ico" id="dm-res-ico"></div> | |
| <div class="dm-result-tag">Recomendação para você</div> | |
| <h3 id="dm-res-name"></h3> | |
| <p id="dm-res-desc"></p> | |
| <div class="dm-reasons" id="dm-reasons"> | |
| <div class="dm-reasons-title">Por que essa recomendação?</div> | |
| <ul class="dm-reasons-list" id="dm-reasons-list"></ul> | |
| </div> | |
| <div class="dm-result-actions"> | |
| <a href="#" class="btn btn-pri" id="dm-res-cta">Acessar plataforma →</a> | |
| </div> | |
| <button class="dm-restart" onclick="dmRestart()">Refazer o quiz</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| /* Fade-in via IntersectionObserver */ | |
| const obs = new IntersectionObserver((entries) => { | |
| entries.forEach((e, i) => { | |
| if (e.isIntersecting) { | |
| setTimeout(() => e.target.classList.add('on'), i * 80); | |
| obs.unobserve(e.target); | |
| } | |
| }); | |
| }, { threshold: 0.12 }); | |
| document.querySelectorAll('.fi').forEach(el => obs.observe(el)); | |
| /* Active nav link on scroll */ | |
| const sections = document.querySelectorAll('section[id]'); | |
| const links = document.querySelectorAll('.nav-links a'); | |
| const highlight = () => { | |
| let cur = ''; | |
| sections.forEach(s => { | |
| if (window.scrollY >= s.offsetTop - 80) cur = s.id; | |
| }); | |
| links.forEach(a => { | |
| a.style.color = a.getAttribute('href') === `#${cur}` ? 'var(--p)' : ''; | |
| }); | |
| }; | |
| window.addEventListener('scroll', highlight, { passive: true }); | |
| /* ─── Decision Modal ──────────────────────────────── */ | |
| const DM_STEPS = [ | |
| { | |
| q: 'Qual é o momento atual do seu time com experimentação?', | |
| opts: [ | |
| { label: 'Nunca fizemos nenhum teste', a: 2, b: 0, lock: 'A', | |
| reason: 'Você está começando do zero — a Plataforma A tem a menor curva de aprendizado e setup em minutos' }, | |
| { label: 'Já fizemos alguns testes de forma isolada', a: 1, b: 1 }, | |
| { label: 'Temos uma cultura de experimentação ativa', a: 0, b: 2, | |
| reason: 'Seu time já experimenta com frequência e precisa de uma plataforma que acompanhe esse ritmo' }, | |
| ] | |
| }, | |
| { | |
| q: 'Quantas pessoas trabalham no seu time de produto?', | |
| opts: [ | |
| { label: '1 a 5 pessoas', a: 2, b: 0, | |
| reason: 'Times pequenos se beneficiam da agilidade e simplicidade da Plataforma A' }, | |
| { label: '6 a 20 pessoas', a: 1, b: 1 }, | |
| { label: 'Mais de 20 pessoas', a: 0, b: 2, | |
| reason: 'Times grandes precisam de colaboração, permissões e controle — pontos fortes da Plataforma B' }, | |
| ] | |
| }, | |
| { | |
| q: 'Qual é o volume mensal de usuários ativos do seu produto?', | |
| opts: [ | |
| { label: 'Menos de 10 mil usuários', a: 2, b: 0, | |
| reason: 'Com esse volume, a Plataforma A entrega tudo que você precisa sem complexidade desnecessária' }, | |
| { label: 'Entre 10 mil e 100 mil usuários', a: 1, b: 1 }, | |
| { label: 'Mais de 100 mil usuários', a: 0, b: 2, lock: 'B', | |
| reason: 'Com mais de 100 mil usuários, você precisa da escala e performance que só a Plataforma B oferece' }, | |
| ] | |
| }, | |
| { | |
| q: 'O que você mais precisa em uma plataforma agora?', | |
| opts: [ | |
| { label: 'Começar rápido com o mínimo de configuração', a: 2, b: 0, | |
| reason: 'A Plataforma A permite configurar e rodar experimentos em poucos minutos, sem dependência técnica' }, | |
| { label: 'Equilíbrio entre simplicidade e recursos', a: 1, b: 1 }, | |
| { label: 'Controle total e análises avançadas', a: 0, b: 2, | |
| reason: 'A Plataforma B oferece análise estatística avançada, segmentação granular e controle total do experimento' }, | |
| ] | |
| }, | |
| { | |
| q: 'Qual é o seu nível de familiaridade técnica com ferramentas de dados?', | |
| opts: [ | |
| { label: 'Iniciante — prefiro interfaces simples', a: 2, b: 0, | |
| reason: 'A interface da Plataforma A foi projetada para ser usada sem conhecimento técnico prévio' }, | |
| { label: 'Intermediário — consigo configurar integrações', a: 1, b: 1 }, | |
| { label: 'Avançado — trabalho com APIs e análise estatística', a: 0, b: 2, | |
| reason: 'Seu perfil técnico permite aproveitar ao máximo as APIs e integrações avançadas da Plataforma B' }, | |
| ] | |
| }, | |
| ]; | |
| /* CUSTOMIZAR: dados das plataformas para o resultado */ | |
| const DM_PLATFORMS = { | |
| A: { | |
| icon: '🚀', | |
| name: 'Plataforma A', | |
| desc: 'Com base nas suas respostas, você está no momento ideal para começar com uma ferramenta simples e rápida de configurar. A Plataforma A é perfeita para você.', | |
| url: '#', /* substituir pela URL real */ | |
| }, | |
| B: { | |
| icon: '🔬', | |
| name: 'Plataforma B', | |
| desc: 'Com base nas suas respostas, seu time está pronto para aproveitar o melhor de uma plataforma robusta. A Plataforma B vai atender ao seu nível de maturidade.', | |
| url: '#', /* substituir pela URL real */ | |
| }, | |
| }; | |
| let dmStep = 0; | |
| let dmAnswers = []; /* { idx, a, b, lock? } por passo */ | |
| let dmLocked = null; /* 'A' | 'B' | null — definido por respostas classificatórias */ | |
| function dmOpen() { | |
| dmStep = 0; | |
| dmAnswers = []; | |
| dmLocked = null; | |
| dmRender(); | |
| document.getElementById('dm').classList.add('open'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function dmClose() { | |
| document.getElementById('dm').classList.remove('open'); | |
| document.body.style.overflow = ''; | |
| } | |
| function dmRender() { | |
| const total = DM_STEPS.length; | |
| const s = DM_STEPS[dmStep]; | |
| /* progress fill */ | |
| document.getElementById('dm-fill').style.width = (dmStep / total * 100) + '%'; | |
| /* dots */ | |
| const dotsEl = document.getElementById('dm-dots'); | |
| dotsEl.innerHTML = DM_STEPS.map((_, i) => { | |
| const cls = i < dmStep ? 'done' : i === dmStep ? 'active' : ''; | |
| return `<div class="dm-dot ${cls}"></div>`; | |
| }).join(''); | |
| /* label */ | |
| document.getElementById('dm-lbl').textContent = `Passo ${dmStep + 1} de ${total}`; | |
| /* question */ | |
| document.getElementById('dm-q').textContent = s.q; | |
| /* select */ | |
| const sel = document.getElementById('dm-sel'); | |
| sel.innerHTML = '<option value="">Selecione uma opção...</option>' + | |
| s.opts.map((o, i) => `<option value="${i}">${o.label}</option>`).join(''); | |
| /* restore previous answer if navigating back */ | |
| if (dmAnswers[dmStep] !== undefined) { | |
| sel.value = dmAnswers[dmStep].idx; | |
| } | |
| /* back button */ | |
| document.getElementById('dm-back').style.visibility = dmStep > 0 ? 'visible' : 'hidden'; | |
| /* next button */ | |
| const next = document.getElementById('dm-next'); | |
| const hasAnswer = dmAnswers[dmStep] !== undefined; | |
| next.disabled = !hasAnswer; | |
| next.textContent = dmStep === total - 1 ? 'Ver resultado →' : 'Próximo →'; | |
| /* show question, hide result */ | |
| document.getElementById('dm-qwrap').classList.remove('hide'); | |
| document.getElementById('dm-result').classList.remove('show'); | |
| } | |
| function dmOnSelect() { | |
| const sel = document.getElementById('dm-sel'); | |
| const idx = parseInt(sel.value); | |
| if (isNaN(idx)) { | |
| dmAnswers[dmStep] = undefined; | |
| } else { | |
| const opt = DM_STEPS[dmStep].opts[idx]; | |
| dmAnswers[dmStep] = { idx, a: opt.a, b: opt.b, lock: opt.lock ?? null }; | |
| /* recalcula dmLocked varrendo todas as respostas dadas até agora */ | |
| dmLocked = null; | |
| dmAnswers.forEach(ans => { if (ans?.lock) dmLocked = ans.lock; }); | |
| } | |
| const next = document.getElementById('dm-next'); | |
| next.disabled = dmAnswers[dmStep] === undefined; | |
| } | |
| function dmNext() { | |
| if (dmAnswers[dmStep] === undefined) return; | |
| if (dmStep < DM_STEPS.length - 1) { | |
| dmStep++; | |
| dmRender(); | |
| } else { | |
| dmShowResult(); | |
| } | |
| } | |
| function dmBack() { | |
| if (dmStep > 0) { dmStep--; dmRender(); } | |
| } | |
| function dmShowResult() { | |
| /* tally scores */ | |
| let scoreA = 0, scoreB = 0; | |
| dmAnswers.forEach(ans => { if (ans) { scoreA += ans.a; scoreB += ans.b; } }); | |
| const winner = dmLocked ?? (scoreB > scoreA ? 'B' : 'A'); | |
| const plat = DM_PLATFORMS[winner]; | |
| /* hide question, show loading */ | |
| document.getElementById('dm-qwrap').classList.add('hide'); | |
| document.getElementById('dm-loading').classList.add('show'); | |
| document.getElementById('dm-fill').style.width = '85%'; | |
| /* animate steps sequentially */ | |
| const steps = ['dml-1', 'dml-2', 'dml-3']; | |
| const delays = [0, 700, 1400]; | |
| steps.forEach((id, i) => { | |
| setTimeout(() => { | |
| const el = document.getElementById(id); | |
| el.classList.add('on', 'active'); | |
| if (i > 0) { | |
| const prev = document.getElementById(steps[i - 1]); | |
| prev.classList.remove('active'); | |
| prev.classList.add('done'); | |
| prev.querySelector('.dm-lstep-dot').textContent = '✓'; | |
| } | |
| }, delays[i]); | |
| }); | |
| /* after last step, mark done and reveal result */ | |
| setTimeout(() => { | |
| const last = document.getElementById(steps[steps.length - 1]); | |
| last.classList.remove('active'); | |
| last.classList.add('done'); | |
| last.querySelector('.dm-lstep-dot').textContent = '✓'; | |
| }, 2100); | |
| setTimeout(() => { | |
| /* fill result UI */ | |
| document.getElementById('dm-res-ico').textContent = plat.icon; | |
| document.getElementById('dm-res-name').textContent = plat.name; | |
| document.getElementById('dm-res-desc').textContent = plat.desc; | |
| document.getElementById('dm-res-cta').href = plat.url; | |
| document.getElementById('dm-res-cta').textContent = `Acessar ${plat.name} →`; | |
| /* collect reasons from answers that pointed to the winner */ | |
| const reasons = dmAnswers | |
| .map((ans, i) => { | |
| if (!ans || !DM_STEPS[i]) return null; | |
| const opt = DM_STEPS[i].opts[ans.idx]; | |
| if (!opt?.reason) return null; | |
| const pointsToWinner = winner === 'A' ? opt.a > opt.b : opt.b > opt.a; | |
| const isLock = opt.lock === winner; | |
| return (pointsToWinner || isLock) ? opt.reason : null; | |
| }) | |
| .filter(Boolean); | |
| const reasonsList = document.getElementById('dm-reasons-list'); | |
| reasonsList.innerHTML = reasons.map(r => | |
| `<li class="dm-reason-item"><span class="dm-reason-check">✓</span>${r}</li>` | |
| ).join(''); | |
| document.getElementById('dm-reasons').style.display = reasons.length ? '' : 'none'; | |
| document.getElementById('dm-fill').style.width = '100%'; | |
| document.getElementById('dm-loading').classList.remove('show'); | |
| /* reset loading steps for next time */ | |
| steps.forEach(id => { | |
| const el = document.getElementById(id); | |
| el.classList.remove('on', 'active', 'done'); | |
| el.querySelector('.dm-lstep-dot').textContent = id.replace('dml-', ''); | |
| }); | |
| document.getElementById('dm-result').classList.add('show'); | |
| }, 2500); | |
| } | |
| function dmRestart() { | |
| dmStep = 0; | |
| dmAnswers = []; | |
| dmLocked = null; | |
| dmRender(); | |
| } | |
| /* expose open to buttons */ | |
| function openDecideModal() { dmOpen(); } | |
| /* close on overlay click or Escape */ | |
| document.getElementById('dm').addEventListener('click', e => { | |
| if (e.target === e.currentTarget) dmClose(); | |
| }); | |
| document.addEventListener('keydown', e => { if (e.key === 'Escape') dmClose(); }); | |
| /* ─── Docs dropdown ──────────────────────────────────── */ | |
| function toggleDropdown() { | |
| document.getElementById('docsDropdown').classList.toggle('open'); | |
| } | |
| document.addEventListener('click', e => { | |
| const dd = document.getElementById('docsDropdown'); | |
| if (!dd.contains(e.target)) dd.classList.remove('open'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment