Spaces:
Sleeping
Sleeping
| <html lang="pt-BR" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Contato - SoftEdge Corporation</title> | |
| <!-- SEO & SOCIAL --> | |
| <meta name="description" content="Entre em contato com a SoftEdge Corporation. Estamos prontos para transformar sua ideia em realidade. Desenvolvimento de software personalizado."> | |
| <meta name="keywords" content="contato, softedge, desenvolvimento, software, angola"> | |
| <!-- FAVICON --> | |
| <link rel="icon" href="/assets/placeholder.svg" type="image/svg+xml"> | |
| <link rel="apple-touch-icon" href="/assets/placeholder.svg"> | |
| <meta property="og:image" content="/assets/placeholder.svg" /> | |
| <meta property="og:title" content="Contato - SoftEdge Corporation" /> | |
| <meta property="og:description" content="Vamos conversar sobre seu projeto" /> | |
| <!-- FONTS --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <!-- TAILWIND CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'system-ui', 'sans-serif'], | |
| }, | |
| colors: { | |
| primary: { | |
| 50: '#ecfeff', | |
| 100: '#cffafe', | |
| 500: '#06b6d4', | |
| 600: '#0891b2', | |
| 700: '#0e7490', | |
| 900: '#164e63', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <!-- LUCIDE ICONS --> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <!-- CUSTOM CSS --> | |
| <link href="/assets/css/style.css" rel="stylesheet"> | |
| </head> | |
| <body class="min-h-screen bg-linear-to-br from-slate-950 via-slate-900 to-slate-950 text-white antialiased font-sans"> | |
| <!-- HEADER --> | |
| <header class="fixed top-0 left-0 right-0 z-50 glass"> | |
| <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <!-- Logo --> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-xl overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5"> | |
| <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-xl"> | |
| </div> | |
| <span class="text-xl font-bold gradient-text">SoftEdge</span> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="/" class="text-gray-300 hover:text-cyan-400 transition-colors">Início</a> | |
| <a href="/sobre" class="text-gray-300 hover:text-cyan-400 transition-colors">Sobre</a> | |
| <a href="/servicos" class="text-gray-300 hover:text-cyan-400 transition-colors">Serviços</a> | |
| <a href="/projetos" class="text-gray-300 hover:text-cyan-400 transition-colors">Projetos</a> | |
| <a href="/contato" class="text-white hover:text-cyan-400 transition-colors font-medium">Contato</a> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <button class="md:hidden text-white" id="mobile-menu-button"> | |
| <i data-lucide="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Navigation --> | |
| <div class="md:hidden hidden" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 bg-slate-900/95 rounded-lg mt-2"> | |
| <a href="/" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Início</a> | |
| <a href="/sobre" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Sobre</a> | |
| <a href="/servicos" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Serviços</a> | |
| <a href="/projetos" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Projetos</a> | |
| <a href="/contato" class="block px-3 py-2 text-white font-medium">Contato</a> | |
| </div> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- HERO SECTION --> | |
| <section class="relative min-h-[60vh] flex items-center justify-center overflow-hidden pt-16"> | |
| <div class="absolute inset-0 -z-10"> | |
| <div class="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950"></div> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute top-20 left-20 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl"></div> | |
| <div class="absolute bottom-20 right-20 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl"></div> | |
| </div> | |
| </div> | |
| <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <div class="space-y-6"> | |
| <div class="inline-block px-4 py-2 bg-cyan-500/10 rounded-full border border-cyan-500/20"> | |
| <span class="text-cyan-400 text-sm font-semibold uppercase tracking-wider">Entre em Contato</span> | |
| </div> | |
| <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold leading-tight"> | |
| Vamos <span class="gradient-text">conversar</span> sobre<br> | |
| seu projeto | |
| </h1> | |
| <p class="text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto"> | |
| Estamos prontos para transformar sua ideia em uma solução tecnológica excepcional. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- MAIN CONTENT --> | |
| <main class="relative py-20 lg:py-32"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <!-- CONTACT FORM & INFO --> | |
| <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 mb-32"> | |
| <!-- CONTACT FORM --> | |
| <div> | |
| <div class="glass rounded-2xl p-8"> | |
| <h2 class="text-2xl font-bold text-white mb-6">Envie sua mensagem</h2> | |
| <form id="contact-form" class="space-y-6"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="nome" class="block text-sm font-medium text-gray-300 mb-2"> | |
| Nome completo * | |
| </label> | |
| <input | |
| type="text" | |
| id="nome" | |
| name="nome" | |
| required | |
| class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors" | |
| placeholder="Seu nome completo" | |
| > | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-300 mb-2"> | |
| Email * | |
| </label> | |
| <input | |
| type="email" | |
| id="email" | |
| name="email" | |
| required | |
| class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors" | |
| placeholder="seu@email.com" | |
| > | |
| </div> | |
| </div> | |
| <div> | |
| <label for="empresa" class="block text-sm font-medium text-gray-300 mb-2"> | |
| Empresa/Projeto | |
| </label> | |
| <input | |
| type="text" | |
| id="empresa" | |
| name="empresa" | |
| class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors" | |
| placeholder="Nome da empresa ou projeto" | |
| > | |
| </div> | |
| <div> | |
| <label for="assunto" class="block text-sm font-medium text-gray-300 mb-2"> | |
| Assunto * | |
| </label> | |
| <select | |
| id="assunto" | |
| name="assunto" | |
| required | |
| class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors" | |
| > | |
| <option value="">Selecione um assunto</option> | |
| <option value="desenvolvimento-web">Desenvolvimento Web</option> | |
| <option value="aplicativos-mobile">Aplicativos Mobile</option> | |
| <option value="inteligencia-artificial">Inteligência Artificial</option> | |
| <option value="cloud-devops">Cloud & DevOps</option> | |
| <option value="consultoria">Consultoria Técnica</option> | |
| <option value="suporte">Suporte & Manutenção</option> | |
| <option value="outros">Outros</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="mensagem" class="block text-sm font-medium text-gray-300 mb-2"> | |
| Mensagem * | |
| </label> | |
| <textarea | |
| id="mensagem" | |
| name="mensagem" | |
| rows="5" | |
| required | |
| class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors resize-none" | |
| placeholder="Conte-nos sobre seu projeto..." | |
| ></textarea> | |
| </div> | |
| <button | |
| type="submit" | |
| id="submit-btn" | |
| class="w-full bg-linear-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 hover-lift disabled:opacity-50 disabled:cursor-not-allowed" | |
| > | |
| <span id="btn-text">Enviar Mensagem</span> | |
| <i data-lucide="send" class="inline w-5 h-5 ml-2"></i> | |
| </button> | |
| </form> | |
| <!-- SUCCESS MESSAGE --> | |
| <div id="success-message" class="hidden mt-6 p-4 bg-green-500/10 border border-green-500/20 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-400 mr-3"></i> | |
| <div> | |
| <h3 class="text-green-400 font-semibold">Mensagem enviada!</h3> | |
| <p class="text-green-300 text-sm">Entraremos em contato em até 24 horas.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ERROR MESSAGE --> | |
| <div id="error-message" class="hidden mt-6 p-4 bg-red-500/10 border border-red-500/20 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i data-lucide="alert-circle" class="w-5 h-5 text-red-400 mr-3"></i> | |
| <div> | |
| <h3 class="text-red-400 font-semibold">Erro ao enviar</h3> | |
| <p id="error-text" class="text-red-300 text-sm">Verifique os dados e tente novamente.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CONTACT INFO --> | |
| <div class="space-y-8"> | |
| <!-- Contact Methods --> | |
| <div> | |
| <h2 class="text-2xl font-bold text-white mb-6">Informações de Contato</h2> | |
| <div class="space-y-6"> | |
| <!-- Email --> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-12 h-12 bg-cyan-500/20 rounded-lg flex items-center justify-center flex-shrink-0"> | |
| <i data-lucide="mail" class="w-6 h-6 text-cyan-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-1">Email</h3> | |
| <a href="mailto:softedgecorporation@gmail.com" class="text-gray-400 hover:text-cyan-400 transition-colors"> | |
| softedgecorporation@gmail.com | |
| </a> | |
| <p class="text-sm text-gray-500 mt-1">Resposta em até 24 horas</p> | |
| </div> | |
| </div> | |
| <!-- WhatsApp --> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center flex-shrink-0"> | |
| <i data-lucide="message-circle" class="w-6 h-6 text-green-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-1">WhatsApp</h3> | |
| <a href="https://wa.me/244900000000" target="_blank" class="text-gray-400 hover:text-cyan-400 transition-colors"> | |
| +244 900 000 000 | |
| </a> | |
| <p class="text-sm text-gray-500 mt-1">Resposta imediata</p> | |
| </div> | |
| </div> | |
| <!-- Location --> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center flex-shrink-0"> | |
| <i data-lucide="map-pin" class="w-6 h-6 text-purple-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-1">Localização</h3> | |
| <p class="text-gray-400">Luanda, Angola</p> | |
| <p class="text-sm text-gray-500 mt-1">Suporte remoto global</p> | |
| </div> | |
| </div> | |
| <!-- Business Hours --> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-12 h-12 bg-orange-500/20 rounded-lg flex items-center justify-center flex-shrink-0"> | |
| <i data-lucide="clock" class="w-6 h-6 text-orange-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-1">Horário de Funcionamento</h3> | |
| <div class="text-gray-400 text-sm space-y-1"> | |
| <p>Segunda - Sexta: 8h às 18h</p> | |
| <p>Sábado: 9h às 13h</p> | |
| <p class="text-gray-500">Horário de Angola (UTC+1)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Why Choose Us --> | |
| <div class="glass rounded-2xl p-8"> | |
| <h3 class="text-xl font-bold text-white mb-4">Por que nos escolher?</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-3"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i> | |
| <div> | |
| <p class="text-white font-medium">Experiência Comprovada</p> | |
| <p class="text-gray-400 text-sm">70+ projetos entregues com sucesso</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i> | |
| <div> | |
| <p class="text-white font-medium">Suporte Completo</p> | |
| <p class="text-gray-400 text-sm">Acompanhamento do início ao fim</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i> | |
| <div> | |
| <p class="text-white font-medium">Tecnologias Modernas</p> | |
| <p class="text-gray-400 text-sm">Sempre utilizando as melhores ferramentas</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i> | |
| <div> | |
| <p class="text-white font-medium">Resultados Garantidos</p> | |
| <p class="text-gray-400 text-sm">Foco em qualidade e satisfação</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ SECTION --> | |
| <div class="mb-32"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6"> | |
| Perguntas <span class="gradient-text">Frequentes</span> | |
| </h2> | |
| <p class="text-gray-400 text-lg max-w-2xl mx-auto"> | |
| Tire suas dúvidas sobre nossos serviços e processos | |
| </p> | |
| </div> | |
| <div class="max-w-4xl mx-auto space-y-6"> | |
| <div class="glass rounded-xl p-6"> | |
| <h3 class="text-lg font-semibold text-white mb-3">Quanto tempo leva para desenvolver um projeto?</h3> | |
| <p class="text-gray-400">O prazo varia conforme a complexidade do projeto. Um site institucional pode levar 2-4 semanas, enquanto um sistema completo pode levar 3-6 meses. Fornecemos um cronograma detalhado após a análise dos requisitos.</p> | |
| </div> | |
| <div class="glass rounded-xl p-6"> | |
| <h3 class="text-lg font-semibold text-white mb-3">Vocês trabalham com manutenção após a entrega?</h3> | |
| <p class="text-gray-400">Sim! Oferecemos planos de manutenção e suporte técnico contínuo. Incluímos 3 meses de suporte gratuito na entrega e oferecemos planos mensais/anuais para atualizações e correções.</p> | |
| </div> | |
| <div class="glass rounded-xl p-6"> | |
| <h3 class="text-lg font-semibold text-white mb-3">Como funciona o processo de desenvolvimento?</h3> | |
| <p class="text-gray-400">Seguimos uma metodologia ágil: 1) Discovery e análise, 2) Design e prototipagem, 3) Desenvolvimento com sprints semanais, 4) Testes e deploy. Mantemos comunicação constante e entregas parciais para feedback.</p> | |
| </div> | |
| <div class="glass rounded-xl p-6"> | |
| <h3 class="text-lg font-semibold text-white mb-3">Trabalham com projetos fora de Angola?</h3> | |
| <p class="text-gray-400">Sim! Atendemos clientes em todo o mundo. Utilizamos ferramentas de comunicação remota e podemos adaptar nossos horários para diferentes fusos horários. Já trabalhamos com clientes em Portugal, Brasil e outros países africanos.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA SECTION --> | |
| <div class="text-center"> | |
| <div class="glass rounded-3xl p-12 lg:p-16 max-w-4xl mx-auto"> | |
| <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6"> | |
| Pronto para <span class="gradient-text">começar</span>? | |
| </h2> | |
| <p class="text-gray-400 text-lg mb-8 max-w-2xl mx-auto"> | |
| Não perca tempo. Vamos transformar sua ideia em realidade hoje mesmo. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="https://wa.me/244900000000" target="_blank" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-8 rounded-xl transition-all duration-300 hover-lift"> | |
| WhatsApp Agora | |
| <i data-lucide="message-circle" class="inline w-5 h-5 ml-2"></i> | |
| </a> | |
| <a href="mailto:softedgecorporation@gmail.com" class="border border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10 font-semibold py-4 px-8 rounded-xl transition-all duration-300"> | |
| Enviar Email | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- FOOTER --> | |
| <footer class="relative bg-slate-950/95 backdrop-blur-xl border-t border-white/5 mt-20 overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <!-- Company Info --> | |
| <div> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="w-12 h-12 rounded-xl overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5"> | |
| <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-xl"> | |
| </div> | |
| <span class="text-2xl font-bold gradient-text">SoftEdge</span> | |
| </div> | |
| <p class="text-gray-400 text-sm leading-relaxed"> | |
| Começamos com um sonho. Hoje desenvolvemos realidades lógicas e softwares mais amáveis. | |
| </p> | |
| </div> | |
| <!-- Quick Links --> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Navegação</h3> | |
| <div class="space-y-2"> | |
| <a href="/" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Início</a> | |
| <a href="/sobre" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Sobre</a> | |
| <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Serviços</a> | |
| <a href="/projetos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Projetos</a> | |
| <a href="/contato" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Contato</a> | |
| </div> | |
| </div> | |
| <!-- Services --> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Serviços</h3> | |
| <div class="space-y-2"> | |
| <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Desenvolvimento Web</a> | |
| <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Apps Mobile</a> | |
| <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Inteligência Artificial</a> | |
| <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Cloud & DevOps</a> | |
| </div> | |
| </div> | |
| <!-- Contact --> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Contato</h3> | |
| <div class="space-y-3"> | |
| <a href="mailto:softedgecorporation@gmail.com" class="flex items-center text-gray-400 hover:text-cyan-400 transition-colors text-sm"> | |
| <i data-lucide="mail" class="w-4 h-4"></i> | |
| <span class="ml-2">Email</span> | |
| </a> | |
| <a href="https://wa.me/244900000000" target="_blank" class="flex items-center text-gray-400 hover:text-cyan-400 transition-colors text-sm"> | |
| <i data-lucide="message-circle" class="w-4 h-4"></i> | |
| <span class="ml-2">WhatsApp</span> | |
| </a> | |
| <div class="flex items-center text-gray-400 text-sm"> | |
| <i data-lucide="map-pin" class="w-4 h-4"></i> | |
| <span class="ml-2">Luanda, Angola</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-white/5 mt-12 pt-8 text-center"> | |
| <p class="text-gray-400 text-sm"> | |
| © 2025 <span class="text-white font-semibold">SoftEdge Corporation</span>. Todos os direitos reservados. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- SCRIPTS --> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize Lucide icons | |
| lucide.createIcons(); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Contact form handling | |
| const contactForm = document.getElementById('contact-form'); | |
| const submitBtn = document.getElementById('submit-btn'); | |
| const btnText = document.getElementById('btn-text'); | |
| const successMessage = document.getElementById('success-message'); | |
| const errorMessage = document.getElementById('error-message'); | |
| const errorText = document.getElementById('error-text'); | |
| contactForm.addEventListener('submit', async function(e) { | |
| e.preventDefault(); | |
| // Show loading state | |
| submitBtn.disabled = true; | |
| btnText.textContent = 'Enviando...'; | |
| // Hide previous messages | |
| successMessage.classList.add('hidden'); | |
| errorMessage.classList.add('hidden'); | |
| // Get form data | |
| const formData = new FormData(contactForm); | |
| const data = Object.fromEntries(formData.entries()); | |
| try { | |
| const response = await fetch('/api/contact', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify(data) | |
| }); | |
| const result = await response.json(); | |
| if (response.ok) { | |
| // Show success message | |
| successMessage.classList.remove('hidden'); | |
| // Reset form | |
| contactForm.reset(); | |
| } else { | |
| // Show error message | |
| errorText.textContent = result.error || 'Erro ao enviar mensagem'; | |
| errorMessage.classList.remove('hidden'); | |
| } | |
| } catch (error) { | |
| console.error('Error:', error); | |
| errorText.textContent = 'Erro de conexão. Tente novamente.'; | |
| errorMessage.classList.remove('hidden'); | |
| } finally { | |
| // Reset button state | |
| submitBtn.disabled = false; | |
| btnText.textContent = 'Enviar Mensagem'; | |
| } | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| .glass { | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #06b6d4, #3b82f6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hover-lift { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .hover-lift:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2); | |
| } | |
| </style> | |
| </body> | |
| </html> | |