| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NexaFiber - Internet de alta velocidade</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Poppins', sans-serif; |
| scroll-behavior: smooth; |
| } |
| .carousel-item { |
| display: none; |
| transition: opacity 1s ease; |
| } |
| .carousel-item.active { |
| display: block; |
| opacity: 1; |
| } |
| .contact-popup { |
| display: none; |
| animation: fadeIn 0.3s; |
| } |
| @keyframes fadeIn { |
| from {opacity: 0;} |
| to {opacity: 1;} |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="bg-blue-900 text-white sticky top-0 z-50 shadow-lg"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| |
| <div class="flex items-center"> |
| <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center mr-3"> |
| <span class="text-blue-900 font-bold text-xl">NF</span> |
| </div> |
| <h1 class="text-xl font-bold">Nexa<span class="text-green-400">Fiber</span></h1> |
| </div> |
|
|
| |
| <nav class="hidden md:flex items-center space-x-8"> |
| <a href="#home" class="hover:text-green-400 transition">Início</a> |
| <a href="#plans" class="hover:text-green-400 transition">Planos</a> |
| <a href="#" class="hover:text-green-400 transition">2ª via de boleto</a> |
| <a href="#" class="hover:text-green-400 transition">Central do Assinante</a> |
| |
| <div class="flex items-center space-x-6"> |
| <button id="contactBtn" class="flex items-center text-sm hover:text-green-400 transition"> |
| <i class="fas fa-envelope mr-2"></i> Fale Conosco |
| </button> |
| |
| <div class="flex items-center"> |
| <i class="fas fa-phone-alt mr-2"></i> |
| <span>(99) 9999-9999</span> |
| </div> |
| |
| <div class="flex items-center space-x-3"> |
| <span class="text-sm hidden lg:inline">Siga a NexaFiber</span> |
| <a href="#" class="hover:text-green-400 transition"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="hover:text-green-400 transition"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="hover:text-green-400 transition"><i class="fab fa-whatsapp"></i></a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <button id="mobileMenuBtn" class="md:hidden focus:outline-none"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
|
|
| |
| <div id="mobileMenu" class="md:hidden hidden bg-blue-800 pb-4"> |
| <div class="container mx-auto px-4 flex flex-col space-y-3"> |
| <a href="#home" class="py-2 hover:text-green-400 transition">Início</a> |
| <a href="#plans" class="py-2 hover:text-green-400 transition">Planos</a> |
| <a href="#" class="py-2 hover:text-green-400 transition">2ª via de boleto</a> |
| <a href="#" class="py-2 hover:text-green-400 transition">Central do Assinante</a> |
| <button id="contactBtnMobile" class="py-2 flex items-center hover:text-green-400 transition"> |
| <i class="fas fa-envelope mr-2"></i> Fale Conosco |
| </button> |
| <div class="py-2 flex items-center"> |
| <i class="fas fa-phone-alt mr-2"></i> |
| <span>(99) 9999-9999</span> |
| </div> |
| <div class="py-2 flex items-center space-x-4"> |
| <span>Siga a NexaFiber</span> |
| <a href="#" class="hover:text-green-400 transition"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="hover:text-green-400 transition"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="hover:text-green-400 transition"><i class="fab fa-whatsapp"></i></a> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="home" class="relative overflow-hidden"> |
| <div class="carousel"> |
| |
| <div class="carousel-item active relative"> |
| <div class="h-96 md:h-screen max-h-[700px] bg-gradient-to-r from-blue-900 to-blue-700 flex items-center justify-center"> |
| <div class="absolute inset-0 bg-black opacity-30"></div> |
| <div class="container mx-auto px-4 relative z-10 text-center text-white"> |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">Conectando o seu mundo com velocidade e confiança</h2> |
| <p class="text-xl mb-8">Internet de altíssima velocidade com a tecnologia mais avançada</p> |
| <a href="#plans" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 inline-block"> |
| Assine Agora |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="carousel-item relative"> |
| <div class="h-96 md:h-screen max-h-[700px] bg-gradient-to-r from-blue-800 to-blue-600 flex items-center justify-center"> |
| <div class="absolute inset-0 bg-black opacity-30"></div> |
| <div class="container mx-auto px-4 relative z-10 text-center text-white"> |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">Combo Internet + TV por assinatura</h2> |
| <p class="text-xl mb-8">Todos os canais que sua família adora + Internet ultrarrápida</p> |
| <a href="#plans" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 inline-block"> |
| Conheça os planos |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="carousel-item relative"> |
| <div class="h-96 md:h-screen max-h-[700px] bg-gradient-to-r from-blue-900 to-blue-700 flex items-center justify-center"> |
| <div class="absolute inset-0 bg-black opacity-30"></div> |
| <div class="container mx-auto px-4 relative z-10 text-center text-white"> |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">Instalação grátis e Wi-Fi incluído</h2> |
| <p class="text-xl mb-8">Leve a NexaFiber para sua casa sem custo adicional</p> |
| <a href="#plans" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 inline-block"> |
| Saiba mais |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="carousel-item relative"> |
| <div class="h-96 md:h-screen max-h-[700px] bg-gradient-to-r from-blue-800 to-blue-600 flex items-center justify-center"> |
| <div class="absolute inset-0 bg-black opacity-30"></div> |
| <div class="container mx-auto px-4 relative z-10 text-center text-white"> |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">Planos empresariais com suporte dedicado</h2> |
| <p class="text-xl mb-8">Garanta a melhor conexão para seu negócio</p> |
| <a href="#plans" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 inline-block"> |
| Para empresas |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <button id="prevBtn" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-30 text-white rounded-full p-2 z-10 hover:bg-opacity-50 transition"> |
| <i class="fas fa-chevron-left"></i> |
| </button> |
| <button id="nextBtn" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-30 text-white rounded-full p-2 z-10 hover:bg-opacity-50 transition"> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
|
|
| |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2 z-10"> |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition" data-index="0"></button> |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition" data-index="1"></button> |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition" data-index="2"></button> |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition" data-index="3"></button> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| |
| <div class="text-center px-4"> |
| <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-bolt text-blue-700 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Velocidade garantida</h3> |
| <p class="text-gray-600">Internet de alta velocidade sem lentidão mesmo nos horários de pico.</p> |
| </div> |
|
|
| |
| <div class="text-center px-4"> |
| <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-headset text-blue-700 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Suporte 24/7</h3> |
| <p class="text-gray-600">Atendimento especializado a qualquer hora do dia ou noite.</p> |
| </div> |
|
|
| |
| <div class="text-center px-4"> |
| <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-wifi text-blue-700 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Wi-Fi grátis</h3> |
| <p class="text-gray-600">Roteador de alta qualidade incluso para melhor cobertura em sua casa.</p> |
| </div> |
|
|
| |
| <div class="text-center px-4"> |
| <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-tools text-blue-700 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Instalação rápida</h3> |
| <p class="text-gray-600">Agende sua instalação e nossa equipe estará no local no horário marcado.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="plans" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-blue-900 mb-4">Nossos Planos</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Escolha o plano perfeito para sua casa ou empresa com a melhor relação custo-benefício do mercado</p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
| |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden transition-transform hover:scale-105"> |
| <div class="bg-blue-900 text-white py-4 px-6"> |
| <h3 class="text-xl font-bold">Fibra 200MB</h3> |
| <p class="text-blue-200">Ideal para famílias</p> |
| </div> |
| <div class="p-6"> |
| <div class="text-4xl font-bold text-blue-900 mb-4">R$ 99<span class="text-lg">,90/mês</span></div> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>200 Megabits de velocidade</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>Wi-Fi grátis</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>Instalação sem custo</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>Suporte 24 horas</span> |
| </li> |
| </ul> |
| <button class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-4 rounded transition duration-300"> |
| Assinar agora |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow-xl overflow-hidden transform scale-105 relative"> |
| <div class="absolute top-0 right-0 bg-green-500 text-white px-3 py-1 transform rotate-45 translate-x-6 -translate-y-2 text-xs font-bold"> |
| MAIS POPULAR |
| </div> |
| <div class="bg-blue-700 text-white py-4 px-6"> |
| <h3 class="text-xl font-bold">Combo Família</h3> |
| <p class="text-blue-200">Internet + TV + Telefone</p> |
| </div> |
| <div class="p-6"> |
| <div class="text-4xl font-bold text-blue-900 mb-4">R$ 149<span class="text-lg">,90/mês</span></div> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>300 Megabits de velocidade</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>120 canais HD</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>Wi-Fi grátis + roteador premium</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>Ligações ilimitadas</span> |
| </li> |
| </ul> |
| <button class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-4 rounded transition duration-300"> |
| Assinar agora |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden transition-transform hover:scale-105"> |
| <div class="bg-blue-900 text-white py-4 px-6"> |
| <h3 class="text-xl font-bold">Fibra 1GB</h3> |
| <p class="text-blue-200">Para gamers e power users</p> |
| </div> |
| <div class="p-6"> |
| <div class="text-4xl font-bold text-blue-900 mb-4">R$ 299<span class="text-lg">,90/mês</span></div> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>1 Gigabit de velocidade</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>Wi-Fi 6 grátis</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>Prioridade no suporte</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>Equipamento premium</span> |
| </li> |
| </ul> |
| <button class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-4 rounded transition duration-300"> |
| Assinar agora |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-16 max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="md:flex"> |
| <div class="md:w-2/3 p—6 md:p-8"> |
| <h3 class="text-2xl font-bold text-blue-900 mb-2">Planos Empresariais</h3> |
| <p class="text-gray-600 mb-4">Soluções personalizadas para empresas de todos os tamanhos com conexão dedicada e SLA garantido.</p> |
| <ul class="space-y-2 mb-6"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>Link dedicado de 100Mbps a 10Gbps</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>Suporte técnico prioritário</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>IP Fixo incluso</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span>99.9% de disponibilidade garantida</span> |
| </li> |
| </ul> |
| <button class="bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-8 rounded-full transition duration-300 inline-flex items-center"> |
| Falar com consultor <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| <div class="hidden md:block md:w-1/3 bg-gradient-to-b from-blue-800 to-blue-600"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-blue-900 text-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold mb-4">O que dizem nossos clientes</h2> |
| <p class="text-xl text-blue-200 max-w-3xl mx-auto">Milhares de clientes satisfeitos em todo o país</p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-blue-800 rounded-lg p-6 shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-blue-700 flex items-center justify-center text-xl font-bold mr-4">AJ</div> |
| <div> |
| <h4 class="font-bold">Ana Júlia</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-blue-100">"Depois de anos com Internet lenta, finalmente resolvi contratar a NexaFiber. A diferença é absurda! Consigo trabalhar em casa sem preocupações e meus filhos podem assistir streaming sem travar."</p> |
| </div> |
|
|
| |
| <div class="bg-blue-800 rounded-lg p-6 shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-blue-700 flex items-center justify-center text-xl font-bold mr-4">CM</div> |
| <div> |
| <h4 class="font-bold">Carlos Martins</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-blue-100">"O suporte da NexaFiber é incrível! Quando tive um problema, eles resolveram rapidamente e ainda me explicaram como evitar no futuro. A velocidade é consistente e nunca tenho quedas."</p> |
| </div> |
|
|
| |
| <div class="bg-blue-800 rounded-lg p-6 shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-blue-700 flex items-center justify-center text-xl font-bold mr-4">LS</div> |
| <div> |
| <h4 class="font-bold">Lívia Souza</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-blue-100">"Contratei o combo família e estou adorando. Tenho internet rápida, TV com ótima programação e ainda economizei pelo pacote. A instalação foi super profissional e rápida."</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-blue-900 mb-4">Nossa Cobertura</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Verifique se atendemos na sua região</p> |
| </div> |
|
|
| <div class="max-w-4xl mx-auto bg-gray-100 rounded-xl p-8"> |
| <div class="md:flex items-center"> |
| <div class="md:w-1/2 mb-6 md:mb-0"> |
| <h3 class="text-xl font-bold text-blue-900 mb-2">Quer NexaFiber na sua casa?</h3> |
| <p class="text-gray-600 mb-4">Nosso serviço está disponível em diversas cidades e bairros. Consulte a disponibilidade na sua região:</p> |
| |
| <form class="space-y-4"> |
| <div> |
| <select class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option>Selecione sua cidade</option> |
| <option>São Paulo - SP</option> |
| <option>Rio de Janeiro - RJ</option> |
| <option>Belo Horizonte - MG</option> |
| <option>Curitiba - PR</option> |
| </select> |
| </div> |
| <div> |
| <input type="text" placeholder="Digite seu endereço" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| <button class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-4 rounded transition duration-300"> |
| Verificar disponibilidade |
| </button> |
| </form> |
| </div> |
| <div class="md:w-1/2 md:pl-8"> |
| <div class="bg-gray-200 h-64 rounded-lg flex items-center justify-center text-gray-400"> |
| [Mapa de Cobertura] |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div id="contactPopup" class="contact-popup fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"> |
| <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 relative"> |
| <button id="closePopup" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| |
| <h3 class="text-2xl font-bold text-blue-900 mb-4">Fale Conosco</h3> |
| <p class="text-gray-600 mb-6">Preencha o formulário abaixo e nossa equipe entrará em contato em breve.</p> |
| |
| <form id="contactForm" class="space-y-4"> |
| <div> |
| <label for="name" class="block text-gray-700 mb-2">Seu nome</label> |
| <input type="text" id="name" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required> |
| </div> |
| <div> |
| <label for="email" class="block text-gray-700 mb-2">E-mail</label> |
| <input type="email" id="email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required> |
| </div> |
| <div> |
| <label for="phone" class="block text-gray-700 mb-2">Telefone</label> |
| <input type="tel" id="phone" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required> |
| </div> |
| <div> |
| <label for="message" class="block text-gray-700 mb-2">Mensagem</label> |
| <textarea id="message" rows="4" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required></textarea> |
| </div> |
| <button type="submit" class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-4 rounded transition duration-300"> |
| Enviar mensagem |
| </button> |
| </form> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-blue-900 text-white pt-16 pb-8"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| |
| <div> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center mr-3"> |
| <span class="text-blue-900 font-bold">NF</span> |
| </div> |
| <h3 class="text-xl font-bold">Nexa<span class="text-green-400">Fiber</span></h3> |
| </div> |
| <p class="text-blue-200 mb-4">A melhor internet em fibra óptica do Brasil, levando conexão de alta qualidade para sua casa e empresa.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="hover:text-green-400 transition"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="hover:text-green-400 transition"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="hover:text-green-400 transition"><i class="fab fa-whatsapp"></i></a> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Links Úteis</h4> |
| <ul class="space-y-2"> |
| <li><a href="#home" class="hover:text-green-400 transition">Início</a></li> |
| <li><a href="#plans" class="hover:text-green-400 transition">Planos</a></li> |
| <li><a href="#" class="hover:text-green-400 transition">2ª Via de Boleto</a></li> |
| <li><a href="#" class="hover:text-green-400 transition">Central do Assinante</a></li> |
| <li><a href="#" class="hover:text-green-400 transition">Área de Cobertura</a></li> |
| </ul> |
| </div> |
|
|
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Suporte</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-green-400 transition">Perguntas Frequentes</a></li> |
| <li><a href="#" class="hover:text-green-400 transition">Tutoriais</a></li> |
| <li><a href="#" class="hover:text-green-400 transition">Status da Rede</a></li> |
| <li><a href="#" class="hover:text-green-400 transition">Abertura de Chamado</a></li> |
| </ul> |
| </div> |
|
|
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Contato</h4> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i class="fas fa-phone-alt text-green-400 mr-2 mt-1"></i> |
| <span>(99) 9999-9999</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-envelope text-green-400 mr-2 mt-1"></i> |
| <span>contato@nexafiber.com.br</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marker-alt text-green-400 mr-2 mt-1"></i> |
| <span>Av. Paulista, 1000<br>São Paulo - SP</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
|
|
| |
| <div class="border-t border-blue-800 mt-12 pt-6 text-center text-blue-200"> |
| <p>Todos os direitos reservados © NexaFiber <span id="year"></span>. Proibida reprodução total ou parcial sem autorização.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| |
| mobileMenuBtn.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| const contactBtn = document.getElementById('contactBtn'); |
| const contactBtnMobile = document.getElementById('contactBtnMobile'); |
| const contactPopup = document.getElementById('contactPopup'); |
| const closePopup = document.getElementById('closePopup'); |
| |
| function togglePopup() { |
| contactPopup.classList.toggle('hidden'); |
| document.body.style.overflow = contactPopup.classList.contains('hidden') ? 'auto' : 'hidden'; |
| } |
| |
| contactBtn.addEventListener('click', togglePopup); |
| contactBtnMobile.addEventListener('click', togglePopup); |
| closePopup.addEventListener('click', togglePopup); |
| contactPopup.addEventListener('click', (e) => { |
| if (e.target === contactPopup) { |
| togglePopup(); |
| } |
| }); |
| |
| |
| const contactForm = document.getElementById('contactForm'); |
| contactForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| alert('Mensagem enviada com sucesso! Em breve nossa equipe entrará em contato.'); |
| contactForm.reset(); |
| togglePopup(); |
| }); |
| |
| |
| const carouselItems = document.querySelectorAll('.carousel-item'); |
| const indicators = document.querySelectorAll('.carousel-indicator'); |
| const prevBtn = document.getElementById('prevBtn'); |
| const nextBtn = document.getElementById('nextBtn'); |
| let currentIndex = 0; |
| let intervalId; |
| |
| function showSlide(index) { |
| |
| carouselItems.forEach(item => item.classList.remove('active')); |
| indicators.forEach(indicator => indicator.classList.remove('bg-opacity-100')); |
| |
| |
| carouselItems[index].classList.add('active'); |
| indicators[index].classList.add('bg-opacity-100'); |
| |
| currentIndex = index; |
| } |
| |
| function nextSlide() { |
| let nextIndex = (currentIndex + 1) % carouselItems.length; |
| showSlide(nextIndex); |
| } |
| |
| function prevSlide() { |
| let prevIndex = (currentIndex - 1 + carouselItems.length) % carouselItems.length; |
| showSlide(prevIndex); |
| } |
| |
| |
| showSlide(0); |
| |
| |
| function startCarousel() { |
| intervalId = setInterval(nextSlide, 5000); |
| } |
| |
| startCarousel(); |
| |
| |
| const carousel = document.querySelector('.carousel'); |
| carousel.addEventListener('mouseenter', () => { |
| clearInterval(intervalId); |
| }); |
| |
| carousel.addEventListener('mouseleave', startCarousel); |
| |
| |
| nextBtn.addEventListener('click', () => { |
| nextSlide(); |
| clearInterval(intervalId); |
| startCarousel(); |
| }); |
| |
| prevBtn.addEventListener('click', () => { |
| prevSlide(); |
| clearInterval(intervalId); |
| startCarousel(); |
| }); |
| |
| |
| indicators.forEach((indicator, index) => { |
| indicator.addEventListener('click', () => { |
| showSlide(index); |
| clearInterval(intervalId); |
| startCarousel(); |
| }); |
| }); |
| |
| |
| document.getElementById('year').textContent = new Date().getFullYear(); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| targetElement.scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| |
| |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| } |
| } |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LIMATEC/nexafiber" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
