Spaces:
Running
Running
em alguns de nossos clientes coloque a logo das empresas: drogasil, unic, estácio, lebrinha, casa prado e imaginarium - Follow Up Deployment
b8f143a verified | <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Realtron - Segurança Eletrônica de Alta Performance</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); | |
| } | |
| .client-logo { | |
| filter: grayscale(100%) brightness(0) invert(1); | |
| transition: all 0.3s ease; | |
| } | |
| .client-logo:hover { | |
| filter: none; | |
| } | |
| .floating-button { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="bg-white rounded-full p-2 mr-4"> | |
| <i class="fas fa-shield-alt text-blue-800 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-2xl font-bold">REALTRON</h1> | |
| <p class="text-blue-200 text-sm">Segurança Eletrônica</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex space-x-6 items-center"> | |
| <a href="#sobre" class="hover:text-blue-300 transition">Sobre</a> | |
| <a href="#clientes" class="hover:text-blue-300 transition">Clientes</a> | |
| <a href="#diferenciais" class="hover:text-blue-300 transition">Diferenciais</a> | |
| <a href="#contato" class="hover:text-blue-300 transition">Contato</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menu-btn" class="text-white focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden gradient-bg px-4 pb-4 md:hidden"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#sobre" class="hover:text-blue-300 transition">Sobre</a> | |
| <a href="#clientes" class="hover:text-blue-300 transition">Clientes</a> | |
| <a href="#diferenciais" class="hover:text-blue-300 transition">Diferenciais</a> | |
| <a href="#contato" class="hover:text-blue-300 transition">Contato</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-20 md:py-32 relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-blue-900 to-blue-700"></div> | |
| </div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Soluções em Segurança Eletrônica</h2> | |
| <p class="text-xl mb-8 text-blue-100">20 anos de experiência protegendo empresas de todos os portes com tecnologia de ponta e atendimento personalizado.</p> | |
| <a href="https://wa.me/65981224410" target="_blank" class="bg-white text-blue-800 font-bold py-3 px-8 rounded-full hover:bg-blue-100 transition duration-300 inline-flex items-center"> | |
| <i class="fab fa-whatsapp mr-2 text-xl"></i> Fale conosco | |
| </a> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Câmeras de segurança" class="rounded-lg shadow-2xl max-w-md w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="sobre" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-4">Sobre a Realtron</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Painel de alarme de segurança" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-semibold text-blue-800 mb-4">Integrante do Grupo Real Segurança Eletrônica</h3> | |
| <p class="text-gray-700 mb-4">A Realtron faz parte do renomado Grupo Real Segurança Eletrônica, que junto com a Realseg, acumula mais de 20 anos de experiência no mercado de segurança eletrônica.</p> | |
| <p class="text-gray-700 mb-6">Especializada em fornecer soluções completas para empresas, a Realtron se destaca pela qualidade dos equipamentos, instalação profissional e suporte técnico especializado. Somos parceiros oficiais da Intelbras, garantindo equipamentos de última geração para nossos clientes.</p> | |
| <div class="bg-blue-50 p-6 rounded-lg border-l-4 border-blue-600"> | |
| <h4 class="font-bold text-blue-800 mb-2">Nossa Missão</h4> | |
| <p class="text-gray-700">Proporcionar tranquilidade e segurança para nossos clientes através de soluções tecnológicas eficientes e um atendimento diferenciado.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Clients Section --> | |
| <section id="clientes" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-4">Alguns de Nossos Clientes</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Temos orgulho de proteger empresas líderes em seus segmentos</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-md flex items-center justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Drogasil_logo.svg/1200px-Drogasil_logo.svg.png" alt="Drogasil" class="client-logo h-10"> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md flex items-center justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Unic_logo.svg/1200px-Unic_logo.svg.png" alt="UNIC" class="client-logo h-10"> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md flex items-center justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Est%C3%A1cio_logo.svg/1200px-Est%C3%A1cio_logo.svg.png" alt="Estácio" class="client-logo h-10"> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md flex items-center justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Lebrinha_logo.svg/1200px-Lebrinha_logo.svg.png" alt="Lebrinha" class="client-logo h-10"> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md flex items-center justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Casa_Prado_logo.svg/1200px-Casa_Prado_logo.svg.png" alt="Casa Prado" class="client-logo h-10"> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md flex items-center justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Imaginarium_logo.svg/1200px-Imaginarium_logo.svg.png" alt="Imaginarium" class="client-logo h-10"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="diferenciais" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-4">Nossos Diferenciais</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| <p class="text-gray-600 mt-4 max-w-2xl mx-auto">O que nos torna a melhor escolha para a segurança da sua empresa</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-blue-50 p-8 rounded-lg text-center hover:shadow-xl transition duration-300"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-certificate text-blue-800 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-blue-800 mb-3">Parceria Intelbras</h3> | |
| <p class="text-gray-700">Trabalhamos com equipamentos Intelbras, líder nacional em segurança eletrônica com garantia e suporte direto.</p> | |
| </div> | |
| <div class="bg-blue-50 p-8 rounded-lg text-center hover:shadow-xl transition duration-300"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-microchip text-blue-800 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-blue-800 mb-3">Tecnologia de Ponta</h3> | |
| <p class="text-gray-700">Utilizamos apenas equipamentos de última geração, com certificação internacional de qualidade.</p> | |
| </div> | |
| <div class="bg-blue-50 p-8 rounded-lg text-center hover:shadow-xl transition duration-300"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-user-shield text-blue-800 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-blue-800 mb-3">Equipe Especializada</h3> | |
| <p class="text-gray-700">Nossos técnicos possuem ampla experiência e treinamento constante para atender às suas necessidades.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 gradient-bg text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Pronto para levar a segurança da sua empresa para o próximo nível?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto text-blue-100">Entre em contato agora mesmo e solicite uma avaliação gratuita do seu sistema de segurança.</p> | |
| <a href="https://wa.me/65981224410" target="_blank" class="bg-white text-blue-800 font-bold py-3 px-8 rounded-full hover:bg-blue-100 transition duration-300 inline-flex items-center floating-button"> | |
| <i class="fab fa-whatsapp mr-2 text-xl"></i> Entrar em Contato | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contato" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-4">Entre em Contato</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Estamos à disposição para esclarecer dúvidas e apresentar soluções personalizadas</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <div class="bg-blue-50 p-8 rounded-lg h-full"> | |
| <h3 class="text-xl font-semibold text-blue-800 mb-6">Informações de Contato</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fab fa-whatsapp text-blue-800"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-blue-800">WhatsApp</h4> | |
| <p class="text-gray-700"> | |
| <a href="https://wa.me/65981224410" target="_blank" class="hover:underline">Clique para conversar</a> | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-blue-800"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-blue-800">E-mail</h4> | |
| <p class="text-gray-700">projetos@realtron.com.br</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-blue-800"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-blue-800">Endereço</h4> | |
| <p class="text-gray-700">Cuiabá - MT</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-blue-50 p-8 rounded-lg h-full flex flex-col items-center justify-center"> | |
| <h3 class="text-xl font-semibold text-blue-800 mb-6 text-center">Precisa de ajuda?</h3> | |
| <p class="text-gray-700 mb-6 text-center">Entre em contato conosco via WhatsApp para um atendimento rápido e personalizado.</p> | |
| <a href="https://wa.me/65981224410" target="_blank" class="bg-green-500 text-white font-bold py-3 px-8 rounded-full hover:bg-green-600 transition duration-300 inline-flex items-center"> | |
| <i class="fab fa-whatsapp mr-2 text-xl"></i> Chamar no WhatsApp | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-blue-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between"> | |
| <div class="mb-8 md:mb-0"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-white rounded-full p-2 mr-4"> | |
| <i class="fas fa-shield-alt text-blue-800 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h2 class="text-2xl font-bold">REALTRON</h2> | |
| <p class="text-blue-300 text-sm">Segurança Eletrônica</p> | |
| </div> | |
| </div> | |
| <p class="text-blue-200 max-w-xs">Parte do Grupo Real Segurança Eletrônica, com mais de 20 anos de experiência no mercado.</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#sobre" class="text-blue-200 hover:text-white transition">Sobre</a></li> | |
| <li><a href="#clientes" class="text-blue-200 hover:text-white transition">Clientes</a></li> | |
| <li><a href="#diferenciais" class="text-blue-200 hover:text-white transition">Diferenciais</a></li> | |
| <li><a href="#contato" class="text-blue-200 hover:text-white transition">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Contato</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fab fa-whatsapp mr-2 text-blue-300"></i> | |
| <a href="https://wa.me/65981224410" target="_blank" class="hover:underline">WhatsApp</a> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-blue-300"></i> | |
| <span>projetos@realtron.com.br</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Redes Sociais</h3> | |
| <div class="flex space-x-4"> | |
| <a href="https://instagram.com/gruporeal_seguranca" target="_blank" class="bg-blue-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-blue-800 mt-12 pt-8 text-center text-blue-300"> | |
| <p>© 2023 Realtron - Todos os direitos reservados</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Floating WhatsApp Button --> | |
| <a href="https://wa.me/65981224410" target="_blank" class="fixed bottom-6 right-6 bg-green-500 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-xl hover:bg-green-600 transition z-50"> | |
| <i class="fab fa-whatsapp text-2xl"></i> | |
| </a> | |
| <script> | |
| // Mobile menu toggle | |
| const menuBtn = document.getElementById('menu-btn'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| 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' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Form submission (example) | |
| const contactForm = document.querySelector('form'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Mensagem enviada com sucesso! Entraremos em contato em breve.'); | |
| this.reset(); | |
| }); | |
| } | |
| </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=SteAlbuquerque/pai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |