/* =============================================== AGENTES DE IA - LANDING PAGE CSS Interminas - Marketing Digital Estratégico =============================================== */

/* Reset e Base */ * { margin: 0; padding: 0; box-sizing: border-box; }

:root { /* Cores da Identidade Interminas */ --primary-red: #E31E24; --dark-red: #B71C1C; --light-red: #FF5252; --black: #1A1A1A; --dark-gray: #2C2C2C; --medium-gray: #666666; --light-gray: #F5F5F5; --white: #FFFFFF;

/* Tipografia */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

/* Espaçamentos */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 4rem; --spacing-xl: 6rem;

/* Sombras */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16); --shadow-red: 0 4px 20px rgba(227, 30, 36, 0.25);

/* Transições */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; }

body { font-family: var(--font-primary); color: var(--black); line-height: 1.6; background: var(--white); overflow-x: hidden; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); }

/* Tipografia */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }

.highlight { color: var(--primary-red); }

/* Botões */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2rem; border: none; border-radius: 50px; font-family: var(--font-primary); font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all var(--transition-normal); white-space: nowrap; }

.btn-primary { background: var(--primary-red); color: var(--white); box-shadow: var(--shadow-red); }

.btn-primary:hover { background: var(--dark-red); transform: translateY(-2px); box-shadow: 0 6px 28px rgba(227, 30, 36, 0.35); }

.btn-secondary { background: transparent; color: var(--black); border: 2px solid var(--black); }

.btn-secondary:hover { background: var(--black); color: var(--white); }

.btn-large { padding: 1.25rem 2.5rem; font-size: 1.1rem; }

.btn-block { width: 100%; justify-content: center; }

/* =============================================== HERO SECTION =============================================== */

.hero-section { position: relative; min-height: 90vh; display: flex; align-items: center; padding: var(--spacing-xl) 0; overflow: hidden; background: linear-gradient(135deg, #FFFFFF 0%, #F8F8F8 100%); }

.geometric-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0.08; z-index: 0; }

.triangle { position: absolute; width: 0; height: 0; border-style: solid; }

.triangle-1 { top: 10%; right: 10%; border-width: 0 100px 173px 100px; border-color: transparent transparent var(--primary-red) transparent; animation: float 6s ease-in-out infinite; }

.triangle-2 { bottom: 15%; left: 5%; border-width: 173px 100px 0 100px; border-color: var(--primary-red) transparent transparent transparent; animation: float 8s ease-in-out infinite reverse; }

.triangle-3 { top: 50%; left: 15%; border-width: 0 60px 104px 60px; border-color: transparent transparent var(--primary-red) transparent; animation: float 7s ease-in-out infinite; }

.triangle-4 { top: 30%; right: 30%; border-width: 80px 0 80px 138px; border-color: transparent transparent transparent var(--primary-red); animation: float 9s ease-in-out infinite; }

@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } }

.hero-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); align-items: center; }

.hero-text { animation: fadeInLeft 1s ease; }

.hero-title { font-size: 3.5rem; margin-bottom: var(--spacing-md); line-height: 1.1; }

.hero-subtitle { font-size: 1.25rem; color: var(--medium-gray); margin-bottom: var(--spacing-lg); line-height: 1.6; }

.hero-stats { display: flex; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); }

.stat-item { text-align: center; }

.stat-number { font-size: 2.5rem; font-weight: 800; color: var(--primary-red); line-height: 1; margin-bottom: 0.5rem; }

.stat-label { font-size: 0.9rem; color: var(--medium-gray); font-weight: 500; }

.hero-cta { display: flex; gap: var(--spacing-md); flex-wrap: wrap; }

.hero-visual { animation: fadeInRight 1s ease; }

/* Chat Preview */ .chat-preview { background: var(--white); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; max-width: 400px; margin: 0 auto; }

.chat-header { background: var(--primary-red); color: var(--white); padding: 1.5rem; display: flex; align-items: center; gap: 1rem; }

.chat-avatar { width: 50px; height: 50px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--primary-red); }

.chat-info { flex: 1; }

.chat-name { font-weight: 700; font-size: 1.1rem; }

.chat-status { font-size: 0.85rem; opacity: 0.9; }

.chat-messages { padding: 1.5rem; background: #F0F0F0; min-height: 300px; display: flex; flex-direction: column; gap: 1rem; }

.message { max-width: 80%; padding: 0.875rem 1.125rem; border-radius: 18px; font-size: 0.95rem; line-height: 1.5; animation: messageSlide 0.3s ease; }

.bot-message { background: var(--white); color: var(--black); align-self: flex-start; box-shadow: var(--shadow-sm); }

.user-message { background: var(--primary-red); color: var(--white); align-self: flex-end; }

@keyframes messageSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* =============================================== SECTION UTILITIES =============================================== */

section { padding: var(--spacing-xl) 0; }

.section-title { font-size: 2.5rem; margin-bottom: var(--spacing-md); }

.section-title.center { text-align: center; }

.section-subtitle { font-size: 1.25rem; color: var(--medium-gray); margin-bottom: var(--spacing-lg); }

.section-subtitle.center { text-align: center; }

/* =============================================== PROBLEMS SECTION =============================================== */

.problems-section { background: var(--light-gray); }

.problems-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-lg); }

.problem-card { background: var(--white); padding: var(--spacing-md); border-radius: 16px; box-shadow: var(--shadow-sm); transition: all var(--transition-normal); border-top: 4px solid var(--primary-red); }

.problem-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.problem-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary-red), var(--dark-red)); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.75rem; margin-bottom: var(--spacing-sm); }

.problem-card h3 { font-size: 1.35rem; margin-bottom: var(--spacing-sm); color: var(--black); }

.problem-card p { color: var(--medium-gray); line-height: 1.6; }

/* =============================================== HOW IT WORKS SECTION =============================================== */

.how-it-works-section { background: var(--white); }

.steps-container { display: flex; align-items: flex-start; justify-content: space-between; margin-top: var(--spacing-lg); gap: var(--spacing-sm); }

.step-item { flex: 1; text-align: center; position: relative; }

.step-number { display: inline-block; width: 50px; height: 50px; background: var(--primary-red); color: var(--white); border-radius: 50%; font-size: 1.5rem; font-weight: 800; line-height: 50px; margin-bottom: var(--spacing-sm); }

.step-icon { width: 80px; height: 80px; background: var(--light-gray); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-sm); font-size: 2rem; color: var(--primary-red); transition: all var(--transition-normal); }

.step-item:hover .step-icon { background: var(--primary-red); color: var(--white); transform: scale(1.1); }

.step-item h3 { font-size: 1.25rem; margin-bottom: var(--spacing-sm); }

.step-item p { color: var(--medium-gray); font-size: 0.95rem; }

.step-connector { width: 60px; height: 3px; background: linear-gradient(90deg, var(--primary-red) 0%, var(--light-gray) 100%); margin-top: 100px; position: relative; }

.step-connector::after { content: '→'; position: absolute; right: -15px; top: -12px; color: var(--primary-red); font-size: 1.5rem; font-weight: bold; }

/* =============================================== USE CASES SECTION =============================================== */

.use-cases-section { background: var(--light-gray); }

.use-cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-lg); }

.use-case-card { background: var(--white); padding: var(--spacing-md); border-radius: 16px; box-shadow: var(--shadow-sm); text-align: center; transition: all var(--transition-normal); border: 2px solid transparent; }

.use-case-card:hover { border-color: var(--primary-red); transform: translateY(-5px); box-shadow: var(--shadow-md); }

.use-case-icon { width: 70px; height: 70px; background: linear-gradient(135deg, var(--light-red), var(--primary-red)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-sm); font-size: 2rem; color: var(--white); }

.use-case-card h3 { font-size: 1.2rem; margin-bottom: var(--spacing-sm); }

.use-case-card p { color: var(--medium-gray); font-size: 0.95rem; }

/* =============================================== FEATURES SECTION =============================================== */

.features-section { background: var(--white); }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); margin-top: var(--spacing-lg); }

.feature-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); padding: var(--spacing-md); background: var(--light-gray); border-radius: 16px; transition: all var(--transition-normal); }

