Lucas Pelutre | Tecnologia Educacional

Site institucional one-page para o consultor em Transformação Digital para Escolas Particulares, com foco em geração de reuniões estratégicas, captação de leads e conversão via WhatsApp.

Conteúdo do site

• Header fixo: logo, navegação (Início, Soluções, Sobre, Casos, Contato), botão "Agendar Diagnóstico Grátis", alternância Light/Dark
• Botão flutuante WhatsApp em todas as páginas
• Hero: manchete, subtítulo e CTAs "Modernizar Minha Escola" e "Falar com Especialista no WhatsApp"
• Soluções: cards em scroll horizontal (Google Workspace, Migração de e-mail, Admin Console, Site institucional, Consultoria, Capacitação)
• Por que sua escola precisa: blocos de benefícios (redução de custos, segurança, organização, comunicação, escalabilidade)
• Sobre o consultor: espaço para foto e texto institucional
• Casos: grid com escola, cidade, serviço e resultado
• Depoimentos: nome, cargo, cidade e texto
• CTA: "Agende um diagnóstico tecnológico gratuito" com botão para agendamento
• Formulário de lead: campos obrigatórios e opcionais + mensagem de agradecimento após envio

Como configurar

1. Número do WhatsApp

Substitua 5511999999999 pelo número real (DDI + DDD + número, sem espaços ou símbolos) em todos os links do tipo https://wa.me/5511999999999?text=... no index.html.

2. Formulário de leads (e-mail ao receber lead)

1. Crie uma conta em Formspree.
2. Crie um novo formulário e copie o Form ID (ex.: xyzwabcd).
3. No index.html, localize o <form> com action="https://formspree.io/f/YOUR_FORM_ID" e troque YOUR_FORM_ID pelo ID do seu formulário.

O Formspree envia um e-mail para você a cada novo lead e pode redirecionar para uma página de thank-you (opcional).

3. Agendamento (Google Calendar / Calendly)

No index.html, localize o link na seção "Agendar reunião agora" (id schedule) e substitua pela sua URL do Calendly ou do Google Calendar/Agendamento:

<a href="https://calendly.com/seu-usuario/diagnostico-escola" ...>

4. Foto do consultor

Substitua o bloco com classe about__image-placeholder por uma tag <img> apontando para a foto profissional, por exemplo:

<div class="about__image-wrap">
  <img src="caminho/para/foto.jpg" alt="Lucas Pelutre" class="about__image" />
</div>

Se quiser, adicione no CSS algo como .about__image { width: 100%; max-width: 320px; height: auto; border-radius: 16px; }.

Rodar localmente

Abra o index.html no navegador ou use um dos servidores locais:

# Com Node.js (servidor incluso no projeto)
node server.js
# Acesse http://localhost:3000

# Com Python 3
python -m http.server 8080
# Acesse http://localhost:8080

# Com Node (npx)
npx serve .

Estrutura de arquivos

lucas-pelutre-site/
├── index.html               # Página principal
├── direitos-reservados.html # Página de direitos reservados
├── favicon.png              # Ícone do site (PNG)
├── favicon.svg              # Ícone do site (SVG)
├── server.js                # Servidor HTTP local (Node.js, porta 3000)
├── css/
│   └── styles.css           # Estilos globais (tema claro/escuro)
├── js/
│   └── main.js              # Lógica do site (menu, animações, formulário)
└── README.md

SEO e identidade visual

• Cores: azul profundo (#1E3A8A) como cor principal; modo claro e escuro conforme especificação.
• Meta tags: description e keywords já preenchidas para transformação digital, Google Workspace e tecnologia educacional.
• Acessibilidade: uso de landmarks, labels em formulários e suporte a prefers-reduced-motion.