🎓 Aula 03 – Agente de Vendas com IA Gratuita

🎓 Aula 03 – Agente de Vendas com IA Gratuita

Agentes

Agentes

Voltar para pĂĄgina principal do blog

Todas as aulas desse curso

Aula 02                                                                   Aula 04

 

Redes Sociais do CĂłdigo Fluente:

facebook

 

 

Scarlett Finch

Scarlett Finch Ă© uma influenciadora virtual criada com IA.

Ela Ă© đŸŽ€ cantora e đŸŽ¶compositora pop britĂąnica.

Siga a Scarlett Finch no Instagram:

facebook

 

Conecte-se comigo!

LinkedIn: Fique Ă  vontade para me adicionar no LinkedIn.

Ao conectar-se comigo, vocĂȘ terĂĄ acesso a atualizaçÔes regulares sobre desenvolvimento web, insights profissionais e oportunidades de networking no setor de tecnologia.

GitHub: Siga-me no GitHub para ficar por dentro dos meus projetos mais recentes, colaborar em cĂłdigo aberto ou simplesmente explorar os repositĂłrios que eu contribuo, o que pode ajudar vocĂȘ a aprender mais sobre programação e desenvolvimento de software.

Recursos e Afiliados

Explorando os recursos abaixo, vocĂȘ ajuda a apoiar nosso site.

Somos parceiros afiliados das seguintes plataformas:

  • https://heygen.com/ – Eleve a produção de seus vĂ­deos com HeyGen! Com esta plataforma inovadora, vocĂȘ pode criar vĂ­deos envolventes utilizando avatares personalizados, ideal para quem busca impactar e conectar com audiĂȘncias em todo o mundo. HeyGen transforma a maneira como vocĂȘ cria conteĂșdo, oferecendo ferramentas fĂĄceis de usar para produzir vĂ­deos educativos, demonstraçÔes de produtos e muito mais. Descubra o poder de comunicar atravĂ©s de avatares interativos e traga uma nova dimensĂŁo para seus projetos. Experimente HeyGen agora e revolucione sua forma de criar vĂ­deos!
  • letsrecast.ai – Redefina a maneira como vocĂȘ consome artigos com Recast. Esta plataforma transforma artigos longos em diĂĄlogos de ĂĄudio que sĂŁo informativos, divertidos e fĂĄceis de entender. Ideal para quem estĂĄ sempre em movimento ou busca uma forma mais conveniente de se manter informado. Experimente Recast agora.
  • dupdub.com – Explore o universo do marketing digital com DupDub. Esta plataforma oferece ferramentas inovadoras e soluçÔes personalizadas para elevar a sua estratĂ©gia de marketing online. Ideal para empresas que buscam aumentar sua visibilidade e eficiĂȘncia em campanhas digitais. Descubra mais sobre DupDub.
  • DeepBrain AI Studios – Revolucione a criação de conteĂșdo com a tecnologia de inteligĂȘncia artificial da DeepBrain AI Studios. Esta plataforma avançada permite que vocĂȘ crie vĂ­deos interativos e apresentaçÔes utilizando avatares digitais gerados por IA, que podem simular conversas reais e interaçÔes humanas. Perfeito para educadores, criadores de conteĂșdo e empresas que querem inovar em suas comunicaçÔes digitais. Explore DeepBrain AI Studios.
  • Audyo.ai – Transforme a maneira como vocĂȘ interage com conteĂșdo auditivo com Audyo.ai. Esta plataforma inovadora utiliza inteligĂȘncia artificial para criar experiĂȘncias de ĂĄudio personalizadas, melhorando a acessibilidade e a compreensĂŁo de informaçÔes atravĂ©s de podcasts, transcriçÔes automĂĄticas e sĂ­ntese de voz avançada. Ideal para profissionais de mĂ­dia, educadores e qualquer pessoa que deseje acessar informaçÔes auditivas de maneira mais eficiente e envolvente. Descubra Audyo.ai e suas possibilidades.
  • Acoust.io – Transforme sua produção de ĂĄudio com Acoust.io. Esta plataforma inovadora fornece uma suite completa de ferramentas para criação, edição e distribuição de ĂĄudio, ideal para artistas, produtores e empresas de mĂ­dia em busca de excelĂȘncia e inovação sonora. Acoust.io simplifica o processo de levar suas ideias Ă  realidade, oferecendo soluçÔes de alta qualidade que elevam seus projetos de ĂĄudio. Experimente Acoust.io agora e descubra um novo patamar de possibilidades para seu conteĂșdo sonoro.
  • Hostinger – Hospedagem web acessĂ­vel e confiĂĄvel. Ideal para quem busca soluçÔes de hospedagem de sites com excelente custo-benefĂ­cio e suporte ao cliente robusto. Saiba mais sobre a Hostinger.
  • Digital Ocean – Infraestrutura de nuvem para desenvolvedores. Oferece uma plataforma de nuvem confiĂĄvel e escalĂĄvel projetada especificamente para desenvolvedores que precisam de servidores virtuais, armazenamento e networking. Explore a Digital Ocean.
  • One.com – SoluçÔes simples e poderosas para o seu site. Uma escolha ideal para quem busca registrar domĂ­nios, hospedar sites ou criar presença online com facilidade e eficiĂȘncia. Visite One.com.

Educação e Networking

Amplie suas habilidades e sua rede participando de cursos gratuitos e comunidades de desenvolvedores:

Canais do Youtube

Explore nossos canais no YouTube para uma variedade de conteĂșdos educativos e de entretenimento, cada um com um foco Ășnico para enriquecer sua experiĂȘncia de aprendizado e lazer.

Toti

Toti: Meu canal pessoal, onde posto clips artesanais de mĂșsicas que curto tocar, dicas de teoria musical, entre outras coisas.

Scarlett Finch

Scarlett Finch: Cantora e influenciadora criada com IA.

Lofi Music Zone Beats

Lofi Music Zone Beats: O melhor da mĂșsica Lofi para estudo, trabalho e relaxamento, criando o ambiente perfeito para sua concentração.

Backing Track / Play-Along

Backing Track / Play-Along: Acompanhe faixas instrumentais para prĂĄtica musical, ideal para mĂșsicos que desejam aprimorar suas habilidades.

CĂłdigo Fluente

Código Fluente: Aulas gratuitas de programação, devops, IA, entre outras coisas.

Putz!

Putz!: Canal da banda Putz!, uma banda virtual, criada durante a pandemia com mais 3 amigos, FĂĄbio, TatĂĄ e Lula.

PIX para doaçÔes

PIX Nubank

PIX Nubank

🎓 Aula 03 – Agente de Vendas com IA Gratuita 

CĂłdigo da aula: Github

🧭 Introdução

Nesta aula, vamos criar um agente especialista em vendas para um produto digital – o livro NeuroZen – Guia da Mente Criativa com IA – e integrá-lo diretamente em uma landing page simples, usando apenas HTML, JavaScript, CSS e uma API de LLM (modelo de linguagem).

Esse agente serĂĄ capaz de responder dĂșvidas sobre o conteĂșdo do livro, alĂ©m de atuar ativamente como um vendedor inteligente, aplicando tĂ©cnicas de persuasĂŁo, gatilhos mentais (como escassez, urgĂȘncia, autoridade e prova social) para incentivar os visitantes a comprar o livro.

Também adicionaremos um formulårio simples para captar e-mails dos interessados, armazenando-os automaticamente numa planilha do Google Sheets via Google Apps Script, tudo sem backend ou infraestrutura complexa.

⚡ Por que optar por uma solução simples?

Nosso objetivo neste tutorial Ă© ensinar os conceitos prĂĄticos de inteligĂȘncia coletiva e sistemas multi-agentes de maneira clara, acessĂ­vel e progressiva.

Por isso, vamos evitar:

  • Uso de servidores backend
  • Banco de dados ou armazenamento persistente complexo
  • TĂ©cnicas avançadas como RAG (Retrieval-Augmented Generation)
  • Infraestrutura ou hospedagem complicada

✅ O que vamos criar nesta aula

  • Um agente especialista em vendas focado no livro NeuroZen – Guia da Mente Criativa com IA
  • Integração direta desse agente numa landing page HTML com JavaScript puro
  • Uso de uma LLM acessada via API (OpenRouter, Groq ou Together.ai)
  • Treinamento do agente via prompt com o conteĂșdo do livro e tĂ©cnicas de vendas
  • FormulĂĄrio integrado ao Google Sheets para captura automĂĄtica de leads

📚 O Agente Especialista em Vendas (NeuroZen – Guia da Mente Criativa com IA)

O agente serĂĄ treinado com um prompt especĂ­fico, abordando nĂŁo apenas o conteĂșdo do livro NeuroZen, mas tambĂ©m estratĂ©gias e tĂ©cnicas de vendas como:

  • Gatilho mental da escassez (“Ășltimas unidades disponĂ­veis”)
  • UrgĂȘncia (“promoção limitada”)
  • Autoridade (“baseado em pesquisas cientĂ­ficas comprovadas”)
  • Prova social (“centenas de leitores satisfeitos”)

O prompt serå enviado em cada interação com o usuårio através da API da LLM, garantindo respostas consistentes e efetivas do agente.

🎯 Exemplo do prompt de sistema do agente vendedor:

js/agent.js


export const agentPrompt = `
VocĂȘ Ă© Rafa, da equipe do NeuroZen. Fale de forma amigĂĄvel, natural e levemente descontraĂ­da, como um brasileiro simpĂĄtico explicando um produto que conhece bem.

## LIVRO: NeuroZen - Guia da Mente Criativa com IA
- Autor: Dr. Alexandre Neural
- 280 pĂĄginas, PDF + EPUB
- Preço: R$ 97 → HOJE: R$ 47 (promoção limitada)
- 8 capĂ­tulos prĂĄticos sobre criatividade + IA

## PRINCIPAIS BENEFÍCIOS:
- Aumenta velocidade criativa em 300%
- 15 técnicas para destravar bloqueios
- Funciona com IAs gratuitas (ChatGPT, Claude)
- TĂ©cnica dos "5 CĂ©rebros Artificiais"
- 500+ prompts criativos inclusos
- Masterclass 2h + comunidade VIP
- Garantia 30 dias

## DEPOIMENTOS:
"Criei mais em 30 dias que no ano todo!" - Ana Silva, Designer
"AgĂȘncia aumentou 400% faturamento" - Carlos Mendonça
"IndispensĂĄvel para criativos" - Mariana Costa

## COMO VOCÊ DEVE FALAR:

### LINGUAGEM NATURAL BRASILEIRA:
- Use ocasionalmente: "cara", "olha", "nossa"
- Use: "legal", "bacana", "show", "muito bom"
- Use: "tå", "né", "pra", "que nem"
- Seja amigĂĄvel mas nĂŁo exagerado
- Mantenha naturalidade sem forçar gírias

### FORMATO DAS RESPOSTAS:
- Responda em 1-2 mensagens curtas
- MĂĄximo 2-3 frases por mensagem
- NUNCA use asteriscos (*) ou formatação
- Seja entusiasta mas profissional
- Use emojis muito raramente

### EXEMPLOS DE COMO RESPONDER:

Se perguntarem sobre conteĂșdo:
"Nossa, o NeuroZen é muito bom mesmo! Ele ensina desde como funciona a criatividade no cérebro até técnicas pråticas com IA."

"O que eu acho mais interessante Ă© a TĂ©cnica dos 5 CĂ©rebros Artificiais - vocĂȘ conversa com 5 personalidades diferentes de IA pra gerar ideias."

Se perguntarem sobre preço:
"Olha, o preço normal é R$ 97, mas hoje tem uma promoção especial por R$ 47."

"Pelo que vem incluso vale muito a pena! Livro completo, 500 prompts, masterclass, comunidade VIP..."

Se perguntarem sobre funcionamento:
"Fica tranquilo, o livro é feito justamente pra quem estå começando com IA."

"O Dr. Alexandre explica tudo de forma bem didåtica, sem complicação."

## REGRAS IMPORTANTES:
❌ NUNCA responda tudo de uma vez
❌ NUNCA use listas com asteriscos
❌ NUNCA seja muito formal ou muito gíria
✅ SEMPRE quebre em mensagens pequenas
✅ SEMPRE seja natural e amigável
✅ SEMPRE mantenha equilíbrio entre profissional e descontraído
`;

📂 Estrutura dos Arquivos

O projeto terĂĄ nove arquivos principais organizados da seguinte forma:

🏠 Páginas HTML:

  1. index.html: pĂĄgina principal com chat e formulĂĄrio de cadastro
  2. thanks.html: pĂĄgina de agradecimento apĂłs cadastro no e-mail
  3. terms-of-use.html: termos de uso e condiçÔes de serviço
  4. privacy-policy.html: política de privacidade e proteção de dados

🎹 Estilização:

  1. styles.css: arquivo Ășnico que estiliza todas as pĂĄginas HTML

⚙ Funcionalidades JavaScript:

  1. chat.js: comunicação com a API da LLM e controle do chat
  2. agent.js: definição do prompt e comportamento do agente vendedor
  3. ui.js: controle visual e feedback das mensagens do chat
  4. form.js: captura e salva os e-mails no Google Sheets

📁 Estrutura de Pastas:

neurozen-website/
├── index.html
├── thanks.html
├── terms-of-use.html
├── privacy-policy.html
├── styles.css
├── js/
│   ├── chat.js
│   ├── agent.js
│   ├── ui.js
│   └── form.js
└── images/
    └── book-cover.png

🔗 ConexĂ”es entre Arquivos:

  • Todas as pĂĄginas HTML usam o mesmo styles.css
  • Apenas o index.html carrega os arquivos JavaScript
  • Navegação consistente entre todas as pĂĄginas
  • Design unificado em todo o projeto

O js/agent.js foi mostrado acima.

Vamos aos outros arquivos.

index.html


<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NeuroZen - Guia da Mente Criativa com IA</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav>
        <div class="logo">NeuroZen</div>
        <ul class="nav-links">
          <li><a href="index.html">InĂ­cio</a></li>
          <li><a href="terms-of-use.html">Termos de Uso</a></li>
          <li><a href="privacy-policy.html">Privacidade</a></li>
          <li><a href="thanks.html">Obrigado</a></li>
        </ul>
      </nav>
    </header>

    <section class="hero">
      <div class="hero-content">
        <div class="text">
          <h1>NeuroZen</h1>
          <p>
            O guia essencial para liberar o poder da sua mente criativa com
            InteligĂȘncia Artificial.
          </p>
          <form id="email-form">
            <input
              type="email"
              name="entry.YOUR_EMAIL_ENTRY_ID"
              placeholder="Seu melhor e-mail"
              required
            />
            <button type="submit">Quero receber novidades</button>
          </form>
        </div>
        <div class="cover">
          <img
            class="animated-book"
            src="images/book-cover.png"
            alt="Capa do livro NeuroZen"
          />
        </div>
      </div>
    </section>

    <section class="testimonials">
      <h2>O que dizem sobre o livro</h2>
      <div class="testimonial-cards">
        <div class="card">
          <p>
            "completamente minha forma de pensar criatividade com IA!"
          </p>
          <span>Juliana M.</span>
        </div>
        <div class="card">
          <p>"verdadeiro desbloqueio mental criativo."</p>
          <span>Pedro L.</span>
        </div>
        <div class="card">
          <p>
            "melhor conteĂșdo que jĂĄ li sobre mente criativa e inteligĂȘncia
            artificial."
          </p>
          <span>Carla V.</span>
        </div>
      </div>
    </section>

    <section id="chat-area" class="chat-section">
      <h2>Tem dĂșvidas sobre o livro?</h2>

      <h2>💬 Converse com nosso especialista</h2>
      <div id="chat-window">
        <div id="chat-messages">
        </div>
        <div id="chat-input">
          <input
            type="text"
            id="user-input"
            placeholder="Digite sua mensagem aqui..."
            required
          />
          <button id="send-btn">Enviar</button>
        </div>
      </div>
    </section>

    <footer>
      <p>&copy; 2025 NeuroZen. Todos os direitos reservados.</p>
    </footer>

    <script type="module" src="js/agent.js"></script>
    <script type="module" src="js/ui.js"></script>
    <script type="module" src="js/chat.js"></script>
    <script type="module" src="js/form.js"></script>
  </body>
</html>

privacy-policy.html


<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PolĂ­tica de Privacidade - NeuroZen</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .content-page {
            max-width: 800px;
            margin: 0 auto;
            padding: 4rem 2rem;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            margin-top: 2rem;
            margin-bottom: 2rem;
        }
        
        .content-page h1 {
            font-size: 2.5rem;
            color: #0d1117;
            margin-bottom: 1rem;
            text-align: center;
        }
        
        .content-page h2 {
            font-size: 1.5rem;
            color: #2563eb;
            margin-top: 2rem;
            margin-bottom: 1rem;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 0.5rem;
        }
        
        .content-page p {
            margin-bottom: 1rem;
            line-height: 1.7;
            color: #475569;
        }
        
        .content-page ul {
            margin-bottom: 1rem;
            padding-left: 2rem;
        }
        
        .content-page li {
            margin-bottom: 0.5rem;
            color: #475569;
        }
        
        .last-updated {
            text-align: center;
            color: #64748b;
            font-style: italic;
            margin-bottom: 2rem;
        }
        
        .page-wrapper {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            min-height: calc(100vh - 140px);
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <div class="logo">NeuroZen</div>
            <ul class="nav-links">
                <li><a href="index.html">InĂ­cio</a></li>
                <li><a href="terms-of-use.html">Termos de Uso</a></li>
                <li><a href="privacy-policy.html">Privacidade</a></li>
                <li><a href="thanks.html">Obrigado</a></li>
            </ul>
        </nav>
    </header>

    <div class="page-wrapper">
        <div class="content-page">
            <h1>PolĂ­tica de Privacidade</h1>
            <p class="last-updated">Última atualização: 26 de julho de 2025</p>

            <h2>1. InformaçÔes que Coletamos</h2>
            <p>Coletamos as seguintes informaçÔes quando vocĂȘ utiliza nossos serviços:</p>
            <ul>
                <li><strong>InformaçÔes fornecidas voluntariamente:</strong> Como seu endereço de e-mail quando vocĂȘ se inscreve para receber novidades sobre o NeuroZen</li>
                <li><strong>InformaçÔes de uso:</strong> Dados sobre como vocĂȘ navega em nosso site, incluindo pĂĄginas visitadas e tempo de permanĂȘncia</li>
                <li><strong>InformaçÔes técnicas:</strong> Endereço IP, tipo de navegador, sistema operacional e informaçÔes do dispositivo</li>
            </ul>

            <h2>2. Como Usamos Suas InformaçÔes</h2>
            <p>Utilizamos suas informaçÔes pessoais para:</p>
            <ul>
                <li>Enviar novidades e atualizaçÔes sobre o livro NeuroZen</li>
                <li>Melhorar nossos serviços e experiĂȘncia do usuĂĄrio</li>
                <li>Responder Ă s suas dĂșvidas e solicitaçÔes</li>
                <li>Cumprir obrigaçÔes legais e regulamentares</li>
            </ul>

            <h2>3. Compartilhamento de InformaçÔes</h2>
            <p>Não vendemos, alugamos ou compartilhamos suas informaçÔes pessoais com terceiros, exceto:</p>
            <ul>
                <li>Quando necessårio para prestação de serviços (ex: plataformas de e-mail)</li>
                <li>Para cumprir obrigaçÔes legais</li>
                <li>Com seu consentimento explĂ­cito</li>
            </ul>

            <h2>4. Segurança dos Dados</h2>
            <p>Implementamos medidas de segurança adequadas para proteger suas informaçÔes pessoais contra acesso não autorizado, alteração, divulgação ou destruição. Isso inclui:</p>
            <ul>
                <li>Criptografia de dados em trĂąnsito e em repouso</li>
                <li>Controles de acesso rigorosos</li>
                <li>Monitoramento regular de segurança</li>
            </ul>

            <h2>5. Seus Direitos</h2>
            <p>De acordo com a LGPD, vocĂȘ tem os seguintes direitos:</p>
            <ul>
                <li>Acesso aos seus dados pessoais</li>
                <li>Correção de dados incompletos ou desatualizados</li>
                <li>Eliminação dos seus dados pessoais</li>
                <li>Portabilidade dos dados</li>
                <li>Revogação do consentimento</li>
            </ul>

            <h2>6. Retenção de Dados</h2>
            <p>Mantemos suas informaçÔes pessoais apenas pelo tempo necessårio para cumprir as finalidades descritas nesta política, salvo quando a retenção for exigida por lei.</p>

            <h2>7. Cookies</h2>
            <p>Utilizamos cookies para melhorar sua experiĂȘncia em nosso site. VocĂȘ pode gerenciar suas preferĂȘncias de cookies atravĂ©s das configuraçÔes do seu navegador.</p>

            <h2>8. AlteraçÔes nesta Política</h2>
            <p>Podemos atualizar esta Política de Privacidade periodicamente. Notificaremos sobre mudanças significativas através do nosso site ou por e-mail.</p>

            <h2>9. Contato</h2>
            <p>Se vocĂȘ tiver dĂșvidas sobre esta PolĂ­tica de Privacidade ou quiser exercer seus direitos, entre em contato conosco:</p>
            <ul>
                <li><strong>E-mail:</strong>neurozenbook@gmail.com</li>
                <li><strong>Endereço:</strong>[Seu endereço completo]</li>
            </ul>
        </div>
    </div>

    <footer>
        <p>&copy; 2025 NeuroZen. Todos os direitos reservados.</p>
    </footer>
</body>
</html>

terms-of-use.html


<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Termos de Uso - NeuroZen</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .content-page {
            max-width: 800px;
            margin: 0 auto;
            padding: 4rem 2rem;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            margin-top: 2rem;
            margin-bottom: 2rem;
        }
        
        .content-page h1 {
            font-size: 2.5rem;
            color: #0d1117;
            margin-bottom: 1rem;
            text-align: center;
        }
        
        .content-page h2 {
            font-size: 1.5rem;
            color: #2563eb;
            margin-top: 2rem;
            margin-bottom: 1rem;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 0.5rem;
        }
        
        .content-page p {
            margin-bottom: 1rem;
            line-height: 1.7;
            color: #475569;
        }
        
        .content-page ul {
            margin-bottom: 1rem;
            padding-left: 2rem;
        }
        
        .content-page li {
            margin-bottom: 0.5rem;
            color: #475569;
        }
        
        .last-updated {
            text-align: center;
            color: #64748b;
            font-style: italic;
            margin-bottom: 2rem;
        }
        
        .page-wrapper {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            min-height: calc(100vh - 140px);
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <div class="logo">NeuroZen</div>
            <ul class="nav-links">
                <li><a href="index.html">InĂ­cio</a></li>
                <li><a href="terms-of-use.html">Termos de Uso</a></li>
                <li><a href="privacy-policy.html">Privacidade</a></li>
                <li><a href="thanks.html">Obrigado</a></li>
            </ul>
        </nav>
    </header>

    <div class="page-wrapper">
        <div class="content-page">
            <h1>Termos de Uso</h1>
            <p class="last-updated">Última atualização: 26 de julho de 2025</p>

            <h2>1. Aceitação dos Termos</h2>
            <p>Ao acessar e usar este site, vocĂȘ aceita e concorda em cumprir os termos e condiçÔes estabelecidos neste documento. Se vocĂȘ nĂŁo concordar com qualquer parte destes termos, nĂŁo deve usar nossos serviços.</p>

            <h2>2. Descrição do Serviço</h2>
            <p>O NeuroZen oferece informaçÔes e conteĂșdo relacionado ao livro "NeuroZen - Guia da Mente Criativa com IA", incluindo:</p>
            <ul>
                <li>InformaçÔes sobre o livro e seu conteĂșdo</li>
                <li>Sistema de newsletter para atualizaçÔes</li>
                <li>Chat para suporte e esclarecimento de dĂșvidas</li>
                <li>Depoimentos e avaliaçÔes de leitores</li>
            </ul>

            <h2>3. Uso AceitĂĄvel</h2>
            <p>VocĂȘ concorda em usar nossos serviços apenas para fins legais e de acordo com estes Termos. É proibido:</p>
            <ul>
                <li>Usar o site para qualquer finalidade ilegal ou nĂŁo autorizada</li>
                <li>Transmitir vĂ­rus, malware ou outros cĂłdigos maliciosos</li>
                <li>Tentar interferir no funcionamento do site</li>
                <li>Coletar informaçÔes de outros usuårios sem autorização</li>
                <li>Reproduzir ou distribuir conteĂșdo protegido por direitos autorais</li>
            </ul>

            <h2>4. Propriedade Intelectual</h2>
            <p>Todo o conteĂșdo deste site, incluindo textos, imagens, logos, e design, Ă© propriedade do NeuroZen ou de seus licenciadores e estĂĄ protegido por leis de direitos autorais e outras leis de propriedade intelectual.</p>

            <h2>5. Privacidade e Dados Pessoais</h2>
            <p>O tratamento de seus dados pessoais Ă© regido por nossa <a href="privacy-policy.html" style="color: #2563eb;">PolĂ­tica de Privacidade</a>, que faz parte integrante destes Termos de Uso.</p>

            <h2>6. Newsletter e ComunicaçÔes</h2>
            <p>Ao se inscrever em nossa newsletter, vocĂȘ:</p>
            <ul>
                <li>Autoriza o envio de e-mails sobre o NeuroZen</li>
                <li>Pode cancelar a inscrição a qualquer momento</li>
                <li>Concorda que podemos usar seu e-mail para comunicaçÔes relacionadas ao livro</li>
            </ul>

            <h2>7. Limitação de Responsabilidade</h2>
            <p>O NeuroZen nĂŁo se responsabiliza por:</p>
            <ul>
                <li>Danos diretos ou indiretos decorrentes do uso do site</li>
                <li>InterrupçÔes temporårias no serviço</li>
                <li>Perda de dados ou informaçÔes</li>
                <li>ConteĂșdo de sites de terceiros linkados</li>
            </ul>

            <h2>8. ModificaçÔes dos Termos</h2>
            <p>Reservamo-nos o direito de modificar estes Termos a qualquer momento. As alteraçÔes entrarão em vigor imediatamente após a publicação no site. O uso continuado dos serviços constitui aceitação dos novos termos.</p>

            <h2>9. RescisĂŁo</h2>
            <p>Podemos suspender ou encerrar seu acesso aos nossos serviços a qualquer momento, sem aviso prĂ©vio, caso vocĂȘ viole estes Termos de Uso.</p>

            <h2>10. Lei AplicĂĄvel</h2>
            <p>Estes Termos sĂŁo regidos pelas leis brasileiras, especificamente:</p>
            <ul>
                <li>Lei Geral de Proteção de Dados (LGPD)</li>
                <li>CĂłdigo de Defesa do Consumidor</li>
                <li>Marco Civil da Internet</li>
            </ul>

            <h2>11. Resolução de Disputas</h2>
            <p>Qualquer disputa relacionada a estes Termos serå resolvida preferencialmente por mediação. Caso não seja possível, o foro competente serå o da comarca de [Sua Cidade], Brasil.</p>

            <h2>12. Contato</h2>
            <p>Para dĂșvidas sobre estes Termos de Uso, entre em contato:</p>
            <ul>
                <li><strong>E-mail:</strong>neurozenbook@gmail.com</li>
                <li><strong>Endereço:</strong>[Seu endereço completo]</li>
            </ul>

            <p style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e2e8f0; color: #64748b; font-size: 0.9rem;">
                Ao continuar usando nossos serviços, vocĂȘ confirma que leu, entendeu e aceita estes Termos de Uso.
            </p>
        </div>
    </div>

    <footer>
        <p>&copy; 2025 NeuroZen. Todos os direitos reservados.</p>
    </footer>
</body>
</html>

thanks.html


<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Obrigado - NeuroZen</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .thanks-wrapper {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            min-height: calc(100vh - 140px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        
        .thanks-content {
            max-width: 600px;
            background: #fff;
            padding: 4rem 3rem;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .thanks-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(135deg, #2563eb, #1e40af);
        }
        
        .success-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #10b981, #059669);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 2rem;
            animation: scaleIn 0.5s ease-out;
        }
        
        .success-icon::after {
            content: '✓';
            color: white;
            font-size: 2.5rem;
            font-weight: bold;
        }
        
        .thanks-content h1 {
            font-size: 2.5rem;
            color: #0d1117;
            margin-bottom: 1rem;
            font-weight: 700;
        }
        
        .thanks-content p {
            font-size: 1.2rem;
            color: #475569;
            margin-bottom: 2rem;
            line-height: 1.6;
        }
        
        .benefits {
            background: #f8fafc;
            padding: 2rem;
            border-radius: 12px;
            margin: 2rem 0;
            border-left: 4px solid #2563eb;
        }
        
        .benefits h3 {
            color: #2563eb;
            margin-bottom: 1rem;
            font-size: 1.3rem;
        }
        
        .benefits ul {
            list-style: none;
            padding: 0;
            text-align: left;
        }
        
        .benefits li {
            color: #475569;
            margin-bottom: 0.8rem;
            padding-left: 1.5rem;
            position: relative;
        }
        
        .benefits li::before {
            content: '🚀';
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .cta-buttons {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-top: 2rem;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #2563eb, #1e40af);
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
        }
        
        .btn-secondary {
            background: transparent;
            color: #2563eb;
            padding: 1rem 2rem;
            border: 2px solid #2563eb;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            background: #2563eb;
            color: white;
        }
        
        .social-proof {
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 1px solid #e2e8f0;
        }
        
        .social-proof p {
            font-size: 0.95rem;
            color: #64748b;
        }
        
        @keyframes scaleIn {
            from {
                transform: scale(0);
            }
            to {
                transform: scale(1);
            }
        }
        
        @media (max-width: 768px) {
            .thanks-content {
                padding: 3rem 2rem;
            }
            
            .thanks-content h1 {
                font-size: 2rem;
            }
            
            .cta-buttons {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <div class="logo">NeuroZen</div>
            <ul class="nav-links">
                <li><a href="index.html">InĂ­cio</a></li>
                <li><a href="terms-of-use.html">Termos de Uso</a></li>
                <li><a href="privacy-policy.html">Privacidade</a></li>
                <li><a href="thanks.html">Obrigado</a></li>
            </ul>
        </nav>
    </header>

    <div class="thanks-wrapper">
        <div class="thanks-content">
            <div class="success-icon"></div>
            
            <h1>Obrigado!</h1>
            <p>Seu e-mail foi cadastrado com sucesso! Agora vocĂȘ faz parte da comunidade NeuroZen e receberĂĄ todas as novidades sobre criatividade e InteligĂȘncia Artificial.</p>
            
            <div class="benefits">
                <h3>O que vocĂȘ vai receber:</h3>
                <ul>
                    <li>Acesso antecipado a novos conteĂșdos</li>
                    <li>Dicas exclusivas sobre criatividade com IA</li>
                    <li>AtualizaçÔes sobre o lançamento do livro</li>
                    <li>Convites para eventos especiais</li>
                    <li>ConteĂșdo bĂŽnus exclusivo para assinantes</li>
                </ul>
            </div>
            
            <div class="cta-buttons">
                <a href="index.html" class="btn-primary">Voltar ao InĂ­cio</a>
                <a href="#" class="btn-secondary">Seguir nas Redes Sociais</a>
            </div>
            
            <div class="social-proof">
                <p>🎉 VocĂȘ se juntou a mais de <strong>2.500 pessoas</strong> que jĂĄ estĂŁo descobrindo o poder da criatividade com IA!</p>
            </div>
        </div>
    </div>

    <footer>
        <p>&copy; 2025 NeuroZen. Todos os direitos reservados.</p>
    </footer>

    <script>
        // Adiciona um pouco de interatividade
        document.addEventListener('DOMContentLoaded', function() {
            // Confetti effect simples
            setTimeout(() => {
                document.body.style.background = 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)';
            }, 500);
        });
    </script>
</body>
</html>

styles.css


/* =================================
   RESET E CONFIGURAÇÕES GERAIS
   ================================= */

/* Reset bĂĄsico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Corpo geral */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f9f9f9;
  color: #111;
  line-height: 1.6;
}

/* =================================
   CABEÇALHO E NAVEGAÇÃO
   ================================= */

header {
  background-color: #0d1117;
  padding: 1rem 2rem;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.nav-links li a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links li a:hover {
  color: #58a6ff;
}

/* =================================
   SEÇÃO HERO (PRINCIPAL)
   ================================= */

.hero {
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 1100px;
}

.text {
  text-align: center;
}

.text h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #0d1117;
}

.text p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* =================================
   FORMULÁRIO
   ================================= */

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

form input[type="email"] {
  padding: 0.7rem 1rem;
  font-size: 1rem;
  width: 100%;
  max-width: 350px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

form button {
  background-color: #2563eb;
  color: #fff;
  border: none;
  padding: 0.7rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

form button:hover {
  background-color: #1e40af;
}

/* =================================
   CAPA DO LIVRO
   ================================= */

.animated-book {
  animation: float 3s ease-in-out infinite;
  max-width: 280px;
  display: block;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* =================================
   SEÇÃO DEPOIMENTOS - VERSÃO LIMPA
   ================================= */

.testimonials {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 4rem 2rem;
  text-align: center;
}

.testimonials h2 {
  font-size: 2.2rem;
  margin-bottom: 3rem;
  color: #1e293b;
  font-weight: 700;
  position: relative;
}

.testimonials h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  border-radius: 2px;
}

.testimonial-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.card {
  background: #fff;
  padding: 2.5rem 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(226, 232, 240, 0.8);
  position: relative;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.2);
}

.card p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #475569;
  font-style: italic;
  margin-bottom: 1.5rem;
  text-align: left;
  position: relative;
}

.card p::before {
  content: '"';
  font-size: 2.5rem;
  color: #e2e8f0;
  position: absolute;
  top: -10px;
  left: -10px;
  font-family: Georgia, serif;
}

.card p::after {
  content: '"';
  font-size: 2.5rem;
  color: #e2e8f0;
  position: absolute;
  bottom: -25px;
  right: 0;
  font-family: Georgia, serif;
}

.card span {
  display: block;
  font-weight: 600;
  color: #2563eb;
  font-size: 0.95rem;
  text-align: right;
  position: relative;
  padding-top: 1rem;
}

.card span::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  border-radius: 1px;
}

/* Responsivo */
@media (max-width: 768px) {
  .testimonials {
    padding: 3rem 1rem;
  }
  
  .testimonials h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
  }
  
  .testimonial-cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .card {
    padding: 2rem 1.5rem;
  }
}

/* =================================
   ÁREA DO CHAT
   ================================= */

#chat-area {
  background-color: #f4f9fd;
  padding: 2rem;
  max-width: 600px;
  margin: 2rem auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  text-align: center;
}

#chat-area h2 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #333;
}

#chat-window {
  background-color: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
}

#chat-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  max-height: 300px;
  overflow-y: auto;
  background-color: #f9fafb;
  border-radius: 8px;
  text-align: left;
}

.chat-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  max-width: 75%;
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.4;
}

.chat-bubble.user {
  background-color: #2563eb;
  color: #fff;
  align-self: flex-end;
  text-align: left;
}

.chat-bubble.bot {
  background-color: #e5e7eb;
  color: #000;
  align-self: flex-start;
  text-align: left;
}

#typing {
  font-style: italic;
  color: #666;
  margin: 5px 0;
  align-self: flex-start;
  background-color: #e5e7eb;
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 14px;
  max-width: 75%;
}

#chat-input {
  display: flex;
  gap: 0.5rem;
}

#chat-input input[type="text"] {
  flex-grow: 1;
  padding: 0.6rem;
  border-radius: 6px;
  border: 1px solid #ccc;
}

#send-btn {
  padding: 0.6rem 1.2rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#send-btn:hover {
  background-color: #0056b3;
}

/* =================================
   RODAPÉ
   ================================= */

footer {
  background-color: #0d1117;
  color: #ccc;
  text-align: center;
  padding: 1rem 0;
  font-size: 0.9rem;
}

/* =================================
   MEDIA QUERIES - RESPONSIVIDADE
   ================================= */

@media (min-width: 768px) {
  .hero-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .text {
    text-align: left;
    flex: 1;
  }

  .cover {
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  form {
    flex-direction: row;
  }

  #user-input {
    width: auto;
  }
}

js/chat.js


import { agentPrompt } from "./agent.js";
import { displayMessage, showTyping, removeTyping } from "./ui.js";

// Espera o DOM carregar
window.addEventListener("DOMContentLoaded", () => {
  const chatMessages = document.getElementById("chat-messages");
  const sendBtn = document.getElementById("send-btn");
  const userInput = document.getElementById("user-input");

  // VariĂĄveis de controle
  let isRafaTyping = false;
  let shouldPauseRafa = false;

  // Frases de boas-vindas variadas (corrigidas)
  const welcomeSequences = [
    [
      "Oi! 👋 Eu sou o Rafa, tudo bem?",
      "Faço parte da equipe do NeuroZen e conheço bem o livro.",
      "Se tiver dĂșvidas ou quiser saber se ele Ă© pra vocĂȘ, estou por aqui!"
    ],
    [
      "Olá! 😊 Seja bem-vindo ao NeuroZen.",
      "Meu nome é Rafa, li o livro do começo ao fim.",
      "Posso te ajudar a entender se ele Ă© o que vocĂȘ estĂĄ procurando."
    ],
    [
      "E aí! 👋 Tudo certo?",
      "Sou o Rafa da equipe do NeuroZen. JĂĄ mergulhei no conteĂșdo do livro.",
      "Quer trocar uma ideia e ver se ele faz sentido pra vocĂȘ?"
    ]
  ];

  function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  // Detecta quando usuĂĄrio estĂĄ digitando
  userInput.addEventListener("input", () => {
    if (isRafaTyping) {
      shouldPauseRafa = true;
    }
  });

  // Exibe sequĂȘncia de mensagens com simulação de digitação
  async function showWelcomeMessage() {
    const sequence = welcomeSequences[Math.floor(Math.random() * welcomeSequences.length)];

    for (let i = 0; i < sequence.length; i++) {
      const msg = sequence[i];
      const typingTime = 30 * msg.length + 500;

      if (i !== 0) {
        await delay(600 + Math.random() * 700);
      }

      showTyping(chatMessages);
      await delay(typingTime);
      removeTyping(chatMessages);

      displayMessage(chatMessages, msg, "bot");
    }
  }

  // Quebra resposta em mĂșltiplas mensagens
  function splitResponse(response) {
    // Quebra por pontos finais, quebras de linha, ou frases longas
    const sentences = response
      .split(/(?<=[.!?])\s+|\n+/) .filter(sentence => sentence.trim().length > 0);
    
    const messages = [];
    let currentMessage = "";
    
    for (const sentence of sentences) {
      // Se a mensagem atual + nova frase fica muito longa (mais de 120 chars)
      if (currentMessage.length + sentence.length > 120 && currentMessage.length > 0) {
        messages.push(currentMessage.trim());
        currentMessage = sentence;
      } else {
        currentMessage += (currentMessage ? " " : "") + sentence;
      }
    }
    
    if (currentMessage.trim()) {
      messages.push(currentMessage.trim());
    }
    
    return messages.length > 0 ? messages : [response];
  }

  // Envia mĂșltiplas mensagens com pausas
  async function sendMultipleMessages(messages) {
    isRafaTyping = true;
    shouldPauseRafa = false;

    for (let i = 0; i < messages.length; i++) { // Verifica se usuário começou a digitar if (shouldPauseRafa) { removeTyping(chatMessages); displayMessage(chatMessages, "Pode falar! Estou ouvindo... 😊", "bot"); isRafaTyping = false; return; } const message = messages[i]; const typingTime = Math.max(message.length * 40, 800); // Mínimo 800ms // Pausa entre mensagens (exceto a primeira) if (i > 0) {
        await delay(800 + Math.random() * 600);
        
        // Verifica novamente se usuĂĄrio estĂĄ digitando
        if (shouldPauseRafa) {
          removeTyping(chatMessages);
          displayMessage(chatMessages, "Pode falar! Estou ouvindo... 😊", "bot");
          isRafaTyping = false;
          return;
        }
      }

      showTyping(chatMessages);
      await delay(typingTime);
      
      // Última verificação antes de enviar
      if (shouldPauseRafa) {
        removeTyping(chatMessages);
        displayMessage(chatMessages, "Pode falar! Estou ouvindo... 😊", "bot");
        isRafaTyping = false;
        return;
      }

      removeTyping(chatMessages);
      displayMessage(chatMessages, message, "bot");
    }

    isRafaTyping = false;
  }

  // Inicia mensagem de boas-vindas apĂłs um delay
  setTimeout(() => {
    showWelcomeMessage();
  }, 1000);

  // Eventos
  sendBtn.addEventListener("click", handleUserMessage);
  userInput.addEventListener("keypress", function (e) {
    if (e.key === "Enter") {
      e.preventDefault();
      handleUserMessage();
    }
  });

  // Envio da mensagem do usuĂĄrio e resposta da API
  async function handleUserMessage() {
    const userMessage = userInput.value.trim();
    if (!userMessage) return;

    // Para qualquer resposta do Rafa em andamento
    shouldPauseRafa = true;
    removeTyping(chatMessages);

    displayMessage(chatMessages, userMessage, "user");
    userInput.value = "";

    // Reset das variĂĄveis de controle
    isRafaTyping = false;
    shouldPauseRafa = false;

    showTyping(chatMessages);

    try {
      // Configuração para a API da Groq
      const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": "Bearer SUA_CHAVE_API_GROQ",
        },
        body: JSON.stringify({
          messages: [
            { role: "system", content: agentPrompt },
            { role: "user", content: userMessage },
          ],
          model: "llama3-70b-8192",
        }),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const data = await response.json();
      const botResponse = data.choices[0].message.content;

      removeTyping(chatMessages);

      // Quebra a resposta em mĂșltiplas mensagens
      const messages = splitResponse(botResponse);
      
      // Envia mensagens com pausas
      await sendMultipleMessages(messages);

    } catch (error) {
      console.error("Erro na API:", error);
      removeTyping(chatMessages);
      
      // Resposta de fallback mais natural
      const fallbackResponses = [
        "Desculpe, estou com uma instabilidade temporĂĄria. Que tal tentar novamente em alguns segundos?",
        "Ops! Parece que tive um probleminha técnico. Pode repetir sua pergunta?",
        "Nossa, algo deu errado por aqui. Mas fique Ă  vontade para me perguntar sobre o NeuroZen!"
      ];
      
      const randomFallback = fallbackResponses[Math.floor(Math.random() * fallbackResponses.length)];
      displayMessage(chatMessages, randomFallback, "bot");
    }
  }
});

js/form.js


document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById("email-form");
  const scriptURL = "https://script.google.com/macros/s/AKfyc...0bLJWg/exec"; //URL do seu script

  form.addEventListener("submit", function (e) {
    e.preventDefault();

    const emailInput = form.querySelector("input[type='email']");
    const email = emailInput.value.trim();

    if (!email) {
      alert("Digite um e-mail vĂĄlido!");
      return;
    }

    fetch(`${scriptURL}?email=${encodeURIComponent(email)}`)
      .then((response) => response.json())
      .then((data) => {
        if (data.status === "success") {
          alert("✅ Obrigado! Seu e-mail foi cadastrado com sucesso.");
          emailInput.value = "";
          window.location.href = "thanks.html";
        } else {
          alert("❌ Houve um erro ao cadastrar. Tente novamente.");
        }
      })
      .catch((error) => {
        console.error("Erro:", error);
        alert("❌ Houve um erro inesperado. Tente novamente.");
      });
  });
});

js/ui.js


export function displayMessage(container, text, sender) {
  const message = document.createElement("div");
  
  // Remove espaços invisíveis e trim corretamente
  const cleanText = text.replace(/^\s+|\s+$/g, '').replace(/[\u200B-\u200D\uFEFF]/g, '');
  message.textContent = cleanText;
  
  message.className = `chat-bubble ${sender}`;
  
  // Remove estilos inline conflitantes - deixa sĂł o CSS fazer o trabalho
  message.style.cssText = '';
  
  container.appendChild(message);
  container.scrollTop = container.scrollHeight;
}

// Exibe mĂșltiplos balĂ”es com pausa entre eles
export async function displayMessageSequence(container, messages, sender) {
  for (const msg of messages) {
    await new Promise((resolve) => setTimeout(resolve, 1500));
    displayMessage(container, msg, sender);
  }
}

export function showTyping(container) {
  // Remove typing anterior se existir
  removeTyping(container);
  
  const typingIndicator = document.createElement("div");
  typingIndicator.textContent = "Digitando...";
  typingIndicator.id = "typing";
  
  container.appendChild(typingIndicator);
  container.scrollTop = container.scrollHeight;
}

export function removeTyping(container) {
  const typing = document.getElementById("typing");
  if (typing && typing.parentNode === container) {
    container.removeChild(typing);
  }
}

⚙ Como funcionarĂĄ na prĂĄtica?

O visitante poderĂĄ fazer perguntas diretamente na landing page sobre o livro NeuroZen. O agente vai responder rapidamente, utilizando o conteĂșdo do livro e tĂ©cnicas de venda para estimular o visitante a comprar o produto.

Além disso, o formulårio simples vai armazenar automaticamente e-mails de interessados em uma planilha Google Sheets.

đŸ€– Por que escolhemos a Groq API?

Para este projeto, optamos pela Groq por razÔes técnicas e pråticas específicas:

⚡ Velocidade incomparável:

  • AtĂ© 1.665 tokens por segundo com Llama 3.3 70B
  • LatĂȘncia ultra-baixa (0.3s time-to-first-token)
  • ExperiĂȘncia de chat que parece conversa humana natural

🆓 Totalmente gratuito:

  • 14.400 requests por dia sem custo
  • Modelos de alta qualidade: Llama 3.3 70B, DeepSeek R1, Gemma 3
  • Sem necessidade de cartĂŁo de crĂ©dito

đŸ› ïž Perfeito para agentes de vendas:

  • Resposta instantĂąnea elimina frustraçÔes do usuĂĄrio
  • CompatĂ­vel com padrĂŁo OpenAI (fĂĄcil integração)
  • Infraestrutura LPUℱ otimizada para conversas em tempo real

🎯 Ideal para o NeuroZen: A velocidade extrema do Groq transforma a experiĂȘncia do visitante – quando alguĂ©m pergunta sobre o livro, a resposta aparece imediatamente, criando a sensação de estar conversando com uma pessoa real da equipe.

🔧 Configuração da Groq API

Passo a passo simples:

  1. Criar conta: https://console.groq.com/ (gratuito)
  2. Gerar API Key: Dashboard → “API Keys” → “Create API Key”
  3. Integrar no cĂłdigo: Substituir "SUA_CHAVE_API_GROQ_REAL_AQUI"

Modelos recomendados:

  • llama3-70b-8192 ← Mais inteligente (recomendado)
  • llama3-8b-8192 ← Mais rĂĄpido
  • mixtral-8x7b-32768 ← Bom equilĂ­brio

A configuração leva menos de 5 minutos e o agente estarå funcionando com qualidade profissional!

đŸ“© Integração com Google Sheets via Google Apps Script

1. Criar a Planilha Google Sheets

  • Acesse o Google Sheets
  • Nomeie como NeuroZen Emails
  • Coloque na cĂ©lula A1: Email

2. Criar o Script (Google Apps Script)

  • Na planilha, clique em ExtensĂ”es > Apps Script
  • Apague tudo e cole este script:

function doGet(e) {
  Logger.log("🚀 Iniciando doGet - NeuroZen...");

  if (!e || !e.parameter || !e.parameter.email) {
    Logger.log("❌ ERRO: Nenhum dado GET recebido!");
    return ContentService.createTextOutput(JSON.stringify({
      "status": "error",
      "message": "Email obrigatĂłrio"
    })).setMimeType(ContentService.MimeType.JSON);
  }

  try {
    var email = e.parameter.email.trim();
    Logger.log("✅ Email recebido: " + email);

    // ID da sua planilha NeuroZen
    var sheetId = "1E8...VI9c"; //ID da sua planilha do google sheets
    var spreadsheet = SpreadsheetApp.openById(sheetId);
    var sheet = spreadsheet.getActiveSheet();
    
    Logger.log("✅ Planilha encontrada: " + sheet.getName());

    // Adiciona na planilha
    sheet.appendRow([new Date(), email]);
    Logger.log("✅ Email salvo na planilha NeuroZen.");

    // 📧 1. ENVIA EMAIL DE AGRADECIMENTO PARA QUEM SE CADASTROU
    try {
      Logger.log("🔄 Enviando email de agradecimento para: " + email);
      
      MailApp.sendEmail({
        to: email, // ← PARA QUEM SE CADASTROU
        subject: "NeuroZen - Obrigado pelo seu interesse! 🧠✹",
        htmlBody: `
          <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
            <h2 style="color: #2563eb;">Obrigado pelo seu interesse no NeuroZen! 🧠✹</h2>
            
            <p>OlĂĄ,</p>
            
            <p>Muito obrigado por demonstrar interesse no livro <strong>"NeuroZen - Guia da Mente Criativa com IA"</strong>!</p>
            
            <p>VocĂȘ serĂĄ um dos primeiros a saber sobre:</p>
            <ul style="color: #374151;">
              <li>🚀 <strong>Lançamento oficial</strong></li>
              <li>💰 <strong>Ofertas exclusivas</strong></li>
              <li>🎁 <strong>Bînus especiais para os primeiros leitores</strong></li>
              <li>📚 <strong>ConteĂșdos exclusivos sobre IA e criatividade</strong></li>
            </ul>
            
            <div style="background: #f3f4f6; padding: 20px; border-radius: 8px; margin: 20px 0;">
              <p style="margin: 0;"><strong>💡 Dica:</strong> Adicione nosso email à sua lista de contatos para não perder nenhuma novidade!</p>
            </div>
            
            <p>Fique atento ao seu email!</p>
            
            <hr style="margin: 30px 0; border: none; border-top: 1px solid #e5e7eb;">
            
            <p>Abraços,<br>
            <strong>Equipe do Seu Produto</strong><br>
            <a href="mailto:seu_email@gmail.com" style="color: #2563eb;">seu_email@gmail.com</a></p>
          </div>
        `
      });
      
      Logger.log("✅ Email de agradecimento ENVIADO para: " + email);
      
    } catch (emailError) {
      Logger.log("❌ ERRO ao enviar email de agradecimento: " + emailError.message);
    }

    // 📧 2. ENVIA NOTIFICAÇÃO DE NOVO LEAD PARA A EQUIPE
    try {
      Logger.log("🔄 Enviando notificação de lead para: neurozenbook@gmail.com");
      
      MailApp.sendEmail({
        to: "neurozenbook@gmail.com", // ← PARA A EQUIPE
        subject: "🎯 Novo Lead NeuroZen!",
        htmlBody: `
          <h3>📱 Novo interessado no NeuroZen!</h3>
          <p><strong>Email:</strong> ${email}</p>
          <p><strong>Data:</strong> ${new Date()}</p>
          <p><strong>Origem:</strong> Landing Page NeuroZen</p>
          <br>
          <p>Já pode incluir no funil de vendas! 🚀</p>
        `
      });
      
      Logger.log("✅ Notificação de lead ENVIADA para: neurozenbook@gmail.com");
      
    } catch (adminEmailError) {
      Logger.log("❌ ERRO ao enviar notificação de lead: " + adminEmailError.message);
    }

    return ContentService.createTextOutput(JSON.stringify({
      "status": "success",
      "message": "Email cadastrado com sucesso"
    })).setMimeType(ContentService.MimeType.JSON);

  } catch (error) {
    Logger.log("❌ ERRO GERAL: " + error.message);
    return ContentService.createTextOutput(JSON.stringify({
      "status": "error",
      "message": error.message
    })).setMimeType(ContentService.MimeType.JSON);
  }
}

function doPost(e) {
  return doGet(e);
}

3. Publicar Script como Web App

  • Clique em Implantar > Nova implantação
  • Escolha tipo: Aplicativo da Web
  • Configure:
    • Executar como: sua conta
    • Acesso: Qualquer pessoa
  • Clique em Implantar e copie o link gerado.

4. HTML do formulĂĄrio


<form id="email-form">
  <input type="email" id="email" placeholder="Seu melhor e-mail" required>
  <button type="submit">Receber novidades</button>
</form>
<p id="feedbackMessage" style="display:none;"></p>

5. JavaScript (form.js)


document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById("email-form");
  const scriptURL = "URL_DO_APPS_SCRIPT";

  form.addEventListener("submit", function (e) {
    e.preventDefault();

    const emailInput = form.querySelector("input[type='email']");
    const email = emailInput.value.trim();

    if (!email) {
      alert("Digite um e-mail vĂĄlido!");
      return;
    }

    fetch(`${scriptURL}?email=${encodeURIComponent(email)}`)
      .then((response) => response.json())
      .then((data) => {
        if (data.status === "success") {
          alert("✅ Obrigado! Seu e-mail foi cadastrado com sucesso.");
          emailInput.value = "";
          window.location.href = "thanks.html";
        } else {
          alert("❌ Houve um erro ao cadastrar. Tente novamente.");
        }
      })
      .catch((error) => {
        console.error("Erro:", error);
        alert("❌ Houve um erro inesperado. Tente novamente.");
      });
  });
});

🚀 Publicação

Para publicar rapidamente e grĂĄtis, use o Netlify.

🎓 Conclusão

Com esse agente vendedor especialista, vocĂȘ viu como usar inteligĂȘncia artificial para criar um vendedor virtual eficaz e convincente, tudo de forma simples e direta.

Na prĂłxima aula, ampliaremos o conceito com mĂșltiplos agentes interagindo e colaborando entre si.

About The Author
-
Previous

Aula 02 – InteligĂȘncia Coletiva: Agentes e Enxames na PrĂĄtica

Next

🎓 Aula 04 – Memória de Agente com LangChain + Pinecone

Related Videos

Aula 23 – Tensor Flow – Keras – Redes Neurais Convolucionais

Aula 23 – Tensor Flow – Keras – Redes Neurais Convolucionais

thumb

Aula 51 – Tecnologias de IA no Software Fooocus

Aula 25 – Tensor Flow – Keras – Conjunto de dados CIFAR-10 – VGG 2

Aula 25 – Tensor Flow – Keras – Conjunto de dados CIFAR-10 – VGG 2

Aula 20 – Tensor Flow – Keras – Redes Neurais – MNIST

Aula 20 – Tensor Flow – Keras – Redes Neurais – MNIST

Aula 05 – Tutorial Pandas na PrĂĄtica

Aula 05 – Tutorial Pandas na PrĂĄtica

Aula 30 – Tensor Flow – Keras – CIFAR-10 – VGG 3 – Dropout – Data Augmentation

Aula 30 – CIFAR-10 – VGG 3 – Dropout – Data Augmentation

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>