.feature-card:hover { background: var(--white); box-shadow: var(--shadow-md); transform: translateY(-3px); }

.feature-icon { width: 60px; height: 60px; min-width: 60px; background: var(--primary-red); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.75rem; }

.feature-card h3 { font-size: 1.15rem; margin-bottom: 0.25rem; font-weight: 700; }

.feature-card p { color: var(--medium-gray); font-size: 0.9rem; line-height: 1.5; }

/* =============================================== BENEFITS SECTION =============================================== */

.benefits-section { background: linear-gradient(135deg, var(--primary-red) 0%, var(--dark-red) 100%); color: var(--white); }

.benefits-section .section-title, .benefits-section .section-subtitle { color: var(--white); }

.benefits-section .highlight { color: var(--white); text-decoration: underline; text-decoration-thickness: 3px; }

.benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-xl); margin-top: var(--spacing-lg); max-width: 900px; margin-left: auto; margin-right: auto; }

.benefit-item { text-align: center; }

.benefit-icon { width: 80px; height: 80px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-md); font-size: 2rem; color: var(--white); transition: all var(--transition-normal); }

.benefit-item:hover .benefit-icon { background: var(--white); color: var(--primary-red); transform: scale(1.1); }

.benefit-item h3 { font-size: 1.35rem; margin-bottom: var(--spacing-sm); }

.benefit-item p { opacity: 0.95; line-height: 1.6; }

/* =============================================== FORM SECTION =============================================== */

.form-section { background: var(--light-gray); }

.form-wrapper { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--spacing-lg); align-items: center; }

.form-content { padding-right: var(--spacing-md); }

.form-title { font-size: 2.5rem; margin-bottom: var(--spacing-md); }

.form-description { font-size: 1.1rem; color: var(--medium-gray); margin-bottom: var(--spacing-md); line-height: 1.6; }

.form-benefits { list-style: none; }

.form-benefits li { display: flex; align-items: center; gap: var(--spacing-sm); padding: 0.75rem 0; font-size: 1.05rem; color: var(--black); }

.form-benefits i { color: var(--primary-red); font-size: 1.25rem; }

.form-container { background: var(--white); padding: var(--spacing-lg); border-radius: 20px; box-shadow: var(--shadow-lg); }

/* Form Styles */ .demo-form, .contact-form-placeholder form { display: flex; flex-direction: column; gap: var(--spacing-md); }

.form-group { display: flex; flex-direction: column; gap: 0.5rem; }

.form-group label { font-weight: 600; font-size: 0.95rem; color: var(--black); }

.form-group input, .form-group select, .form-group textarea { padding: 1rem; border: 2px solid #E0E0E0; border-radius: 8px; font-family: var(--font-primary); font-size: 1rem; transition: all var(--transition-fast); }

.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-red); box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.1); }

.form-group textarea { resize: vertical; min-height: 100px; }

.form-privacy { text-align: center; font-size: 0.85rem; color: var(--medium-gray); margin-top: var(--spacing-sm); }

/* =============================================== FAQ SECTION =============================================== */

.faq-section { background: var(--white); }

.faq-container { max-width: 800px; margin: var(--spacing-lg) auto 0; }

.faq-item { background: var(--white); border: 2px solid var(--light-gray); border-radius: 12px; margin-bottom: var(--spacing-md); overflow: hidden; transition: all var(--transition-normal); }

.faq-item:hover { border-color: var(--primary-red); }

.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; cursor: pointer; user-select: none; }

.faq-question h3 { font-size: 1.15rem; font-weight: 600; color: var(--black); }

.faq-question i { color: var(--primary-red); font-size: 1.25rem; transition: transform var(--transition-normal); }

.faq-item.active .faq-question i { transform: rotate(180deg); }

.faq-answer { max-height: 0; overflow: hidden; transition: all var(--transition-normal); }

.faq-item.active .faq-answer { max-height: 500px; }

.faq-answer p { padding: 0 1.5rem 1.5rem; color: var(--medium-gray); line-height: 1.7; }

/* =============================================== FINAL CTA SECTION =============================================== */

.final-cta-section { background: linear-gradient(135deg, var(--black) 0%, var(--dark-gray) 100%); padding: var(--spacing-xl) 0; text-align: center; color: var(--white); }

