1<!DOCTYPE html> 2<html lang="pt-BR"> 3 4<head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Marvitel â Link Dedicado</title> 8 <meta name="description" 9 content="Conexão de Internet Link Dedicado exclusiva e de alta performance. Tenha segurança e garantia de 100% da velocidade de banda contratada (upload/download simétrico)."> 10 <!-- Google Fonts: Sora --> 11 <link rel="preconnect" href="https://fonts.googleapis.com" /> 12 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 13 <link 14 href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Sora:[email protected]&display=swap" 15 rel="stylesheet" /> 16 <!-- Tailwind CSS CDN --> 17
17<script src="https://cdn.tailwindcss.com"></script>
17 18
18<script> 19 tailwind.config = { 20 theme: { 21 extend: { 22 fontFamily: { 23 sora: ['Sora', 'sans-serif'], 24 }, 25 colors: { 26 'background': '#f7f7f7', 27 'azul-tradicao': '#1DA5B3', 28 'rio-sergipe': '#045163', 29 'chao-batido': '#474F54', 30 'noite': '#132128', 31 'mangue': '#BBDBDF', 32 }, 33 }, 34 }, 35 } 36 </script>
36 37 <link rel="stylesheet" href="../index.css" /> 38 <style> 39 /* Estilo especÃfico para o banner de hospedagem */ 40 .hospedagem-hero { 41 background: linear-gradient(to bottom, #def1f3 0%, #ffffff 50%); 42 position: relative; 43 min-height: 500px; 44 display: flex; 45 align-items: center; 46 overflow: hidden; 47 } 48 49 .hospedagem-banner-img { 50 position: absolute; 51 top: 0; 52 left: 0; 53 width: 100%; 54 height: 100%; 55 object-fit: cover; 56 z-index: 1; 57 opacity: 0.5; 58 mix-blend-mode: multiply; 59 /* Para garantir que o gradiente por trás apareça se o branco for sólido no PNG, ou apenas overlay se for transparente */ 60 } 61 62 /* Se a imagem for transparente, o multiply pode não ser necessário, mas ajuda se houver um fundo branco na imagem */ 63 .hospedagem-hero-content { 64 position: relative; 65 z-index: 10; 66 } 67 </style> 68 <link rel="icon" type="image/png" href="../img/institucional/simbolo%20colorido.png" />
vendor: 81 bytes, lines 68-69
68 69 <script src="https://www.google.com/recaptcha/api.js" async defer></script>
70</head> 71 72<body class="bg-white font-sora overflow-x-hidden"> 73 <!-- ââââââââââââââââââââââââââââââââââââââââââââââ 74 HEADER FIXO (herdado da index.html) 75 ââââââââââââââââââââââââââââââââââââââââââââââ --> 76 <header class="absolute top-0 left-0 w-full z-50"> 77 <!-- Top Bar --> 78 <div class="w-full border-b border-white/5 text-xs" style="background-color:#0C5961; color:#78A7A4;"> 79 <div class="w-full px-6 md:px-12 lg:px-10 xl:px-20 2xl:px-32 py-1.5 flex items-center justify-between"> 80 <a href="https://marvitel.conecte.ai/" target="_blank" 81 class="uppercase tracking-widest text-[10px] font-light" style="color:#78A7A4;">Assine Online</a> 82 <div class="flex items-center gap-4" style="color:#78A7A4;"> 83 <a href="https://api.whatsapp.com/send?phone=558006068075&text=Ol%C3%A1!%20Venho%20atrav%C3%A9s%20do%20site%20da%20Marvitel%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os%20que%20voc%C3%AAs%20oferecem." 84 target="_blank" 85 class="uppercase tracking-widest text-[10px] font-light hover:text-white transition-colors">0800 86 606 8075</a> 87 <a href="http://fb.com/marvitel.se" target="_blank" aria-label="Facebook" 88 style="color:#78A7A4;"><svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24"> 89 <path 90 d="M22 12A10 10 0 1 0 12 22v-7H9v-3h3V9.5C12 6.8 13.7 5 16.3 5c1.2 0 2.4.2 2.4.2v2.6h-1.4c-1.4 0-1.8.9-1.8 1.8V12h3.1l-.5 3H15.5v7A10 10 0 0 0 22 12z" /> 91 </svg></a> 92 <a href="https://www.instagram.com/marvitel.se/" target="_blank" aria-label="Instagram" 93 style="color:#78A7A4;"><svg class="w-3 h-3 fill-current" viewBox="0 0 24 24"> 94 <path 95 d="M12 2.2c3.2 0 3.6 0 4.9.1 3.3.1 4.8 1.7 4.9 4.9.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 3.2-1.6 4.8-4.9 4.9-1.3.1-1.6.1-4.9.1s-3.6 0-4.8-.1C3.7 21.6 2.2 20 2.1 16.8 2 15.6 2 15.2 2 12s0-3.6.1-4.8C2.2 3.9 3.8 2.3 7.2 2.2c1.2-.1 1.6-.1 4.8-.1zm0-2.2C8.7 0 8.3 0 7.1.1 2.7.3.3 2.7.1 7.1 0 8.3 0 8.7 0 12s0 3.7.1 4.9c.2 4.4 2.6 6.8 7 7C8.3 24 8.7 24 12 24s3.7 0 4.9-.1c4.4-.2 6.8-2.6 7-7 .1-1.2.1-1.6.1-4.9s0-3.7-.1-4.9C23.7 2.7 21.3.3 16.9.1 15.7 0 15.3 0 12 0zm0 5.8a6.2 6.2 0 1 0 0 12.4A6.2 6.2 0 0 0 12 5.8zm0 10.2a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-11.8a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z" /> 96 </svg></a> 97 <a href="https://www.linkedin.com/company/marvitel" target="_blank" aria-label="LinkedIn" 98 style="color:#78A7A4;"><svg class="w-3 h-3 fill-current" viewBox="0 0 24 24"> 99 <path 100 d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45C23.21 24 24 23.23 24 22.28V1.72C24 .77 23.21 0 22.22 0z" /> 101 </svg></a> 102 </div> 103 </div> 104 </div> 105 <!-- Navbar --> 106 <nav id="navbar" 107 class="w-full bg-transparent px-6 md:px-12 lg:px-10 xl:px-20 2xl:px-32 py-4 flex items-center justify-between transition-all duration-300"> 108 <div class="flex-1 flex justify-start"> 109 <a href="../index.html" class="flex-shrink-0"> 110 <img src="../img/institucional/logo [email protected]" alt="Marvitel" 111 class="h-3 md:h-4 lg:h-4 object-contain" id="nav-logo" /> 112 </a> 113 </div> 114 <ul class="hidden lg:flex items-center gap-8 text-sm font-light text-rio-sergipe"> 115 <li><a href="../index.html" 116 class="hover:text-azul-tradicao transition-colors duration-200">InÃcio</a></li> 117 <li class="group"> 118 <a href="#" 119 class="py-6 -my-6 hover:text-azul-tradicao transition-colors duration-200 flex items-center gap-1 relative z-10"> 120 Soluções 121 <svg class="w-2.5 h-2.5 transition-transform duration-300 group-hover:rotate-180" fill="none" 122 stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> 123 <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /> 124 </svg> 125 </a> 126 <div 127 class="absolute left-0 top-full w-full opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-40 pointer-events-none group-hover:pointer-events-auto pt-2"> 128 <div 129 class="bg-white/95 backdrop-blur-xl border-t border-mangue/20 shadow-2xl overflow-hidden pb-8 relative pointer-events-auto"> 130 <div class="max-w-[1400px] mx-auto px-6 md:px-12 lg:px-10 xl:px-20 2xl:px-32 pt-10 pb-6"> 131 <div class="grid grid-cols-12 gap-8 text-left"> 132 <div 133 class="col-span-12 lg:col-span-4 space-y-4 pr-12 lg:border-r border-rio-sergipe/5"> 134 <h2 class="text-2xl font-semibold text-rio-sergipe leading-tight">Soluções</h2> 135 <p class="text-sm text-rio-sergipe/60 leading-relaxed font-light">Conectividade 136 e tecnologia para empresas, provedores, eventos e condomÃnios, com 137 desempenho, estabilidade e soluções que se adaptam à sua necessidade.</p> 138 <a href="https://api.whatsapp.com/se
138nd?phone=558006068075&text=Ol%C3%A1!%20Venho%20atrav%C3%A9s%20do%20site%20da%20Marvitel%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os%20que%20voc%C3%AAs%20oferecem." 139 target="_blank" 140 class="inline-block bg-azul-tradicao text-white text-[10px] font-semibold px-6 py-2.5 rounded-lg hover:bg-rio-sergipe transition-all duration-300 shadow-lg shadow-azul-tradicao/20">Saiba 141 mais</a> 142 </div> 143 <div class="col-span-12 lg:col-span-8"> 144 <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-left"> 145 <div class="space-y-4"> 146 <h3 147 class="text-[9px] font-bold text-rio-sergipe uppercase tracking-[0.2em] mb-2"> 148 Conectividade</h3> 149 <ul class="space-y-3"> 150 <li><a href="link-dedicado.html" 151 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Link 152 Dedicado</a></li> 153 <li><a href="banda-larga.html" 154 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Banda 155 Larga</a></li> 156 <li><a href="hotspot.html" 157 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Hotspot</a> 158 </li> 159 <li><a href="wifi-corporativo.html" 160 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Wifi 161 Corporativo</a></li> 162 <li><a href="link-temporario-eventos.html" 163 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Link 164 Temporário para Eventos</a></li> 165 <li><a href="vpn.html" 166 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">VPN</a> 167 </li> 168 <li><a href="mpls.html" 169 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">MPLS</a> 170 </li> 171 </ul> 172 </div> 173 <div class="space-y-4"> 174 <h3 175 class="text-[9px] font-bold text-rio-sergipe uppercase tracking-[0.2em] mb-2"> 176 Telefonia</h3> 177 <ul class="space-y-3"> 178 <li><a href="troncos-sip.html" 179 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Troncos 180 SIP</a></li> 181 <li><a href="pabx-ip-em-nuvem.html" 182 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">PABX 183 IP em Nuvem</a></li> 184 <li><a href="interfonia.html" 185 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Interfonia</a> 186 </li> 187 </ul> 188 </div> 189 <div class="space-y-4"> 190 <h3 191 class="text-[9px] font-bold text-rio-sergipe uppercase tracking-[0.2em] mb-2"> 192 Segurança e TI</h3> 193 <ul class="space-y-3"> 194 <li><a href="sistema-cftv.html" 195 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Sistema 196 de CFTV</a></li> 197 <li><a href="anti-ddos.html" 198 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Anti 199 DDoS</a></li> 200 <li><a href="cloud-computing.html" 201 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Cloud 202 Computing</a></li> 203 <li><a href="dns-reverso-autoritativo.html" 204 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">DNS 205 Reverso / Autoritativo</a></li> 206 <li><a href="hospedagem.html" 207 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Hospedagem</a> 208 </li> 209 <li><a href="colocation.html" 210 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Colocation</a> 211 </li> 212 <li><a href="cloud-backup.html" 213 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Cloud 214 Backup</a></li> 215 </ul> 216 </div> 217 <div class="space-y-4"> 218 <h3 219 class="text-[9px] font-bold text-rio-sergipe uppercase tracking-[0.2em] mb-2"> 220 Infraestrutura de Rede</h3> 221 <ul class="space-y-3"> 222 <li><a href="cabeamento-estruturado.html" 223 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Cabeamento 224 Estruturado</a></li> 225 <li><a href="redes-ftth.html" 226 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Redes 227 FTTh</a></li> 228 <li><a href="certificacao-de-redes.html" 229 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Certificação 230 de Redes</a></li> 231 <li><a href="projeto-de-redes.html" 232 class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Projeto 233 de Redes</a></li> 234 </ul> 235 </div> 236 </div> 237 </div> 238 </div> 239 </div> 240 <div class="max-w-[1400px] mx-auto px-6 md:px-12 lg:px-10 xl:px-20 2xl:px-32 pt-4"> 241 <div class="bg-rio-sergipe/5 py-3 px-8 rounded-xl flex justify-between items-center"> 242 <p class="text-[10px] text-rio-sergipe/60 italic text-left">Não sabe qual solução é 243 a melhor para você? <a 244 href="https://api.whatsapp.com/se
244nd?phone=558006068075&text=Ol%C3%A1!%20Venho%20atrav%C3%A9s%20do%20site%20da%20Marvitel%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os%20que%20voc%C3%AAs%20oferecem." 245 target="_blank" 246 class="text-rio-sergipe/60 font-semibold underline decoration-rio-sergipe/30 underline-offset-4 hover:text-rio-sergipe/80 transition-colors font-sora">Entre 247 em contato conosco</a></p> 248 </div> 249 </div> 250 </div> 251 </div> 252 </li> 253 <li><a href="../sobre.html" 254 class="hover:text-azul-tradicao transition-colors duration-200">Sobre</a> 255 </li> 256 <li><a href="../contato.html" 257 class="hover:text-azul-tradicao transition-colors duration-200">Fale Conosco</a> 258 </li> 259 <li><a href="../marvitech.html" 260 class="hover:text-azul-tradicao transition-colors duration-200">Marvitech</a></li> 261 <li><a href="../contratos.html" 262 class="hover:text-azul-tradicao transition-colors duration-200">Contratos</a></li> 263 264 <!-- Dropdown Assine --> 265 <li class="group relative flex items-center"> 266 <a href="#" 267 class="inline-flex items-center gap-1.5 px-5 py-1 rounded-full text-white bg-azul-tradicao hover:bg-[#158995] transition-colors duration-300 font-light text-xs border-none relative z-10" 268 style="padding: 5px 20px;"> 269 Assine 270 <svg class="w-2.5 h-2.5 transition-transform duration-300 group-hover:rotate-180" fill="none" 271 stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> 272 <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /> 273 </svg> 274 </a> 275 <div 276 class="absolute left-1/2 -translate-x-1/2 top-full w-[280px] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-40 pt-4 pointer-events-none group-hover:pointer-events-auto"> 277 <div 278 class="bg-white/95 backdrop-blur-xl border-t border-mangue/20 shadow-2xl rounded-xl overflow-hidden p-6 text-left relative pointer-events-auto"> 279 <h3 class="text-[17px] font-semibold text-rio-sergipe mb-6 leading-tight">Faça parte dessa 280 experiência.</h3> 281 <div class="mb-5"> 282 <a href="https://marvitel.conecte.ai/" target="_blank" 283 class="flex items-center gap-3 text-[14px] text-rio-sergipe hover:text-azul-tradicao transition-colors font-medium"> 284 <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="none" stroke="currentColor" 285 stroke-width="1.5" viewBox="0 0 24 24"> 286 <path stroke-linecap="round" stroke-linejoin="round" 287 d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" /> 288 </svg> 289 Assinar online 290 </a> 291 </div> 292 <div class="mb-5"> 293 <h4 class="text-[10px] font-bold text-azul-tradicao uppercase tracking-widest mb-3"> 294 WHATSAPP</h4> 295 <a href="https://api.whatsapp.com/se
295nd?phone=558006068075&text=Ol%C3%A1!%20Venho%20atrav%C3%A9s%20do%20site%20da%20Marvitel%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os%20que%20voc%C3%AAs%20oferecem." 296 target="_blank" 297 class="flex items-center gap-3 text-[14px] text-rio-sergipe hover:text-azul-tradicao transition-colors font-medium"> 298 <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="currentColor" 299 viewBox="0 0 24 24"> 300 <path 301 d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" /> 302 <path 303 d="M12.004 0C5.385 0 0 5.385 0 12.004c0 2.115.551 4.182 1.597 6.002L.037 23.963l6.096-1.597A11.968 11.968 0 0012.004 24c6.618 0 12-5.385 12-12.004C24 5.385 18.622 0 12.004 0zM12.004 22c-1.895 0-3.753-.51-5.383-1.476l-.386-.228-4 1.048 1.068-3.901-.25-.398A9.972 9.972 0 012.003 12c0-5.514 4.486-10 10.001-10 5.513 0 10 4.486 10 10S17.518 22 12.004 22z" /> 304 </svg> 305 0800 606 8075 306 </a> 307 </div> 308 <div class="border-t border-rio-sergipe/10 my-4"></div> 309 <div class="mb-5"> 310 <h4 class="text-[10px] font-bold text-azul-tradicao uppercase tracking-widest mb-3"> 311 LIGAMOS PARA VOCÃ</h4> 312 <button type="button" onclick="openLeadModal()" 313 class="flex items-center gap-3 text-[14px] text-rio-sergipe hover:text-azul-tradicao transition-colors font-medium outline-none"> 314 <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="none" stroke="currentColor" 315 stroke-width="1.5" viewBox="0 0 24 24"> 316 <path stroke-linecap="round" stroke-linejoin="round" 317 d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /> 318 </svg> 319 Envie seus dados 320 </button> 321 </div> 322 <div class="border-t border-rio-sergipe/10 my-4"></div> 323 <div class="mb-2"> 324 <h4 class="text-[10px] font-bold text-azul-tradicao uppercase tracking-widest mb-3"> 325 OUVIDORIA</h4> 326 <a href="tel:08006068075" 327 class="flex items-center gap-3 text-[14px] text-rio-sergipe hover:text-azul-tradicao transition-colors font-medium mb-3"> 328 <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="none" stroke="currentColor" 329 stroke-width="1.5" viewBox="0 0 24 24"> 330 <path stroke-linecap="round" stroke-linejoin="round" 331 d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /> 332 </svg> 333 0800 606 8075 334 </a> 335 <a href="mailto:[email protected]" 336 class="flex items-center gap-3 text-[14px] text-rio-sergipe hover:text-azul-tradicao transition-colors font-medium"> 337 <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="none" stroke="currentColor" 338 stroke-width="1.5" viewB
338ox="0 0 24 24"> 339 <path stroke-linecap="round" stroke-linejoin="round" 340 d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> 341 </svg> 342 [email protected] 343 </a> 344 </div> 345 </div> 346 </div> 347 </li> 348 349 </ul> 350 <div class="flex-1 flex justify-end items-center gap-3"> 351 <a href="https://marvitel.conecte.ai/" target="_blank" 352 class="inline-flex items-center gap-2 border-[0.9px] border-rio-sergipe/60 text-rio-sergipe text-xs font-thin px-5 py-1 rounded-full hover:border-azul-tradicao hover:text-azul-tradicao transition-all duration-300 whitespace-nowrap"> 353 <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="1.2" viewBox="0 0 24 24"> 354 <path stroke-linecap="round" stroke-linejoin="round" 355 d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /> 356 </svg> 357 Ãrea do Assinante 358 </a> 359 <button id="menu-btn" class="lg:hidden text-rio-sergipe focus:outline-none" aria-label="Abrir menu"> 360 <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> 361 <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" /> 362 </svg> 363 </button> 364 </div> 365 </nav> 366 <!-- Mobile Menu --> 367 <div id="mobile-menu" class="hidden lg:hidden bg-white/95 backdrop-blur-md text-rio-sergipe text-sm font-light"> 368 <ul class="flex flex-col divide-y divide-rio-sergipe/10"> 369 <li><a href="../index.html" 370 class="block px-6 py-3 hover:text-azul-tradicao transition-colors">InÃcio</a> 371 </li> 372 <li> 373 <button onclick="document.getElementById('mobile-solutions-submenu').classList.toggle('hidden')" 374 class="w-full flex items-center justify-between px-6 py-3 hover:text-azul-tradicao transition-colors focus:outline-none text-left"> 375 <span>Soluções</span> 376 <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 377 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> 378 </svg> 379 </button> 380 <div id="mobile-solutions-submenu" class="hidden bg-rio-sergipe/5 px-8 py-4 space-y-6"> 381 <div class="text-left"> 382 <h4 class="text-[10px] font-bold text-rio-sergipe uppercase tracking-widest mb-3"> 383 Conectividade</h4> 384 <ul class="space-y-3 opacity-70"> 385 <li><a href="link-dedicado.html" class="block hover:text-azul-tradicao">Link 386 Dedicado</a></li> 387 <li><a href="banda-larga.html" class="block hover:text-azul-tradicao">Banda Larga</a> 388 </li> 389 <li><a href="hotspot.html" class="block hover:text-azul-tradicao">Hotspot</a></li> 390 <li><a href="wifi-corporativo.html" class="block hover:text-azul-tradicao">Wifi 391 Corporativo</a></li> 392 <li><a href="link-temporario-eventos.html" class="block hover:text-azul-tradicao">Link 393 Temporário para Eventos</a></li> 394 <li><a href="vpn.html" class="block hover:text-azul-tradicao">VPN</a></li> 395 <li><a href="mpls.html" class="block hover:text-azul-tradicao">MPLS</a></li> 396 </ul> 397 </div> 398 <div class="text-left"> 399 <h4 class="text-[10px] font-bold text-rio-sergipe uppercase tracking-widest mb-3">Telefonia 400 </h4> 401 <ul class="space-y-3 opacity-70"> 402 <li><a href="troncos-sip.html" class="block hover:text-azul-tradicao">Troncos SIP</a> 403 </li> 404 <li><a href="pabx-ip-em-nuvem.html" class="block hover:text-azul-tradicao">PABX IP em 405 Nuvem</a></li> 406 <li><a href="interfonia.html" class="block hover:text-azul-tradicao">Interfonia</a></li> 407 </ul> 408 </div> 409 <div class="text-left"> 410 <h4 class="text-[10px] font-bold text-rio-sergipe uppercase tracking-widest mb-3">Segurança 411 e TI</h4> 412 <ul class="space-y-3 opacity-70"> 413 <li><a href="sistema-cftv.html" class="block hover:text-azul-tradicao">Sistema de 414 CFTV</a></li> 415 <li><a href="anti-ddos.html" class="block hover:text-azul-tradicao">Anti DDoS</a></li> 416 <li><a href="cloud-computing.html" class="block hover:text-azul-tradicao">Cloud 417 Computing</a></li> 418 <li><a href="dns-reverso-autoritativo.html" class="block hover:text-azul-tradicao">DNS 419 Reverso / Autoritativo</a></li> 420 <li><a href="hospedagem.html" class="block hover:text-azul-tradicao">Hospedagem</a></li> 421 <li><a href="colocation.html" class="block hover:text-azul-tradicao">Colocation</a></li> 422 <li><a href="cloud-backup.html" class="block hover:text-azul-tradicao">Cloud Backup</a> 423 </li> 424 </ul> 425 </div> 426 <div class="text-left"> 427 <h4 class="text-[10px] font-bold text-rio-sergipe uppercase tracking-widest mb-3"> 428 Infraestrutura de Rede</h4> 429 <ul class="space-y-3 opacity-70"> 430 <li><a href="cabeamento-estruturado.html" 431 class="block hover:text-azul-tradicao">
431Cabeamento Estruturado</a></li> 432 <li><a href="redes-ftth.html" class="block hover:text-azul-tradicao">Redes FTTh</a></li> 433 <li><a href="certificacao-de-redes.html" 434 class="block hover:text-azul-tradicao">Certificação de Redes</a></li> 435 <li><a href="projeto-de-redes.html" class="block hover:text-azul-tradicao">Projeto de 436 Redes</a></li> 437 </ul> 438 </div> 439 </div> 440 </li> 441 <li><a href="../sobre.html" 442 class="block px-6 py-3 hover:text-azul-tradicao transition-colors">Sobre</a></li> 443 <li><a href="../contato.html" 444 class="block px-6 py-3 hover:text-azul-tradicao transition-colors">Fale Conosco</a></li> 445 <li><a href="../marvitech.html" 446 class="block px-6 py-3 hover:text-azul-tradicao transition-colors">Marvitech</a></li> 447 <li><a href="../contratos.html" 448 class="block px-6 py-3 hover:text-azul-tradicao transition-colors">Contratos</a></li> 449 450 <!-- Mobile Assine Submenu --> 451 <li> 452 <button onclick="document.getElementById('mobile-assine-submenu').classList.toggle('hidden')" 453 class="w-full flex items-center justify-between px-6 py-3 hover:text-azul-tradicao transition-colors focus:outline-none"> 454 <span>Assine</span> 455 <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 456 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> 457 </svg> 458 </button> 459 <div id="mobile-assine-submenu" class="hidden bg-rio-sergipe/5 px-8 py-5 space-y-4"> 460 <div class="text-[13px] font-semibold text-azul-tradicao mb-2">Faça parte dessa experiência. 461 </div> 462 <a href="https://marvitel.conecte.ai/" target="_blank" 463 class="flex items-center gap-3 py-1 text-rio-sergipe/80 hover:text-azul-tradicao transition-colors font-light"> 464 <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="none" stroke="currentColor" 465 stroke-width="1.5" viewBox="0 0 24 24"> 466 <path stroke-linecap="round" stroke-linejoin="round" 467 d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" /> 468 </svg> 469 Assinar online 470 </a> 471 <a href="https://api.whatsapp.com/send?phone=558006068075&text=Ol%C3%A1!%20Venho%20atrav%C3%A9s%20do%20site%20da%20Marvitel%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os%20que%20voc%C3%AAs%20oferecem." 472 target="_blank" 473 class="flex items-center gap-3 py-1 text-rio-sergipe/80 hover:text-azul-tradicao transition-colors font-light"> 474 <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="currentColor" viewBox="0 0 24 24"> 475 <path 476 d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479
4760 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" /> 477 <path 478 d="M12.004 0C5.385 0 0 5.385 0 12.004c0 2.115.551 4.182 1.597 6.002L.037 23.963l6.096-1.597A11.968 11.968 0 0012.004 24c6.618 0 12-5.385 12-12.004C24 5.385 18.622 0 12.004 0zM12.004 22c-1.895 0-3.753-.51-5.383-1.476l-.386-.228-4 1.048 1.068-3.901-.25-.398A9.972 9.972 0 012.003 12c0-5.514 4.486-10 10.001-10 5.513 0 10 4.486 10 10S17.518 22 12.004 22z" /> 479 </svg> 480 WhatsApp: 0800 606 8075 481 </a> 482 <button onclick="openLeadModal()" 483 class="w-full flex items-center gap-3 py-1 text-rio-sergipe/80 hover:text-azul-tradicao transition-colors font-light outline-none text-left"> 484 <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="none" stroke="currentColor" 485 stroke-width="1.5" viewBox="0 0 24 24"> 486 <path stroke-linecap="round" stroke-linejoin="round" 487 d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /> 488 </svg> 489 Envie seus dados 490 </button> 491 <div class="border-t border-rio-sergipe/20 pt-4 space-y-2"> 492 <div class="text-[10px] font-bold text-azul-tradicao uppercase tracking-widest mb-2"> 493 Ouvidoria</div> 494 <a href="tel:08006068075" 495 class="flex items-center gap-3 text-[13px] text-rio-sergipe/60 hover:text-azul-tradicao transition-colors"> 496 <svg class="w-3.5 h-3.5 text-azul-tradicao shrink-0" fill="none" stroke="currentColor" 497 stroke-width="1.5" viewBox="0 0 24 24"> 498 <path stroke-linecap="round" stroke-linejoin="round" 499 d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /> 500 </svg> 501 0800 606 8075 502 </a> 503 <a href="mailto:[email protected]" 504 class="flex items-center gap-3 text-[13px] text-rio-sergipe/60 hover:text-azul-tradicao transition-colors"> 505 <svg class="w-3.5 h-3.5 text-azul-tradicao shrink-0" fill="none" stroke="currentColor" 506 stroke-width="1.5" viewBox="0 0 24 24"> 507 <path stroke-linecap="round" stroke-linejoin="round" 508 d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> 509 </svg> 510 [email protected] 511 </a> 512 </div> 513 </div> 514 </li> 515 516 <li><a href="https://marvitel.conecte.ai/" target="_blank" 517 class="block px-6 py-3 text-azul-tradicao">Ãrea do Assinante</a></li> 518 </ul> 519 </div> 520 </header> 521 522 <main> 523 <!-- ââââââââââââââââââââââââââââââââââââââââââââââ 524 HERO SECTION: HOSPEDAGEM 525 ââââââââââââââââââââââââââââââââââââââââââââââ --> 526 <section class="hospedagem-hero pt-32 pb-20 md:pt-60 md:pb-32"> 527 <!-- Imagem de fundo com gradiente visÃvel --> 528 529 530 <div 531 class="max-w-6xl mx-auto px-6 md:px-16 lg:px-20 hospedagem-hero-content w-full flex flex-col md:flex-row items-center justify-between gap-12"> 532 <div class="max-w-2xl ">
533 <span 534 class="text-[10px] md:text-[11px] font-medium tracking-[0.2em] text-rio-sergipe/60 uppercase mb-3 block"> 535 Conectividade 536 </span> 537 <h1 class="text-4xl md:text-5xl lg:text-5xl font-semibold text-rio-sergipe mb-6 leading-tight"> 538 Link Dedicado 539 </h1> 540 <p class="text-sm md:text-base text-rio-sergipe/70 font-light leading-relaxed mb-10 max-w-lg"> 541 Conexão de internet exclusiva e de alta performance com garantia de 100% da banda contratada. 542 </p> 543 <a href="https://api.whatsapp.com/send?phone=558006068075&text=Ol%C3%A1!%20Venho%20atrav%C3%A9s%20do%20site%20da%20Marvitel%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os%20que%20voc%C3%AAs%20oferecem." 544 target="_blank" 545 class="inline-block bg-azul-tradicao text-white text-xs md:text-sm font-semibold px-10 py-3 rounded-lg hover:bg-rio-sergipe transition-all duration-300 shadow-xl shadow-azul-tradicao/30"> 546 Contrate 547 </a> 548 </div> 549 <!-- O tamanho máximo dessa coluna estava travando a imagem. Agora você pode aumentar este 'max-width' abaixo (ex: 500px, 600px) para permitir que ela ocupe mais espaço. --> 550 <div class="hidden md:flex w-full items-center justify-end" style="max-width: 1000px;"> 551 <!-- Utilize este width para ditar o quanto ela preenche o limite acima --> 552 <img src="../img/assets/img-servicos/LINK DEDICADO.png" alt="Link Dedicado" 553 class="h-auto object-contain" style="width: 380px;"> 554 </div> 555 </div> 556 </section> 557 558 <!-- ââââââââââââââââââââââââââââââââââââââââââââââ 559 CONTEÃDO DESCRITIVO 560 ââââââââââââââââââââââââââââââââââââââââââââââ --> 561 <section class="bg-white py-16 md:py-24"> 562 <div class="max-w-6xl mx-auto px-6 md:px-16 lg:px-20"> 563 <div 564 class="bg-background/50 rounded-3xl p-8 md:p-12 border border-azul-tradicao/10 flex flex-col md:flex-row items-center gap-10 md:gap-16 mb-20 md:mb-32 shadow-sm max-w-4xl"> 565 <!-- Novo Ãcone: Servidor --> 566 <div 567 class="flex-shrink-0 w-20 h-20 bg-white rounded-2xl flex items-center justify-center text-azul-tradicao shadow-md border border-azul-tradicao/5"> 568 <svg width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.2"
569 viewBox="0 0 24 24"> 570 <path stroke-linecap="round" stroke-linejoin="round" 571 d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" /> 572 </svg> 573 </div> 574 575 <!-- Texto informativo --> 576 <div class="flex-1"> 577 <p 578 class="text-sm md:text-base text-rio-sergipe/80 font-light leading-relaxed text-justify md:text-left"> 579 Com o nosso <strong class="text-azul-tradicao font-medium">Link Dedicado</strong>, sua 580 empresa tem uma via exclusiva de conexão. Diferente da banda larga compartilhada, sua rede 581 tem rota direta e alto desempenho. 582 </p> 583 </div> 584 </div> 585 586 <!-- ââ Vantagens da Hospedagem ââ --> 587 <div class="mb-20 md:mb-32"> 588 <h2 class="text-3xl md:text-4xl font-semibold text-rio-sergipe mb-12 text-center md:text-left"> 589 Vantagens:</h2> 590 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> 591 <!-- Vantagem 1 --> 592 <div class="bg-background rounded-2xl py-14 px-8 border border-gray-100 flex flex-col h-full"> 593 <div 594 class="w-12 h-12 bg-white rounded-xl flex items-center justify-center text-azul-tradicao mb-6 shadow-sm"> 595 <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" 596 stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"> 597 <circle cx="12" cy="12" r="10" /> 598 <polygon points="13 6 7 13 12 13 11 18 17 11 12 11 13 6" fill="currentColor" /> 599 </svg> 600 </div> 601 <h3 class="text-lg font-semibold text-rio-sergipe mb-4">Baixa Latência</h3> 602 <p class="text-sm text-rio-sergipe/70 font-light leading-relaxed"> 603 Conexão estável e com resposta rápida, ideal para ambientes exigentes, chamadas em tempo 604 real e aplicações em nuvem. 605 </p> 606 </div> 607 608 <!-- Vantagem 2 --> 609 <div class="bg-background rounded-2xl py-14 px-8 border border-gray-100 flex flex-col h-full"> 610 <div 611 class="w-12 h-12 bg-white rounded-xl flex items-center justify-center text-azul-tradicao mb-6 shadow-sm"> 612 <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5"
613 viewBox="0 0 24 24"> 614 <path stroke-linecap="round" stroke-linejoin="round" 615 d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /> 616 </svg> 617 </div> 618 <h3 class="text-lg font-semibold text-rio-sergipe mb-4">100% de Garantia de Banda</h3> 619 <p class="text-sm text-rio-sergipe/70 font-light leading-relaxed"> 620 Receba a velocidade exata contratada, sem oscilações em horários de pico. 621 </p> 622 </div> 623 624 <!-- Vantagem 3 --> 625 <div 626 class="bg-background rounded-2xl py-14 px-8 border border-gray-100 flex flex-col h-full md:col-span-2 md:w-[calc(50%-1rem)] md:mx-auto lg:col-span-1 lg:w-full"> 627 <div 628 class="w-12 h-12 bg-white rounded-xl flex items-center justify-center text-azul-tradicao mb-6 shadow-sm"> 629 <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" 630 stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"> 631 <path 632 d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /> 633 <path d="M14.05 2a9 9 0 0 1 8 7.94" /> 634 <path d="M14.05 6A5 5 0 0 1 18 10" /> 635 </svg> 636 </div> 637 <h3 class="text-lg font-semibold text-rio-sergipe mb-4">Suporte Proativo</h3> 638 <p class="text-sm text-rio-sergipe/70 font-light leading-relaxed"> 639 Atendimento empresarial prioritário, 24 horas por dia, 7 dias por semana. 640 </p> 641 </div> 642 </div> 643 </div> 644 645 <!-- ââ Resumo Final e CTA ââ --> 646 <div 647 class="bg-rio-sergipe rounded-[2rem] p-10 md:p-16 text-center text-white relative overflow-hidden shadow-2xl"> 648 <!-- Elemento decorativo sutil --> 649 <div class="absolute -top-24 -right-24 w-64 h-64 bg-azul-tradicao/10 rounded-full blur-3xl"></div> 650 <div class="absolute -bottom-24 -left-24 w-64 h-64 bg-azul-tradicao/10 rounded-full blur-3xl"></div> 651 652 <div class="relative z-10 max-w-3xl mx-auto"> 653 <p class="text-base font-light leading-relaxed mb-10"> 654 Para empresas e sistemas exigentes, o <strong class="text-mangue">Link Dedicado</strong> é 655 fundamental. 656 </p> 657 658 <div class="flex flex-col items-center gap-3"> 659 <span class="text-sm uppercase tracking-widest text-mangue opacity-80">Fale com um 660 consultor</span> 661 <a href="tel:08006068075" 662 class="text-2xl md:text-3xl font-bold hover:text-mangue transition-colors duration-300"> 663 0800 606 8075 664 </a> 665 <div class="mt-4 flex gap-4"> 666 <a href="https://api.whatsapp.com/send?phone=558006068075&text=Ol%C3%A1!%20Venho%20atrav%C3%A9s%20do%20site%20da%20Marvitel%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os%20que%20voc%C3%AAs%20oferecem." 667 target="_blank" 668 class="inline-flex items-center gap-2 bg-azul-tradicao px-8 py-3 rounded-lg font-semibold text-sm hover:scale-105 transition-transform shadow-lg"> 669 <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"> 670 <path 671 d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.
671198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.662c1.72.937 3.659 1.432 5.631 1.433h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413" /> 672 </svg> 673 Atendimento via WhatsApp 674 </a> 675 </div> 676 </div> 677 </div> 678 </div> 679 </div> 680 </section> 681 </main> 682 683 <!-- ââââââââââââââââââââââââââââââââââââââââââââââ 684 FOOTER (herdado da index.html) 685 ââââââââââââââââââââââââââââââââââââââââââââââ --> 686 <footer style="background-color:#e8f3f5;"> 687 <div class="max-w-6xl mx-auto px-4 md:px-10 lg:px-16 pt-12 pb-8"> 688 <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-8 md:gap-6"> 689 <div> 690 <div class="text-noite text-xs font-semibold mb-4 tracking-wide">Para sua empresa</div> 691 <ul class="flex flex-col gap-2.5"> 692 <li><a href="link-dedicado.html" 693 class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Internet 694 Dedicada</a></li> 695 <li><a href="banda-larga.html" 696 class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Banda 697 Larga</a></li> 698 <li><a href="sistema-cftv.html" 699 class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">CFTV 700 Inteligente</a></li> 701 <li><a href="cloud-computing.html" 702 class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Cloud 703 Computing</a></li> 704 </ul> 705 </div> 706 <div> 707 <div class="text-noite text-xs font-semibold mb-4 tracking-wide">Para seu condomÃnio</div> 708 <ul class="flex flex-col gap-2.5"> 709 <li><a href="../index.html#condominios" 710 class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Planos</a> 711 </li> 712 <li><a href="interfonia.html" 713 class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Interfonia</a> 714 </li> 715 </ul> 716 </div> 717 <div> 718 <div class="text-noite text-xs font-semibold mb-4 tracking-wide">Para seu evento</div> 719 <ul class="flex flex-col gap-2.5"> 720 <li><a href="link-temporario-eventos.html" 721 class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Link 722 Temporário</a></li> 723 <li><a href="hotspot.html" 724 class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Hotspot</a> 725 </li> 726 </ul> 727 </div> 728 <div> 729 <div class="text-noite text-xs font-semibold mb-4 tracking-wide">Institucional</div> 730 <ul class="flex flex-col gap-2.5"> 731 <li><a href="../sobre.html" 732 class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Nossa 733 história</a> 734 </li> 735 <li><a href="https://drive.google.com/drive/folders/1t_cE-ZeIk5UF4nndOMn2-QEHdc0KjTVW?usp=sharing" 736 target="_blank" 737 class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Portfólio</a> 738 </li> 739 <li><a href="../contato.html" 740 class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Fale 741 Conosco</a> 742 </li> 743 </ul> 744 </div> 745 <div> 746 <div class="text-noite text-xs font-semibold mb-4 tracking-wide">Atendimento</div> 747 <ul class="flex flex-col gap-2.5"> 748 <li><a href="tel:08006068075" 749 class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">0800 750 606 8075</a></li> 751 <li><a href="tel:08006068075" 752 class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Ligar 753 pra nós</a></li> 754 </ul> 755 <div class="mt-4"> 756 <div class="text-noite/70 text-[10px] font-semibold mb-1">Horário de funcionamento:</div> 757 <div class="text-chao-batido text-[10px] font-light leading-relaxed">Suporte â 24 758 horas<br>Administrativo â Seg à Sex 8h à s 18h</div> 759 </div> 760 </div> 761 </div> 762 </div> 763 <div class="border-t border-noite/15"> 764 <div 765 class="max-w-6xl mx-auto px-4 md:px-10 lg:px-16 py-5 flex flex-col md:flex-row items-center justify-between gap-3"> 766 <div class="flex flex-wrap items-center gap-4"> 767 <a href="../politica-privacidade.html" 768 class="text-chao-batido text-[10px] hover:text-azul-tradicao transition-colors font-light">PolÃtica 769 de Privacidade e Termos de Uso</a>
770 <span class="text-noite/20 text-[10px]">|</span> 771 <a href="../lgpd.html" 772 class="text-chao-batido text-[10px] hover:text-azul-tradicao transition-colors font-light">LGPD</a> 773 <span class="text-noite/20 text-[10px]">|</span> 774 <a href="../contratos.html" 775 class="text-chao-batido text-[10px] hover:text-azul-tradicao transition-colors font-light">Contratos</a> 776 </div> 777 <div class="flex items-center gap-1.5 text-chao-batido text-[10px] font-light"> 778 <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="1.5" 779 viewBox="0 0 24 24"> 780 <path stroke-linecap="round" stroke-linejoin="round" 781 d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> 782 </svg> 783 <a href="mailto:[email protected]" 784 class="hover:text-azul-tradicao transition-colors">[email protected]</a> 785 </div> 786 </div> 787 </div> 788 <div class="border-t border-noite/30" style="background-color: #474F54;"> 789 <div 790 class="max-w-6xl mx-auto px-4 md:px-10 lg:px-16 py-12 flex flex-col md:flex-row items-center justify-between gap-4"> 791 <img src="../img/institucional/logotipo negativo.png" alt="Marvitel" class="h-3 object-contain" 792 onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"> 793 <span class="text-azul-tradicao text-sm font-semibold tracking-widest" 794 style="display:none;">MARVITEL</span> 795 <p class="text-white text-[10px] font-light text-center">©2026 Marvitel â Todos os direitos reservados. 796 CNPJ: 16.499.665/0001-21</p> 797 <div class="flex items-center gap-4"> 798 <a href="http://fb.com/marvitel.se" target="_blank" aria-label="Facebook" class="text-white"><svg 799 class="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24"> 800 <path 801 d="M22 12A10 10 0 1 0 12 22v-7H9v-3h3V9.5C12 6.8 13.7 5 16.3 5c1.2 0 2.4.2 2.4.2v2.6h-1.4c-1.4 0-1.8.9-1.8 1.8V12h3.1l-.5 3H15.5v7A10 10 0 0 0 22 12z" /> 802 </svg></a> 803 <a href="https://www.instagram.com/marvitel.se/" target="_blank" aria-label="Instagram" 804 class="text-white"><svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24"> 805 <path 806 d="M12 2.2c3.2 0 3.6 0 4.9.1 3.3.1 4.8 1.7 4.9 4.9.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 3.2-1.6 4.8-4.9 4.9-1.3.1-1.6.1-4.9.1s-3.6 0-4.8-.1C3.7 21.6 2.2 20 2.1 16.8 2 15.6 2 15.2 2 12s0-3.6.1-4.8C2.2 3.9 3.8 2.3 7.2 2.2c1.2-.1 1.6-.1 4.8-.1zm0-2.2C8.7 0 8.3 0 7.1.1 2.7.3.3 2.7.1 7.1 0 8.3 0 8.7 0 12s0 3.7.1 4.9c.2 4.4 2.6 6.8 7 7C8.3 24 8.7 24 12 24s3.7 0 4.9-.1c4.4-.2 6.8-2.6 7-7 .1-1.2.1-1.6.1-4.9s0-3.7-.1-4.9C23.7 2.7 21.3.3 16.9.1 15.7 0 15.3 0 12 0zm0 5.8a6.2 6.2 0 1 0 0 12.4A6.2 6.2 0 0 0 12 5.8zm0 10.2a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-11.8a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z" /> 807 </svg></a> 808 <a href="https://www.youtube.com/@marvitel-se" target="_blank" aria-label="YouTube" 809 class="text-white"><svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24"> 810 <path 811 d="M23.495 6.205a3.007 3.007 0 00-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 00.527 6.205a31.247 31.247 0 00-.522 5.805 31.247 31.247 0 00.522 5.783 3.007 3.007 0 002.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 002.088-2.088 31.247 31.247 0 00.5-5.783 31.247 31.247 0 00-.5-5.805zM9.609 15.601V8.408l6.264 3.602z" /> 812 </svg></a> 813 <a href="https://www.linkedin.com/company/marvitel" target="_blank" aria-label="LinkedIn" 814 class="text-white"><svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24"> 815 <path 816 d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45C23.21 24 24 23.23 24 22.28V1.72C24 .77 23.21 0 22.22 0z" /> 817 </svg></a> 818 </div> 819 </div> 820 </div> 821 </footer> 822 823 <!-- ââ Back to Top Button ââ --> 824 <button id="back-to-top" aria-label="Voltar ao topo" 825 class="fixed bottom-6 right-6 w-10 h-10 bg-azul-tradicao text-white rounded-full flex items-center justify-center opacity-0 transition-opacity duration-300 z-[100]"> 826 <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewB
826ox="0 0 24 24"> 827 <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" /> 828 </svg> 829 </button> 830 831
831<script src="../script.js"></script>
831 832
832<script> 833 // Ajuste da navbar ao scroll para esta página especÃfica (se necessário) 834 window.addEventListener('scroll', () => { 835 const nav = document.getElementById('navbar'); 836 const logo = document.getElementById('nav-logo'); 837 const backToTop = document.getElementById('back-to-top'); 838 839 if (window.scrollY > 50) { 840 nav.classList.add('bg-white/95', 'backdrop-blur-md', 'shadow-sm'); 841 nav.classList.remove('bg-transparent'); 842 nav.querySelectorAll('a, button').forEach(el => el.classList.add('text-rio-sergipe')); 843 backToTop.style.opacity = '1'; 844 } else { 845 nav.classList.remove('bg-white/95', 'backdrop-blur-md', 'shadow-sm'); 846 nav.classList.add('bg-transparent'); 847 backToTop.style.opacity = '0'; 848 } 849 }); 850 851 // Mobile menu toggle 852 const menuBtn = document.getElementById('menu-btn'); 853 const mobileMenu = document.getElementById('mobile-menu'); 854 if (menuBtn && mobileMenu) { 855 menuBtn.addEventListener('click', () => { 856 mobileMenu.classList.toggle('hidden'); 857 }); 858 } 859 </script>
859 860 861 <!-- Motion One JS e Inicialização Dinâmica --> 862
862<script type="module"> 863 import { animate, inView, stagger, spring } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm"; 864 865 document.addEventListener('DOMContentLoaded', () => { 866 // 1. Ampliando o radar para capturar Badges, Botões, Imagens e todos os textos do site 867 const selectors = [ 868 '#main-content h1', '#main-content h2', '#main-content h3', '#main-content h4', 869 '#main-content p', '#main-content ul:not(.faq-list)', 870 '#main-content img:not(.logo-item)', // remove apenas logos iterativas. Patterns poderão ser animados suavemente também! 871 '#main-content a.inline-flex', '#main-content button', '#main-content a.btn', 872 '#main-content .badge', '#main-content span.text-sm.font-semibold', 873 '.svc-card', '.plan-card', '.beneficio-card', '.faq-item' 874 ]; 875 876 document.querySelectorAll(selectors.join(', ')).forEach((el) => { 877 // Ignora navbar, rodapé explÃcito e elementos escondidos 878 if (el.closest('header') || el.closest('footer') || el.closest('#navbar') || window.getComputedStyle(el).display === 'none') return; 879 880 // Evita piscar/duplicar elementos internos de Cards (se o próprio card já vai animar subir, o parágrafo/Ãcone dentro dele não recebe animação isolada) 881 const parentCard = el.closest('.svc-card, .plan-card, .beneficio-card, .faq-item, .hero-slide'); 882 if (parentCard && el !== parentCard && !el.closest('.hero-slide')) return; 883 884 // Salvar a opacidade original projetada pelo layout (ex: opacity-20 sendo 0.2) 885 // Isso impede que a Engine force opacidade para 1 em 100% dos elementos cegamente. 886 el.dataset.targetOpacity = window.getComputedStyle(el).op
886acity || "1"; 887 888 if (el.tagName === 'H1' || el.tagName === 'H2') { 889 // Quebrador de palavras seguro para H1/H2 890 const wrapWords = (node) => { 891 if (node.nodeType === Node.TEXT_NODE) { 892 const words = node.textContent.split(/(\s+)/); 893 if (words.length <= 1 && node.textContent.trim() === '') return; 894 895 const fragment = document.createDocumentFragment(); 896 words.forEach(word => { 897 if (word.trim() === '') { 898 fragment.appendChild(document.createTextNode(word)); 899 } else { 900 const span = document.createElement('span'); 901 span.style.display = 'inline-block'; 902 span.style.opacity = '0'; 903 span.style.transform = 'translateY(10px)'; // Flutuar leve por palavra 904 span.style.willChange = 'transform, opacity'; 905 span.className = 'fstr-word'; 906 span.textContent = word; 907 fragment.appendChild(span); 908 } 909 }); 910 node.parentNode.replaceChild(fragment, node); 911 } else if (node.nodeType === Node.ELEMENT_NODE) { 912 if (node.tagName !== 'BR') { 913 Array.from(node.childNodes).forEach(wrapWords); 914 } 915 } 916 }; 917 Array.from(el.childNodes).forEach(wrapWords); 918 el.dataset.motionGroup = 'heading-stagger'; 919 } else { 920 // Offset de 50px para Badges, Botões e Imagens subirem fluidamente 921 el.style.opacity = "0"; 922 el.style.transform = 'translateY(50px)'; 923 el.style.willChange = 'transform, opacity'; 924 el.dataset.motionGroup = 'generic-up'; 925 } 926 }); 927 928 // Threshold: O elemento só começa a animar quando passar 50px para dentro da tela de baixo para cima 929 const viewOptions = { margin: "0px 0px -50px 0px" }; 930 931 // Curva de Bezier para "Começar Rápido e Terminar Lento" (Ease Out Expo) 932 const fastStartSlowEnd = [0.16, 1, 0.3, 1]; 933 934 // 2. Animar TÃtulos H1 e H2 palavra por palavra (Efeito Stagger by Word) 935 document.querySelectorAll('[data-motion-group="heading-stagger"]').forEach(heading => { 936 inView(heading, () => { 937 const spans = heading.querySelectorAll('.fstr-word'); 938 animate(spans, { opacity: parseFloat(heading.dataset.targetOpacity || "1"), transform: "none" }, { delay: stagger(0.08), duration: 1.2, easing: fastStartSlowEnd }); 939 }, viewOptions); 940 }); 941 942 // 3. Animar Elementos em Grupo (Stagger/Escadinha para Cards) 943 const staggerContainers = ['.svc-track', '.grid', '.faq-list', '.plan-carousel-track', '.beneficios-grid']; 944 staggerContainers.forEach(containerSelector => { 945 inView(containerSelector, ({ target }) => { 946 const elements = target.querySelectorAll('[data-motion-group="generic-up"]'); 947 if (elements.length > 0) { 948 animate(elements, 949 { opacity: 1, transform: "none" }, // cards assumem opacidade 1 normal 950 { delay: stagger(0.12), duration: 1.2, easing: fastStartSlowEnd } 951 ); 952 // Clean up data attributes 953 elements.forEach(el => delete el.dataset.motionGroup); 954 } 955 }, viewOptions); 956 }); 957 958 // 4. Parágrafos, Imagens, Botões e Badges que sobem suavemente de forma independente 959 document.querySelectorAll('[data-motion-group="generic-up"]').forEach(target => { 960 inView(target, () => { 961 if (target.dataset.motionGroup === "generic-up") { 962 // Aqui a mágica que respeita o opacity-20 de imagens pattern! 963 const destOpacity = parseFloat(target.dataset.targetOpacity || "1"); 964 animate(target, { opacity: destOpacity, transform: "none" }, { duration: 1.2, easing: fastStartSlowEnd }); 965 delete target.dataset.motionGroup; 966 } 967 }, viewOptions); 968 }); 969 970 }); 971 </script>
971 972 <!-- Assine Modal (Ligamos para você) --> 973 <div id="leadModal" 974 class="fixed inset-0 z-[100] flex items-center justify-center bg-noite/60 backdrop-blur-sm opacity-0 invisible transition-all duration-300"> 975 <div class="bg-white rounded-2xl w-[90%] max-w-sm p-6 lg:p-8 relative shadow-2xl scale-95 transition-transform duration-300" 976 id="leadModalContent"> 977 <button onclick="closeLeadModal()" 978 class="absolute top-4 right-4 text-gray-400 hover:text-rio-sergipe transition-colors outline-none cursor-pointer"> 979 <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> 980 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> 981 </svg> 982 </button> 983 <!-- Form view --> 984 <div id="leadFormView"> 985 <h3 class="text-xl font-bold text-rio-sergipe mb-2">Ligamos para você</h3> 986 <p class="text-[13px] text-gray-500 mb-5 leading-relaxed">Deixe seus dados e nossa equipe entrará em 987 contato o mais breve possÃvel.</p> 988 <form id="leadForm" class="space-y-4" novalidate> 989 <!-- Honeypot anti-bot --> 990 <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off"> 991 <div> 992 <label for="leadName" class="block text-xs font-semibold text-rio-sergipe mb-1">Nome</label> 993 <input type="text" id="leadName" name="nome" required 994 class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm outline-none focus:border-azul-tradicao transition-colors" 995 placeholder="Seu nome completo"> 996 </div> 997 <div> 998 <label for="leadPhone" class="block text-xs font-semibold text-rio-sergipe mb-1">Telefone / 999 WhatsApp</label> 1000 <input type="tel" id="leadPhone" name="telefone" required 1001 class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm outline-none focus:border-azul-tradicao transition-colors" 1002 placeholder="(00) 00000-0000"> 1003 </div> 1004 <!-- reCAPTCHA v2 inline --> 1005 <div class="flex justify-center pt-1"> 1006 <div class="g-recaptcha" data-sitekey="6Ldg2q4sAAAAAJmKAIOhJLRAoYnH4IP7tcGr7OIZ"></div> 1007 </div> 1008 <p id="leadCaptchaError" class="hidden text-xs text-red-500 text-center -mt-1">Por favor, confirme 1009 que você não é um robô.</p> 1010 <button type="submit" id="leadSubmitBtn" 1011 class="w-full bg-azul-tradicao hover:bg-rio-sergipe text-white font-medium py-3 rounded-lg transition-colors mt-1 text-sm cursor-pointer flex items-center justify-center gap-2"> 1012 Enviar meus dados 1013 </button> 1014 </form> 1015 <p id="leadFormError" class="hidden mt-3 text-xs text-red-500 text-center">Algo deu errado. Tente 1016 novamente.</p> 1017 </div> 1018 <!-- Thank-you view --> 1019 <div id="leadThanksView" class="hidden text-center py-4"> 1020 <div class="w-14 h-14 bg-azul-tradicao/10 rounded-full flex items-center justify-center mx-auto mb-4"> 1021 <svg class="w-7 h-7 text-azul-tradicao" fill="none" stroke="currentColor" stroke-width="2"
1022 viewBox="0 0 24 24"> 1023 <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /> 1024 </svg> 1025 </div> 1026 <h3 class="text-xl font-bold text-rio-sergipe mb-2">Mensagem enviada!</h3> 1027 <p class="text-[13px] text-gray-500 leading-relaxed mb-6">Obrigado pelo contato! Nossa equipe entrará em 1028 contato com você em breve.</p> 1029 <button onclick="closeLeadModal()" 1030 class="bg-azul-tradicao hover:bg-rio-sergipe text-white font-medium py-2.5 px-8 rounded-lg transition-colors text-sm cursor-pointer"> 1031 Fechar 1032 </button> 1033 </div> 1034 </div> 1035 </div> 1036 </div> 1037 1038
1038<script> 1039 function openLeadModal() { 1040 const modal = document.getElementById('leadModal'); 1041 const content = document.getElementById('leadModalContent'); 1042 const formView = document.getElementById('leadFormView'); 1043 const thanksView = document.getElementById('leadThanksView'); 1044 if (modal && content) { 1045 if (formView) formView.classList.remove('hidden'); 1046 if (thanksView) thanksView.classList.add('hidden'); 1047 const errEl = document.getElementById('leadFormError'); 1048 if (errEl) errEl.classList.add('hidden'); 1049 const capErr = document.getElementById('leadCaptchaError'); 1050 if (capErr) capErr.classList.add('hidden'); 1051 modal.classList.remove('opacity-0', 'invisible'); 1052 modal.classList.add('opacity-100', 'visible'); 1053 content.classList.remove('scale-95'); 1054 content.classList.add('scale-100'); 1055 } 1056 } 1057 function closeLeadModal() { 1058 const modal = document.getElementById('leadModal'); 1059 const content = document.getElementById('leadModalContent'); 1060 if (modal && content) { 1061 modal.classList.remove('opacity-100', 'visible'); 1062 modal.classList.add('opacity-0', 'invisible'); 1063 content.classList.remove('scale-100'); 1064 content.classList.add('scale-95'); 1065 } 1066 } 1067 document.getElementById('leadModal').addEventListener('click', function (e) { 1068 if (e.target === this) closeLeadModal(); 1069 }); 1070 document.getElementById('leadForm').addEventListener('submit', async function (e) { 1071 e.preventDefault(); 1072 const btn = document.getElementById('leadSubmitBtn'); 1073 const errEl = document.getElementById('leadFormError'); 1074 const capErr = document.getElementById('leadCaptchaError'); 1075 errEl.classList.add('hidden'); 1076 capErr.classList.add('hidden'); 1077 1078 // Validate reCAPTCHA 1079 const captchaResponse = typeof grecaptcha !== 'undefined' ? grecaptcha.getResponse() : null; 1080 if (!captchaResponse) { 1081 capErr.classList.remove('hidden'); 1082 return; 1083 } 1084 1085 // Loading state 1086 btn.disabled = true; 1087 btn.innerHTML = '<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path></svg> Enviando...'; 1088 1089 const formData = new FormData(this); 1090 formData.append('g-recaptcha-response', captchaResponse); 1091 1092 try { 1093 const res = await fetch('https://formspree.io/f/mpqoeoan', { 1094 method: 'POST', 1095 headers: { 'Accept': 'application/json' }, 1096 body: formData 1097 }); 1098 const data = await res.json(); 1099 if (res.ok) { 1100 document.getElementById('leadFormView').classList.add('hidden'); 1101 document.getElementById('leadThanksView').classList.remove('hidden'); 1102 document.getElementById('leadForm').reset(); 1103 if (typeof grecaptcha !== 'undefined') grecaptcha.reset(); 1104 } else { 1105 throw new Error(data.error || 'Erro ao enviar'); 1106 } 1107 } catch (err) { 1108 errEl.classList.remove('hidden'); 1109 if (typeof grecaptcha !== 'undefined') grecaptcha.reset(); 1110 } finally { 1111 btn.disabled = false; 1112 btn.innerHTML = 'Enviar meus dados'; 1113 } 1114 }); 1115 </script>
1115 1116</body> 1117 1118</html>
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.