Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="DUBCOM - Soluções em Tech Marketing e Automação com n8n. Oferecemos integração CRM/ERP, bots de WhatsApp e automação de processos para seu negócio."> | |
| <meta name="keywords" content="automação, n8n, tech marketing, bots WhatsApp, CRM, ERP, integração, Chatwoot, Mautic"> | |
| <meta name="author" content="DUBCOM"> | |
| <meta property="og:title" content="DUBCOM - Soluções em Tech Marketing e Automação"> | |
| <meta property="og:description" content="Automação inteligente com n8n, bots WhatsApp e integração CRM/ERP para impulsionar seu negócio."> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:url" content="https://dubcom.com.br"> | |
| <meta property="og:image" content="https://dubcom.com.br/wp-content/uploads/2023/04/Horizontal.png.webp"> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <link rel="canonical" href="https://dubcom.com.br"> | |
| <title>DUBCOM - Soluções em Tech Marketing e Automação com n8n | Bots WhatsApp | CRM/ERP</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 rel="alternate" hreflang="en" href="https://dubcom.com.br/en" /> | |
| <link rel="alternate" hreflang="pt-BR" href="https://dubcom.com.br" /> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#2563eb', | |
| secondary: '#10b981', | |
| dark: '#1e293b', | |
| light: '#f8fafc' | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <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; | |
| } | |
| .form-input { | |
| transition: all 0.3s ease; | |
| } | |
| .form-input:focus { | |
| box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); | |
| } | |
| .success-message { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.4s ease; | |
| } | |
| .success-message.show { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .honey { | |
| position: absolute; | |
| left: -9999px; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .language-switcher { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .language-dropdown { | |
| display: none; | |
| position: absolute; | |
| right: 0; | |
| background-color: white; | |
| min-width: 120px; | |
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1); | |
| z-index: 1; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .language-switcher:hover .language-dropdown { | |
| display: block; | |
| } | |
| .language-dropdown a { | |
| color: #1e293b; | |
| padding: 8px 16px; | |
| text-decoration: none; | |
| display: block; | |
| transition: background-color 0.3s; | |
| } | |
| .language-dropdown a:hover { | |
| background-color: #f1f5f9; | |
| } | |
| .language-dropdown a.active { | |
| background-color: #2563eb; | |
| color: white; | |
| } | |
| .language-flag { | |
| width: 20px; | |
| height: 15px; | |
| display: inline-block; | |
| margin-right: 8px; | |
| vertical-align: middle; | |
| } | |
| /* Modal styles */ | |
| .modal { | |
| transition: opacity 0.3s ease; | |
| } | |
| .modal-content { | |
| transform: translateY(20px); | |
| transition: all 0.3s ease; | |
| } | |
| .modal.show { | |
| opacity: 1; | |
| } | |
| .modal.show .modal-content { | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-dark"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <a href="/" aria-label="DUBCOM Home"> | |
| <img src="https://dubcom.com.br/wp-content/uploads/2023/04/Horizontal.png.webp" alt="DUBCOM Logo" class="h-10"> | |
| </a> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <div class="language-switcher"> | |
| <button class="flex items-center text-sm font-medium"> | |
| <span class="language-flag" style="background-image: url('https://flagcdn.com/w20/br.png'); background-size: cover;"></span> | |
| PT | |
| <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="language-dropdown"> | |
| <a href="/" class="active"> | |
| <span class="language-flag" style="background-image: url('https://flagcdn.com/w20/br.png'); background-size: cover;"></span> | |
| Português | |
| </a> | |
| <a href="/en"> | |
| <span class="language-flag" style="background-image: url('https://flagcdn.com/w20/us.png'); background-size: cover;"></span> | |
| English | |
| </a> | |
| </div> | |
| </div> | |
| <a href="#contact" class="bg-primary hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300"> | |
| Solicitar Orçamento | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="py-20 bg-gradient-to-r from-blue-50 to-green-50"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight"> | |
| Transforme seu negócio com <span class="text-primary">automação</span> e <span class="text-secondary">tecnologia</span> | |
| </h1> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Soluções integradas em tech marketing, automação com n8n, bots WhatsApp e integrações CRM/ERP para impulsionar seus resultados. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#services" class="bg-primary hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300"> | |
| Nossos Serviços | |
| </a> | |
| <a href="#contact" class="border border-primary text-primary hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition duration-300"> | |
| Fale Conosco | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="absolute -top-10 -left-10 w-24 h-24 bg-primary rounded-full opacity-20"></div> | |
| <div class="absolute -bottom-10 -right-10 w-24 h-24 bg-secondary rounded-full opacity-20"></div> | |
| <div class="relative bg-white p-8 rounded-2xl shadow-xl floating"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center mr-4"> | |
| <i class="fas fa-bolt text-white text-xl" aria-hidden="true"></i> | |
| </div> | |
| <h2 class="text-xl font-bold">Automação Inteligente</h2> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| Fluxos de trabalho automatizados que economizam tempo e reduzem erros. | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-check text-green-600 text-xs" aria-hidden="true"></i> | |
| </div> | |
| <span class="text-sm">Integração com n8n</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <span class="inline-block px-3 py-1 bg-blue-100 text-primary rounded-full text-sm font-medium mb-4">NOSSOS SERVIÇOS</span> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Soluções Completas para Seu Negócio</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Oferecemos as melhores ferramentas e estratégias para otimizar seus processos e melhorar a experiência do cliente. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-project-diagram text-primary text-2xl" aria-hidden="true"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Automação com n8n</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Fluxos de trabalho personalizados que conectam seus sistemas e automatizam processos repetitivos. | |
| </p> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i> | |
| <span>Integração de plataformas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i> | |
| <span>Automação de marketing</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i> | |
| <span>Notificações inteligentes</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300"> | |
| <div class="w-14 h-14 bg-secondary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fab fa-whatsapp text-secondary text-2xl" aria-hidden="true"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Bots WhatsApp</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Atendimento automatizado 24/7 no WhatsApp com respostas inteligentes e integração com CRM. | |
| </p> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i> | |
| <span>Respostas automáticas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i> | |
| <span>Agendamento de compromissos</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i> | |
| <span>Integração com Chatwoot</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-database text-primary text-2xl" aria-hidden="true"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Integrações CRM/ERP</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Conectamos seus sistemas de gestão com ferramentas de marketing para um fluxo contínuo de dados. | |
| </p> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i> | |
| <span>Sincronização de clientes</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i> | |
| <span>Automação de vendas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i> | |
| <span>Relatórios personalizados</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Form Section --> | |
| <section id="contact" class="py-20 bg-gradient-to-br from-blue-50 to-green-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-primary text-white p-10"> | |
| <h2 class="text-3xl font-bold mb-6">Fale Conosco</h2> | |
| <p class="mb-8"> | |
| Preencha o formulário e nossa equipe entrará em contato o mais breve possível para entender suas necessidades e propor a melhor solução. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-envelope mr-4 text-xl" aria-hidden="true"></i> | |
| <span>contato@dubcom.com.br</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-4 text-xl" aria-hidden="true"></i> | |
| <span>+55 (48) 9 96858-422</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-4 text-xl" aria-hidden="true"></i> | |
| <span>Florianópolis, SC, Brasil</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-10"> | |
| <form | |
| id="contactForm" | |
| method="POST" | |
| action="https://webhooks.dubcom.com.br/webhook/3f858fbf-abf0-44a3-903b-ce27ca28de5d" | |
| enctype="application/x-www-form-urlencoded" | |
| class="space-y-6" | |
| > | |
| <!-- Hidden fields --> | |
| <input type="hidden" name="form_id" value="46492b79"> | |
| <input type="hidden" name="form_name" value="ContatoSite"> | |
| <input type="hidden" name="language" value="pt-BR"> | |
| <!-- Honeypot field --> | |
| <input type="text" name="honey" class="honey" autocomplete="off" aria-hidden="true"> | |
| <!-- Visible fields --> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nome Completo *</label> | |
| <input | |
| type="text" | |
| id="name" | |
| name="name" | |
| required | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 form-input focus:border-primary focus:ring-1 focus:ring-primary" | |
| placeholder="Seu nome completo" | |
| > | |
| <div class="text-red-500 text-sm mt-1 hidden" id="name-error">Por favor, informe seu nome completo</div> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email *</label> | |
| <input | |
| type="email" | |
| id="email" | |
| name="email" | |
| required | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 form-input focus:border-primary focus:ring-1 focus:ring-primary" | |
| placeholder="seu@email.com" | |
| > | |
| <div class="text-red-500 text-sm mt-1 hidden" id="email-error">Por favor, informe um email válido</div> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Telefone *</label> | |
| <input | |
| type="tel" | |
| id="phone" | |
| name="phone" | |
| required | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 form-input focus:border-primary focus:ring-1 focus:ring-primary" | |
| placeholder="(11) 99999-9999" | |
| > | |
| <div class="text-red-500 text-sm mt-1 hidden" id="phone-error">Por favor, informe um telefone válido</div> | |
| </div> | |
| <div> | |
| <label for="mesage" class="block text-sm font-medium text-gray-700 mb-1">Mensagem *</label> | |
| <textarea | |
| id="mesage" | |
| name="mesage" | |
| rows="4" | |
| required | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 form-input focus:border-primary focus:ring-1 focus:ring-primary" | |
| placeholder="Como podemos te ajudar?" | |
| ></textarea> | |
| <div class="text-red-500 text-sm mt-1 hidden" id="message-error">Por favor, escreva sua mensagem</div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input | |
| id="privacy" | |
| name="privacy" | |
| type="checkbox" | |
| required | |
| class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary" | |
| > | |
| </div> | |
| <label for="privacy" class="ml-3 block text-sm text-gray-700"> | |
| Concordo com a <a href="#" class="text-primary hover:underline">política de privacidade</a> | |
| </label> | |
| </div> | |
| <button | |
| type="submit" | |
| id="submitBtn" | |
| class="w-full bg-primary hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center" | |
| aria-label="Enviar mensagem" | |
| > | |
| <span id="submitText">Enviar Mensagem</span> | |
| <i class="fas fa-spinner fa-spin ml-2 hidden" id="spinner" aria-hidden="true"></i> | |
| </button> | |
| <div id="successMessage" class="success-message bg-green-50 text-green-700 p-4 rounded-lg text-center hidden"> | |
| <i class="fas fa-check-circle text-green-500 text-2xl mb-2" aria-hidden="true"></i> | |
| <h3 class="font-bold">Mensagem enviada com sucesso!</h3> | |
| <p>Entraremos em contato em breve.</p> | |
| </div> | |
| <div id="errorMessage" class="success-message bg-red-50 text-red-700 p-4 rounded-lg text-center hidden"> | |
| <i class="fas fa-exclamation-circle text-red-500 text-2xl mb-2" aria-hidden="true"></i> | |
| <h3 class="font-bold">Ocorreu um erro!</h3> | |
| <p>Por favor, tente novamente mais tarde.</p> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-6"> | |
| <a href="/" aria-label="DUBCOM Home"> | |
| <img src="https://dubcom.com.br/wp-content/uploads/2023/04/Horizontal.png.webp" alt="DUBCOM Logo" class="h-10"> | |
| </a> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Soluções em tech marketing e automação para impulsionar seu negócio. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300" aria-label="Facebook"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300" aria-label="Instagram"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300" aria-label="LinkedIn"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300" aria-label="WhatsApp"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Links Rápidos</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">Serviços</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contato</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Portfólio</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Termos de Serviço</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Política de Privacidade</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Cookies</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-400"> | |
| <p>© 2025 DUBCOM. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- English Version Modal (hidden by default) --> | |
| <div id="englishModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 opacity-0 pointer-events-none"> | |
| <div class="modal-content bg-white rounded-lg shadow-xl max-w-md w-full p-6"> | |
| <h3 class="text-xl font-bold mb-4">Welcome to DUBCOM</h3> | |
| <p class="mb-6">We've detected that you might prefer to browse our website in English. Would you like to switch to the English version?</p> | |
| <div class="flex justify-end space-x-4"> | |
| <button id="stayOnPT" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition"> | |
| Continue in Portuguese | |
| </button> | |
| <button id="goToEN" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-700 transition"> | |
| Switch to English | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const form = document.getElementById('contactForm'); | |
| const submitBtn = document.getElementById('submitBtn'); | |
| const submitText = document.getElementById('submitText'); | |
| const spinner = document.getElementById('spinner'); | |
| const successMessage = document.getElementById('successMessage'); | |
| const errorMessage = document.getElementById('errorMessage'); | |
| // Form validation | |
| function validateForm() { | |
| let isValid = true; | |
| // Validate name | |
| const name = document.getElementById('name'); | |
| const nameError = document.getElementById('name-error'); | |
| if (name.value.trim() === '') { | |
| name.classList.add('border-red-500'); | |
| nameError.classList.remove('hidden'); | |
| isValid = false; | |
| } else { | |
| name.classList.remove('border-red-500'); | |
| nameError.classList.add('hidden'); | |
| } | |
| // Validate email | |
| const email = document.getElementById('email'); | |
| const emailError = document.getElementById('email-error'); | |
| const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |
| if (!emailRegex.test(email.value)) { | |
| email.classList.add('border-red-500'); | |
| emailError.classList.remove('hidden'); | |
| isValid = false; | |
| } else { | |
| email.classList.remove('border-red-500'); | |
| emailError.classList.add('hidden'); | |
| } | |
| // Validate phone | |
| const phone = document.getElementById('phone'); | |
| const phoneError = document.getElementById('phone-error'); | |
| const phoneRegex = /^\(?\d{2}\)?[\s-]?\d{4,5}[\s-]?\d{4}$/; | |
| if (!phoneRegex.test(phone.value)) { | |
| phone.classList.add('border-red-500'); | |
| phoneError.classList.remove('hidden'); | |
| isValid = false; | |
| } else { | |
| phone.classList.remove('border-red-500'); | |
| phoneError.classList.add('hidden'); | |
| } | |
| // Validate message | |
| const message = document.getElementById('mesage'); | |
| const messageError = document.getElementById('message-error'); | |
| if (message.value.trim() === '') { | |
| message.classList.add('border-red-500'); | |
| messageError.classList.remove('hidden'); | |
| isValid = false; | |
| } else { | |
| message.classList.remove('border-red-500'); | |
| messageError.classList.add('hidden'); | |
| } | |
| return isValid; | |
| } | |
| // Form submission | |
| form.addEventListener('submit', async function(e) { | |
| e.preventDefault(); | |
| if (!validateForm()) { | |
| return; | |
| } | |
| // Check honeypot field | |
| const honey = document.getElementsByName('honey')[0]; | |
| if (honey.value !== '') { | |
| // Likely a bot, don't submit | |
| return; | |
| } | |
| // Show loading state | |
| submitText.textContent = 'Enviando...'; | |
| spinner.classList.remove('hidden'); | |
| submitBtn.disabled = true; | |
| try { | |
| const formData = new URLSearchParams(new FormData(form)); | |
| const response = await fetch(form.action, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/x-www-form-urlencoded' | |
| }, | |
| body: formData | |
| }); | |
| if (response.ok) { | |
| // Show success message | |
| successMessage.classList.remove('hidden'); | |
| successMessage.classList.add('show'); | |
| form.reset(); | |
| // Hide success message after 5 seconds | |
| setTimeout(() => { | |
| successMessage.classList.remove('show'); | |
| setTimeout(() => { | |
| successMessage.classList.add('hidden'); | |
| }, 300); | |
| }, 5000); | |
| } else { | |
| throw new Error('Network response was not ok'); | |
| } | |
| } catch (error) { | |
| console.error('Error:', error); | |
| // Show error message | |
| errorMessage.classList.remove('hidden'); | |
| errorMessage.classList.add('show'); | |
| // Hide error message after 5 seconds | |
| setTimeout(() => { | |
| errorMessage.classList.remove('show'); | |
| setTimeout(() => { | |
| errorMessage.classList.add('hidden'); | |
| }, 300); | |
| }, 5000); | |
| } finally { | |
| // Reset button state | |
| submitText.textContent = 'Enviar Mensagem'; | |
| spinner.classList.add('hidden'); | |
| submitBtn.disabled = false; | |
| } | |
| }); | |
| // 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) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Language detection and redirection | |
| function checkUserLanguage() { | |
| // Check if user has already chosen a language | |
| if (localStorage.getItem('languagePreference')) { | |
| return; | |
| } | |
| // Detect browser language | |
| const userLanguage = navigator.language || navigator.userLanguage; | |
| // If user's preferred language is English and not already on English version | |
| if (userLanguage.startsWith('en') && !window.location.pathname.startsWith('/en')) { | |
| // Show language suggestion modal | |
| showLanguageModal(); | |
| } | |
| } | |
| function showLanguageModal() { | |
| const modal = document.getElementById('englishModal'); | |
| const stayButton = document.getElementById('stayOnPT'); | |
| const goButton = document.getElementById('goToEN'); | |
| // Show modal | |
| modal.classList.remove('opacity-0', 'pointer-events-none'); | |
| modal.classList.add('opacity-100', 'pointer-events-auto'); | |
| stayButton.addEventListener('click', function() { | |
| localStorage.setItem('languagePreference', 'pt'); | |
| modal.classList.remove('opacity-100', 'pointer-events-auto'); | |
| modal.classList.add('opacity-0', 'pointer-events-none'); | |
| }); | |
| goButton.addEventListener('click', function() { | |
| localStorage.setItem('languagePreference', 'en'); | |
| window.location.href = '/en'; | |
| }); | |
| } | |
| // Run language detection | |
| checkUserLanguage(); | |
| }); | |
| </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=dubcom/sitedubcom" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |