Spaces:

MatheusDavi
/

fgautoma-o-com

Running

App Files Files Community

Ctrl+K

Ctrl+K

1 contributor

History: 3 commits

MatheusDavi's picture

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fg Automação de Brusque | Portões Automáticos</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; } .bg-gradiente { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); } .section-title { position: relative; display: inline-block; padding-bottom: 10px; } .section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50%; height: 3px; background: #2563eb; border-radius: 5px; } .testimonial-card { transition: all 0.3s ease; transform-style: preserve-3d; box-shadow: 0 5px 15px rgba(0,0,0,0.1); position: relative; } .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(37, 99, 235, 0.2); } .product-card { transition: all 0.3s ease; overflow: hidden; position: relative; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(37, 99, 235, 0.2); } .product-image { transition: transform 0.5s ease; } .product-card:hover .product-image { transform: scale(1.05); } .feature-box { transition: all 0.3s ease; border-left: 4px solid transparent; } .feature-box:hover { border-left-color: #2563eb; background-color: rgba(37, 99, 235, 0.05); } .floating-btn { animation: floating 3s ease-in-out infinite; } @keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .hero-bg { background: url('https://images.unsplash.com/photo-1624960541039-67dea8cc6dfc?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80') no-repeat center center; background-size: cover; position: relative; } .hero-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(37, 99, 235, 0.85); } #mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } #mobile-menu.open { max-height: 300px; } .navbar-active { background-color: white; box-shadow: 0 2px 15px rgba(0,0,0,0.1); } </style> </head> <body class="bg-gray-50">  <header id="navbar" class="fixed w-full z-50 transition-all duration-300"> <div class="container mx-auto px-4"> <div class="flex justify-between items-center py-4"> <div class="flex items-center"> <img src="cea99fb5f2851c3e1e2afc1f173aa0f1228d5245" alt="Fg Automação Logo" class="h-10 mr-3"> <span class="text-xl font-bold text-gray-800">Fg automação</span> </div> <nav class="hidden md:flex space-x-8"> <a href="#home" class="text-blue-600 font-medium hover:text-blue-800">Início</a> <a href="#destaques" class="text-gray-600 hover:text-blue-600">Produtos</a> <a href="#vantagens" class="text-gray-600 hover:text-blue-600">Vantagens</a> <a href="#depoimentos" class="text-gray-600 hover:text-blue-600">Depoimentos</a> <a href="#contato" class="text-gray-600 hover:text-blue-600">Contato</a> </nav> <div class="flex items-center space-x-4"> <a href="tel:+554733505636" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-full text-sm flex items-center shadow-lg hover:shadow-xl transition-all"> <i class="fas fa-phone mr-2"></i>Ligue agora </a> <button id="mobile-menu-btn" class="md:hidden text-gray-600 focus:outline-none"> <i class="fas fa-bars text-2xl"></i> </button> </div> </div>  <div id="mobile-menu" class="md:hidden px-4 pb-4"> <div class="flex flex-col space-y-3 bg-white p-4 rounded-lg shadow-lg"> <a href="#home" class="text-blue-600 font-medium hover:text-blue-800 py-2">Início</a> <a href="#destaques" class="text-gray-600 hover:text-blue-600 py-2">Produtos</a> <a href="#vantagens" class="text-gray-600 hover:text-blue-600 py-2">Vantagens</a> <a href="#depoimentos" class="text-gray-600 hover:text-blue-600 py-2">Depoimentos</a> <a href="#contato" class="text-gray-600 hover:text-blue-600 py-2">Contato</a> </div> </div> </div> </header>  <section id="home" class="hero-bg pt-32 pb-20 relative"> <div class="absolute inset-0"></div> <div class="container mx-auto px-4 flex flex-col md:flex-row items-center relative z-10"> <div class="md:w-1/2 mb-10 md:mb-0"> <h1 class="text-4xl md:text-5xl font-bold text-white leading-tight mb-4"> Segurança e Conforto para sua <span class="text-yellow-300">Casa e Empresa</span> </h1> <p class="text-lg text-blue-100 mb-8 max-w-lg"> Soluções completas em automação para portões eletrônicos com instalação profissional e garantia de qualidade. Seu portão automático com tecnologia de ponta em Brusque e região. </p> <div class="flex flex-wrap gap-4"> <a href="tel:+554733505636" class="bg-white hover:bg-gray-100 text-blue-600 py-3 px-6 rounded-full flex items-center font-medium shadow-lg transform hover:scale-105 transition-all"> <i class="fas fa-phone mr-2"></i> (47) 3350-5636 </a> <a href="#contato" class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-600 text-white py-3 px-6 rounded-full font-medium shadow-md transform hover:scale-105 transition-all"> <i class="fas fa-envelope mr-2"></i> Solicitar Orçamento </a> </div> <div class="mt-10 flex flex-wrap gap-6"> <div class="flex items-center"> <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3"> <i class="fas fa-check"></i> </div> <span class="text-white font-medium">15 anos de experiência</span> </div> <div class="flex items-center"> <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3"> <i class="fas fa-check"></i> </div> <span class="text-white font-medium">Garantia estendida</span> </div> </div> </div> <div class="md:w-1/2 flex justify-center relative"> <div class="relative w-full max-w-md"> <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl w-full h-96 md:h-[500px] border-2 border-white border-opacity-30"></div> <div class="absolute -top-6 -left-6 bg-blue-600 rounded-lg w-32 h-32 z-0 opacity-20"></div> <div class="absolute -bottom-6 -right-6 bg-yellow-400 rounded-lg w-24 h-24 z-0 opacity-20"></div> </div> </div> </div> </section>  <section id="destaques" class="py-20 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl font-bold mb-4 section-title">Nossos Produtos</h2> <p class="text-gray-600 max-w-2xl mx-auto"> Confira nossa linha de produtos de alta qualidade para automação de portões. Soluções completas para sua casa, empresa ou condomínio. </p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">  <div class="bg-white rounded-xl shadow-lg overflow-hidden product-card h-full flex flex-col border border-gray-100"> <div class="relative overflow-hidden h-64"> <img src="https://fg-automacao.s3.amazonaws.com/cremalheira_ferro.jpg" alt="Cremalheira de Ferro 1,5M" class="w-full h-full object-cover"> </div> <div class="p-6 flex-grow flex flex-col"> <div class="flex justify-between items-start"> <h3 class="text-xl font-bold text-gray-800">Cremalheira de Ferro 1,5M</h3> <div class="flex items-center"> <span class="text-blue-600 font-bold text-xl">R$ 59,00</span> </div> </div> <div class="flex items-center mt-2 mb-4"> <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> <span class="text-gray-500 text-sm ml-2">(64 avaliações)</span> </div> <p class="text-gray-600 mb-6"> Cremalheira de ferro resistente para portões deslizantes, com 1,5 metros de comprimento e alta durabilidade. </p> <div class="mt-auto"> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>Ferro resistente</span> </div> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>1,5 metros</span> </div> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>6 meses garantia</span> </div> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>Fácil instalação</span> </div> </div> <div class="flex space-x-3"> <button onclick="enviarWhatsAppProduct('Cremalheira de Ferro 1,5M')" class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg text-sm flex-grow transition-all"> <i class="fas fa-shopping-cart mr-2"></i> Comprar </button> <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-3 px-3 rounded-lg text-sm transition-all"> <i class="fas fa-heart"></i> </button> </div> </div> </div> </div>  <div class="bg-white rounded-xl shadow-lg overflow-hidden product-card h-full flex flex-col border border-gray-100"> <div class="relative overflow-hidden h-64"> <img src="https://fg-automacao.s3.amazonaws.com/cremalheira_aluminio.jpg" alt="Cremalheira de Alumínio 1,5M" class="w-full h-full object-cover"> </div> <div class="p-6 flex-grow flex flex-col"> <div class="flex justify-between items-start"> <h3 class="text-xl font-bold text-gray-800">Cremalheira de Alumínio 1,5M</h3> <div class="flex items-center"> <span class="text-blue-600 font-bold text-xl">R$ 69,00</span> </div> </div> <div class="flex items-center mt-2 mb-4"> <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> <span class="text-gray-500 text-sm ml-2">(87 avaliações)</span> </div> <p class="text-gray-600 mb-6"> Cremalheira de alumínio de alta qualidade para portões deslizantes, com 1,5 metros de comprimento e excelente durabilidade. </p> <div class="mt-auto"> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>Alumínio resistente</span> </div> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>1,5 metros</span> </div> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>6 meses garantia</span> </div> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>Fácil instalação</span> </div> </div> <div class="flex space-x-3"> <button onclick="enviarWhatsAppProduct('Cremalheira de Alumínio 1,5M')" class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg text-sm flex-grow transition-all"> <i class="fas fa-shopping-cart mr-2"></i> Comprar </button> <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-3 px-3 rounded-lg text-sm transition-all"> <i class="fas fa-heart"></i> </button> </div> </div> </div> </div>  <div class="bg-white rounded-xl shadow-lg overflow-hidden product-card h-full flex flex-col border border-gray-100"> <div class="relative overflow-hidden h-64"> <img src="https://fg-automacao.s3.amazonaws.com/modulo_wifi.jpg" alt="Módulo Wi-Fi" class="w-full h-full object-cover"> </div> <div class="p-6 flex-grow flex flex-col"> <div class="flex justify-between items-start"> <h3 class="text-xl font-bold text-gray-800">Módulo Wi-Fi</h3> <div class="flex items-center"> <span class="text-blue-600 font-bold text-xl">R$ 260,00</span> </div> </div> <div class="flex items-center mt-2 mb-4"> <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> <span class="text-gray-500 text-sm ml-2">(245 avaliações)</span> </div> <p class="text-gray-600 mb-6"> Módulo Wi-Fi para portões com entrada para interfone, acionamento por celular, sensor de chuva e controle via aplicativo. </p> <div class="mt-auto"> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>Wi-Fi integrado</span> </div> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>App mobile</span> </div> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>6 meses garantia</span> </div> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>Suporte</span> </div> </div> <div class="flex space-x-3"> <button onclick="enviarWhatsAppProduct('Módulo Wi-Fi')" class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg text-sm flex-grow transition-all"> <i class="fas fa-shopping-cart mr-2"></i> Comprar </button> <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-3 px-3 rounded-lg text-sm transition-all"> <i class="fas fa-heart"></i> </button> </div> </div> </div> </div>  <div class="bg-white rounded-xl shadow-lg overflow-hidden product-card h-full flex flex-col border border-gray-100"> <div class="relative overflow-hidden h-64"> <img src="https://fg-automacao.s3.amazonaws.com/controle_rossi.jpg" alt="Controle Remoto Rossi" class="w-full h-full object-cover"> <div class="absolute top-4 right-4 bg-blue-500 text-white px-3 py-1 rounded-full text-xs font-bold"> NOVO </div> </div> <div class="p-6 flex-grow flex flex-col"> <div class="flex justify-between items-start"> <h3 class="text-xl font-bold text-gray-800">Controle Remoto Rossi</h3> <div class="flex items-center"> <span class="text-blue-600 font-bold text-xl">R$ 55,00</span> </div> </div> <div class="flex items-center mt-2 mb-4"> <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> <span class="text-gray-500 text-sm ml-2">(98 avaliações)</span> </div> <p class="text-gray-600 mb-6"> Controle remoto Rossi de alta qualidade para portões automáticos com tecnologia rolling code para máxima segurança e compatibilidade. </p> <div class="mt-auto"> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>Criptografia</span> </div> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>Alcance 100m</span> </div> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>6 meses garantia</span> </div> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>Universal</span> </div> </div> <div class="flex space-x-3"> <button onclick="enviarWhatsAppProduct('Controle Remoto Rossi')" class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg text-sm flex-grow transition-all"> <i class="fas fa-shopping-cart mr-2"></i> Comprar </button> <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-3 px-3 rounded-lg text-sm transition-all"> <i class="fas fa-heart"></i> </button> </div> </div> </div> </div>  <div class="bg-white rounded-xl shadow-lg overflow-hidden product-card h-full flex flex-col border border-gray-100"> <div class="relative overflow-hidden h-64"> <img src="https://fg-automacao.s3.amazonaws.com/controle_peccinin.jpg" alt="Controle Remoto Peccinin" class="w-full h-full object-cover"> <div class="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold"> NOVIDADE </div> </div> <div class="p-6 flex-grow flex flex-col"> <div class="flex justify-between items-start"> <h3 class="text-xl font-bold text-gray-800">Controle Remoto Peccinin</h3> <div class="flex items-center"> <span class="text-blue-600 font-bold text-xl">R$ 45,00</span> </div> </div> <div class="flex items-center mt-2 mb-4"> <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> <span class="text-gray-500 text-sm ml-2">(172 avaliações)</span> </div> <p class="text-gray-600 mb-6"> Controle remoto universal para portões automáticos com tecnologia rolling code para máxima segurança. Compatível com diversas marcas. </p> <div class="mt-auto"> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>Criptografia</span> </div> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>Longo alcance</span> </div> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>6 meses garantia</span> </div> <div class="flex items-center text-sm"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span>Compatível</span> </div> </div> <div class="flex space-x-3"> <button onclick="enviarWhatsAppProduct('Controle Remoto')" class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg text-sm flex-grow transition-all"> <i class="fas fa-shopping-cart mr-2"></i> Comprar </button> <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-3 px-3 rounded-lg text-sm transition-all"> <i class="fas fa-heart"></i> </button> </div> </div> </div> </div> </div> <div class="text-center mt-16"> <a href="#" class="inline-block bg-white hover:bg-gray-100 text-blue-600 border-2 border-blue-600 py-3 px-8 rounded-full font-medium shadow-md hover:shadow-lg transition-all"> <i class="fas fa-store mr-2"></i> Ver todos os produtos </a> </div> </div> </section>  <section id="vantagens" class="py-20 bg-gradient-to-br from-gray-50 to-blue-50"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl font-bold mb-4 section-title">Por que escolher a Fg Automação?</h2> <p class="text-gray-600 max-w-2xl mx-auto"> Mais de 15 anos de experiência transformando entradas com tecnologia, segurança e conforto. </p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="feature-box bg-white p-8 rounded-xl shadow-sm"> <div class="flex items-start mb-4"> <div class="bg-blue-100 p-3 rounded-full text-blue-600 mr-4"> <i class="fas fa-tools text-xl"></i> </div> <div> <h3 class="text-xl font-bold text-gray-800 mb-2">Instalação Profissional</h3> <p class="text-gray-600"> Profissionais certificados realizam instalações rápidas e limpas, sem danificar sua propriedade, seguindo todos os padrões de segurança. </p> </div> </div> </div> <div class="feature-box bg-white p-8 rounded-xl shadow-sm"> <div class="flex items-start mb-4"> <div class="bg-blue-100 p-3 rounded-full text-blue-600 mr-4"> <i class="fas fa-certificate text-xl"></i> </div> <div> <h3 class="text-xl font-bold text-gray-800 mb-2">Garantia Estendida</h3> <p class="text-gray-600"> 12 meses de garantia em todos os produtos e instalação. Suporte técnico dedicado quando precisar. </p> </div> </div> </div> <div class="feature-box bg-white p-8 rounded-xl shadow-sm"> <div class="flex items-start mb-4"> <div class="bg-blue-100 p-3 rounded-full text-blue-600 mr-4"> <i class="fas fa-lock text-xl"></i> </div> <div> <h3 class="text-xl font-bold text-gray-800 mb-2">Segurança Máxima</h3> <p class="text-gray-600"> Sistemas com certificação internacional e proteção anti-esmagamento para garantir a segurança de sua família e patrimônio. </p> </div> </div> </div> <div class="feature-box bg-white p-8 rounded-xl shadow-sm"> <div class="flex items-start mb-4"> <div class="bg-blue-100 p-3 rounded-full text-blue-600 mr-4"> <i class="fas fa-bolt text-xl"></i> </div> <div> <h3 class="text-xl font-bold text-gray-800 mb-2">Solução Completa</h3> <p class="text-gray-600"> Do projeto ao pós-venda, oferecemos uma solução completa em automação residencial e comercial. </p> </div> </div> </div> <div class="feature-box bg-white p-8 rounded-xl shadow-sm"> <div class="flex items-start mb-4"> <div class="bg-blue-100 p-3 rounded-full text-blue-600 mr-4"> <i class="fas fa-headset text-xl"></i> </div> <div> <h3 class="text-xl font-bold text-gray-800 mb-2">Atendimento Personalizado</h3> <p class="text-gray-600"> Soluções personalizadas para cada cliente, avaliando as necessidades específicas de cada instalação. </p> </div> </div> </div> <div class="feature-box bg-white p-8 rounded-xl shadow-sm"> <div class="flex items-start mb-4"> <div class="bg-blue-100 p-3 rounded-full text-blue-600 mr-4"> <i class="fas fa-map-marker-alt text-xl"></i> </div> <div> <h3 class="text-xl font-bold text-gray-800 mb-2">Atendimento em Brusque</h3> <p class="text-gray-600"> Serviço rápido e eficiente em toda região de Brusque, com equipes especializadas em diferentes bairros. </p> </div> </div> </div> </div>  <div class="mt-16 bg-white rounded-xl shadow-xl overflow-hidden max-w-5xl mx-auto"> <div class="flex flex-col md:flex-row"> <div class="md:w-1/3 bg-gradient-to-br from-blue-500 to-blue-600 p-8 text-white flex items-center justify-center"> <div class="text-center"> <img src="images/equipe-tecnica.jpg" alt="Nossa Equipe Técnica" class="rounded-full w-32 h-32 object-cover border-4 border-white mb-6"> <h3 class="text-2xl font-bold mb-4">Especialistas em Automação</h3> <p class="opacity-90">Mais de 15 anos trazendo tecnologia e segurança para sua casa e empresa</p> </div> </div> <div class="md:w-2/3 p-10"> <h3 class="text-2xl font-bold text-gray-800 mb-4">Atendimento Técnico Especializado</h3> <p class="text-gray-600 mb-6"> Além de vendas, nossa equipe técnica oferece manutenção preventiva e corretiva em todas as marcas de portões automáticos. Serviço rápido e eficiente em toda região de Brusque. </p> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="flex items-start"> <div class="bg-blue-100 text-blue-600 p-2 rounded-md mr-4"> <i class="fas fa-check-circle"></i> </div> <div> <h4 class="font-semibold text-gray-800">Manutenção Preventiva</h4> <p class="text-gray-600 text-sm">Programe revisões periódicas para maior durabilidade</p> </div> </div> <div class="flex items-start"> <div class="bg-blue-100 text-blue-600 p-2 rounded-md mr-4"> <i class="fas fa-check-circle"></i> </div> <div> <h4 class="font-semibold text-gray-800">Reparos Emergenciais</h4> <p class="text-gray-600 text-sm">Atendimento 24 horas para emergências</p> </div> </div> <div class="flex items-start"> <div class="bg-blue-100 text-blue-600 p-2 rounded-md mr-4"> <i class="fas fa-check-circle"></i> </div> <div> <h4 class="font-semibold text-gray-800">Troca de Peças</h4> <p class="text-gray-600 text-sm">Peças originais com garantia de fábrica</p> </div> </div> <div class="flex items-start"> <div class="bg-blue-100 text-blue-600 p-2 rounded-md mr-4"> <i class="fas fa-check-circle"></i> </div> <div> <h4 class="font-semibold text-gray-800">Modernização</h4> <p class="text-gray-600 text-sm">Atualize seu sistema com as últimas tecnologias</p> </div> </div> </div> </div> </div> </div> </div> </section>  <div class="bg-blue-600 text-white py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="text-center"> <div class="text-4xl font-bold mb-2">15+</div> <div class="text-sm opacity-90 uppercase tracking-wider">Anos no mercado</div> </div> <div class="text-center"> <div class="text-4xl font-bold mb-2">2K+</div> <div class="text-sm opacity-90 uppercase tracking-wider">Clientes satisfeitos</div> </div> <div class="text-center"> <div class="text-4xl font-bold mb-2">10+</div> <div class="text-sm opacity-90 uppercase tracking-wider">Bairros atendidos</div> </div> </div> </div> </div>  <section id="depoimentos" class="py-20 bg-gray-900 text-white"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl font-bold mb-4 section-title">Clientes Satisfeitos</h2> <p class="text-gray-300 max-w-2xl mx-auto"> Veja o que nossos clientes dizem sobre nossos serviços e produtos de automação. </p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="testimonial-card bg-gray-800 p-8 rounded-xl"> <div class="flex items-start mb-6"> <img src="images/testimonial1.jpg" alt="Marcos Antônio" class="rounded-full w-14 h-14 object-cover border-2 border-white mr-4"> <div class="ml-4"> <h4 class="font-bold text-lg">Marcos Antônio</h4> <div class="flex text-yellow-400 mt-1"> <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-gray-300"> "Instalaram meu portão em um tempo recorde. O sistema funciona perfeitamente há 3 anos sem nenhum problema. Recomendo a todos!" </p> <div class="mt-4 pt-4 border-t border-gray-700"> <div class="flex items-center"> <i class="fas fa-map-marker-alt text-gray-500 mr-2"></i> <span class="text-sm text-gray-400">Centro, Brusque</span> </div> </div> </div> <div class="testimonial-card bg-gray-800 p-8 rounded-xl"> <div class="flex items-start mb-6"> <img src="images/testimonial2.jpg" alt="Patrícia Silveira" class="rounded-full w-14 h-14 object-cover border-2 border-white"> <div class="ml-4"> <h4 class="font-bold text-lg">Patrícia Silveira</h4> <div class="flex text-yellow-400 mt-1"> <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-gray-300"> "Equipe extremamente profissional! Além do excelente preço, o atendimento pós-venda é nota 10. Resolvem qualquer problema prontamente." </p> <div class="mt-4 pt-4 border-t border-gray-700"> <div class="flex items-center"> <i class="fas fa-map-marker-alt text-gray-500 mr-2"></i> <span class="text-sm text-gray-400">São Luiz, Brusque</span> </div> </div> </div> <div class="testimonial-card bg-gray-800 p-8 rounded-xl"> <div class="flex items-start mb-6"> <img src="images/testimonial3.jpg" alt="Ricardo Fernandes" class="rounded-full w-14 h-14 object-cover border-2 border-white"> <div class="ml-4"> <h4 class="font-bold text-lg">Ricardo Fernandes</h4> <div class="flex text-yellow-400 mt-1"> <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"></i> </div> </div> </div> <p class="text-gray-300"> "Minha empresa precisava de um portão robusto para carga e descarga. A Fg Automação ofereceu a solução perfeita. Ótimo custo-benefício!" </p> <div class="mt-4 pt-4 border-t border-gray-700"> <div class="flex items-center"> <i class="fas fa-map-marker-alt text-gray-500 mr-2"></i> <span class="text-sm text-gray-400">Steffen, Brusque</span> </div> </div> </div> </div> </div> </section>  <section id="contato" class="py-20 bg-white"> <div class="container mx-auto px-4"> <div class="max-w-5xl mx-auto"> <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl shadow-xl overflow-hidden"> <div class="grid grid-cols-1 lg:grid-cols-2"> <div class="p-8 lg:p-12 bg-gradient-to-b from-blue-600 to-blue-700 text-white"> <h2 class="text-2xl font-bold mb-6">Informações de Contato</h2> <p class="mb-8 opacity-90"> Solicite um orçamento sem compromisso ou tire dúvidas sobre nossos produtos e serviços. Nossa equipe está pronta para atendê-lo! </p> <div class="space-y-6 mt-8"> <div class="flex items-start"> <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mt-1"> <i class="fas fa-map-marker-alt"></i> </div> <div class="ml-4"> <h4 class="font-semibold text-lg">Endereço</h4> <p class="opacity-90">R. Prefeito Germano Schaeffer, 102</p> <p class="opacity-90">Centro 1, Brusque - SC</p> </div> </div> <div class="flex items-start"> <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mt-1"> <i class="fas fa-phone-alt"></i> </div> <div class="ml-4"> <h4 class="font-semibold text-lg">Telefone</h4> <p class="opacity-90">(47) 3350-5636</p> <p class="opacity-90">WhatsApp: (47) 3350-5636</p> </div> </div> <div class="flex items-start"> <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mt-1"> <i class="fas fa-envelope"></i> </div> <div class="ml-4"> <h4 class="font-semibold text-lg">Email</h4> <p class="opacity-90">[email protected]</p> </div> </div> <div class="flex items-start"> <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mt-1"> <i class="fas fa-clock"></i> </div> <div class="ml-4"> <h4 class="font-semibold text-lg">Horário de Atendimento</h4> <p class="opacity-90">Segunda à Sexta: 7:30h às 11:30h/ 13:30 às 17:30</p> </div> </div> </div> <div class="mt-10"> <h4 class="font-semibold mb-4">Nos siga nas redes sociais</h4> <div class="flex space-x-4"> <a href="#" class="w-10 h-10 bg-blue-500 hover:bg-blue-400 rounded-full flex items-center justify-center"> <i class="fab fa-facebook-f"></i> </a> <a href="https://www.instagram.com/fg.automacao/" class="w-10 h-10 bg-blue-500 hover:bg-blue-400 rounded-full flex items-center justify-center"> <i class="fab fa-instagram"></i> </a> <a href="#" class="w-10 h-10 bg-blue-500 hover:bg-blue-400 rounded-full flex items-center justify-center"> <i class="fab fa-whatsapp"></i> </a> </div> </div> </div> <div class="p-8 lg:p-12 bg-white"> <h2 class="text-2xl font-bold text-gray-800 mb-6">Solicite Seu Orçamento</h2> <form id="contact-form" class="space-y-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 mb-2 font-medium">Nome Completo</label> <input type="text" id="nome" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Seu nome" required> </div> <div> <label class="block text-gray-700 mb-2 font-medium">Telefone</label> <input type="tel" id="telefone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="(47) 99999-9999" required> </div> <div class="md:col-span-2"> <label class="block text-gray-700 mb-2 font-medium">Tipo de Portão</label> <select id="tipo-portao" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <option>Selecione</option> <option>Pivotante</option> <option>Deslizante</option> <option>Basculante</option> <option>Outro</option> </select> </div> </div> <div> <label class="block text-gray-700 mb-2 font-medium">Endereço</label> <input type="text" id="endereco" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Rua, Número - Bairro"> </div> <div> <label class="block text-gray-700 mb-2 font-medium">Mensagem</label> <textarea id="mensagem" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent h-32" placeholder="Descreva sua necessidade..."></textarea> </div> <div> <button type="button" onclick="enviarWhatsApp()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-6 rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl"> Enviar Solicitação </button> </div> <script> function enviarWhatsApp() { // Get form values const nome = document.getElementById('nome').value; const telefone = document.getElementById('telefone').value; const tipoPortao = document.getElementById('tipo-portao').value; const endereco = document.getElementById('endereco').value; const mensagem = document.getElementById('mensagem').value; // Validate required fields if (!nome || !telefone || !tipoPortao) { alert('Por favor, preencha pelo menos Nome, Telefone e Tipo de Portão para continuar.'); return; } // Format WhatsApp message const whatsappMsg = *Nova Solicitação de Orçamento*\n\n + *Nome:* ${nome}\n + *Telefone:* ${telefone}\n + *Tipo de Portão:* ${tipoPortao}\n + (endereco ? *Endereço:* ${endereco}\n : '') + (mensagem ? *Mensagem:* ${mensagem}\n : '') + \n_Enviado via site FG Automação_; // Encode for URL const encodedMsg = encodeURIComponent(whatsappMsg); // Open WhatsApp with pre-filled message window.open(https://wa.me/554733505636?text=${encodedMsg}, '_blank'); } </script> </form> </div> </div> </div> </div> </div> </section>  <div class="bg-gray-100 py-12"> <div class="container mx-auto px-4"> <div class="bg-white p-6 rounded-xl shadow-lg"> <div class="flex items-center justify-center mb-6"> <div class="bg-blue-600 w-10 h-10 rounded-full flex items-center justify-center text-white mr-3"> <i class="fas fa-map-marker-alt"></i> </div> <h3 class="text-xl font-bold text-gray-800">Onde nos encontrar</h3> </div> <div class="bg-gray-200 border-2 border-dashed w-full h-96 rounded-xl flex items-center justify-center"> <img src="images/mapa-localizacao.jpg" alt="Nossa Localização" class="w-full h-full object-cover rounded-xl"> </div> </div> </div> </div>  <footer class="bg-gray-900 text-white pt-16 pb-10"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10"> <div> <div class="flex items-center mb-6"> <img src="cea99fb5f2851c3e1e2afc1f173aa0f1228d5245" alt="Fg automação Logo" class="h-10 mr-3"> <span class="text-xl font-bold">Fg automação</span> </div> <p class="text-gray-400 mb-6"> Especialistas em automação de portões elétricos em Brusque e região. Soluções completas em segurança e tecnologia para residências e empresas. </p> <div class="flex space-x-4"> <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-blue-600 rounded-full flex items-center justify-center transition-all"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-blue-400 rounded-full flex items-center justify-center transition-all"> <i class="fab fa-twitter"></i> </a> <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-gradient-to-r from-purple-600 to-pink-600 rounded-full flex items-center justify-center transition-all"> <i class="fab fa-instagram"></i> </a> <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-blue-700 rounded-full flex items-center justify-center transition-all"> <i class="fab fa-linkedin-in"></i> </a> </div> </div> <div> <h4 class="text-lg font-bold mb-6">Produtos</h4> <ul class="space-y-3"> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Kits de Automação</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Controladoras</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Controles Remotos</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Motores para Portão</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Acessórios</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Sistemas de Segurança</a></li> </ul> </div> <div> <h4 class="text-lg font-bold mb-6">Links Úteis</h4> <ul class="space-y-3"> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Sobre Nós</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Perguntas Frequentes</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Trabalhe Conosco</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Política de Privacidade</a></li> </ul> </div> <div> <h4 class="text-lg font-bold mb-6">Newsletter</h4> <p class="text-gray-400 mb-4"> Cadastre-se para receber promoções e dicas sobre automação residencial. </p> <form class="mb-4"> <div class="flex"> <input type="email" placeholder="Seu melhor email" class="bg-gray-800 text-white px-4 py-3 w-full rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <button class="bg-blue-600 hover:bg-blue-700 px-4 py-3 rounded-r-lg transition-all"> <i class="fas fa-paper-plane"></i> </button> </div> </form> <p class="text-gray-500 text-sm"> Prometemos não enviar spam. Você pode cancelar sua inscrição a qualquer momento. </p> </div> </div> <div class="border-t border-gray-800 mt-12 pt-10"> <div class="flex flex-col md:flex-row justify-between items-center text-gray-500"> <p>© 2023 Fg Automação de Brusque. Todos os direitos reservados.</p> <div class="flex space-x-6 mt-4 md:mt-0"> <a href="#" class="hover:text-white transition-colors">Termos de Uso</a> <a href="#" class="hover:text-white transition-colors">Política de Privacidade</a> </div> </div> </div> </div> </footer>  <a href="https://wa.me/554733505636" class="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 w-16 h-16 rounded-full flex items-center justify-center text-white shadow-xl z-50 transition-all floating-btn"> <i class="fab fa-whatsapp text-2xl"></i> </a> <script> // Mobile menu toggle document.getElementById('mobile-menu-btn').addEventListener('click', function() { const menu = document.getElementById('mobile-menu'); menu.classList.toggle('open'); }); // Navbar scroll effect window.addEventListener('scroll', function() { const navbar = document.getElementById('navbar'); if (window.scrollY > 50) { navbar.classList.add('navbar-active'); } else { navbar.classList.remove('navbar-active'); } }); // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { // Close mobile menu if open document.getElementById('mobile-menu').classList.remove('open'); window.scrollTo({ top: target.offsetTop - 90, behavior: 'smooth' }); } }); }); // Contact form submission document.getElementById('contact-form').addEventListener('submit', function(e) { e.preventDefault(); // Show success message Swal.fire({ icon: 'success', title: 'Solicitação enviada!', text: 'Entraremos em contato em breve.', confirmButtonColor: '#2563eb', }); // Reset form this.reset(); }); // Function to send WhatsApp message for product function enviarWhatsAppProduct(productName) { // Special case for Peccinin product const displayName = productName === 'Controle Remoto' ? 'Controle Remoto Peccinin' : productName; const whatsappMsg = Olá, tenho interesse em comprar o produto *${displayName}* da Fg Automação. Poderia me fornecer mais informações?; const encodedMsg = encodeURIComponent(whatsappMsg); window.open(https://wa.me/554733505636?text=${encodedMsg}, '_blank'); } // Initialize Swal if not already available if (typeof Swal === 'undefined') { const script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/npm/sweetalert2@11'; document.head.appendChild(script); } </script> </body> </html> - Initial Deployment

7c1eb5c verified 24 days ago