.final-cta-content h2 { font-size: 2.75rem; margin-bottom: var(--spacing-md); }

.final-cta-content .highlight { color: var(--light-red); }

.final-cta-content p { font-size: 1.25rem; margin-bottom: var(--spacing-lg); opacity: 0.9; max-width: 700px; margin-left: auto; margin-right: auto; }

/* =============================================== ANIMATIONS =============================================== */

@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }

@keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

/* =============================================== RESPONSIVE DESIGN =============================================== */

@media (max-width: 1024px) { .hero-content { grid-template-columns: 1fr; gap: var(--spacing-lg); }

.hero-title { font-size: 2.75rem; }

.steps-container { flex-wrap: wrap; justify-content: center; }

.step-connector { display: none; }

.form-wrapper { grid-template-columns: 1fr; }

.form-content { padding-right: 0; text-align: center; }

.form-benefits { max-width: 400px; margin: 0 auto; }

.features-grid { grid-template-columns: repeat(2, 1fr); }

.benefits-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 768px) { :root { --spacing-xl: 4rem; --spacing-lg: 3rem; }

.hero-title { font-size: 2.25rem; }

.hero-subtitle { font-size: 1.1rem; }

.hero-stats { flex-direction: column; gap: var(--spacing-md); }

.hero-cta { flex-direction: column; }

.btn { width: 100%; justify-content: center; }

.section-title { font-size: 2rem; }

.section-subtitle { font-size: 1.1rem; }

.problems-grid, .use-cases-grid, .features-grid, .benefits-grid { grid-template-columns: 1fr; }

.final-cta-content h2 { font-size: 2rem; } }

@media (max-width: 480px) { .container { padding: 0 var(--spacing-sm); }

.hero-title { font-size: 1.85rem; }

.stat-number { font-size: 2rem; }

.chat-preview { max-width: 100%; }

.section-title { font-size: 1.75rem; }

.form-container { padding: var(--spacing-md); } }

Transforme seu atendimento com Agentes de IA

Atendimento inteligente 24/7 via WhatsApp que entende texto e áudio, responde dúvidas complexas e executa múltiplos atendimentos simultâneos.

24/7

Disponibilidade

∞

Atendimentos Simultâneos

100%

Personalizado

Solicitar Teste Grátis Como Funciona

Agente IA - Sua Empresa

Online agora

Olá! 👋 Como posso ajudar você hoje?

Quais são os horários de funcionamento?

Funciono 24 horas por dia, 7 dias por semana! Estou sempre disponível para te atender. 😊

Problemas que resolvemos

Atendimento Limitado

Sua equipe não consegue atender todos os clientes ao mesmo tempo? Nossos agentes atendem infinitos clientes simultaneamente.

Fora do Horário

Clientes te procuram fora do expediente? Agentes de IA trabalham 24/7, inclusive finais de semana e feriados.

Perguntas Repetitivas

Sua equipe responde as mesmas perguntas o dia todo? Automatize respostas e libere tempo para o que realmente importa.

Informações Complexas

Tem muito conteúdo para seus clientes consultarem? Nossos agentes processam grandes volumes de informação instantaneamente.

Como funciona

Processo simples e rápido para implementar IA na sua empresa

Análise do Seu Negócio

Entendemos suas necessidades, perguntas frequentes e volume de informações dos clientes.

Treinamento da IA

Alimentamos o agente com todas as informações da sua empresa, produtos, serviços e processos.

Integração WhatsApp

Conectamos o agente ao seu número de WhatsApp Business com suporte a texto e áudio.

Ativação e Suporte

Seu agente entra em operação e fornecemos suporte contínuo para otimizações.

Setores que já atendemos

Experiência comprovada em diversos segmentos

Clubes e Lazer

Informações sobre atividades, horários, reservas e programação.

Planos de Saúde

Consulta de cobertura, agendamentos, rede credenciada e procedimentos.

Clínicas de Imagem

Preparação para exames, resultados, agendamentos e dúvidas técnicas.

Atacado e Varejo

Catálogo de produtos, preços, disponibilidade e pedidos automatizados.

