|
|
<!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> |
