og-image.html

<!DOCTYPE html><html lang="pt-BR"><head><meta charset="UTF-8"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet"><style>
:root{--navy:#0A2540;--navy2:#123A63;--navy-deep:#071A2E;--blue:#2E9BE6;--blue2:#4FC3F7;--cyan:#7DD3FC;--ice:#EAF3FB;--gray:#9FB2C6;--line:rgba(255,255,255,.10)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:1200px;height:630px;overflow:hidden}
body{font-family:'Poppins',system-ui,Arial,sans-serif;background:radial-gradient(900px 520px at 78% -10%,rgba(46,155,230,.28),transparent 60%),linear-gradient(160deg,var(--navy),var(--navy-deep));color:var(--ice);position:relative}
.grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(circle at 70% 30%,#000,transparent 70%);opacity:.5}
.wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding:72px 80px}
.brand{display:flex;align-items:center;gap:18px;margin-bottom:34px}
.logo{width:76px;height:76px;flex:none}
.brand .name{font-size:40px;font-weight:800;line-height:1}
.brand .name .fix{color:var(--blue2)}
.brand .name small{display:block;font-size:13px;letter-spacing:5px;color:var(--gray);font-weight:600;margin-top:4px}
h1{font-size:66px;font-weight:800;line-height:1.05;letter-spacing:-1px;max-width:900px}
h1 .g{background:linear-gradient(120deg,var(--blue2),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
p.sub{font-size:26px;color:var(--gray);margin-top:22px;max-width:820px}
.badges{display:flex;gap:16px;margin-top:36px;align-items:center}
.pill{background:rgba(46,155,230,.14);border:1px solid rgba(79,195,247,.4);color:var(--cyan);font-size:22px;font-weight:600;padding:12px 22px;border-radius:14px}
.price{background:linear-gradient(135deg,var(--blue2),var(--blue));color:#04263f;font-size:22px;font-weight:800;padding:12px 24px;border-radius:14px}
.loc{position:absolute;right:80px;bottom:60px;z-index:2;display:flex;align-items:center;gap:10px;color:var(--gray);font-size:22px;font-weight:600}
.loc svg{width:24px;height:24px;fill:var(--blue2)}
</style></head><body><div class="grid"></div><div class="wrap"><div class="brand"><span class="logo" id="logo"></span><span class="name">Byte<span class="fix">Fix</span><small>MANUTENÇÃO · SITES</small></span></div><h1>Sites, <span class="g">Chat Bot</span><br>e Manutenção</h1><p class="sub">Automação no WhatsApp que atende e vende por você, 24h por dia.</p><div class="badges"><span class="pill">Chat Bot + Site + Artes</span><span class="price">Pacote 3x R$ 399</span></div></div><div class="loc"><svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z"/></svg>São Luís – MA</div><script>
document.getElementById('logo').innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><linearGradient id="nav" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0A2540"/><stop offset="1" stop-color="#123A63"/></linearGradient><linearGradient id="blu" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#4FC3F7"/><stop offset="1" stop-color="#2E9BE6"/></linearGradient></defs><rect x="8" y="8" width="496" height="496" rx="116" fill="url(#nav)"/><path d="M406 256 L405 273 L434 292 L422 331 L387 330 L377 344 L367 357 L379 390 L346 414 L318 393 L302 399 L286 403 L277 437 L235 437 L226 403 L210 399 L194 393 L166 414 L133 390 L145 357 L135 344 L125 330 L90 331 L78 292 L107 273 L106 256 L107 239 L78 220 L90 181 L125 182 L135 168 L145 155 L133 122 L166 98 L194 119 L210 113 L226 109 L235 75 L277 75 L286 109 L302 113 L318 119 L346 98 L379 122 L367 155 L377 168 L387 182 L422 181 L434 220 L405 239 Z" fill="url(#blu)"/><circle cx="256" cy="256" r="120" fill="#0A2540"/><circle cx="256" cy="256" r="120" fill="none" stroke="url(#blu)" stroke-width="6" opacity="0.35"/><g fill="none" stroke="#FFFFFF" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"><polyline points="212,214 176,256 212,298"/><polyline points="300,214 336,256 300,298"/><line x1="284" y1="200" x2="228" y2="312" stroke="#4FC3F7"/></g></svg>`;
</script></body></html>