Restaurantes

Cardápio digital, pedidos via WhatsApp, promoções e delivery.

Transporte

Horários de rotas, tarifas, pontos de parada e avisos importantes.

Serviços Públicos

Consulta de débitos, segunda via, protocolos e atendimento ao cidadão.

Seu Segmento

Independente do setor, criamos agentes personalizados para seu negócio.

Nossos diferenciais

Texto e Áudio

Aceita mensagens de texto e áudios do WhatsApp, transcrevendo e respondendo naturalmente.

Múltiplos Atendimentos

Atende centenas de clientes ao mesmo tempo, sem perda de qualidade ou tempo de espera.

100% Personalizado

Agente treinado especificamente para seu negócio, com sua identidade e linguagem.

Venda Ativa

Além de atender, também oferecemos modalidade de prospecção ativa via IA.

Sempre Atualizado

Atualizações contínuas conforme seu negócio evolui, mantendo informações precisas.

Seguro e Confiável

Dados protegidos, respostas baseadas em informações verificadas da sua empresa.

Resultados que entregamos

Redução de Custos

Economize com equipe de atendimento operando 24/7 sem custos adicionais de folha de pagamento.

Clientes Satisfeitos

Respostas instantâneas e precisas aumentam a satisfação e fidelização dos clientes.

Mais Conversões

Atendimento rápido no momento certo aumenta suas taxas de conversão e vendas.

Tempo Otimizado

Sua equipe foca em demandas complexas enquanto a IA cuida do atendimento inicial.

Solicite um teste gratuito

Preencha o formulário e nossa equipe entrará em contato para uma demonstração personalizada do agente de IA para sua empresa.

Teste sem compromisso
Demonstração personalizada
Consultoria incluída
Retorno em até 24h

[contact-form-7 id="6b331fb" title="Agente de IA"]

Perguntas frequentes

Quanto tempo leva para implementar um agente de IA?

O prazo varia de 7 a 15 dias úteis, dependendo da complexidade e volume de informações. Inclui análise, treinamento, testes e ajustes antes da ativação.

Preciso ter um número de WhatsApp Business?

Sim, recomendamos um número de WhatsApp Business. Se ainda não tiver, podemos orientar no processo de criação e configuração.

O agente substitui minha equipe de atendimento?

Não substitui, complementa! O agente cuida do atendimento inicial, perguntas frequentes e disponibilidade 24/7. Sua equipe foca em demandas mais complexas e estratégicas.

Como funciona a modalidade de venda ativa?

Além do atendimento receptivo, oferecemos agentes que fazem prospecção ativa, entrando em contato com leads qualificados seguindo sua estratégia comercial.

Posso atualizar as informações do agente depois?

Sim! Fazemos atualizações contínuas conforme seu negócio evolui. Novos produtos, mudanças de preço, novos serviços - tudo pode ser atualizado.

Qual o investimento necessário?

O investimento varia conforme complexidade, volume de atendimentos e recursos necessários. Solicite um teste gratuito e faremos uma proposta personalizada para seu negócio.

Pronto para revolucionar seu atendimento?

Junte-se às empresas que já usam IA para atender melhor, vender mais e crescer de forma inteligente. Solicitar Teste Grátis Agora

