|
<!DOCTYPE html> |
|
<html lang="pt-BR"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<meta name="description" content="Agência Raio-X - Especialistas em Representação IPTV e Internet Ilimitada para Revendedores. Transforme seu negócio digital conosco."> |
|
<title>Agência Raio-X - Negócios Digitais</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"> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
body { |
|
font-family: 'Inter', sans-serif; |
|
scroll-behavior: smooth; |
|
background-color: #0a0a0a; |
|
color: #e5e5e5; |
|
} |
|
|
|
.hero-video { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
z-index: -1; |
|
} |
|
|
|
.hero-overlay { |
|
background: rgba(0, 0, 0, 0.7); |
|
} |
|
|
|
.feature-card { |
|
transition: all 0.3s ease; |
|
border: 1px solid #1f1f1f; |
|
} |
|
|
|
.feature-card:hover { |
|
transform: translateY(-5px); |
|
border-color: #22c55e; |
|
} |
|
|
|
.btn-primary { |
|
background-color: #22c55e; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.btn-primary:hover { |
|
background-color: #16a34a; |
|
} |
|
|
|
.section-title { |
|
position: relative; |
|
display: inline-block; |
|
} |
|
|
|
.section-title:after { |
|
content: ''; |
|
position: absolute; |
|
bottom: -8px; |
|
left: 0; |
|
width: 100%; |
|
height: 2px; |
|
background-color: #22c55e; |
|
} |
|
|
|
.service-icon { |
|
background-color: #22c55e; |
|
color: #0a0a0a; |
|
} |
|
|
|
.testimonial-card { |
|
border: 1px solid #1f1f1f; |
|
} |
|
|
|
.form-input { |
|
background-color: #1f1f1f; |
|
border: 1px solid #1f1f1f; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.form-input:focus { |
|
border-color: #22c55e; |
|
outline: none; |
|
} |
|
|
|
.social-icon { |
|
background-color: #1f1f1f; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.social-icon:hover { |
|
background-color: #22c55e; |
|
color: #0a0a0a; |
|
} |
|
|
|
.nav-link { |
|
position: relative; |
|
} |
|
|
|
.nav-link:after { |
|
content: ''; |
|
position: absolute; |
|
bottom: -2px; |
|
left: 0; |
|
width: 0; |
|
height: 1px; |
|
background-color: #22c55e; |
|
transition: width 0.3s ease; |
|
} |
|
|
|
.nav-link:hover:after { |
|
width: 100%; |
|
} |
|
|
|
.active-nav:after { |
|
width: 100%; |
|
} |
|
|
|
.image-overlay { |
|
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-black text-white"> |
|
|
|
<header class="fixed w-full z-50 bg-black bg-opacity-95 transition-all duration-300 border-b border-gray-900"> |
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
|
<div class="flex items-center"> |
|
<div class="w-10 h-10 rounded-md bg-green-500 flex items-center justify-center"> |
|
<i class="fas fa-bolt text-lg text-black"></i> |
|
</div> |
|
<span class="ml-3 text-xl font-semibold">Agência <span class="text-green-500">Raio-X</span></span> |
|
</div> |
|
|
|
<nav class="hidden md:block"> |
|
<ul class="flex space-x-8"> |
|
<li><a href="#sobre" class="nav-link active-nav">Sobre</a></li> |
|
<li><a href="#servicos" class="nav-link">Serviços</a></li> |
|
<li><a href="#destaques" class="nav-link">Destaques</a></li> |
|
<li><a href="#contato" class="nav-link">Contato</a></li> |
|
</ul> |
|
</nav> |
|
|
|
<button class="md:hidden text-2xl" id="menu-toggle"> |
|
<i class="fas fa-bars"></i> |
|
</button> |
|
</div> |
|
|
|
|
|
<div class="md:hidden hidden bg-black bg-opacity-95 w-full" id="mobile-menu"> |
|
<div class="container mx-auto px-4 py-3"> |
|
<ul class="flex flex-col space-y-4"> |
|
<li><a href="#sobre" class="block py-2 nav-link active-nav">Sobre</a></li> |
|
<li><a href="#servicos" class="block py-2 nav-link">Serviços</a></li> |
|
<li><a href="#destaques" class="block py-2 nav-link">Destaques</a></li> |
|
<li><a href="#contato" class="block py-2 nav-link">Contato</a></li> |
|
</ul> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
|
|
<section class="relative h-screen flex items-center justify-center overflow-hidden"> |
|
<video autoplay muted loop class="hero-video"> |
|
<source src="https://assets.mixkit.co/videos/preview/mixkit-businessman-using-digital-tablet-17345-large.mp4" type="video/mp4"> |
|
</video> |
|
|
|
<div class="hero-overlay absolute inset-0"></div> |
|
|
|
<div class="container mx-auto px-4 z-10 text-center"> |
|
<h1 class="text-4xl md:text-5xl font-bold mb-6"> |
|
Transforme seu Negócio Digital com a <span class="text-green-500">Agência Raio-X</span> |
|
</h1> |
|
<p class="text-lg md:text-xl mb-8 max-w-3xl mx-auto text-gray-300"> |
|
Especialistas em Representação IPTV e Internet Ilimitada para Revendedores. |
|
</p> |
|
<a href="https://wa.me/5519997404688" target="_blank" rel="noopener noreferrer" class="btn-primary inline-block text-black font-semibold py-3 px-8 rounded-md text-lg"> |
|
Fale Conosco no WhatsApp |
|
</a> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="destaques" class="py-20 bg-black"> |
|
<div class="container mx-auto px-4"> |
|
<h2 class="text-3xl font-bold mb-16 text-center section-title"> |
|
Nossos <span class="text-green-500">Destaques</span> |
|
</h2> |
|
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
|
<div class="feature-card bg-gray-900 rounded-lg p-6 overflow-hidden"> |
|
<div class="relative h-64 mb-6 rounded-lg overflow-hidden"> |
|
<img src="https://www.canva.com/design/DAGly_dJXjk/w8iJejb4lYKR9cl8WCEuew/watch?utm_content=DAGly_dJXjk&utm_campaign=share_your_design&utm_medium=link2&utm_source=shareyourdesignpanel" |
|
alt="Representação IPTV" |
|
class="w-full h-full object-cover"> |
|
<div class="image-overlay absolute inset-0 flex items-end p-6"> |
|
<h3 class="text-2xl font-bold text-white">Representação IPTV</h3> |
|
</div> |
|
</div> |
|
<h3 class="text-xl font-bold mb-4 text-green-500">Representação IPTV para Revendedores</h3> |
|
<p class="text-gray-400"> |
|
Oferecemos as melhores soluções de IPTV para revendedores, com tecnologia de ponta, estabilidade e suporte especializado. Tenha acesso aos melhores pacotes e condições do mercado. |
|
</p> |
|
<div class="mt-6"> |
|
<a href="https://wa.me/5519997404688" target="_blank" rel="noopener noreferrer" class="inline-block border border-green-500 text-green-500 font-medium py-2 px-6 rounded-md hover:bg-green-500 hover:text-black transition duration-300"> |
|
Saiba mais |
|
</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="feature-card bg-gray-900 rounded-lg p-6 overflow-hidden"> |
|
<div class="relative h-64 mb-6 rounded-lg overflow-hidden"> |
|
<img src="https://images.unsplash.com/photo-1508514177221-188e1e464088?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
alt="Internet Ilimitada" |
|
class="w-full h-full object-cover"> |
|
<div class="image-overlay absolute inset-0 flex items-end p-6"> |
|
<h3 class="text-2xl font-bold text-white">Internet Ilimitada</h3> |
|
</div> |
|
</div> |
|
<h3 class="text-xl font-bold mb-4 text-green-500">Internet Ilimitada para Revendedores</h3> |
|
<p class="text-gray-400"> |
|
Soluções completas de internet ilimitada para revenda, com alta velocidade e estabilidade. Oferecemos suporte técnico e treinamento para que você possa vender com confiança. |
|
</p> |
|
<div class="mt-6"> |
|
<a href="https://wa.me/5519997404688" target="_blank" rel="noopener noreferrer" class="inline-block border border-green-500 text-green-500 font-medium py-2 px-6 rounded-md hover:bg-green-500 hover:text-black transition duration-300"> |
|
Saiba mais |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="servicos" class="py-20 bg-gray-900"> |
|
<div class="container mx-auto px-4"> |
|
<h2 class="text-3xl font-bold mb-16 text-center section-title"> |
|
Outros <span class="text-green-500">Serviços</span> |
|
</h2> |
|
|
|
<div class="grid md:grid-cols-3 gap-6"> |
|
|
|
<div class="bg-gray-800 rounded-lg p-8"> |
|
<div class="w-14 h-14 service-icon rounded-full flex items-center justify-center mb-6 mx-auto"> |
|
<i class="fas fa-graduation-cap text-xl"></i> |
|
</div> |
|
<h3 class="text-xl font-bold mb-4 text-center text-green-500">Treinamento de Equipe de Vendas</h3> |
|
<p class="text-gray-400 text-center"> |
|
Capacitação completa para revendedores digitais, com técnicas comprovadas de vendas e atendimento ao cliente. |
|
</p> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-lg p-8"> |
|
<div class="w-14 h-14 service-icon rounded-full flex items-center justify-center mb-6 mx-auto"> |
|
<i class="fas fa-chart-line text-xl"></i> |
|
</div> |
|
<h3 class="text-xl font-bold mb-4 text-center text-green-500">Consultoria de Marketing Digital</h3> |
|
<p class="text-gray-400 text-center"> |
|
Estratégias personalizadas para alavancar seu negócio digital, com foco em resultados e crescimento sustentável. |
|
</p> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-lg p-8"> |
|
<div class="w-14 h-14 service-icon rounded-full flex items-center justify-center mb-6 mx-auto"> |
|
<i class="fas fa-robot text-xl"></i> |
|
</div> |
|
<h3 class="text-xl font-bold mb-4 text-center text-green-500">Consultoria de IA para Negócios</h3> |
|
<p class="text-gray-400 text-center"> |
|
Implementação de soluções de Inteligência Artificial para automatizar processos e aumentar a eficiência do seu negócio. |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="sobre" class="py-20 bg-black"> |
|
<div class="container mx-auto px-4"> |
|
<div class="flex flex-col md:flex-row items-center"> |
|
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
|
<div class="relative"> |
|
<img src="https://images.unsplash.com/photo-1580927752452-89d86da3fa0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" |
|
alt="Tavinho Falkenback" |
|
class="rounded-lg shadow-lg w-full max-w-md mx-auto"> |
|
</div> |
|
</div> |
|
|
|
<div class="md:w-1/2"> |
|
<h2 class="text-3xl font-bold mb-6 section-title"> |
|
Sobre <span class="text-green-500">Nós</span> |
|
</h2> |
|
|
|
<div class="mb-8"> |
|
<p class="text-gray-400 mb-4"> |
|
"Sou Tavinho Falkenback, empreendedor especialista em Marketing Digital e Estratégias de Negócios. Trabalho no mercado online desde 2013 com experiência em Hotmart, Braip, Mercado Livre e Consultorias Estratégicas para Cassinos Online." |
|
</p> |
|
<p class="text-gray-400"> |
|
Com a Agência Raio-X, reuni uma equipe de especialistas para oferecer as melhores soluções digitais para revendedores e empreendedores que desejam escalar seus negócios. |
|
</p> |
|
</div> |
|
|
|
<div class="flex flex-wrap gap-3"> |
|
<div class="flex items-center bg-gray-800 rounded-md px-4 py-2"> |
|
<div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-2"> |
|
<i class="fas fa-calendar-check text-xs"></i> |
|
</div> |
|
<span>10+ anos de experiência</span> |
|
</div> |
|
|
|
<div class="flex items-center bg-gray-800 rounded-md px-4 py-2"> |
|
<div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-2"> |
|
<i class="fas fa-users text-xs"></i> |
|
</div> |
|
<span>500+ clientes atendidos</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-20 bg-gray-900"> |
|
<div class="container mx-auto px-4"> |
|
<h2 class="text-3xl font-bold mb-16 text-center section-title"> |
|
Depoimentos |
|
</h2> |
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
|
<div class="testimonial-card bg-gray-800 rounded-lg p-6"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center text-xl font-bold"> |
|
J |
|
</div> |
|
<div class="ml-4"> |
|
<h4 class="font-semibold">João Silva</h4> |
|
<p class="text-sm text-gray-400">Revendedor IPTV</p> |
|
</div> |
|
</div> |
|
<p class="text-gray-300"> |
|
"A Agência Raio-X transformou meu negócio. Com a representação IPTV, consegui aumentar minhas vendas em 300% em apenas 3 meses." |
|
</p> |
|
<div class="mt-4 flex"> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="testimonial-card bg-gray-800 rounded-lg p-6"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center text-xl font-bold"> |
|
M |
|
</div> |
|
<div class="ml-4"> |
|
<h4 class="font-semibold">Maria Santos</h4> |
|
<p class="text-sm text-gray-400">Revendedora Internet</p> |
|
</div> |
|
</div> |
|
<p class="text-gray-300"> |
|
"A internet ilimitada da Raio-X é a melhor do mercado. Meus clientes estão satisfeitos e minha renda mensal dobrou." |
|
</p> |
|
<div class="mt-4 flex"> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="testimonial-card bg-gray-800 rounded-lg p-6"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center text-xl font-bold"> |
|
C |
|
</div> |
|
<div class="ml-4"> |
|
<h4 class="font-semibold">Carlos Oliveira</h4> |
|
<p class="text-sm text-gray-400">Consultor</p> |
|
</div> |
|
</div> |
|
<p class="text-gray-300"> |
|
"A consultoria estratégica da Agência Raio-X me ajudou a estruturar meu negócio digital de forma profissional e lucrativa." |
|
</p> |
|
<div class="mt-4 flex"> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-20 bg-black"> |
|
<div class="container mx-auto px-4 text-center"> |
|
<div class="max-w-3xl mx-auto bg-gray-900 rounded-lg p-8"> |
|
<i class="fas fa-quote-left text-3xl text-green-500 mb-4"></i> |
|
<h3 class="text-2xl font-bold mb-4"> |
|
"Nada adianta você alcançar o sucesso financeiro se não for capaz de ajudar aqueles que só querem um pão." |
|
</h3> |
|
<p class="text-gray-400">- Tavinho Falkenback</p> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="contato" class="py-20 bg-gray-900"> |
|
<div class="container mx-auto px-4"> |
|
<h2 class="text-3xl font-bold mb-16 text-center section-title"> |
|
Entre em <span class="text-green-500">Contato</span> |
|
</h2> |
|
|
|
<div class="flex flex-col md:flex-row gap-10"> |
|
<div class="md:w-1/2"> |
|
<h3 class="text-2xl font-bold mb-6 text-green-500">Informações de Contato</h3> |
|
|
|
<div class="space-y-6"> |
|
<div class="flex items-start"> |
|
<div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mr-4 flex-shrink-0"> |
|
<i class="fas fa-phone text-xl text-black"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold">Telefone/WhatsApp</h4> |
|
<a href="https://wa.me/5519997404688" class="text-gray-300 hover:text-green-500 transition duration-300" target="_blank" rel="noopener noreferrer"> |
|
(19) 99740-4688 |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-start"> |
|
<div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mr-4 flex-shrink-0"> |
|
<i class="fas fa-envelope text-xl text-black"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold">E-mail</h4> |
|
<a href="mailto:[email protected]" class="text-gray-300 hover:text-green-500 transition duration-300"> |
|
[email protected] |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-start"> |
|
<div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mr-4 flex-shrink-0"> |
|
<i class="fas fa-map-marker-alt text-xl text-black"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold">Localização</h4> |
|
<p class="text-gray-300">Campinas, São Paulo - Brasil</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<h3 class="text-2xl font-bold mt-10 mb-6 text-green-500">Redes Sociais</h3> |
|
<div class="flex space-x-4"> |
|
<a href="#" class="w-12 h-12 social-icon rounded-full flex items-center justify-center" target="_blank" rel="noopener noreferrer"> |
|
<i class="fab fa-instagram text-xl"></i> |
|
</a> |
|
<a href="#" class="w-12 h-12 social-icon rounded-full flex items-center justify-center" target="_blank" rel="noopener noreferrer"> |
|
<i class="fab fa-facebook-f text-xl"></i> |
|
</a> |
|
<a href="#" class="w-12 h-12 social-icon rounded-full flex items-center justify-center" target="_blank" rel="noopener noreferrer"> |
|
<i class="fab fa-linkedin-in text-xl"></i> |
|
</a> |
|
<a href="#" class="w-12 h-12 social-icon rounded-full flex items-center justify-center" target="_blank" rel="noopener noreferrer"> |
|
<i class="fab fa-youtube text-xl"></i> |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<div class="md:w-1/2"> |
|
<form id="contact-form" class="bg-gray-800 rounded-lg p-8"> |
|
<h3 class="text-2xl font-bold mb-6 text-green-500">Envie sua Mensagem</h3> |
|
|
|
<div class="mb-6"> |
|
<label for="name" class="block mb-2 font-medium">Seu Nome</label> |
|
<input type="text" id="name" class="w-full form-input rounded-md px-4 py-3" required> |
|
</div> |
|
|
|
<div class="mb-6"> |
|
<label for="email" class="block mb-2 font-medium">Seu E-mail</label> |
|
<input type="email" id="email" class="w-full form-input rounded-md px-4 py-3" required> |
|
</div> |
|
|
|
<div class="mb-6"> |
|
<label for="message" class="block mb-2 font-medium">Sua Mensagem</label> |
|
<textarea id="message" rows="5" class="w-full form-input rounded-md px-4 py-3" required></textarea> |
|
</div> |
|
|
|
<button type="submit" class="w-full btn-primary font-semibold py-3 px-6 rounded-md"> |
|
Enviar Mensagem |
|
</button> |
|
</form> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<footer class="py-10 bg-black border-t border-gray-800"> |
|
<div class="container mx-auto px-4"> |
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
<div class="flex items-center mb-6 md:mb-0"> |
|
<div class="w-10 h-10 rounded-md bg-green-500 flex items-center justify-center"> |
|
<i class="fas fa-bolt text-lg text-black"></i> |
|
</div> |
|
<span class="ml-3 text-lg font-semibold">Agência <span class="text-green-500">Raio-X</span></span> |
|
</div> |
|
|
|
<div class="text-center md:text-right"> |
|
<p class="text-gray-400 mb-2">© 2023 Agência Raio-X. Todos os direitos reservados.</p> |
|
<p class="text-gray-500 text-sm">Desenvolvido com <i class="fas fa-heart text-red-500"></i> para o sucesso do seu negócio</p> |
|
</div> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
|
|
<a href="https://wa.me/5519997404688" target="_blank" rel="noopener noreferrer" class="fixed bottom-6 right-6 w-14 h-14 bg-green-500 rounded-full flex items-center justify-center text-2xl shadow-lg hover:bg-green-600 transition duration-300"> |
|
<i class="fab fa-whatsapp text-black"></i> |
|
</a> |
|
|
|
<script> |
|
|
|
document.getElementById('menu-toggle').addEventListener('click', function() { |
|
const menu = document.getElementById('mobile-menu'); |
|
menu.classList.toggle('hidden'); |
|
}); |
|
|
|
|
|
document.querySelectorAll('#mobile-menu a').forEach(link => { |
|
link.addEventListener('click', () => { |
|
document.getElementById('mobile-menu').classList.add('hidden'); |
|
}); |
|
}); |
|
|
|
|
|
document.getElementById('contact-form').addEventListener('submit', function(e) { |
|
e.preventDefault(); |
|
|
|
|
|
const name = document.getElementById('name').value; |
|
const email = document.getElementById('email').value; |
|
const message = document.getElementById('message').value; |
|
|
|
|
|
|
|
alert(`Obrigado, ${name}! Sua mensagem foi enviada com sucesso. Entraremos em contato em breve.`); |
|
|
|
|
|
this.reset(); |
|
}); |
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
const header = document.querySelector('header'); |
|
if (window.scrollY > 100) { |
|
header.classList.add('shadow-lg'); |
|
} else { |
|
header.classList.remove('shadow-lg'); |
|
} |
|
}); |
|
|
|
|
|
const sections = document.querySelectorAll('section'); |
|
const navLinks = document.querySelectorAll('.nav-link'); |
|
|
|
window.addEventListener('scroll', () => { |
|
let current = ''; |
|
|
|
sections.forEach(section => { |
|
const sectionTop = section.offsetTop; |
|
const sectionHeight = section.clientHeight; |
|
|
|
if (pageYOffset >= (sectionTop - 300)) { |
|
current = section.getAttribute('id'); |
|
} |
|
}); |
|
|
|
navLinks.forEach(link => { |
|
link.classList.remove('active-nav'); |
|
if (link.getAttribute('href').includes(current)) { |
|
link.classList.add('active-nav'); |
|
} |
|
}); |
|
}); |
|
</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=xlorfx/agencia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
