1import{d as N,j as C}from"./vendor-react-CHlj1UOJ.js";import{D as X}from"./DeckPasswordGate-DiamogjW.js";import{d as W,D as Q}from"./deckCss-BVSK-U50.js";import{M as K}from"./motifs-BcOvyIEi.js";const e={bg:"#121110",card:"#282524",border:"#282524",borderSt:"#44403C",text:"#F1F0EE",textHi:"#fafaf9",textDim:"#A6A09D",textMute:"#78726E",lime:"#D0EC1A",limeDark:"#07401A",purple:"#A595FF",lbg:"#fafaf9",lborder:"#e5e3df",ltext:"#07401a",laccent:"#8caa25",lbody:"#6b6962",lmute:"#9a9890",amber:"#d97a14"},u=["#4EC9E8","#A595FF","#FFC116","#D0EC1A"],A="https://decoims.com/decocms/7a1c4c73-2274-4129-84f6-c4bb0a5ebcab/deco-logo.svg",s="@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=JetBrains+Mono:wght@400;500&display=swap');",B=` 2 * { margin:0; padding:0; box-sizing:border-box; } 3 body { 4 font-family:'Inter',-apple-system,system-ui,sans-serif; 5 width:100vw; height:100vh; overflow:hidden; 6 background:${e.bg}; color:${e.text}; 7 -webkit-font-smoothing:antialiased; 8 } 9 ::selection { background:${e.lime}; color:${e.limeDark}; } 10`,l=` 11 * { margin:0; padding:0; box-sizing:border-box; } 12 body { 13 font-family:'Inter',-apple-system,system-ui,sans-serif; 14 width:100vw; height:100vh; overflow:hidden; 15 background:${e.lbg}; color:${e.ltext}; 16 -webkit-font-smoothing:antialiased; 17 } 18 ::selection { background:${e.laccent}; color:#fff; } 19`,n=` 20 @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } 21 @keyframes fadeDown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} } 22 @keyframes fadeIn { from{opacity:0} to{opacity:1} } 23 @keyframes cardUp { to{opacity:1;transform:translateY(0)} } 24 @keyframes numPop { 0%{opacity:0;transform:scale(.7) translateY(6px)} 65%{opacity:1;transform:scale(1.06) translateY(0)} 100%{opacity:1;transform:scale(1) translateY(0)} } 25`,d=` 26 .eyebrow { font-family:'JetBrains Mono',monospace; font-size:13px; 27 letter-spacing:.22em; text-transform:uppercase; color:${e.laccent}; 28 margin-bottom:26px; opacity:0; animation:fadeDown .6s ease forwards .1s; } 29`,r=(a,o)=>` 30 body::before { content:""; position:absolute; width:680px; height:680px; border-radius:50%; 31 background:${a}; filter:blur(280px); opacity:0.06; ${o} pointer-events:none; } 32`,D=(a,o,t,i,p)=>`<svg class="tile" style="left:${o}px;top:${t}px;color:${i};animation-delay:${p.toFixed(2)}s" viewBox="0 0 120 120" fill="currentColor"><path d="${K[a]}" fill-rule="evenodd" clip-rule="evenodd"/></svg>`,P=` 33 .tile { position:absolute; display:block; width:100px; height:100px; z-index:0; 34 opacity:0; animation:fadeIn .9s ease forwards; pointer-events:none; } 35`,c='<link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..400,0,0" rel="stylesheet">',F=` 36 .ms { font-family:'Material Symbols Sharp'; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 40; line-height:1; } 37`,m=F,$=["quatroPontas","tacoChines","arabela","flor"],Z=[1520,1620,1720,1820].flatMap((a,o)=>Array.from({length:12},(t,i)=>D($[(o*3+i)%$.length],a,-40+i*100,u[(o+i)%u.length],.25+o*.05+i*.03))).join(""),ee=`<!DOCTYPE html><html><head><style> 38${s} 39${l} 40${n} 41${P} 42body { position:relative; background:#f9f6f2; } 43.toprow { position:absolute; left:86px; right:520px; top:64px; display:flex; justify-content:space-between; 44 font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:${e.laccent}; 45 opacity:0; animation:fadeDown .7s ease forwards .15s; } 46.headline { position:absolute; left:86px; top:158px; width:1400px; 47 font-family:'Inter',sans-serif; font-weight:400; 48 font-size:clamp(52px,5.4vw,92px); line-height:1.06; letter-spacing:-.04em; color:${e.ltext}; 49 opacity:0; animation:fadeUp .9s ease forwards .3s; } 50.headline .accent { color:${e.laccent}; } 51.sub { position:absolute; left:86px; top:600px; width:1180px; 52 font-family:'Inter',sans-serif; font-weight:400; 53 font-size:32px; line-height:1.3; letter-spacing:-.02em; color:#5d5751; 54 opacity:0; animation:fadeUp .8s ease forwards .6s; } 55.chips { position:absolute; left:86px; top:770px; display:flex; gap:14px; 56 opacity:0; animation:fadeUp .8s ease forwards .75s; } 57.chip { border:1px solid ${e.lborder}; background:#fff; border-radius:999px; padding:12px 24px; 58 font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.08em; text-transform:uppercase; 59 color:${e.ltext}; } 60.chip b { color:${e.laccent}; font-weight:500; } 61.deco-logo { position:absolute; left:82px; bottom:72px; width:230px; height:auto; 62 opacity:0; animation:fadeUp .8s ease forwards .85s; } 63.meta { position:absolute; left:360px; bottom:80px; 64 font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; 65 line-height:1.8; color:${e.lmute}; 66 opacity:0; animation:fadeUp .8s ease forwards .95s; } 67</style></head><body> 68 ${Z} 69 <div class="toprow"><span>Proposta comercial</span><span>Setembro 2026</span></div> 70 <h1 class="headline">Proposta<br>Ri Happy <span class="accent"><> deco</span></h1> 71 <p class="sub">As 11 customizações da loja já mapeadas, as três semanas até o go-live dia por dia, e a operação depois dele.</p> 72 <div class="chips"> 73 <span class="chip">a <b>migração</b></span> 74 <span class="chip">a <b>implementação</b></span> 75 <span class="chip">depois do <b>go-live</b></span> 76 </div> 77 <img class="deco-logo" src="${A}" alt="deco">
78 <div class="meta">Para Thiago del Giudice Machado<br>e o time digital da Ri Happy</div> 79</body></html>`,M=(a,o,t,i)=>` 80 <div class="card" style="animation-delay:${i}s"> 81 <div class="card-top"> 82 <div class="card-num">${a}</div> 83 <div class="card-name">${o}</div> 84 </div> 85 <ul>${t.map((p,f)=>`<li style="animation-delay:${(i+.35+f*.1).toFixed(2)}s">${p}</li>`).join("")}</ul> 86 </div>`,ae=`<!DOCTYPE html><html><head><style> 87${s} 88${B} 89${n} 90body { background:#1c1917; padding:64px 76px 64px; display:flex; flex-direction:column; overflow:hidden; } 91.headline { font-family:'Inter',sans-serif; font-weight:400; font-size:76px; line-height:1.05; letter-spacing:-0.05em; 92 color:${e.textHi}; margin-bottom:84px; opacity:0; animation:fadeUp .7s ease forwards .1s; } 93.headline span { color:${e.lime}; } 94.flow { flex:1; min-height:0; display:flex; align-items:stretch; gap:26px; } 95.card { flex:1; min-width:0; position:relative; display:flex; flex-direction:column; 96 background:${e.card}; border:1px solid ${e.borderSt}; border-radius:20px; padding:46px 42px; 97 opacity:0; transform:translateY(26px); animation:cardUp .7s cubic-bezier(.16,1,.3,1) forwards; 98 transition:transform .45s cubic-bezier(.34,1.4,.64,1), border-color .35s ease, box-shadow .4s ease; } 99.card:hover { transform:translateY(-10px); border-color:rgba(208,236,26,.42); 100 box-shadow:0 28px 60px rgba(0,0,0,.42); } 101@keyframes cardUp { to { opacity:1; transform:translateY(0); } } 102.card-top { display:flex; flex-direction:column; gap:10px; 103 padding-bottom:28px; border-bottom:1px solid ${e.borderSt}; } 104.card-num { font-family:'Inter',sans-serif; font-weight:600; font-size:88px; line-height:.9; 105 letter-spacing:-.04em; color:${e.lime}; } 106.card-name { font-family:'Inter',sans-serif; font-weight:500; font-size:34px; line-height:1.1; 107 letter-spacing:-.025em; color:${e.textHi}; } 108.card ul { list-style:none; margin-top:44px; } 109.card li { padding:22px 0; 110 font-size:26px; font-weight:400; line-height:1.35; color:#e8e6e2; 111 border-bottom:1px solid ${e.borderSt}; 112 opacity:0; transform:translateY(12px); animation:liUp .55s ease forwards; } 113.card li:first-child { padding-top:0; } 114.card li:last-child { border-bottom:none; } 115@keyframes liUp { to { opacity:1; transform:translateY(0); } } 116</style></head><body> 117<h1 class="headline">O que vamos <span>ver.</span></h1> 118<div class="flow"> 119 ${M("01","A migração",["As 11 customizações da loja, com status","O que encontramos e como resolvemos","Paridade, segurança e go-live respondidos"],.18)} 120 ${M("02","A implementação",["As duas semanas em agenda, dia por dia","O go-live de 1% a 100% em um dia","O time e os rituais"],.3)} 121 ${M("03","Depois do go-live",["Os agentes que operam a loja","Seis agências em um contrato","A conta até dezembro"],.42)} 122</div> 123</body></html>`,oe=[["quatroPontas",1420,0],["tacoChines",1520,0],["arabela",1620,0],["flor",1720,0],["quatroPontas",1820,0],["tacoChines",1620,100],["arabela",1720,100],["flor",1820,100],["quatroPontas",1820,200],["tacoChines",0,980],["arabela",100,980],["flor",200,980],["quatroPontas",300,980],["tacoChines",400,980],["arabela",100,880]],te=oe.map(([a,o,t],i)=>D(a,o,t,u[(Math.round(o/100)+Math.round(t/100))%u.length],.25+i*.04)).join(""),U=(a,o,t,i)=>{const f=["01 · A migração","02 · A implementação","03 · Depois do go-live"].map((S,j)=>`<span class="step${j+1===a?" active":""}">${S}</span>`).join('<span class="step-arrow">â</span>');return`<!DOCTYPE html><html><head><style> 124${s} 125${B} 126${n} 127${P} 128body { display:flex; flex-direction:column; justify-content:center; padding:80px 112px; position:relative; overflow:hidden; } 129${i} 130.header { position:relative; z-index:1; max-width:1600px; } 131.steps { display:flex; gap:16px; align-items:center; margin-bottom:44px; flex-wrap:wrap; 132 opacity:0; animation:fadeDown .6s ease forwards .1s; } 133.step { font-family:'JetBrains Mono',monospace; font-size:clamp(12px,.92vw,15px); letter-spacing:.13em; text-transform:uppercase; 134 padding:11px 19px; border:1px solid ${e.border}; border-radius:999px; color:${e.textMute}; white-space:nowrap; } 135.step.active { color:${e.lime}; border-color:${e.lime}; background:rgba(208,236,26,0.10); } 136.step-arrow { color:${e.borderSt}; font-size:18px; line-height:1; } 137.spine { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(60px,6vw,98px); line-height:1.02; 138 letter-spacing:-.05em; color:${e.textHi}; max-width:1600px; margin-bottom:32px; 139 opacity:0; animation:fadeUp .7s ease forwards .2s; } 140.spine .accent { color:${e.lime}; } 141.sub { font-size:clamp(20px,1.6vw,30px); font-weight:300; color:${e.textDim}; line-height:1.45; max-width:1400px; 142 opacity:0; animation:fadeUp .6s ease forwards .45s; } 143</style></head><body> 144${te} 145<div class="header"> 146 <div class="steps">${f}</div> 147 <h2 class="spine">${o}</h2> 148 ${t?`<p class="sub">${t}</p>`:""} 149</div> 150</body></html>`},ie=U(1,'Do VTEX IO para <span class="accent">FastStore v4</span>,<br>em três semanas.',"O que migra, o que fica exatamente onde está, e o critério de aceite que a gente assina embaixo.",r(e.lime,"top:-220px; right:-160px;")),se=U(2,'Três semanas,<br><span class="accent">dia por dia.</span>',"O que a gente entrega em cada dia, o que precisamos de vocês, e quando o tráfego começa a virar.",r(e.lime,"top:-220px; left:-160px;")),ne=U(3,'E depois do go-live,<br><span class="accent">quem opera a loja.</span>',"Os agentes, o perÃmetro do que a deco assume no dia a dia, e como a conta fica até dezembro.",r(e.purple,"bottom:-220px; left:-160px;")),O=[{label:"Monitoring",mode:"agent",agentName:"Agent de Monitoramento",icon:"monitoring"},{label:"Card",mode:"deco"},{label:"Spec",mode:"agent",agentName:"Agent de Specs",icon:"description"},{label:"Design",mode:"agent",agentName:"Agent de Design System",icon:"palette"},{label:"Aprovação humana",mode:"deco"},{label:"Código",mode:"agent",agentName:"Agent Developer",icon:"code"},{label:"Code review",mode:"agent",agentName:"Agent Code Reviewer",icon:"rate_review"},{label:"QA",mode:"agent",agentName:"Agent de QA",icon:"task_alt"},{label:"Merge/Deploy",mode:"deco"}
150],E=(a,o,t,i)=>a==="agent"?` 151 <div class="fcell agent" style="animation-delay:${i}s"> 152 <span class="icon-badge agent-badge"><span class="ms">${t}</span></span> 153 <span class="flabel">${o}</span> 154 </div>`:a==="deco"?` 155 <div class="fcell deco" style="animation-delay:${i}s"> 156 <img class="deco-mark" src="${A}" alt="deco"> 157 <span class="flabel">Eng. sênior deco</span> 158 </div>`:` 159 <div class="fcell human" style="animation-delay:${i}s"> 160 <span class="icon-badge"><span class="ms">person</span></span> 161 </div>`,re=`<!DOCTYPE html><html><head> 162${c} 163<style> 164${s} 165${l} 166${n} 167${d} 168${m} 169body { display:flex; flex-direction:column; padding:56px 88px 46px; position:relative; overflow:hidden; } 170${r(e.laccent,"bottom:-220px; left:-160px;")} 171.header { position:relative; z-index:1; margin-bottom:30px; } 172h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(50px,4.8vw,70px); line-height:1.08; 173 letter-spacing:-.05em; color:${e.ltext}; max-width:1600px; 174 opacity:0; animation:fadeUp .7s ease forwards .15s; } 175h1.head .accent { color:${e.laccent}; } 176.kgrid { flex:1; min-height:0; position:relative; z-index:1; margin-top:26px; 177 display:grid; grid-template-columns:220px repeat(9,1fr); grid-template-rows:auto 1fr 1fr; gap:10px; } 178.colhead { font-family:'Inter',sans-serif; font-size:21px; font-weight:500; letter-spacing:-.01em; color:${e.ltext}; 179 text-align:center; display:flex; align-items:center; justify-content:center; line-height:1.2; padding:0 4px; } 180.rowlabel { display:flex; align-items:center; font-size:26px; font-weight:600; color:${e.ltext}; line-height:1.25; } 181.rowlabel .accent { color:${e.laccent}; } 182.fcell { border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; 183 margin:0; padding:26px 10px; background:#fff; border:1px solid ${e.lborder}; 184 opacity:0; transform:translateY(10px); animation:cardUp .5s cubic-bezier(.16,1,.3,1) forwards; } 185.icon-badge { width:76px; height:76px; border-radius:22px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } 186.icon-badge .ms { font-size:38px; } 187.icon-badge.agent-badge { background:color-mix(in srgb, ${e.purple} 16%, transparent); color:${e.purple}; } 188.fcell .flabel { font-family:'Inter',sans-serif; font-size:16.5px; font-weight:600; letter-spacing:-.01em; 189 text-align:center; line-height:1.3; min-height:2.6em; display:flex; align-items:center; justify-content:center; } 190.fcell.human { background:${e.lbg}; } 191.fcell.human .icon-badge { background:${e.lborder}; width:64px; height:64px; } 192.fcell.human .icon-badge .ms { color:${e.lmute}; font-size:32px; } 193.fcell.deco { background:${e.lime}; border-color:${e.lime}; } 194.fcell.deco .deco-mark { width:64px; height:auto; } 195.fcell.deco .flabel { color:${e.limeDark}; } 196.fcell.agent .flabel { color:${e.ltext}; } 197</style></head><body> 198<div class="header"> 199 <p class="eyebrow">3.2 · Depois do go-live · o processo, ponta a ponta</p> 200 <h1 class="head">Mesmo fluxo. <span class="accent">Menos fila.</span></h1> 201</div> 202<div class="kgrid"> 203 <div></div> 204 ${O.map(a=>`<div class="colhead">${a.label}</div>`).join("")} 205 <div class="rowlabel">Fluxo da Operação Hoje</div> 206 ${O.map((a,o)=>E("human",void 0,void 0,.1+o*.03)).join("")} 207 <div class="rowlabel"><span>Fluxo <span class="accent">8x</span> Mais Eficiente com AI</span></div> 208 ${O.map((a,o)=>E(a.mode,a.agentName,a.icon,.45+o*.03)).join("")} 209</div> 210</body></html>`,le=`<div class="viz viz-prior"> 211 <span class="prow r1"></span> 212 <span class="prow r2"></span> 213 <span class="prow r3"></span> 214 <span class="pticket"></span> 215</div>`,pe=`<div class="viz viz-design"> 216 <span class="dblock b1"></span> 217 <span class="dblock b2"></span> 218 <span class="dblock b3"></span> 219 <span class="dsel"></span> 220</div>`,de=`<div class="viz viz-code"> 221 <span class="cline l1"></span> 222 <span class="cline l2"></span> 223 <span class="cline l3"></span> 224 <span class="ccursor"></span> 225</div>`,ce=`<div class="viz viz-qa"> 226 ${Array.from({length:3},(a,o)=>'<div class="qrow"><span class="qbox"></span><span class="qline"></span></div>').join("")} 227</div>`,me=`<div class="viz viz-review"> 228 <span class="rline l1"></span> 229 <span class="rline l2"></span> 230 <span class="rline l3"></span> 231 <span class="rscan"></span> 232 <span class="rcheck"></span> 233</div>`,fe=`<div class="viz viz-observ"> 234 <span class="span s1"></span> 235 <span class="span s2"></span> 236 <span class="span s3"></span> 237 <span class="span s4"></span> 238</div>`,xe=`<div class="viz viz-monitor"> 239 <svg viewBox="0 0 180 62"> 240 <line class="mthresh" x1="2" y1="18" x2="178" y2="18"></line> 241 <polyline class="mline" pathLength="100" 242 points="2,48 22,44 42,50 62,42 82,46 96,10 110,48 130,45 150,49 178,44"></polyline> 243 <circle class="mping" cx="96" cy="10" r="4"></circle> 244 <circle class="mdot" cx="96" cy="10" r="4"></circle> 245 </svg> 246</div>`,h=(a,o,t,i,p,f="")=>` 247 <div class="acard" style="animation-delay:${p}s"> 248 <span class="acard-top">
249 <span class="acard-num">${a}</span> 250 ${f?`<span class="acard-tag">${f}</span>`:""} 251 </span> 252 ${o} 253 <div class="acard-title">${t}</div> 254 <p class="acard-gain">${i}</p> 255 </div>`,ge=`<!DOCTYPE html><html><head> 256${c} 257<style> 258${s} 259${l} 260${n} 261${d} 262${m} 263body { display:flex; flex-direction:column; padding:60px 88px 56px; position:relative; overflow:hidden; } 264${r(e.laccent,"top:-240px; right:-160px;")} 265.header { position:relative; z-index:1; } 266h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(46px,4.4vw,64px); line-height:1.06; 267 letter-spacing:-.05em; color:${e.ltext}; max-width:1600px; 268 opacity:0; animation:fadeUp .7s ease forwards .15s; } 269h1.head .accent { color:${e.laccent}; } 270.sub { margin-top:14px; font-size:22px; font-weight:300; color:${e.lbody}; max-width:1400px; 271 opacity:0; animation:fadeUp .7s ease forwards .25s; } 272.stage { flex:1; min-height:0; position:relative; z-index:1; display:flex; flex-direction:column; 273 justify-content:center; gap:28px; } 274.row { display:flex; align-items:stretch; } 275.acard { flex:1; min-width:0; background:#fff; border:1px solid ${e.lborder}; border-radius:24px; 276 padding:36px 32px; display:flex; flex-direction:column; 277 opacity:0; transform:translateY(20px); animation:cardUp .6s cubic-bezier(.16,1,.3,1) forwards; } 278.chevron { width:40px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:${e.lborder}; } 279.chevron .ms { font-size:24px; } 280.acard-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; } 281.acard-num { font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.1em; color:${e.lmute}; } 282.acard-tag { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; 283 color:${e.laccent}; background:color-mix(in srgb, ${e.laccent} 14%, transparent); 284 padding:4px 8px; border-radius:5px; } 285.acard-title { font-size:21px; font-weight:500; color:${e.ltext}; letter-spacing:-.02em; line-height:1.3; } 286.acard-gain { margin-top:12px; padding-top:12px; border-top:1px solid ${e.lborder}; 287 font-size:13.5px; font-weight:600; color:${e.laccent}; line-height:1.4; } 288 289.viz { position:relative; height:92px; margin-bottom:22px; display:flex; align-items:center; justify-content:center; overflow:hidden; } 290 291/* 01 · priorização â três filas por prioridade, um ticket sobe até a do topo */ 292.viz-prior { flex-direction:column; justify-content:center; align-items:flex-start; gap:10px; width:100%; } 293.prow { height:11px; border-radius:4px; background:color-mix(in srgb, ${e.laccent} 14%, transparent); 294 border:1px solid color-mix(in srgb, ${e.laccent} 32%, transparent); } 295.prow.r1 { width:82%; animation:rowPulse 3.2s ease-in-out infinite; } 296.prow.r2 { width:58%; } 297.prow.r3 { width:36%; } 298@keyframes rowPulse { 0%,64%,100%{background:color-mix(in srgb, ${e.laccent} 14%, transparent)} 299 72%,88%{background:color-mix(in srgb, ${e.laccent} 52%, transparent)} } 300.pticket { position:absolute; left:3px; width:16px; height:11px; border-radius:4px; background:${e.laccent}; 301 animation:ticketRise 3.2s cubic-bezier(.4,0,.2,1) infinite; } 302@keyframes ticketRise { 303 0% { top:61.5px; opacity:0; } 304 7% { top:61.5px; opacity:1; } 305 32% { top:61.5px; opacity:1; } 306 46%,56% { top:40.5px; opacity:1; } 307 70%,90% { top:19.5px; opacity:1; } 308 97%,100% { top:19.5px; opacity:0; } 309} 310 311/* 02 · design â uma seleção percorre os blocos da UI, mantendo o padrão */ 312.viz-design { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; } 313.dblock { background:color-mix(in srgb, ${e.laccent} 12%, transparent); border:1px solid color-mix(in srgb, ${e.laccent} 30%, transparent); } 314.dblock.b1 { width:34px; height:34px; border-radius:50%; } 315.dblock.b2 { width:64px; height:34px; border-radius:8px; } 316.dblock.b3 { width:44px; height:34px; border-radius:8px; } 317.dsel { position:absolute; border:2px solid ${e.laccent}; border-radius:50%; 318 animation:selMove 3.6s cubic-bezier(.66,0,.28,1) infinite; } 319@keyframes selMove { 320 0%,26% { left:calc(50% - 81px); width:34px; height:34px; border-radius:50%; } 321 34%,60% { left:calc(50% - 37px); width:64px; height:34px; border-radius:8px; } 322 68%,92% { left:calc(50% + 37px); width:44px; height:34px; border-radius:8px; }
323 100% { left:calc(50% - 81px); width:34px; height:34px; border-radius:50%; } 324} 325 326/* 03 · implementação â linhas de código se digitando, com cursor piscando */ 327.viz-code { flex-direction:column; justify-content:center; align-items:flex-start; gap:11px; width:100%; } 328.cline { height:9px; border-radius:3px; background:color-mix(in srgb, ${e.laccent} 22%, transparent); width:0; } 329.cline.l1 { max-width:72%; animation:typeLine 3s ease-in-out infinite; animation-delay:0s; } 330.cline.l2 { max-width:94%; animation:typeLine 3s ease-in-out infinite; animation-delay:.5s; } 331.cline.l3 { max-width:48%; animation:typeLine 3s ease-in-out infinite; animation-delay:1s; } 332@keyframes typeLine { 0%,4%{width:0} 34%,80%{width:100%} 94%,100%{width:0} } 333.ccursor { position:absolute; left:0; top:61.5px; width:2.5px; height:9px; background:${e.laccent}; 334 animation:cursorBlink .9s step-end infinite, cursorTrail 3s ease-in-out 1s infinite; } 335@keyframes cursorBlink { 0%,55%{opacity:1} 56%,100%{opacity:0} } 336@keyframes cursorTrail { 0%,4%{left:0} 34%,80%{left:48%} 94%,100%{left:0} } 337 338/* 04 · QA â checklist marcando os itens em sequência, depois reinicia */ 339.viz-qa { flex-direction:column; justify-content:center; align-items:stretch; gap:11px; width:100%; } 340.qrow { display:flex; align-items:center; gap:10px; } 341.qbox { position:relative; width:16px; height:16px; border-radius:4px; flex-shrink:0; 342 border:1.5px solid color-mix(in srgb, ${e.laccent} 45%, transparent); } 343.qbox::after { content:""; position:absolute; left:2px; top:5px; width:9px; height:5px; 344 border-left:2px solid ${e.laccent}; border-bottom:2px solid ${e.laccent}; transform-origin:center; 345 animation:checkPulse 3.6s ease-in-out infinite; } 346.qline { flex:1; height:8px; border-radius:3px; background:color-mix(in srgb, ${e.laccent} 12%, transparent); } 347.viz-qa .qrow:nth-child(1) .qbox::after { animation-delay:0s; } 348.viz-qa .qrow:nth-child(2) .qbox::after { animation-delay:.34s; } 349.viz-qa .qrow:nth-child(3) .qbox::after { animation-delay:.68s; } 350.qbox { transition:border-color .3s ease; } 351@keyframes checkPulse { 352 0%,6% { opacity:0; transform:rotate(-45deg) scale(.3); } 353 16% { opacity:1; transform:rotate(-45deg) scale(1.18); } 354 22%,78% { opacity:1; transform:rotate(-45deg) scale(1); } 355 90%,100%{ opacity:0; transform:rotate(-45deg) scale(.3); } 356} 357 358/* 05 · code review â uma faixa de leitura desce sobre as linhas, termina num check */ 359.viz-review { flex-direction:column; justify-content:center; align-items:flex-start; gap:11px; width:100%; position:relative; } 360.rline { height:9px; border-radius:3px; background:color-mix(in srgb, ${e.laccent} 22%, transparent); } 361.rline.l1 { width:78%; } .rline.l2 { width:92%; } .rline.l3 { width:60%; } 362.rscan { position:absolute; left:0; right:22px; top:-4px; height:13px; border-radius:4px; 363 background:color-mix(in srgb, ${e.laccent} 34%, transparent); opacity:0; 364 animation:scanDown 3.4s ease-in-out infinite; } 365@keyframes scanDown { 366 0% { top:12px; opacity:0; } 367 7% { top:19.5px; opacity:1; } 368 24%,32% { top:19.5px; opacity:1; } 369 46%,54% { top:39.5px; opacity:1; } 370 68%,86% { top:59.5px; opacity:1; } 371 94%,100% { top:59.5px; opacity:0; } 372} 373.rcheck { position:absolute; right:0; top:58.5px; width:15px; height:15px; border-radius:50%; 374 border:1.5px solid ${e.laccent}; opacity:0; transform-origin:center; 375 animation:checkAppear 3.4s cubic-bezier(.34,1.4,.64,1) infinite; } 376.rcheck::after { content:""; position:absolute; left:3.5px; top:5px; width:7px; height:4px; 377 border-left:1.5px solid ${e.laccent}; border-bottom:1.5px solid ${e.laccent}; transform:rotate(-45deg); } 378@keyframes checkAppear { 379 0%,74% { opacity:0; transform:scale(.4); } 380 84% { opacity:1; transform:scale(1.15); } 381 88%,94% { opacity:1; transform:scale(1); } 382 100% { opacity:0; transform:scale(1); } 383} 384 385/* 06 · observabilidade â waterfall de spans, como um trace distribuÃdo */ 386.viz-observ { flex-direction:column; justify-content:center; align-items:flex-start; gap:9px; width:100%; } 387.span { height:10px; border-radius:3px; background:color-mix(in srgb, ${e.laccent} 34%, transparent); } 388.span.s1 { width:86%; margin-left:0; opacity:.95; } 389.span.s2 { width:58%; margin-left:12%; opacity:.8; } 390.span.s3 { width:40%; margin-left:26%; opacity:.65; } 391.span.s4 { width:24%; margin-left:38%; opacity:.5; } 392 393/* 07 · monitoramento â série temporal se desenhando; o pico cruza o limite */ 394.viz-monitor { justify-content:center; width:100%; } 395.viz-monitor svg { width:100%; height:100%; overflow:visible; } 396.mthresh { stroke:color-mix(in srgb, ${e.laccent} 40%, transparent); stroke-width:1.5; stroke-dasharray:4 4; } 397.mline { fill:none; stroke:${e.laccent}; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; 398 stroke-dasharray:100; stroke-dashoffset:100; animation:traceDraw 3.4s ease-in-out infinite; } 399@keyframes traceDraw { 0%,4%{stroke-dashoffset:100} 52%,82%{stroke-dashoffset:0} 96%,100%{stroke-dashoffset:100} } 400.mdot { fill:${e.laccent};
400 opacity:0; animation:alertPing 3.4s ease-in-out infinite; } 401.mping { fill:none; stroke:${e.laccent}; stroke-width:1.5; opacity:0; 402 transform-box:fill-box; transform-origin:center; animation:alertRing 3.4s ease-in-out infinite; } 403@keyframes alertPing { 0%,28%{opacity:0} 34%,86%{opacity:1} 95%,100%{opacity:0} } 404@keyframes alertRing { 405 0%,29% { opacity:0; transform:scale(.6); } 406 38% { opacity:.8; transform:scale(1); } 407 62%,100% { opacity:0; transform:scale(2.6); } 408} 409</style></head><body> 410<div class="header"> 411 <p class="eyebrow">3.1 · Depois do go-live · o time de agentes</p> 412 <h1 class="head">Os agentes que <span class="accent">operam a sua loja.</span></h1> 413</div> 414<div class="stage"> 415 <div class="row"> 416 ${h("01",xe,"Agent de Monitoramento","400 checks contÃnuos: performance, qualidade dos dados, SEO e mais.",.15,"24/7")} 417 <div class="chevron"><span class="ms">chevron_right</span></div> 418 ${h("02",le,"Agent de Priorização","Refinamento que levava dias de reunião sai em minutos.",.22)} 419 <div class="chevron"><span class="ms">chevron_right</span></div> 420 ${h("03",pe,"Agent de Design System","Um protótipo em alta fidelidade que levava dias de handoff sai em minutos.",.29)} 421 <div class="chevron"><span class="ms">chevron_right</span></div> 422 ${h("04",de,"Agent Developer","Uma feature que levava uma sprint sai em horas.",.36)} 423 </div> 424 <div class="row"> 425 ${h("05",me,"Agent Code Reviewer","Code review que levava um dia de fila acontece em minutos.",.43)} 426 <div class="chevron"><span class="ms">chevron_right</span></div> 427 ${h("06",ce,"Agent de QA","Um ciclo de QA que levava dias roda em minutos.",.5)} 428 <div class="chevron"><span class="ms">chevron_right</span></div> 429 ${h("07",fe,"Agent de Observabilidade","Rastreia código, filas e banco de dados por dentro da operação.",.57,"24/7")} 430 </div> 431</div> 432</body></html>`,he=`<!DOCTYPE html><html><head> 433<link rel="preconnect" href="https://fonts.googleapis.com"> 434<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..400,0,0" rel="stylesheet"> 435<style> 436${s} 437${l} 438${n} 439${d} 440body { display:flex; flex-direction:column; padding:58px 88px 48px; position:relative; overflow:hidden; } 441${r(e.laccent,"bottom:-220px; left:-160px;")} 442.ms { font-family:'Material Symbols Sharp'; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 40; line-height:1; } 443.header { position:relative; z-index:1; margin-bottom:30px; } 444h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(50px,4.8vw,72px); line-height:1.05; 445 letter-spacing:-0.05em; color:${e.ltext}; 446 opacity:0; animation:fadeUp .7s ease forwards .15s; } 447h1.head .accent { color:${e.laccent}; } 448.stage { flex:1; min-height:0; position:relative; z-index:1; display:flex; flex-direction:column; gap:22px; 449 opacity:0; animation:fadeUp .65s cubic-bezier(.16,1,.3,1) forwards .35s; } 450.board { flex:1; min-height:0; background:#fff; border:1px solid ${e.lborder}; border-radius:22px; 451 box-shadow:0 26px 64px rgba(7,64,26,.08), 0 2px 6px rgba(7,64,26,.04); 452 display:grid; grid-template-columns:1fr 1fr; overflow:hidden; } 453.col { padding:38px 44px; display:flex; flex-direction:column; } 454.col.studio { border-left:1px solid ${e.lborder}; } 455.col-name { font-weight:600; font-size:27px; color:${e.ltext}; letter-spacing:-.02em; 456 padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid ${e.lborder}; } 457.feats { flex:1; display:flex; flex-direction:column; justify-content:flex-start; gap:30px; } 458.feat { display:flex; gap:22px; align-items:center; } 459.feat-ic { width:46px; height:46px; flex-shrink:0; border-radius:12px; 460 display:flex; align-items:center; justify-content:center; } 461.feat-ic .ms { font-size:25px; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 40; } 462.col:not(.studio) .feat-ic { background:${e.ltext}; } 463.col:not(.studio) .feat-ic .ms { color:${e.lime}; } 464.col.studio .feat-ic { background:${e.purple}; } 465.col.studio .feat-ic .ms { color:#231a52; } 466.feat-av { width:54px; height:54px; flex-shrink:0; border-radius:50%; 467 background:linear-gradient(150deg,#2a6b3a,${e.ltext}); border:2px solid ${e.lime}; 468 display:flex; align-items:center; justify-content:center; overflow:hidden; 469 box-shadow:0 4px 14px rgba(7,64,26,.2); } 470.feat-av img { width:100%; height:100%; object-fit:cover; } 471.feat-av .ini { font-family:'Inter',sans-serif; font-weight:600; font-size:24px; color:${e.lime}; letter-spacing:-.01em; } 472.feat-txt b { display:block; font-size:22px; font-weight:600; color:${e.ltext}; letter-spacing:-.015em; line-height:1.25; margin-bottom:4px; } 473.feat-txt span { font-size:22px; font-weight:300; color:${e.lbody}
473; line-height:1.35; } 474.cadence { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } 475.cad { background:${e.card}; border:1px solid ${e.borderSt}; border-radius:16px; padding:34px 30px 40px; 476 display:flex; flex-direction:column; } 477.cad-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; } 478.cad-ic { width:46px; height:46px; flex-shrink:0; border-radius:12px; background:${e.lime}; 479 display:flex; align-items:center; justify-content:center; } 480.cad-ic .ms { font-size:26px; color:${e.limeDark}; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 40; } 481.cad-w { font-family:'JetBrains Mono',monospace; font-size:16px; letter-spacing:.13em; 482 text-transform:uppercase; color:${e.lime}; } 483.cad-t { font-size:24px; font-weight:600; letter-spacing:-.015em; color:${e.textHi}; margin-bottom:9px; } 484.cad p { font-size:18.5px; font-weight:400; line-height:1.5; color:#c9c4be; } 485</style></head><body> 486<div class="header"> 487 <p class="eyebrow">2.5 · A implementação · o time e os rituais</p> 488 <h1 class="head">Quem está na mesa, <span class="accent">e o que precisamos de vocês.</span></h1> 489</div> 490<div class="stage"> 491 <div class="board"> 492 <div class="col"> 493 <div class="col-name">Quem a deco põe na mesa</div> 494 <div class="feats"> 495 <div class="feat"> 496 <span class="feat-ic"><span class="ms">support_agent</span></span> 497 <span class="feat-txt"><b>Account manager conduz a conta</b><span>ponto único para prioridade, prazo e escopo</span></span> 498 </div> 499 <div class="feat"> 500 <span class="feat-ic"><span class="ms">engineering</span></span> 501 <span class="feat-txt"><b>Engenheiro de referência</b><span>quem criou a FastStore está no time, com acesso direto ao produto da VTEX</span></span> 502 </div> 503 <div class="feat"> 504 <span class="feat-ic"><span class="ms">code</span></span> 505 <span class="feat-txt"><b>Dev fixo, mais squad sob demanda</b><span>a squad abre nas semanas de pico e fecha depois</span></span> 506 </div> 507 <div class="feat"> 508 <span class="feat-ic"><span class="ms">shield</span></span> 509 <span class="feat-txt"><b>Especialista de segurança</b><span>roda o pentest antes do go-live</span></span> 510 </div> 511 </div> 512 </div> 513 <div class="col studio"> 514 <div class="col-name">O que precisamos da Ri Happy</div> 515 <div class="feats"> 516 <div class="feat"> 517 <span class="feat-ic"><span class="ms">how_to_reg</span></span> 518 <span class="feat-txt"><b>Um responsável por aprovações</b><span>quem assina o aceite e dá o GO de cada degrau do go-live</span></span> 519 </div> 520 <div class="feat"> 521 <span class="feat-ic"><span class="ms">groups</span></span> 522 <span class="feat-txt"><b>Time de conteúdo e de negócio no treinamento</b><span>quinta 24/09, uma hora, com o site no ar</span></span> 523 </div> 524 <div class="feat"> 525 <span class="feat-ic"><span class="ms">schedule</span></span> 526 <span class="feat-txt"><b>30 min na daily, 1 hora na semana de homologação</b><span>e quem aprova cada ponto precisa estar na sessão daquele dia</span></span> 527 </div> 528 <div class="feat"> 529 <span class="feat-ic"><span class="ms">dns</span></span> 530 <span class="feat-txt"><b>O subdomÃnio de testes configurado</b><span>faststore.rihappy.com.br apontando para o ambiente novo</span></span> 531 </div> 532 </div> 533 </div> 534 </div> 535 <div class="cadence"> 536 <div class="cad"><div class="cad-head"><span class="cad-ic"><span class="ms">schedule</span></span><span class="cad-w">Todo dia</span></div><div class="cad-t">Daily de 30 minutos</div><p>durante as três semanas · na semana 1 serve só para tirar dúvidas · destrava o dia sem virar reunião</p></div> 537 <div class="cad"><div class="cad-head"><span class="cad-ic"><span class="ms">calendar_view_week</span></span><span class="cad-w">Toda semana</span></div><div class="cad-t">Weekly</div><p>prioridades da semana · o que foi entregue contra o combinado · métricas contra o baseline</p></div> 538 <div class="cad"><div class="cad-head"><span class="cad-ic"><span class="ms">chat</span></span><span class="cad-w">Sempre aberto</span></div><div class="cad-t">Grupo dedicado no WhatsApp</div><p>engenharia da deco e time da Ri Happy no mesmo canal · SLA de 1h útil · sem abrir ticket e sem esperar reunião</p></div> 539 </div> 540</div> 541</body></html>`,R=1744,w=464,_=140,H=22,k=672,z=60,G=280,I=w/2,be=[0,1,2].map(a=>a*(_+H)+_/2),ue=[.25,.75].map(a=>
541w*a),ve=k,Y=k+z,J=Y+G,ye=J+z,L=(a,o,t,i)=>{if(Math.abs(i-o)<1)return`M ${a} ${o} H ${t}`;const p=(t-a)/2;return`M ${a} ${o} C ${a+p} ${o}, ${t-p} ${i}, ${t} ${i}`},$e=[...be.map(a=>L(ve,a,Y,I)),...ue.map(a=>L(J,I,ye,a))],g="#d8d5ce",we=`<svg viewBox="0 0 140 152" preserveAspectRatio="xMidYMid slice"> 542 <rect x="12" y="24" width="152" height="132" rx="9" fill="#fff" stroke="${e.lborder}" stroke-width="2"/> 543 <path d="M12 42h152" stroke="${e.lborder}" stroke-width="2"/> 544 <circle cx="22" cy="33" r="2.4" fill="${g}"/> 545 <circle cx="31" cy="33" r="2.4" fill="${g}"/> 546 <circle cx="40" cy="33" r="2.4" fill="${g}"/> 547 <rect x="52" y="29" width="76" height="8" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/> 548 <rect x="100" y="54" width="60" height="44" rx="5" fill="${e.lime}"/> 549 <rect x="26" y="58" width="58" height="7" rx="3.5" fill="${g}"/> 550 <rect x="26" y="71" width="40" height="7" rx="3.5" fill="${g}"/> 551 <rect x="26" y="87" width="44" height="14" rx="7" fill="${e.lime}"/> 552 <rect x="26" y="112" width="34" height="34" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/> 553 <rect x="64" y="112" width="34" height="34" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/> 554 <rect x="102" y="112" width="34" height="34" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/> 555</svg>`,ke=`<svg viewBox="0 0 140 152" preserveAspectRatio="xMidYMid slice"> 556 <rect x="8" y="16" width="124" height="164" rx="16" fill="#fff" stroke="${e.lborder}" stroke-width="2"/> 557 <rect x="55" y="25" width="30" height="4.5" rx="2.25" fill="${g}"/> 558 <rect x="24" y="38" width="92" height="44" rx="6" fill="${e.lime}"/> 559 <rect x="24" y="90" width="42" height="26" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/> 560 <rect x="74" y="90" width="42" height="26" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/> 561 <rect x="24" y="122" width="42" height="26" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/> 562 <rect x="74" y="122" width="42" height="26" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/> 563</svg>`,ze=`<svg viewBox="0 0 140 152" preserveAspectRatio="xMidYMid slice"> 564 <path d="M26 22h72a16 16 0 0 1 16 16v22a16 16 0 0 1-16 16H44l-14 12 2-12h-6a16 16 0 0 1-16-16V38a16 16 0 0 1 16-16Z" 565 fill="#fff" stroke="${e.lborder}" stroke-width="2"/> 566 <rect x="26" y="38" width="66" height="7" rx="3.5" fill="${g}"/> 567 <rect x="26" y="51" width="42" height="7" rx="3.5" fill="${g}"/> 568 <path d="M60 82h84a16 16 0 0 1 16 16v22a16 16 0 0 1-16 16H78l-14 12 2-12h-6a16 16 0 0 1-16-16V98a16 16 0 0 1 16-16Z" 569 fill="${e.lime}"/> 570 <rect x="60" y="98" width="64" height="7" rx="3.5" fill="color-mix(in srgb, ${e.limeDark} 30%, transparent)"/> 571 <rect x="60" y="111" width="40" height="7" rx="3.5" fill="color-mix(in srgb, ${e.limeDark} 30%, transparent)"/> 572</svg>`,Ae=[{art:we,name:"Site",detail:"Loja web"},{art:ke,name:"App",detail:"iOS e Android"},{art:ze,name:"Concierge",detail:"Chat, e-mail, WhatsApp"}],Se=[{group:"Serviços que você terceiriza hoje",items:[{label:"Implementação",icon:"code"},{label:"CRO",icon:"ads_click"},{label:"SEO",icon:"search"},{label:"Integrações",icon:"hub"},{label:"UX",icon:"grid_view"},{label:"Performance",icon:"trending_up"}]},{group:"Software que vem junto",items:[{label:"CMS",icon:"description"},{label:"Studio",icon:"widgets"},{label:"Monitoramento",icon:"monitoring"},{label:"Agentes",icon:"smart_toy"}]}],je=(a,o)=>` 573 <div class="hchan" style="animation-delay:${o}s"> 574 <div class="hchan-art">${a.art}</div> 575 <div class="hchan-txt"><b>${a.name}</b><span>${a.detail}</span></div> 576 </div>`,qe=(a,o)=>` 577 <div class="hgroup" style="animation-delay:${o}s"> 578 <p class="hgroup-name">${a.group}</p> 579 <ul class="hgroup-pills">${a.items.map(t=>`<li><span class="pill-ic"><span class="ms">${t.icon}</span></span>${t.label}</li>`).join("")}</ul> 580 </div>`,Ce=`<!DOCTYPE html><html><head> 581${c} 582<style> 583${s} 584${l} 585${n} 586${d} 587${m} 588body { display:flex; flex-direction:column; padding:58px 88px 48px; position:relative; overflow:hidden; } 589${r(e.laccent,"top:-220px; right:-160px;")} 590.header { position:relative; z-index:1; margin-bottom:8px; text-align:center; } 591.eyebrow { text-align:center; } 592h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(42px,3.8vw,58px); line-height:1.12; 593 letter-spacing:-.05em; color:${e.ltext}; max-width:1500px; margin:0 auto; 594 opacity:0; animation:fadeUp .7s ease forwards .15s; } 595h1.head .accent { color:${e.laccent}; } 596.stage { flex:1; min-height:0; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; } 597.hub { width:${R}px; height:${w}px; position:relative; 598 display:grid; grid-template-columns:${k}px ${z}px ${G}px ${z}px ${k}px; } 599.traces { position:absolute; inset:0; width:100%; height:100%; z-index:0; } 600.trace { fill:none; stroke:rgba(7,64,26,.28); stroke-width:1.5; stroke-linecap:round; 601 stroke-dasharray:7 7; animation:traceFlow 1s linear infinite; } 602@keyframes traceFlow { to { stroke-dashoffset:-14; } } 603.chans { grid-column:1; position:relative; z-index:1; height:100%; display:flex; flex-direction:column; gap:${H}px; } 604.hchan { flex:0 0 ${_}px; display:flex; align-items:stretch; background:#fff; border:1px solid ${e.lborder}; 605 border-radius:18px; overflow:hidden; box-shadow:0 2px 10px rgba(7,64,26,.05); 606 opacity:0; transform:translateY(14px); animation:cardUp .55s cubic-bezier(.16,1,.3,1) forwards; } 607.hchan-art { width:128px; flex-shrink:0; position:relative; background:${e.lbg}; border-right:1px solid ${e.lborder}; } 608.hchan-art svg { position:absolute; inset:0; width:100%; height:100%; display:block; } 609.hchan-txt { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:0 24px; } 610.hchan-txt b { font-size:21px; font-weight:600; color:${e.ltext}; letter-spacing:-.015em; } 611.hchan-txt span { font-size:15.5px; font-weight:400; color:${e.lbody}
611; margin-top:4px; } 612.hub-mark { grid-column:3; position:relative; z-index:1; height:100%; 613 display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; 614 opacity:0; animation:fadeIn .7s ease forwards .62s; } 615.hub-mark::before { content:""; position:absolute; width:260px; height:260px; border-radius:50%; 616 background:radial-gradient(closest-side, color-mix(in srgb, ${e.lime} 32%, transparent), color-mix(in srgb, ${e.lime} 8%, transparent) 55%, transparent 75%); 617 z-index:-1; } 618.hub-mark img { width:150px; height:auto; } 619.hub-mark .hub-label { margin-top:16px; font-family:'JetBrains Mono',monospace; font-size:14px; 620 letter-spacing:.14em; text-transform:uppercase; color:${e.laccent}; font-weight:600; } 621.groups { grid-column:5; position:relative; z-index:1; height:100%; display:grid; grid-template-rows:1fr 1fr; } 622.hgroup { align-self:center; opacity:0; transform:translateY(14px); animation:cardUp .55s cubic-bezier(.16,1,.3,1) forwards; } 623.hgroup-name { font-size:17px; font-weight:400; color:${e.lbody}; margin-bottom:14px; } 624.hgroup-pills { list-style:none; display:flex; flex-wrap:wrap; gap:10px; } 625.hgroup-pills li { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid ${e.lborder}; 626 border-radius:999px; padding:6px 18px 6px 6px; font-size:16px; font-weight:500; color:${e.ltext}; 627 box-shadow:0 1px 2px rgba(7,64,26,.04); } 628.pill-ic { width:30px; height:30px; flex-shrink:0; border-radius:50%; background:color-mix(in srgb, ${e.laccent} 16%, transparent); 629 display:flex; align-items:center; justify-content:center; } 630.pill-ic .ms { font-size:16px; color:${e.laccent}; } 631</style></head><body> 632<div class="header"> 633 <p class="eyebrow">3.3 · Depois do go-live · o contrato</p> 634 <h1 class="head">SubstituÃmos 6 agências <span class="accent">em um contrato só.</span></h1> 635</div> 636<div class="stage"> 637 <div class="hub"> 638 <svg class="traces" viewBox="0 0 ${R} ${w}" preserveAspectRatio="none"> 639 ${$e.map(a=>`<path class="trace" d="${a}"/>`).join("")} 640 </svg> 641 <div class="chans">${Ae.map((a,o)=>je(a,.2+o*.1)).join("")}</div> 642 <div class="hub-mark"> 643 <img src="${A}" alt="deco"> 644 <div class="hub-label">Um contrato</div> 645 </div> 646 <div class="groups">${Se.map((a,o)=>qe(a,.7+o*.12)).join("")}</div> 647 </div> 648</div> 649</body></html>`,Me="3.4 · Depois do go-live · escopo",Oe='O perÃmetro da deco: mexemos no <span class="accent">código e<br>no conteúdo</span> da experiência digital.',_e=[{kind:"in",icon:"check_circle",head:"No foco · nossa rotina",sub:"O código e o conteúdo da experiência, no dia a dia.",items:[{b:"Web Dev",q:"bugs, performance, evolução, testes A/B, integrações, segurança · VTEX e o front em FastStore v4"},{b:"Dados",q:"tracking, tags, qualidade de dado"},{b:"SEO técnico & e-commerce",q:"indexação, schema, Core Web Vitals"},{b:"SEO on-page em lotes",q:"title/meta, copy, URLs, alt text · centenas por mês"},{b:"CRO",q:"análise de funil e comportamento (recorrente)"},{b:"Conteúdo on-page",q:"categoria, coleção, descrição de produto"},{b:"Landing pages de campanha",q:"o código, não o desenho"}]},{kind:"proj",icon:"rocket_launch",head:"Projetos · priorizamos juntos",sub:"Não é rotina. Entram no plano quando decidimos juntos que são alavanca.",items:[{b:"App nativo",q:"alavanca mobile, mesma stack do site"},{b:"PLP & operação na VTEX",q:"redesenho por alavanca, não rotina"},{b:"Personalização e recomendação",q:"vitrines dinâmicas, se priorizado como alavanca"},{b:"GEO",q:"conteúdo proprietário e estratégia vs concorrência"}]},{kind:"out",icon:"block",head:"Fora · não entra",sub:"Não é a experiência digital. Fica com a Ri Happy ou com um parceiro.",items:[{b:"MÃdia paga",q:"aquisição e gestão de campanhas"},{b:"Operação rotineira da VTEX",q:"subir coleção, promoção"},{b:"SEO local",q:"Google Business, mapas"},{b:"Link building / PR digital",q:"e assessoria de imprensa"},{b:"LogÃstica",q:"e loja fÃsica"},{b:"Atendimento",q:"devoluções, CRM"},{b:"Figma",q:"entregamos protótipo codado, não o desenho"}]}],b={in:{tile:e.ltext,glyph:e.lime,head:e.ltext,chip:"rgba(7,64,26,.08)"},proj:{tile:e.amber,glyph:"#fff",head:"#7a5410",chip:"rgba(217,122,20,.12)"},out:{tile:"#a8a29e",glyph:"#fff",head:"#57534e",chip:"rgba(120,114,110,.1)"}}
649,De='<link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..400,0,0" rel="stylesheet">',Pe=`<!DOCTYPE html><html><head> 650${De} 651<style> 652${s} 653${l} 654${n} 655${d} 656body { display:flex; flex-direction:column; padding:50px 80px 40px; position:relative; overflow:hidden; } 657${r(e.laccent,"bottom:-240px; right:-180px;")} 658.ms { font-family:'Material Symbols Sharp'; line-height:1; } 659.header { position:relative; z-index:1; margin-bottom:30px; } 660.eyebrow { margin-bottom:16px; } 661h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(40px,3.3vw,54px); line-height:1.06; 662 letter-spacing:-.045em; color:#1c1917; max-width:1640px; opacity:0; animation:fadeUp .7s ease forwards .15s; } 663h1.head .accent { color:${e.laccent}; } 664.sub { margin-top:12px; font-size:21px; font-weight:300; color:${e.lbody}; opacity:0; animation:fadeUp .7s ease forwards .25s; } 665.scope { flex:1; min-height:0; position:relative; z-index:1; display:grid; grid-template-columns:1.12fr 1fr 1fr; gap:20px; 666 opacity:0; animation:fadeUp .65s ease forwards .35s; } 667.sc { background:#fff; border:1px solid ${e.lborder}; border-radius:20px; padding:36px 34px 30px; 668 display:flex; flex-direction:column; box-shadow:0 2px 12px rgba(7,64,26,.05); 669 opacity:0; transform:translateY(16px); animation:cardUp .6s cubic-bezier(.16,1,.3,1) forwards; } 670.sc:nth-child(1){animation-delay:.4s}.sc:nth-child(2){animation-delay:.5s}.sc:nth-child(3){animation-delay:.6s} 671@keyframes cardUp { to { opacity:1; transform:translateY(0); } } 672.sc-head { display:flex; align-items:center; gap:15px; margin-bottom:40px; } 673.sc-ic { width:50px; height:50px; flex-shrink:0; border-radius:13px; display:flex; align-items:center; justify-content:center; } 674.sc-ic .ms { font-size:28px; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 40; } 675.sc-h { font-size:29px; font-weight:600; letter-spacing:-.02em; line-height:1.15; flex:1; } 676.sc ul { list-style:none; display:flex; flex-direction:column; } 677.sc li { padding:14px 0; border-bottom:1px solid #f1efec; } 678.sc li:first-child { padding-top:0; } .sc li:last-child { border-bottom:none; padding-bottom:0; } 679.sc li b { display:block; font-size:22px; font-weight:600; letter-spacing:-.01em; line-height:1.25; margin-bottom:5px; } 680.sc li span { display:block; font-size:19.5px; font-weight:400; line-height:1.42; color:#5c5a55; } 681${["in","proj","out"].map((a,o)=>`.sc:nth-child(${o+1}) .sc-ic { background:${b[a].tile}; } .sc:nth-child(${o+1}) .sc-ic .ms { color:${b[a].glyph}; } 682.sc:nth-child(${o+1}) .sc-h { color:${b[a].head}; } .sc:nth-child(${o+1}) .sc-n { background:${b[a].chip}; color:${b[a].head}; } 683.sc:nth-child(${o+1}) li b { color:${b[a].head}; }`).join(` 684`)} 685.sc:nth-child(3) li b { text-decoration:line-through; text-decoration-color:#cbc7c1; text-decoration-thickness:1.5px; } 686</style></head><body> 687<div class="header"><p class="eyebrow">${Me}</p><h1 class="head">${Oe}</h1></div> 688<div class="scope">${_e.map(a=>`<div class="sc ${a.kind}"> 689 <div class="sc-head"><span class="sc-ic"><span class="ms">${a.icon}</span></span><div class="sc-h">${a.head}</div></div> 690 <ul>${a.items.map(o=>`<li><b>${o.b}</b><span>${o.q}</span></li>`).join("")}</ul> 691 </div>`).join("")}</div> 692</body></html>`,x=(a,o)=>`<li><span class="si-ic"><span class="ms">${a}</span></span><span class="si-txt">${o}</span></li>`,Ue=a=>` 693.stage { flex:1; min-height:0; position:relative; z-index:1; display:flex; flex-direction:column; margin-top:30px; 694 opacity:0; animation:fadeUp .65s cubic-bezier(.16,1,.3,1) forwards .3s; } 695.board { flex:1; min-height:0; border:1px solid ${e.lborder}; border-radius:26px; overflow:hidden; 696 box-shadow:0 26px 64px rgba(7,64,26,.10), 0 2px 6px rgba(7,64,26,.04); 697 display:grid; grid-template-columns:.86fr 1.14fr; } 698.col { padding:46px 52px; display:flex; flex-direction:column; height:100%; } 699.col.price { background:${e.ltext}; } 700.col.setup { background:#fff; border-left:1px solid ${e.lborder}; } 701.col-name { flex:none; display:flex; align-items:center; gap:14px; font-weight:600; font-size:23px; letter-spacing:-.02em; 702 padding-bottom:18px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.14); } 703.col.price .col-name { color:#fff; } 704.col.price .col-name .ms { color:${e.lime}; font-size:30px; } 705.col.setup .col-name { color:${e.ltext}; border-bottom-color:${e.lborder}; } 706.col.setup .col-name .ms { color:${e.laccent}; font-size:30px; } 707.pblock { flex:1; display:flex; flex-direction:column; justify-content:center; gap:8px; 708 border-bottom:1px solid rgba(255,255,255,.14); } 709.pblock:last-of-type { border-bottom:none; } 710.pb-tag { font-family:'JetBrains Mono',monospace; font-size:14.5px; letter-spacing:.1em; 711 text-transform:uppercase; color:${e.lime}; } 712.pb-value { font-family:'Inter',sans-serif; font-weight:600; font-size:36px; letter-spacing:-.03em; color:#fff; 713 line-height:1.05; } 714.pb-value .unit { font-size:17px; font-weight:500; color:rgba(255,255,255,.6); margin-left:4px; } 715.pb-desc { font-size:18px; font-weight:400; color:rgba(255,255,255,.74); line-height:1.4; } 716.pb-desc b { color:${e.lime}; font-weight:600; } 717.col.setup ul { flex:1; list-style:none; display:grid; grid-template-columns:repeat(2,1fr); 718 grid-template-rows:repeat(${a},1fr); gap:14px; margin-top:14px; } 719.col.setup li { display:flex; align-items:center; gap:16px; padding:0 20px; 720 border-radius:16px; background:${e.lbg}; box-shadow:0 3px 10px rgba(7,64,26,.06); } 721.si-ic { width:48px; height:48px; flex-shrink:0; border-radius:12px; background:${e.laccent}; 722 display:flex; align-items:center; justify-content:center; } 723.si-ic .ms { font-size:25px; color:#fff; } 724.si-txt { font-size:18.5px; font-weight:400; color:#2b2926; line-height:1.32; letter-spacing:-.01em; } 725.si-txt b { font-weight:700; color:${e.ltext}; } 726.premise { flex-shrink:0; margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:14px; 727 letter-spacing:.05em; color:${e.lmute};
727 opacity:0; animation:fadeIn .7s ease forwards .9s; } 728.premise b { color:${e.ltext}; font-weight:600; } 729`,Te=` 730.hero { flex:1; display:flex; flex-direction:column; justify-content:center; gap:18px; } 731.hero-tag { font-family:'JetBrains Mono',monospace; font-size:15px; letter-spacing:.12em; 732 text-transform:uppercase; color:${e.lime}; } 733.hero-val { font-family:'Inter',sans-serif; font-weight:600; font-size:92px; line-height:1; 734 letter-spacing:-.045em; color:#fff; } 735.hero-val .unit { font-size:28px; font-weight:500; color:rgba(255,255,255,.6); margin-left:8px; 736 letter-spacing:-.01em; } 737.hero-cap { font-size:21px; font-weight:400; color:rgba(255,255,255,.78); line-height:1.45; max-width:520px; } 738.hero-cap b { color:${e.lime}; font-weight:600; } 739.hero.second { border-top:1px solid rgba(255,255,255,.14); padding-top:30px; margin-top:30px; } 740.hero.second .hero-val { font-size:62px; } 741`,Ee=` 742body { display:flex; flex-direction:column; padding:44px 60px; position:relative; overflow:hidden; } 743.eyebrow { position:relative; z-index:1; margin-bottom:10px; } 744h1.head { position:relative; z-index:1; font-family:'Inter',sans-serif; font-weight:400; 745 font-size:clamp(38px,3.4vw,50px); line-height:1.08; letter-spacing:-.045em; color:${e.ltext}; max-width:1520px; 746 opacity:0; animation:fadeUp .7s ease forwards .15s; } 747h1.head .accent { color:${e.laccent}; } 748`,Re=[{n:"02",title:"Catálogo, PLP e PDP",desc:"Os templates que carregam o tráfego migram primeiro, e cada um é <b>medido antes e depois</b> de entrar no ar.",icon:"storefront"},{n:"03",title:"Regionalização e as 204 lojas",desc:"Region V2 e o sortimento por CEP continuam com <b>exatamente o mesmo comportamento</b>. O que muda é o custo que isso cobra da performance.",icon:"pin_drop"},{n:"04",title:"Carrinho, checkout e pós-compra",desc:"O checkout VTEX segue padrão e a <b>Lynx recebe os pedidos do mesmo jeito</b>. Muda a camada de apresentação, não o back nem a separação.",icon:"shopping_cart"},{n:"05",title:"Tagueamento preservado",desc:"98% das transações pagas de vocês vêm do Google. <b>Nenhum evento se perde</b> na troca: GA4 e mÃdia continuam lendo a mesma coisa.",icon:"sell"},{n:"06",title:"Controle total de SEO",desc:"Title, meta, canonical, schema, robots, sitemap e redirect deixam de ser o que o framework permite e viram <b>configuração de vocês</b>.",icon:"tune"}],Ie=(a,o)=>` 749 <div class="layer" style="animation-delay:${(.62-o*.08).toFixed(2)}s"> 750 <span class="lnum">${a.n}</span> 751 <span class="lic"><span class="ms">${a.icon}</span></span> 752 <div class="ltxt"> 753 <div class="ltitle">${a.title}</div> 754 <p class="ldesc">${a.desc}</p> 755 </div> 756 </div>`,Le=`<!DOCTYPE html><html><head> 757${c} 758<style> 759${s} 760${l} 761${n} 762${d} 763${m} 764body { display:flex; flex-direction:column; padding:50px 88px 40px; position:relative; overflow:hidden; } 765${r(e.laccent,"top:-260px; right:-180px;")} 766.header { position:relative; z-index:1; } 767h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(44px,4.2vw,60px); line-height:1.06; 768 letter-spacing:-.05em; color:${e.ltext}; max-width:1600px; 769 opacity:0; animation:fadeUp .7s ease forwards .15s; } 770h1.head .accent { color:${e.laccent}; } 771 772.stage { flex:1; min-height:0; position:relative; z-index:1; display:flex; gap:30px; margin-top:22px; } 773 774.rail { flex-shrink:0; width:150px; display:flex; flex-direction:column; align-items:center; 775 padding:6px 0 10px; opacity:0; animation:fadeIn .6s ease forwards .3s; } 776.rail .cap { font-family:'Inter',sans-serif; font-size:18px; font-weight:600; letter-spacing:.01em; 777 color:${e.ltext}; text-align:center; line-height:1.35; } 778.rail .cap.top { color:${e.laccent}; } 779.rail .line { flex:1; width:2px; margin:14px 0; position:relative; 780 background:linear-gradient(180deg, ${e.laccent}, ${e.lborder}); } 781.rail .line::before { content:""; position:absolute; top:-1px; left:50%; margin-left:-5px; 782 border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid ${e.laccent}; } 783 784.stack { flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; } 785 786.store { flex:1.35; background:${e.ltext}; border-radius:16px; padding:20px 26px; display:flex; align-items:center; gap:20px; 787 box-shadow:0 24px 54px rgba(7,64,26,.20), 0 2px 6px rgba(7,64,26,.08); 788 opacity:0; transform:translateY(-14px); animation:cardUp .6s cubic-bezier(.16,1,.3,1) forwards .72s; } 789.chrome { flex-shrink:0; width:150px; height:56px; border-radius:9px; background:rgba(255,255,255,.09); 790 border:1px solid rgba(255,255,255,.17); padding:8px 10px; display:flex; flex-direction:column; gap:7px; } 791.chrome .dots { display:flex; gap:4px; } 792.chrome .dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); display:block; } 793.chrome .bar { height:8px; border-radius:3px; background:rgba(255,255,255,.14); } 794.chrome .bar.w { width:70%; } 795.store-txt { flex:1; min-width:0; } 796.store-n { font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.14em; 797 text-transform:uppercase; color:${e.lime}; } 798.store-t { margin-top:5px; font-size:27px; font-weight:600; color:#fff; letter-spacing:-.025em; line-height:1.15; } 799.store-d { margin-top:5px; font-size:16.5px; font-weight:400; color:rgba(255,255,255,.68); line-height:1.4; } 800.store-d b { color:${e.lime}; font-weight:600; } 801/* PÃlula com a URL do ambiente que já está no ar. */ 802.store-url { margin-top:11px; display:inline-flex; align-items:center; gap:11px; 803 background:rgba(208,236,26,.12); border:1px solid rgba(208,236,26,.34); border-radius:999px; 804 padding:8px 18px 8px 12px; } 805.store-url .ms { font-size:19px; color:${e.lime}; } 806.store-url .u { font-family:'JetBrains Mono',monospace; font-size:15px; letter-spacing:-.01em; color:#fff; } 807.store-url .tagl { font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.14em; 808 text-transform:uppercase; color:${e.lime}; background:rgba(208,236,26,.16); 809 padding:3px 10px; border-radius:999px; } 810 811.layer { flex:1; background:#fff; border:1px solid ${e.lborder}; border-radius:14px; padding:16px 26px; 812 display:flex; align-items:center; gap:20px; 813 box-shadow:0 10px 26px rgba(7,64,26,.04); 814 opacity:0; transform:translateY(12px); animation:cardUp .5s cubic-bezier(.16,1,.3,1) forwards; } 815.lnum { flex-shrink:0; width:32px; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; 816 color:${e.lmute}; letter-spacing:.02em; } 817.lic { flex-shrink:0; width:34px; height:34px; display:flex; align-items:center; justify-content:center; } 818.lic .ms { font-size:30px; color:${e.laccent}; } 819.ltxt { flex:1; min-width:0; display:flex; align-items:center; gap:20px; } 820.ltitle { flex-shrink:0; width:330px; font-size:21px; font-weight:600; color:${e.ltext}; 821 letter-spacing:-.02em; line-height:1.3; } 822.ldesc { flex:1; min-width:0; font-size:19px; font-weight:400; color:${e.lbody}
822; line-height:1.45; } 823.ldesc b { color:${e.ltext}; font-weight:600; } 824 825/* Faixa de premissa de desenho. Barra âmbar à esquerda porque é condição de 826 escopo, não entrega: separa visualmente do que a pilha promete. */ 827.scopenote { flex-shrink:0; margin-top:15px; display:flex; align-items:center; gap:20px; 828 background:#fff; border:1px solid ${e.lborder}; border-left:5px solid ${e.amber}; 829 border-radius:16px; padding:17px 28px; box-shadow:0 2px 10px rgba(7,64,26,.05); 830 position:relative; z-index:1; opacity:0; animation:fadeUp .6s ease forwards .8s; } 831.sn-ic { width:46px; height:46px; flex-shrink:0; border-radius:12px; background:${e.amber}; 832 display:flex; align-items:center; justify-content:center; } 833.sn-ic .ms { font-size:25px; color:#fff; } 834.sn-txt b { display:block; font-size:20px; font-weight:600; color:${e.ltext}; 835 letter-spacing:-.02em; line-height:1.25; margin-bottom:4px; } 836.sn-txt span { display:block; font-size:18px; font-weight:400; color:${e.lbody}; line-height:1.4; } 837.sn-txt i { font-style:normal; font-weight:600; color:${e.ltext}; } 838</style></head><body> 839<div class="header"> 840 <p class="eyebrow">1.1 · A migração · escopo</p> 841 <h1 class="head">A loja inteira em FastStore v4, <span class="accent">sem perder nada no caminho.</span></h1> 842</div> 843<div class="stage"> 844 <div class="rail"> 845 <span class="cap top">no ar<br>em FastStore v4</span> 846 <span class="line"></span> 847 <span class="cap">a fundação<br>que sustenta</span> 848 </div> 849 <div class="stack"> 850 <div class="store"> 851 <span class="chrome"> 852 <span class="dots"><i></i><i></i><i></i></span> 853 <span class="bar w"></span><span class="bar"></span> 854 </span> 855 <div class="store-txt"> 856 <div class="store-n">01 · a entrega</div> 857 <div class="store-t">O rihappy.com.br no ar, com <span style="color:${e.lime}">Core Web Vitals aprovados</span></div> 858 <div class="store-d">Não é meta, é <b>critério de aceite</b>: LCP, INP e CLS no verde do CrUX, em campo. Go-live por etapas, com rollback a um clique.</div> 859 <span class="store-url"><span class="ms">bolt</span><span class="u">rihappy.deco-cx.workers.dev</span><span class="tagl">já no ar</span></span> 860 </div> 861 </div> 862 ${Re.map((a,o)=>Ie(a,o)).join("")} 863 </div> 864</div> 865<div class="scopenote"> 866 <span class="sn-ic"><span class="ms">design_services</span></span> 867 <div class="sn-txt"> 868 <b>O desenho novo é o das telas que estiverem no Figma.</b> 869 <span>Todo o resto migra <i>as-is</i>, com o layout que já está no ar hoje. <i>Header e footer novos entram em todas as páginas</i>, inclusive nas que ficam as-is.</span> 870 </div> 871</div> 872</body></html>`,Be=[{nome:"Buybox",faz:"Vários sellers para o mesmo SKU na PDP: elege a melhor oferta e deixa comprar de qualquer um."},{nome:"CEP e regionalização",faz:"Regionaliza sellers, estoque e prazo por região. O preço não muda por região."},{nome:"Insider",faz:"CRM, personalização e mensageria: navegação, carrinho, compra e captura de lead."},{nome:"Kipiai",faz:"Pixel de dataLayer: publica os eventos de e-commerce para analytics e mÃdia."},{nome:"Gift Card",faz:"Só via Pix e comprado sozinho: avisa o cliente e limpa os outros itens do carrinho."},{nome:"Konfidency Reviews",faz:"Avaliações e notas dos produtos, com estrelas na PDP e nos cards."},{nome:"Cookies",faz:"Banner de consentimento de cookies, app próprio da Ri Happy."},{nome:"Social Selling",faz:"Venda assistida com código do vendedor. A barra fica no checkout, e a página /ss-redirect é da loja."},{nome:"Confi, OmniChat e PolÃtica Comercial 16",faz:"Selo de reputação, recuperação de carrinho e troca de polÃtica em 3P. Vivem no checkout, que não é alterado."}],Fe=(a,o)=>` 873 <tr style="animation-delay:${(.3+o*.04).toFixed(2)}s"> 874 <td class="c-nome">${a.nome}</td> 875 <td class="c-faz">${a.faz}</td> 876 <td class="c-st"><span class="pill"><span class="ms">check</span>Validado</span></td> 877 </tr>`,He=`<!DOCTYPE html><html><head> 878${c} 879<style> 880${s} 881${l} 882${n} 883${d} 884${m} 885body { display:flex; flex-direction:column; padding:46px 72px 38px; position:relative; overflow:hidden; }
886${r(e.laccent,"top:-240px; right:-160px;")} 887.header { position:relative; z-index:1; } 888h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(38px,3.5vw,52px); line-height:1.06; 889 letter-spacing:-.045em; color:${e.ltext}; max-width:1640px; 890 opacity:0; animation:fadeUp .7s ease forwards .15s; } 891h1.head .accent { color:${e.laccent}; } 892.sub { margin-top:11px; font-size:20px; font-weight:300; color:${e.lbody}; max-width:1500px; line-height:1.4; 893 opacity:0; animation:fadeUp .7s ease forwards .25s; } 894.stage { flex:1; min-height:0; position:relative; z-index:1; display:flex; flex-direction:column; gap:13px; margin-top:20px; } 895.board { flex:1; min-height:0; background:#fff; border:1px solid ${e.lborder}; border-radius:22px; 896 padding:10px 34px 14px; overflow:hidden; 897 box-shadow:0 20px 50px rgba(7,64,26,.07), 0 2px 6px rgba(7,64,26,.04); 898 opacity:0; animation:fadeUp .65s cubic-bezier(.16,1,.3,1) forwards .25s; } 899table { width:100%; height:100%; border-collapse:collapse; table-layout:fixed; } 900thead th { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; 901 color:${e.lmute}; text-align:left; font-weight:500; padding-bottom:10px; border-bottom:1px solid ${e.lborder}; } 902thead th.w1 { width:310px; } thead th.w3 { width:176px; text-align:right; } 903tbody tr { border-bottom:1px solid #f1efec; opacity:0; animation:fadeIn .5s ease forwards; } 904tbody tr:last-child { border-bottom:none; } 905td { padding:0 10px 0 0; vertical-align:middle; } 906.c-nome { font-size:23px; font-weight:600; color:${e.ltext}; letter-spacing:-.022em; line-height:1.2; } 907.c-faz { font-size:20px; font-weight:400; color:${e.lbody}; line-height:1.36; } 908.c-st { text-align:right; padding-right:0; } 909.pill { display:inline-flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; 910 font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; 911 padding:8px 17px 8px 13px; border-radius:999px; white-space:nowrap; 912 background:color-mix(in srgb, ${e.laccent} 17%, transparent); color:#4d6410; } 913.pill .ms { font-size:17px; } 914.legend { flex-shrink:0; display:flex; align-items:center; gap:26px; padding:0 6px; 915 opacity:0; animation:fadeIn .7s ease forwards .8s; } 916.lg { display:flex; align-items:center; gap:9px; font-size:17px; color:${e.lbody}; } 917.lg .ms { font-size:19px; color:${e.laccent}; } 918.lg b { color:${e.ltext}; font-weight:600; } 919.src { flex-shrink:0; display:flex; align-items:center; gap:14px; background:${e.ltext}; border-radius:14px; 920 padding:15px 26px; opacity:0; animation:fadeUp .6s ease forwards .9s; } 921.src .ms { font-size:22px; color:${e.lime}; flex-shrink:0; } 922.src span { font-size:17.5px; font-weight:300; color:rgba(255,255,255,.8); line-height:1.35; } 923.src b { color:#fff; font-weight:600; } 924.src code { font-family:'JetBrains Mono',monospace; font-size:15.5px; color:${e.lime}; } 925</style></head><body> 926<div class="header"> 927 <p class="eyebrow">1.2 · A migração · o que já foi validado</p> 928 <h1 class="head">As 11 customizações da loja, <span class="accent">todas validadas.</span></h1> 929 <p class="sub">Abrimos o repositório de vocês antes de fechar o escopo. Para cada customização já sabemos exatamente como a implementação tem que ser feita, e é por isso que o prazo de três semanas não é chute.</p> 930</div> 931<div class="stage"> 932 <div class="board"> 933 <table> 934 <thead><tr><th class="w1">Customização</th><th>O que faz</th><th class="w3">Status</th></tr></thead> 935 <tbody>${Be.map((a,o)=>Fe(a,o)).join("")}</tbody> 936 </table> 937 </div> 938 <div class="legend"> 939 <span class="lg"><span class="ms">fact_check</span><b>As 11 lidas e validadas</b>, uma a uma</span> 940 <span class="lg"><span class="ms">swap_horiz</span><b>8 migram</b> para a FastStore</span> 941 <span class="lg"><span class="ms">lock</span><b>3 vivem no checkout</b> e não são alteradas</span> 942 </div> 943 <div class="src"> 944 <span class="ms">folder_open</span> 945 <span>O mapa inteiro vive no repositório de vocês, em <code>customizacoes/</code>: uma página por customização, com caso de uso e comportamento esperado. <b>A fonte de verdade é o site atual em VTEX IO.</b></span> 946 </div> 947</div> 948</body></html>`,Ge=[{n:"01",icon:"swap_horiz",tema:"Paridade",pergunta:"A loja nova faz tudo que a de hoje faz?",itens:["As <b>11 customizações mapeadas</b> uma a uma, e nenhuma ficou incompatÃvel com a FastStore","URLs, redirects e metadados vêm do catálogo, que não é alterado no projeto","<b>GA4, GTM e o dataLayer saem idênticos</b>, nos mesmos containers de produção","OMS, ERP, pagamento, antifraude, logÃstica e marketplace não são tocados","Homologação ponta a ponta: compra, login, CEP, Buybox, Gift Card e LPs"]},{n:"02",icon:"shield",tema:"Segurança",pergunta:"O que protege a virada?",itens:["<b>Pentest antes do go-live</b>, com especialista de segurança no time","Auditoria de todos os componentes e endpoints, para não expor nada novo","Autenticação segue nas APIs da VTEX: contas, dados e segurança intactos","Modal de consentimento refeito, e a PII mascarada continua mascarada","Falha de segurança é tratada como <b>incidente</b>, em homologação ou produção"]},{n:"03",icon:"undo",tema:"Go-live",pergunta:"E se der errado no dia?",itens:["<b>Blue e green</b>: o site novo já está no ar em subdomÃnio antes de qualquer virada","A rampa sobe de 1% a 100% em um dia, com as métricas olhadas em tempo real","<b>O controle do percentual é nosso</b>: um proxy na frente da loja, sem depender de configuração da VTEX","Rollback imediato, devolvendo 100% do tráfego para o VTEX IO","Hypercare de uma semana, SLA de 1h útil e WhatsApp direto com a engenharia"]}],Ye=(a,o)=>` 949 <div class="pg" style="animation-delay:${(.3+o*.1).toFixed(2)}s"> 950 <div class="pg-top">
951 <span class="pg-ic"><span class="ms">${a.icon}</span></span> 952 <span class="pg-n">${a.n}</span> 953 </div> 954 <div class="pg-tema">${a.tema}</div> 955 <p class="pg-pergunta">${a.pergunta}</p> 956 <ul>${a.itens.map(t=>`<li>${t}</li>`).join("")}</ul> 957 </div>`,Je=`<!DOCTYPE html><html><head> 958${c} 959<style> 960${s} 961${l} 962${n} 963${d} 964${m} 965body { display:flex; flex-direction:column; padding:46px 70px 38px; position:relative; overflow:hidden; } 966${r(e.laccent,"top:-240px; right:-160px;")} 967.header { position:relative; z-index:1; } 968h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(36px,3.3vw,50px); line-height:1.06; 969 letter-spacing:-.045em; color:${e.ltext}; opacity:0; animation:fadeUp .7s ease forwards .15s; } 970h1.head .accent { color:${e.laccent}; } 971.sub { margin-top:11px; font-size:20px; font-weight:300; color:${e.lbody}; max-width:1560px; line-height:1.4; 972 opacity:0; animation:fadeUp .7s ease forwards .25s; } 973.grid { flex:0 0 auto; margin:auto 0; position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); 974 gap:22px; } 975.pg { min-width:0; background:#fff; border:1px solid ${e.lborder}; border-radius:22px; padding:30px 32px 28px; 976 display:flex; flex-direction:column; box-shadow:0 12px 30px rgba(7,64,26,.05); 977 opacity:0; transform:translateY(16px); animation:cardUp .6s cubic-bezier(.16,1,.3,1) forwards; } 978.pg-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; } 979.pg-ic { width:50px; height:50px; border-radius:13px; background:${e.ltext}; 980 display:flex; align-items:center; justify-content:center; } 981.pg-ic .ms { font-size:26px; color:${e.lime}; } 982.pg-n { font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.12em; color:${e.lmute}; } 983.pg-tema { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; 984 color:${e.laccent}; font-weight:600; } 985.pg-pergunta { margin-top:7px; font-size:26px; font-weight:600; color:${e.ltext}; letter-spacing:-.028em; 986 line-height:1.16; padding-bottom:18px; border-bottom:1px solid ${e.lborder}; } 987.pg ul { list-style:none; display:flex; flex-direction:column; gap:13px; padding-top:18px; } 988.pg li { position:relative; padding-left:26px; font-size:17.5px; font-weight:400; color:${e.lbody}; line-height:1.4; } 989.pg li::before { content:"check"; position:absolute; left:0; top:1px; font-family:'Material Symbols Sharp'; 990 font-size:19px; font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 20; color:${e.laccent}; } 991.pg li b { color:${e.ltext}; font-weight:600; } 992.band { flex-shrink:0; margin-top:18px; display:flex; align-items:center; gap:15px; background:${e.ltext}; 993 border-radius:15px; padding:17px 28px; position:relative; z-index:1; 994 opacity:0; animation:fadeUp .6s ease forwards .8s; } 995.band .ms { font-size:23px; color:${e.lime}; flex-shrink:0; } 996.band span { font-size:18.5px; font-weight:300; color:rgba(255,255,255,.84); line-height:1.35; } 997.band b { color:#fff; font-weight:600; } 998</style></head><body> 999<div class="header"> 1000 <p class="eyebrow">1.3 · A migração · o que vocês perguntaram</p> 1001 <h1 class="head">As três perguntas <span class="accent">que decidem o projeto.</span></h1> 1002 <p class="sub">O documento de vocês tem oito blocos, e todos voltaram respondidos pergunta a pergunta. Estes três são os que mudam a decisão.</p> 1003</div> 1004<div class="grid">${Ge.map((a,o)=>Ye(a,o)).join("")}</div> 1005<div class="band"> 1006 <span class="ms">description</span> 1007 <span>Escopo e prazo, ambiente de qualidade, integrações, SEO, performance e hypercare <b>também já estão respondidos no documento</b>, com o mesmo nÃvel de detalhe.</span> 1008</div> 1009</body></html>`,Ve=`<!DOCTYPE html><html><head> 1010${c} 1011<style> 1012${s} 1013${l} 1014${n} 1015${d} 1016${m} 1017${Ee} 1018${r(e.laccent,"top:-260px; left:-180px;")} 1019${Ue(4)} 1020${Te} 1021/* Parcelas 50/50, coladas embaixo do valor na coluna verde. */ 1022.split { flex-shrink:0; margin-top:26px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); 1023 display:grid; grid-template-columns:1fr 1fr; gap:16px; } 1024.sp { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:14px; 1025 padding:18px 22px; display:flex; flex-direction:column; gap:5px; } 1026.sp-n { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.12em; 1027 text-transform:uppercase; color:${e.lime}; } 1028.sp-v { font-size:30px; font-weight:600; color:#fff; letter-spacing:-.03em; line-height:1.05; } 1029.sp-d { font-size:16px; font-weight:400; color:rgba(255,255,255,.7); line-height:1.3; } 1030</style></head><body> 1031<p class="eyebrow">1.4 · A migração · preço</p> 1032<h1 class="head">Escopo fechado, <span class="accent">
1032e tudo que entra nele.</span></h1> 1033<div class="stage"> 1034 <div class="board"> 1035 <div class="col price"> 1036 <div class="col-name"><span class="ms">request_quote</span>Investimento</div> 1037 <div class="hero"> 1038 <div class="hero-tag">Escopo fechado · 50/50</div> 1039 <div class="hero-val">R$ 130<span class="unit">mil</span></div> 1040 <p class="hero-cap">A loja inteira migrada, acelerada pelo <b>agent de migração</b>. Core Web Vitals aprovados como <b>critério de aceite</b>, não como promessa.</p> 1041 </div> 1042 <div class="split"> 1043 <div class="sp"><span class="sp-n">1ª nota</span><span class="sp-v">R$ 65 mil</span><span class="sp-d">na assinatura, 45 dias para pagar</span></div> 1044 <div class="sp"><span class="sp-n">2ª nota</span><span class="sp-v">R$ 65 mil</span><span class="sp-d">30 dias depois, 45 dias para pagar</span></div> 1045 </div> 1046 </div> 1047 <div class="col setup"> 1048 <div class="col-name"><span class="ms">inventory</span>O que está incluÃdo</div> 1049 <ul> 1050 ${x("code","Desenvolvimento da loja inteira")} 1051 ${x("swap_horiz","Migração do conteúdo do CMS")} 1052 ${x("hub","Integrações de front")} 1053 ${x("task_alt","QA e homologação")} 1054 ${x("travel_explore","SEO técnico")} 1055 ${x("speed","Performance e Core Web Vitals")} 1056 ${x("rocket_launch","Go-live assistido")} 1057 ${x("health_and_safety","Uma semana de hypercare")} 1058 </ul> 1059 </div> 1060 </div> 1061 <p class="premise">Com 45 dias de prazo, as duas notas caem em <b>novembro e dezembro</b>, depois da Black Friday. Pressupõe <b>kickoff na segunda, 14 de setembro</b>, com repositório e conta VTEX já liberados, e que checkout, Lynx e Region V2 continuam como estão. O cronograma dia a dia está na parte 02.</p> 1062</div> 1063</body></html>`,Ne=[{n:"Semana 1",datas:"14 a 18 de setembro",titulo:"A deco sobe a loja",dep:"Sem dependência de vocês",depOn:!1,entrega:["SubdomÃnio de testes no ar: faststore.rihappy.com.br","Home, PLP, PDP, busca, carrinho e login navegáveis","As cinco customizações já portadas ligadas no ambiente","dataLayer e tracking no ar: Kipiai, Insider e os eventos no GTM"],precisa:["SubdomÃnio de testes configurado: faststore.rihappy.com.br","Um responsável nomeado para aprovações","30 minutos por dia na daily"],marco:"Sexta 18/09: loja entre 90% e 95%, no ar, com a lista aberta do que falta."},{n:"Semana 2",datas:"21 a 25 de setembro",titulo:"Homologação e treinamento",dep:"Depende do time da Ri Happy",depOn:!0,entrega:["Roteiro de homologação dia a dia, um bloco de customização por vez","Um dia dedicado a cada bloco de customização","Treinamento prático de CMS, 2 horas, gravado","Testes de venda ponta a ponta e pentest de segurança"],precisa:["Uma hora por dia na sessão de validação, de segunda a sexta","Quem aprova cada ponto na sala da sessão daquele dia","Time de conteúdo e de negócio no treinamento de quinta, 24/09","Call de infra com a VTEX"],marco:"Sexta 25/09: cenários validados, time treinado, janela do go-live fechada."},{n:"Semana 3",datas:"28 de setembro a 2 de outubro",titulo:"Go-live e hypercare",dep:"Depende de vocês e da VTEX",depOn:!0,entrega:["Go-live na segunda 28/09, num dia só: 1%, 20%, 50% e 100%","Métricas em tempo real em cada degrau","Rollback imediato pelo nosso proxy, sem depender de terceiro","Hypercare pela semana inteira, com SLA de 1h útil"],precisa:["GO ou NO-GO a cada degrau, pelo responsável nomeado","Acompanhamento de pedidos e conversão junto com a gente","VTEX acompanhando o dia, mesmo sem ser dependência da rampa"],marco:"Segunda 28/09: 100% do tráfego na FastStore no mesmo dia."}],Xe=(a,o)=>` 1064 <div class="wk${a.depOn?" dep":""}" style="animation-delay:${(.32+o*.1).toFixed(2)}s"> 1065 <div class="wk-top"> 1066 <span class="wk-n">${a.n}</span> 1067 <span class="wk-datas">${a.datas}</span> 1068 <div class="wk-titulo">${a.titulo}</div> 1069 <span class="wk-dep"><span class="ms">${a.depOn?"groups":"bolt"}</span>${a.dep}</span> 1070 </div> 1071 <div class="wk-bloco"> 1072 <span class="wk-lbl">A deco entrega</span> 1073 <ul class="wk-list">${a.entrega.map(t=>`<li>${t}</li>`).join("")}</ul> 1074 </div> 1075 <div class="wk-bloco">
1076 <span class="wk-lbl need">Precisamos de vocês</span> 1077 <ul class="wk-list need">${a.precisa.map(t=>`<li>${t}</li>`).join("")}</ul> 1078 </div> 1079 <div class="wk-marco">${a.marco}</div> 1080 </div>`,We=`<!DOCTYPE html><html><head> 1081${c} 1082<style> 1083${s} 1084${l} 1085${n} 1086${d} 1087${m} 1088body { display:flex; flex-direction:column; padding:44px 66px 34px; position:relative; overflow:hidden; } 1089${r(e.laccent,"top:-240px; right:-160px;")} 1090.header { position:relative; z-index:1; } 1091h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(36px,3.3vw,50px); line-height:1.06; 1092 letter-spacing:-.045em; color:${e.ltext}; opacity:0; animation:fadeUp .7s ease forwards .15s; } 1093h1.head .accent { color:${e.laccent}; } 1094.marcos { display:flex; align-items:center; gap:12px; margin-top:13px; flex-wrap:wrap; 1095 opacity:0; animation:fadeUp .7s ease forwards .25s; } 1096.mk { display:flex; align-items:baseline; gap:9px; background:#fff; border:1px solid ${e.lborder}; 1097 border-radius:999px; padding:8px 18px; box-shadow:0 1px 3px rgba(7,64,26,.05); } 1098.mk b { font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.06em; color:${e.laccent}; font-weight:600; } 1099.mk span { font-size:16px; font-weight:500; color:${e.ltext}; } 1100.mk-arrow { color:${e.lborder}; font-family:'JetBrains Mono',monospace; font-size:16px; } 1101.grid { flex:0 0 auto; margin:auto 0; position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); 1102 gap:20px; } 1103.wk { min-width:0; background:#fff; border:1px solid ${e.lborder}; border-radius:20px; padding:26px 28px 24px; 1104 display:flex; flex-direction:column; box-shadow:0 12px 30px rgba(7,64,26,.05); 1105 opacity:0; transform:translateY(16px); animation:cardUp .6s cubic-bezier(.16,1,.3,1) forwards; } 1106.wk-top { flex-shrink:0; padding-bottom:16px; border-bottom:1px solid ${e.lborder}; } 1107.wk-n { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; 1108 color:${e.laccent}; font-weight:600; } 1109.wk-datas { display:block; margin-top:4px; font-size:15.5px; color:${e.lmute}; } 1110.wk-titulo { margin-top:7px; font-size:27px; font-weight:600; color:${e.ltext}; letter-spacing:-.028em; line-height:1.14; } 1111.wk-dep { margin-top:13px; display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; 1112 font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; 1113 padding:7px 14px; border-radius:999px; 1114 background:color-mix(in srgb, ${e.laccent} 16%, transparent); color:#4d6410; } 1115.wk-dep .ms { font-size:16px; } 1116.wk.dep .wk-dep { background:color-mix(in srgb, ${e.amber} 16%, transparent); color:#8a4d0b; } 1117.wk-bloco { flex:1; min-height:0; padding-top:15px; display:flex; flex-direction:column; } 1118.wk-lbl { font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; 1119 color:${e.lmute}; margin-bottom:9px; } 1120.wk-lbl.need { color:${e.amber}; font-weight:600; } 1121.wk-list { list-style:none; display:flex; flex-direction:column; gap:8px; } 1122.wk-list li { position:relative; padding-left:20px; font-size:16.5px; font-weight:400; color:${e.lbody}; line-height:1.34; } 1123.wk-list li::before { content:""; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:50%; 1124 background:${e.laccent}; } 1125.wk-list.need li::before { background:${e.amber}; } 1126.wk-marco { flex-shrink:0; margin-top:16px; background:${e.ltext}; border-radius:13px; padding:15px 19px; 1127 font-size:16.5px; font-weight:500; color:#fff; line-height:1.35; } 1128.agenda { flex-shrink:0; margin-top:16px; display:flex; align-items:center; gap:22px; background:#fff; 1129 border:1px solid ${e.lborder}; border-radius:16px; padding:16px 28px; position:relative; z-index:1; 1130 box-shadow:0 2px 10px rgba(7,64,26,.05); opacity:0; animation:fadeUp .6s ease forwards .85s; } 1131.agenda-lbl { flex-shrink:0; display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; 1132 font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:${e.ltext}; font-weight:600; } 1133.agenda-lbl .ms { font-size:21px; color:${e.laccent}; } 1134.agenda-itens { flex:1; display:flex; align-items:center; gap:14px; flex-wrap:wrap; } 1135.ag { display:flex; align-items:baseline; gap:8px; border:1px solid ${e.lborder}; background:${e.lbg}; 1136 border-radius:999px; padding:8px 17px; } 1137.ag b { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.05em; color:${e.laccent}; font-weight:600; } 1138.ag span { font-size:15.5px; font-weight:500; color:${e.ltext}; } 1139</style></head><body> 1140<div class="header"> 1141 <p class="eyebrow">2.1 · A implementação · visão geral</p> 1142 <h1 class="head">Três semanas, do código <span class="accent">
1142a 100% do tráfego.</span></h1> 1143 <div class="marcos"> 1144 <span class="mk"><b>18/09</b><span>loja no ar em homologação</span></span> 1145 <span class="mk-arrow">â</span> 1146 <span class="mk"><b>25/09</b><span>homologação aprovada e time treinado</span></span> 1147 <span class="mk-arrow">â</span> 1148 <span class="mk"><b>28/09</b><span>100% do tráfego na FastStore</span></span> 1149 </div> 1150</div> 1151<div class="grid">${Ne.map((a,o)=>Xe(a,o)).join("")}</div> 1152<div class="agenda"> 1153 <span class="agenda-lbl"><span class="ms">event</span>Travar agenda agora</span> 1154 <div class="agenda-itens"> 1155 <span class="ag"><b>todo dia</b><span>daily de 30 min</span></span> 1156 <span class="ag"><b>qua 23/09</b><span>call de infra com a VTEX</span></span> 1157 <span class="ag"><b>qui 24/09</b><span>treinamento de CMS, 2 horas</span></span> 1158 <span class="ag"><b>seg 28/09</b><span>o go-live inteiro, num dia</span></span> 1159 </div> 1160</div> 1161</body></html>`,Qe={deco:"deco",rihappy:"Ri Happy",ambos:"Os dois",vtex:"com a VTEX"},y={deco:"#8CAA25",rihappy:"#D97A14",ambos:"#2AA9A0",vtex:"#4C6FFF"},Ke=["Segunda","Terça","Quarta","Quinta","Sexta"],Ze=(a,o)=>{if(!a)return`<div class="ag-cel vazia" style="animation-delay:${o}s"></div>`;const t=y[a.dono];return` 1162 <div class="ag-cel" style="animation-delay:${o}s;background:${t}14;border-top:3px solid ${t}"> 1163 <div class="ag-t">${a.titulo}</div> 1164 ${a.nota?`<div class="ag-nota">${a.nota}</div>`:""} 1165 <div class="ag-dono" style="color:${t}">${Qe[a.dono]}</div> 1166 </div>`},ea=(a,o)=>` 1167 <div class="ag-label">${a.label}</div> 1168 ${a.cels.map((t,i)=>Ze(t,o+i*.03)).join("")}`,aa=a=>` 1169.stage { flex:1; min-height:0; position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; 1170 margin-top:20px; } 1171.ag-grid { flex:1; min-height:0; border:1px solid ${e.lborder}; border-radius:20px; background:#fff; 1172 box-shadow:0 22px 54px rgba(7,64,26,.08), 0 2px 6px rgba(7,64,26,.04); 1173 padding:24px 28px; display:grid; grid-template-columns:118px repeat(5,1fr); 1174 grid-template-rows:auto ${a.map(o=>`${o}fr`).join(" ")}; gap:12px; 1175 opacity:0; animation:fadeUp .65s cubic-bezier(.16,1,.3,1) forwards .3s; } 1176.ag-dia { font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.06em; text-transform:uppercase; 1177 color:${e.ltext}; font-weight:600; text-align:center; display:flex; flex-direction:column; align-items:center; 1178 justify-content:center; gap:3px; } 1179.ag-dia i { font-style:normal; font-family:'Inter',sans-serif; font-size:19px; font-weight:600; 1180 letter-spacing:-.02em; color:${e.laccent}; } 1181.ag-label { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; 1182 color:${e.lmute}; display:flex; align-items:center; line-height:1.5; } 1183.ag-cel { border-radius:12px; padding:13px 15px; display:flex; flex-direction:column; justify-content:center; 1184 gap:6px; box-shadow:0 1px 4px rgba(7,64,26,.05); 1185 opacity:0; transform:translateY(10px); animation:cardUp .5s cubic-bezier(.16,1,.3,1) forwards; } 1186.ag-cel.vazia { background:transparent; box-shadow:none; } 1187.ag-t { font-size:17px; font-weight:600; color:${e.ltext}; line-height:1.22; letter-spacing:-.015em; }
1188.ag-t b { color:${e.laccent}; } 1189.ag-nota { font-size:14.5px; font-weight:400; color:${e.lbody}; line-height:1.3; } 1190.ag-dono { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase; 1191 background:#fff; padding:4px 11px; border-radius:999px; align-self:flex-start; font-weight:600; } 1192.marco { flex-shrink:0; display:flex; align-items:center; gap:22px; background:${e.ltext}; border-radius:16px; 1193 padding:17px 30px; opacity:0; animation:fadeUp .6s ease forwards .8s; } 1194.marco-badge { flex-shrink:0; display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; 1195 font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:${e.limeDark}; background:${e.lime}; 1196 padding:9px 17px; border-radius:999px; font-weight:600; } 1197.marco-badge .ms { font-size:17px; } 1198.marco-txt { flex:1; font-size:19px; font-weight:400; color:rgba(255,255,255,.86); line-height:1.35; } 1199.marco-txt b { color:#fff; font-weight:600; } 1200.legenda { flex-shrink:0; display:flex; align-items:center; gap:20px; padding:0 4px; 1201 opacity:0; animation:fadeIn .7s ease forwards .9s; } 1202.lg { display:flex; align-items:center; gap:8px; font-size:15px; color:${e.lbody}; } 1203.lg i { width:10px; height:10px; border-radius:3px; display:block; } 1204.oncall { margin-left:auto; display:flex; align-items:center; gap:10px; background:#fff; 1205 border:1px solid ${e.lborder}; border-radius:999px; padding:9px 20px; 1206 font-size:16px; color:${e.lbody}; box-shadow:0 1px 3px rgba(7,64,26,.05); } 1207.oncall .ms { font-size:19px; color:${e.laccent}; } 1208.oncall b { color:${e.ltext}; font-weight:600; } 1209`,oa=[{label:"9h00",peso:.42,cels:Array(5).fill({titulo:"Daily de 30 min",dono:"ambos"})},{label:"Manhã",cels:[{titulo:"Kickoff",nota:"escopo, responsáveis e o grupo aberto",dono:"ambos"},{titulo:"Home, PLP, PDP e busca",nota:"publicadas no subdomÃnio",dono:"deco"},{titulo:"Buybox e modal de CEP",nota:"ligados e verificados",dono:"deco"},{titulo:"dataLayer e tracking",nota:"Kipiai no ar, eventos batendo no GTM",dono:"deco"},{titulo:"Varredura de QA",nota:"manual e agente automatizado",dono:"deco"}]},{label:"Tarde",cels:[{titulo:"Ambiente e baseline",nota:"subdomÃnio no ar, números congelados",dono:"deco"},{titulo:"Catálogo, carrinho e login",nota:"integrações da VTEX conectadas",dono:"deco"},{titulo:"Cookies, Gift Card e reviews",nota:"as cinco portadas no ambiente",dono:"deco"},{titulo:"Insider e landing pages",nota:"personalização no ar, LPs com formulário",dono:"deco"},{titulo:"<b>A entrega grande</b>",nota:"link, lista aberta e roteiro da semana 2",dono:"ambos"}]}],ta=[{label:"Sessão de validação<br>1 hora, com vocês",cels:[{titulo:"Fluxo de compra inteiro",nota:"da home ao pedido: PLP, PDP, carrinho, login e checkout",dono:"ambos"},{titulo:"Modal de CEP",nota:"as regras de região, ponta a ponta",dono:"ambos"},{titulo:"Gift Card e reviews",nota:"split, prova social e cookies",dono:"ambos"},{titulo:"Insider, Kipiai e dataLayer",nota:"os eventos batendo no GTM",dono:"ambos"},{titulo:"Compras de teste",nota:"do banner ao pedido criado",dono:"ambos"}]},{label:"Tarde",cels:[{titulo:"Ajustes do fluxo",nota:"priorizados no mesmo dia",dono:"deco"},{titulo:"Buybox e sellers",nota:"preços e prazos por seller",dono:"ambos"},{titulo:"Proxy do rollout",nota:"o controle do percentual de pé, com a VTEX alinhada",dono:"vtex"},{titulo:"<b>Treinamento de CMS</b>",nota:"1 hora com o site no ar, gravado",dono:"rihappy"},{titulo:"Pentest e aceite",nota:"e a janela do go-live fechada",dono:"ambos"}]}],ia=["14/09","15/09","16/09","17/09","18/09"],sa=["21/09","22/09","23/09","24/09","25/09"],V=(a,o,t,i,p,f,S,j,T)=>`<!DOCTYPE html><html><head> 1210${c} 1211<style> 1212${s} 1213${l} 1214${n} 1215${d} 1216${m} 1217body { display:flex; flex-direction:column; padding:44px 66px 36px; position:relative; overflow:hidden; } 1218${j} 1219.header { position:relative; z-index:1; } 1220h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(36px,3.3vw,50px); line-height:1.06; 1221 letter-spacing:-.045em; color:${e.ltext}; opacity:0; animation:fadeUp .7s ease forwards .15s; } 1222h1.head .accent { color:${e.laccent}; } 1223.sub { margin-top:10px; font-size:19.5px; font-weight:300; color:${e.lbody}
1223; max-width:1620px; line-height:1.4; 1224 opacity:0; animation:fadeUp .7s ease forwards .25s; } 1225.sub b { color:${e.ltext}; font-weight:600; } 1226${aa(p.map(v=>v.peso??1))} 1227</style></head><body> 1228<div class="header"> 1229 <p class="eyebrow">${a}</p> 1230 <h1 class="head">${o}</h1> 1231 <p class="sub">${t}</p> 1232</div> 1233<div class="stage"> 1234 <div class="ag-grid"> 1235 <div></div> 1236 ${Ke.map((v,q)=>`<div class="ag-dia">${v}<i>${i[q]}</i></div>`).join("")} 1237 ${p.map((v,q)=>ea(v,.4+q*.06)).join("")} 1238 </div> 1239 <div class="legenda"> 1240 <span class="lg"><i style="background:${y.deco}"></i>deco conduz</span> 1241 <span class="lg"><i style="background:${y.ambos}"></i>os dois juntos</span> 1242 <span class="lg"><i style="background:${y.rihappy}"></i>time da Ri Happy</span> 1243 <span class="lg"><i style="background:${y.vtex}"></i>com a VTEX</span> 1244 ${T?`<span class="oncall"><span class="ms">support_agent</span>${T}</span>`:""} 1245 </div> 1246 <div class="marco"> 1247 <span class="marco-badge"><span class="ms">flag</span>${f}</span> 1248 <span class="marco-txt">${S}</span> 1249 </div> 1250</div> 1251</body></html>`,na=V("2.2 · A implementação · semana 1",'Semana 1: <span class="accent">a deco sobe a loja.</span>',"14 a 18 de setembro. O único compromisso de vocês é a daily de 30 minutos: nenhuma entrega desta semana trava esperando validação.",ia,oa,"Sexta 18/09","Loja entre <b>90% e 95%</b>, no ar em <b>faststore.rihappy.com.br</b>, com a lista aberta do que falta e o roteiro de homologação na mão de vocês.",r(e.laccent,"top:-240p
1251x; right:-160px;")),ra=V("2.3 · A implementação · semana 2",'Semana 2: <span class="accent">homologação com o time de vocês.</span>',"21 a 25 de setembro. Tudo roda em <b>faststore.rihappy.com.br</b>, o ambiente que subiu na semana 1: é ele que vocês testam, é nele que a gente corrige, e é dele que sai o aceite. <b>Uma sessão de uma hora por dia</b>, e em cada uma a pessoa que aprova aquele ponto precisa estar na sala.",sa,ta,"Sexta 25/09","Homologação aprovada e janela do go-live marcada. Os critérios: <b>velocidade contra o baseline</b>, todos os fluxos customizados validados, time satisfeito com a usabilidade e <b>pentest sem achado crÃtico</b>.",r(e.amber,"bottom:-240px; left:-180px;"),"Fora das sessões, <b>on-call o dia inteiro</b>: o que o time de vocês achar testando é resolvido em tempo real."),la=[{hora:"Abertura",pct:"1%",altura:92,monitora:"Pedidos por hora contra o baseline, erro de JavaScript e de API, tempo de resposta",sobe:"Uma hora limpa, sem quebra no fluxo de compra"},{hora:"+2 horas",pct:"20%",altura:142,monitora:"Tudo acima, mais conversão e ticket médio",sobe:"Pedidos em linha com o baseline, sem incidente aberto"},{hora:"+4 horas",pct:"50%",altura:192,monitora:"Tudo acima, mais busca, login e Core Web Vitals de campo",sobe:"Métricas estáveis atravessando o horário de pico"},{hora:"+6 horas",pct:"100%",altura:242,monitora:"Tudo acima, mais indexação no Search Console e os eventos no GTM",sobe:"O dia fecha sem regressão de pedidos e o go-live está concluÃdo"}],pa=(a,o)=>` 1252 <div class="dg" style="animation-delay:${(.32+o*.09).toFixed(2)}s"> 1253 <div class="dg-bar" style="height:${a.altura}px"> 1254 <span class="dg-pct">${a.pct}</span> 1255 </div> 1256 <div class="dg-txt"> 1257 <span class="dg-hora">${a.hora}</span> 1258 <p class="dg-mon"><b>Em tempo real:</b> ${a.monitora}</p> 1259 <p class="dg-sobe"><b>Sobe se:</b> ${a.sobe}</p> 1260 </div> 1261 </div>`,da=`<!DOCTYPE html><html><head> 1262${c} 1263<style> 1264${s} 1265${l} 1266${n} 1267${d} 1268${m} 1269body { display:flex; flex-direction:column; padding:42px 60px 32px; position:relative; overflow:hidden; }
1270${r(e.laccent,"top:-240px; right:-160px;")} 1271.header { position:relative; z-index:1; } 1272h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(36px,3.3vw,50px); line-height:1.06; 1273 letter-spacing:-.045em; color:${e.ltext}; opacity:0; animation:fadeUp .7s ease forwards .15s; } 1274h1.head .accent { color:${e.laccent}; } 1275.sub { margin-top:10px; font-size:19.5px; font-weight:300; color:${e.lbody}; max-width:1620px; line-height:1.4; 1276 opacity:0; animation:fadeUp .7s ease forwards .25s; } 1277.sub b { color:${e.ltext}; font-weight:600; } 1278.rampa { flex:0 0 auto; position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); 1279 gap:16px; margin:auto 0 0; align-items:end; } 1280.dg { min-width:0; display:flex; flex-direction:column; justify-content:flex-end; 1281 opacity:0; transform:translateY(16px); animation:cardUp .6s cubic-bezier(.16,1,.3,1) forwards; } 1282.dg-bar { flex-shrink:0; width:100%; background:linear-gradient(180deg, ${e.laccent}, #6f8a1c); border-radius:14px 14px 0 0; 1283 display:flex; align-items:flex-start; justify-content:center; padding-top:14px; } 1284.dg-pct { font-size:38px; font-weight:600; color:#fff; letter-spacing:-.04em; line-height:1; } 1285.dg-txt { flex-shrink:0; background:#fff; border:1px solid ${e.lborder}; border-top:none; 1286 border-radius:0 0 16px 16px; padding:17px 20px 19px; box-shadow:0 12px 30px rgba(7,64,26,.05); } 1287.dg-hora { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; 1288 color:${e.ltext}; font-weight:600; } 1289.dg-mon { margin-top:10px; font-size:15.5px; font-weight:400; color:${e.lbody}; line-height:1.36; } 1290.dg-sobe { margin-top:8px; padding-top:8px; border-top:1px solid ${e.lborder}; 1291 font-size:15.5px; font-weight:400; color:${e.lbody}; line-height:1.36; } 1292.dg-mon b, .dg-sobe b { color:${e.ltext}; font-weight:600; } 1293.caixas { flex:0 0 auto; margin:26px 0 auto; position:relative; z-index:1; display:grid; 1294 grid-template-columns:repeat(3,1fr); gap:18px; } 1295.cx { min-width:0; border-radius:18px; padding:22px 26px 20px; display:flex; flex-direction:column; 1296 opacity:0; transform:translateY(16px); animation:cardUp .6s cubic-bezier(.16,1,.3,1) forwards .72s; } 1297.cx.go { background:#fff; border:1px solid ${e.lborder}; box-shadow:0 12px 30px rgba(7,64,26,.05); } 1298.cx.rb { background:#fff; border:1px solid ${e.lborder}; border-left:5px solid ${e.amber}; 1299 box-shadow:0 12px 30px rgba(7,64,26,.05); } 1300.cx.hc { background:${e.ltext}; } 1301.cx-top { display:flex; align-items:center; gap:11px; padding-bottom:13px; margin-bottom:13px; 1302 border-bottom:1px solid ${e.lborder}; } 1303.cx.hc .cx-top { border-bottom-color:rgba(255,255,255,.16); } 1304.cx-top .ms { font-size:23px; } 1305.cx.go .cx-top .ms { color:${e.laccent}; } .cx.rb .cx-top .ms { color:${e.amber}; } .cx.hc .cx-top .ms { color:${e.lime}; } 1306.cx-t { font-size:21px; font-weight:600; letter-spacing:-.022em; color:${e.ltext}; } 1307.cx.hc .cx-t { color:#fff; } 1308.cx ul { flex:1; list-style:none; display:flex; flex-direction:column; gap:7px; } 1309.cx li { position:relative; padding-left:17px; font-size:16px; font-weight:400; color:${e.lbody}; line-height:1.34; } 1310.cx li::before { content:""; position:absolute; left:1px; top:7px; width:5px; height:5px; border-radius:50%; background:${e.laccent}; } 1311.cx.rb li::before { background:${e.amber}; } 1312.cx.hc li { color:rgba(255,255,255,.82); } .cx.hc li::before { background:${e.lime}; } 1313.cx li b { color:${e.ltext}; font-weight:600; } .cx.hc li b { color:#fff; } 1314.cx-foot { flex-shrink:0; margin-top:12px; padding-top:11px; border-top:1px solid ${e.lborder}; 1315 font-size:15px; font-weight:500; color:${e.ltext}; line-height:1.34; } 1316.cx.hc .cx-foot { border-top-color:rgba(255,255,255,.16); color:${e.lime}; } 1317</style></head><body> 1318<div class="header"> 1319 <p class="eyebrow">2.4 · A implementação · o go-live</p> 1320 <h1 class="head">O go-live acontece <span class="accent">em um dia.</span></h1> 1321 <p class="sub">Segunda, 28 de setembro. A rampa sobe de 1% a 100% ao longo do mesmo dia, com as métricas olhadas <b>em tempo real</b>. <b>O controle do percentual é nosso</b>: um proxy na frente da loja decide quanto do tráfego vai para o site novo, sem depender de configuração da VTEX. O horário de abertura fica a combinar.</p> 1322</div> 1323<div class="rampa">${la.map((a,o)=>pa(a,o)).join("")}</div> 1324<div class="caixas"> 1325 <div class="cx go"> 1326 <div class="cx-top"><span class="ms">how_to_reg</span><span class="cx-t">GO ou NO-GO a cada degrau</span></div> 1327 <ul> 1328 <li>Pedidos por hora dentro do baseline</li> 1329 <li>Fluxo de compra completo funcionando</li> 1330 <li>Sem erro crÃtico em aberto</li> 1331 <li>Velocidade igual ou melhor que a da homologação</li> 1332 </ul> 1333 <div class="cx-foot">Quem decide é o responsável nomeado por vocês, com a deco e a VTEX na sala. Sem GO, o degrau segura onde está e o dia termina ali.</
1333div> 1334 </div> 1335 <div class="cx rb"> 1336 <div class="cx-top"><span class="ms">undo</span><span class="cx-t">O que dispara rollback</span></div> 1337 <ul> 1338 <li>Fluxo de compra quebrado</li> 1339 <li>Queda clara em pedidos, com o limite numérico <b>a definir com vocês</b></li> 1340 </ul> 1341 <div class="cx-foot">O rollback é nosso e imediato: o proxy devolve 100% do tráfego para o VTEX IO, sem abrir ticket e sem esperar terceiro. O site novo continua de pé no subdomÃnio para investigarmos sem pressa.</div> 1342 </div> 1343 <div class="cx hc"> 1344 <div class="cx-top"><span class="ms">health_and_safety</span><span class="cx-t">Hypercare</span></div> 1345 <ul> 1346 <li>Começa no dia seguinte e dura <b>uma semana cheia</b></li> 1347 <li><b>SLA de 1 hora útil</b></li> 1348 <li>WhatsApp direto entre a engenharia da deco e o time de vocês</li> 1349 <li>Conversão, pedidos, ticket médio e Core Web Vitals contra o baseline, todo dia</li> 1350 </ul> 1351 <div class="cx-foot">A gravação do treinamento e o código documentado em Markdown já ficam com vocês.</div> 1352 </div> 1353</div> 1354</body></html>`,ca=[{tl:"Out, nov e dez de 2026",tv:"R$ 70 mil / mês",tn:"Fixo. Sem variável, sem banco de horas e sem contagem de ticket. Atravessa Dia das Crianças, Black Friday e Natal com o mesmo time que migrou a loja."},{tl:"O que 2027 vai olhar",tv:"O resultado dos 90 dias",tn:"GMV, conversão e Core Web Vitals medidos antes e depois, no mesmo painel que vocês acompanham. à esse número que abre a negociação, em dezembro.",hl:!0},{tl:"A partir de janeiro",tv:"Modelo a combinar",tn:"Fixo, variável por meta, ou os dois. Nada fica travado agora, e nada é renovado no automático."}],ma=(a,o)=>` 1355 <div class="tot${a.hl?" hl":""}" style="animation-delay:${o}s"> 1356 <span class="tl">${a.tl}</span> 1357 <span class="tv">${a.tv}</span> 1358 <span class="tn">${a.tn}</span> 1359 </div>`,fa=`<!DOCTYPE html><html><head> 1360${c} 1361<style> 1362${s} 1363* { margin:0; padding:0; box-sizing:border-box; } 1364body { font-family:'Inter',-apple-system,system-ui,sans-serif; width:100vw; height:100vh; overflow:hidden; 1365 background:${e.limeDark}; color:#fff; -webkit-font-smoothing:antialiased; 1366 padding:54px 88px 48px; display:flex; flex-direction:column; position:relative; } 1367${n} 1368${F} 1369.eyebrow2 { font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.2em; text-transform:uppercase; 1370 color:rgba(255,255,255,.5); margin-bottom:20px; opacity:0; animation:fadeDown .6s ease forwards .1s; } 1371h1.big { font-family:'Inter',sans-serif; font-weight:400; font-size:60px; line-height:1.06; letter-spacing:-.04em; 1372 color:#fff; opacity:0; animation:fadeUp .7s ease forwards .15s; } 1373h1.big .accent { color:${e.lime}; } 1374.sub2 { margin-top:13px; font-size:20px; font-weight:300; color:rgba(255,255,255,.62); max-width:1300px; 1375 line-height:1.4; opacity:0; animation:fadeUp .7s ease forwards .25s; } 1376.sub2 b { color:#fff; font-weight:600; } 1377 1378.totals { flex:1; min-height:0; margin-top:34px; display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:20px; 1379 align-items:stretch; } 1380.tot { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:20px; 1381 padding:40px 34px; display:flex; flex-direction:column; justify-content:center; gap:16px; 1382 opacity:0; transform:translateY(18px); animation:fadeUp .6s cubic-bezier(.16,1,.3,1) forwards; } 1383.tot .tl { font-family:'JetBrains Mono',monospace; font-size:15px; letter-spacing:.08em; 1384 text-transform:uppercase; color:rgba(255,255,255,.5); } 1385.tot .tv { font-size:36px; font-weight:600; color:#fff; letter-spacing:-.03em; line-height:1.15; } 1386.tot .tn { font-size:19px; font-weight:300; color:rgba(255,255,255,.82); line-height:1.4; } 1387.tot.hl { background:${e.lime}; border-color:${e.lime}; } 1388.tot.hl .tl { color:${e.limeDark}; opacity:.65; } 1389.tot.hl .tv { color:${e.limeDark}; font-size:38px; } 1390.tot.hl .tn { color:${e.limeDark}; opacity:.85; } 1391 1392.foot { flex-shrink:0; margin-top:26px; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:20px; 1393 opacity:0; animation:fadeUp .6s ease forwards .95s; } 1394.fcard { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:16px; 1395 padding:20px 24px; display:flex; align-items:center; gap:16px; } 1396.fcard .ms { font-size:30px; color:${e.lime}; flex-shrink:0; } 1397.fcard .ft { font-size:19.5px; font-weight:300; color:rgba(255,255,255,.82); line-height:1.35; } 1398.fcard .ft b { color:#fff; font-weight:600; } 1399</style></head><body> 1400<p class="eyebrow2">3.5 · Depois do go-live · a conta</p> 1401<h1 class="big">R$ 70 mil por mês até dezembro. <span class="accent">2027 se negocia no resultado.</span></h1> 1402<p class="sub2">
1402Três meses fechados para atravessar a sazonalidade com quem construiu a loja, e a conversa do ano que vem apoiada em número medido, não em estimativa.</p> 1403<div class="totals"> 1404 ${ca.map((a,o)=>ma(a,.4+o*.1)).join("")} 1405</div> 1406<div class="foot"> 1407 <div class="fcard"> 1408 <span class="ms">calculate</span> 1409 <span class="ft"><b>R$ 210 mil pelos três meses, fechados.</b> Sem fee de projeto por cima e sem fatura extra por onda estratégica.</span> 1410 </div> 1411 <div class="fcard"> 1412 <span class="ms">all_inclusive</span> 1413 <span class="ft"><b>Créditos de AI, seats no Studio e monitoramento 24/7 já inclusos.</b> Sem cobrança à parte.</span> 1414 </div> 1415 <div class="fcard"> 1416 <span class="ms">lock_open</span> 1417 <span class="ft"><b>Sem lock-in.</b> O código é de vocês e fica no repositório de vocês, do primeiro commit ao último.</span> 1418 </div> 1419</div> 1420</body></html>`,xa=[1580,1680,1780,1880].flatMap((a,o)=>Array.from({length:12},(t,i)=>D($[(o*2+i)%$.length],a,-40+i*100,u[(o+i+1)%u.length],.25+o*.05+i*.03))).join(""),ga=`<!DOCTYPE html><html><head> 1421${c} 1422<style> 1423${s} 1424${l} 1425${n} 1426${P} 1427body { position:relative; background:#f9f6f2; display:flex; flex-direction:column; justify-content:center; padding:0 86px; } 1428.eyebrow { font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.22em; text-transform:uppercase; 1429 color:${e.laccent}; margin-bottom:32px; opacity:0; animation:fadeDown .7s ease forwards .15s; position:relative; z-index:1; } 1430.headline { position:relative; z-index:1; width:1260px; 1431 font-family:'Inter',sans-serif; font-weight:400; font-size:88px; line-height:1.04; letter-spacing:-.05em; color:${e.ltext}; 1432 opacity:0; animation:fadeUp .9s ease forwards .3s; } 1433.headline .accent { color:${e.laccent}; } 1434.sub { position:relative; z-index:1; margin-top:26px; width:1040px; font-size:27px; font-weight:300; color:#5d5751; line-height:1.35; 1435 opacity:0; animation:fadeUp .8s ease forwards .55s; } 1436.urlbar { position:relative; z-index:1; margin-top:34px; display:inline-flex; align-items:center; gap:18px; 1437 background:${e.ltext}; border-radius:999px; padding:16px 30px 16px 22px; width:fit-content; 1438 box-shadow:0 20px 44px rgba(7,64,26,.20); 1439 opacity:0; animation:fadeUp .8s ease forwards .7s; } 1440.urlbar .ms { font-family:'Material Symbols Sharp'; font-size:26px; color:${e.lime}; line-height:1; 1441 font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 40; } 1442.urlbar .u { font-family:'JetBrains Mono',monospace; font-size:26px; letter-spacing:-.01em; color:#fff; } 1443.urlbar .tagl { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.16em; 1444 text-transform:uppercase; color:${e.limeDark}; background:${e.lime}; padding:6px 14px; border-radius:999px; } 1445.footer-row { position:absolute; left:86px; right:640px; bottom:74px; 1446 display:flex; align-items:center; justify-content:space-between; gap:40px; } 1447.deco-logo { width:210px; height:auto; 1448 opacity:0; animation:fadeUp .8s ease forwards .8s; } 1449.contact { text-align:right; 1450 font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.1em; line-height:1.9; color:${e.lmute}; 1451 opacity:0; animation:fadeUp .8s ease forwards .9s; } 1452.contact b { color:${e.ltext}; font-weight:600; } 1453</style></head><body> 1454 ${xa} 1455 <p class="eyebrow">Ri Happy <> deco</p> 1456 <h1 class="headline">A primeira versão já está no ar.<br><span class="accent">Falta combinar o kickoff.</span></h1> 1457 <p class="sub">Home, categoria, marca e produto já navegam em FastStore v4, com o catálogo de vocês. Kickoff na segunda 14/09, loja em homologação na sexta 18/09, e o go-live inteiro na segunda 28/09. R$ 130 mil em duas notas de R$ 65 mil com 45 dias de prazo, e R$ 70 mil por mês até dezembro.</p> 1458 <div class="urlbar"><span class="ms">bolt</span><span class="u">rihappy.deco-cx.workers.dev</span><span class="tagl">abra agora</span></div> 1459 <div class="footer-row"> 1460 <img class="deco-logo" src="${A}" alt="deco"> 1461 <div class="contact"><span>Migração · Operação · Sustentação</span><br><b>decocms.com</b></div> 1462 </div> 1463</body></html>`,ha={id:"rihappy_2026",title:"Ri Happy à deco · Implementação e sustentação",slides:[{id:"01_cover",html:ee,label:"Capa"},{id:"02_agenda",html:ae,label:"O que vamos ver"},{id:"03_divider_migracao",html:ie,label:"Parte 01 · A migração"},{id:"04_escopo_migracao",html:Le,label:"A loja em FastStore v4"},{id:"05_arquitetura",html:He,label:"As 11 customizações"},{id:"06_perguntas",html:Je,label:"As três perguntas que decidem"},{id:"07_preco",html:Ve,label:"Preço"},{id:"09_divider_implementacao",html:se,label:"Parte 02 · A implementação"},{id:"10_tres_semanas",html:We,label:"As três semanas"},{id:"11_semana_1",html:na,label:"Semana 1, em agenda"},{id:"12_semana_2",html:ra,label:"Semana 2, em agenda"},{id:"13_golive",html:da,label:"O go-live em um dia"},{id:"14_time_rituais",html:he,label:"O time e os rituais"}
1463,{id:"15_divider_operacao",html:ne,label:"Parte 03 · Depois do go-live"},{id:"16_agentes",html:ge,label:"O time de agentes"},{id:"17_processo",html:re,label:"O processo, ponta a ponta"},{id:"18_seis_agencias",html:Ce,label:"Seis agências em um contrato"},{id:"19_escopo",html:Pe,label:"PerÃmetro do escopo"},{id:"20_sustentacao",html:fa,label:"A conta até dezembro"},{id:"21_close",html:ga,label:"Fechamento"}]},ba="f38ef9909c74a846863c83d23d4eae2c4d1dae6342b8c17d3df2ce3b687fba10";function wa(){const a=N.c(1);let o;return a[0]===Symbol.for("react.memo_cache_sentinel")?(o=C.jsxs(X,{deckId:"rihappy",title:"Ri Happy à deco",eyebrow:"Proposta comercial",subtitle:"Esta proposta é protegida por senha.",helpText:"Entre em contato com a deco para obter acesso.",passwordHash:ba,children:[C.jsx("style",{dangerouslySetInnerHTML:{__html:W}}),C.jsx(Q,{deck:ha,pdfUrl:null})]}),a[0]=o):o=a[0],o}export{wa as component};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.