/** * AGENTES DE IA - LANDING PAGE JAVASCRIPT * Interminas - Marketing Digital Estratégico */ // Inicialização quando DOM estiver pronto document.addEventListener('DOMContentLoaded', function() { initSmoothScroll(); initFAQ(); initFormValidation(); initAnimations(); initChatAnimation(); }); /** * Smooth Scroll para âncoras */ function initSmoothScroll() { const links = document.querySelectorAll('a[href^="#"]'); links.forEach(link => { link.addEventListener('click', function(e) { const href = this.getAttribute('href'); if (href === '#') { e.preventDefault(); return; } const target = document.querySelector(href); if (target) { e.preventDefault(); const offsetTop = target.offsetTop - 20; window.scrollTo({ top: offsetTop, behavior: 'smooth' }); } }); }); } /** * FAQ Accordion */ function initFAQ() { const faqItems = document.querySelectorAll('.faq-item'); faqItems.forEach(item => { const question = item.querySelector('.faq-question'); question.addEventListener('click', function() { faqItems.forEach(otherItem => { if (otherItem !== item && otherItem.classList.contains('active')) { otherItem.classList.remove('active'); } }); item.classList.toggle('active'); }); }); } /** * Validação de Formulário */ function initFormValidation() { const form = document.getElementById('agentes-ia-form'); if (!form) return; const telefoneInput = document.getElementById('telefone'); if (telefoneInput) { telefoneInput.addEventListener('input', function(e) { let value = e.target.value.replace(/D/g, ''); if (value.length <= 11) { value = value.replace(/^(d{2})(d)/g, '($1) $2'); value = value.replace(/(d)(d{4})$/, '$1-$2'); } e.target.value = value; }); } form.addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(form); const data = Object.fromEntries(formData); if (!data.nome || !data.telefone || !data.email || !data.segmento) { alert('Por favor, preencha todos os campos obrigatórios.'); return; } const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/; if (!emailRegex.test(data.email)) { alert('Por favor, insira um e-mail válido.'); return; } const telefoneDigits = data.telefone.replace(/D/g, ''); if (telefoneDigits.length < 10) { alert('Por favor, insira um telefone válido.'); return; } console.log('Dados do formulário:', data); const submitBtn = form.querySelector('button[type="submit"]'); const originalText = submitBtn.innerHTML; submitBtn.innerHTML = ' Enviado com sucesso!'; submitBtn.disabled = true; submitBtn.style.background = '#4CAF50'; setTimeout(() => { form.reset(); submitBtn.innerHTML = originalText; submitBtn.disabled = false; submitBtn.style.background = ''; showSuccessMessage(); }, 3000); }); } /** * Mostra mensagem de sucesso */ function showSuccessMessage() { const message = document.createElement('div'); message.style.cssText = ` position: fixed; top: 20px; right: 20px; background: #4CAF50; color: white; padding: 1rem 2rem; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); z-index: 9999; animation: slideInRight 0.3s ease; `; message.innerHTML = ' Obrigado! Entraremos em contato em breve.'; document.body.appendChild(message); setTimeout(() => { message.style.animation = 'slideOutRight 0.3s ease'; setTimeout(() => message.remove(), 300); }, 5000); } /** * Animações ao scroll */ function initAnimations() { const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -100px 0px' }; const observer = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); const animatedElements = document.querySelectorAll(` .problem-card, .step-item, .use-case-card, .feature-card, .benefit-item `); animatedElements.forEach((el, index) => { el.style.opacity = '0'; el.style.transform = 'translateY(30px)'; el.style.transition = `all 0.6s ease ${index * 0.1}s`; observer.observe(el); }); } /** * Animação do Chat Preview */ function initChatAnimation() { const chatMessages = document.querySelector('.chat-messages'); if (!chatMessages) return; const additionalMessages = [ { type: 'user', text: '🎯 Vocês atendem no fim de semana?' }, { type: 'bot', text: 'Sim! Estou disponível 24 horas, todos os dias da semana, inclusive finais de semana e feriados. Como posso ajudar?' } ]; let messageIndex = 0; setInterval(() => { if (messageIndex < additionalMessages.length) { const msg = additionalMessages[messageIndex]; const messageEl = document.createElement('div'); messageEl.className = `message ${msg.type}-message`; messageEl.innerHTML = `

${msg.text}

`; chatMessages.appendChild(messageEl); chatMessages.scrollTop = chatMessages.scrollHeight; messageIndex++; } else { messageIndex = 0; const extraMessages = chatMessages.querySelectorAll('.message'); if (extraMessages.length > 3) { for (let i = 3; i { question.addEventListener('click', function() { const faqTitle = this.querySelector('h3').textContent; trackEvent('FAQ', 'Open', faqTitle); }); }); console.log('%c Interminas - Agentes de IA', 'font-size: 20px; font-weight: bold; color: #E31E24;'); console.log('%cMarketing Digital Estratégico', 'font-size: 14px; color: #666;'); console.log('%c→ https://interminas.net', 'font-size: 12px; color: #E31E24;');