Carregando projeto...


web
Landing page completa para o SymPro, plataforma SaaS voltada a profissionais autônomos brasileiros — cabeleireiros, esteticistas, personal trainers, fisioterapeutas e outros prestadores de serviço. O projeto cobre arquitetura de informação estratégica em 14 seções, design mobile-first, animações com Framer Motion, SEO completo com JSON-LD e formulário de lista de espera via API Route no Next.js.
A História do Projeto
O Desafio
Profissionais autônomos brasileiros — cabeleireiros, esteticistas, personal trainers, fisioterapeutas e outros prestadores de serviço — gerenciam clientes, agenda e finanças em cadernos, planilhas ou pelo WhatsApp. O resultado é previsível: clientes esquecidos, cobranças perdidas e receita que escapa por falta de organização. É um problema real, frequente e mal atendido pelo mercado de SaaS, que ou oferece ferramentas genéricas demais ou sistemas complexos demais para quem só quer focar no próprio ofício.
A Solução
O SymPro nasce como uma plataforma SaaS desenhada especificamente para esse público: simples o suficiente para funcionar sem treinamento, mas completa o suficiente para substituir o caderno e a planilha com vantagem. A landing page é o primeiro ponto de contato do funil: seu trabalho é apresentar o produto, demonstrar valor por meio de mockups e seções educativas, qualificar o visitante e capturar o e-mail para a lista de espera antes do lançamento oficial.
O Processo
O projeto foi estruturado em 14 seções ordenadas para guiar o visitante pelo funil: Hero com typewriter animation e formulário de inscrição, "Para Quem" com grid de profissões, Pilares de valor, Como Funciona em três passos, demonstração em vídeo (facade), mockup multi-device, grade de benefícios, diferenciais únicos (semáforo de follow-up, metas, relatórios), vitrine de screenshots, planos e preços com toggle mensal/anual, time, FAQ e CTA final. Todo o layout foi construído mobile-first com breakpoint mínimo em 380 px e animações via Framer Motion com `whileInView` para performance suave no scroll.
Os Resultados
A landing está em produção em sympro.com.br capturando leads para a lista de espera. Tecnicamente, a página atinge scores elevados no Lighthouse graças ao video facade, preload do hero image e uso consistente de next/image. O SEO cobre metadata completo, Open Graph, Twitter Card, sitemap.xml, robots.txt e schema WebSite em JSON-LD. O projeto está em pré-lançamento com desenvolvimento ativo da plataforma.
14
Seções da landing
380 px
Breakpoint mínimo
3 planos
Planos disponíveis
Principais Funcionalidades
Hero com Typewriter Animation
Galeria rotativa de profissões na headline, floating cards com métricas e formulário de inscrição na lista de espera.
Video Facade de Performance
Demonstração do produto via YouTube sem carregar o player até o clique — zero JS bloqueante no carregamento inicial.
Planos e Preços com Toggle
Três planos (Gratuito, Profissional, Profissional+) com alternância mensal/anual e destaque visual do plano recomendado.
SEO Completo com JSON-LD
Metadata, Open Graph, Twitter Card, sitemap.xml, robots.txt e schema WebSite estruturado para máxima visibilidade nos buscadores.
Mobile-First Rigoroso
Layout responsivo com breakpoint mínimo em 380 px, steps horizontais no desktop e verticais no mobile.
API Route de Lista de Espera
Formulário de captura integrado a uma API Route do Next.js para inscrição na lista de espera antes do lançamento.
Capturas de Tela
Hero com typewriter animation e formulário de inscrição na lista de espera
Pilares de valor: clientes, agenda e finanças em um só lugar
Grade de benefícios com as principais funcionalidades da plataforma
Diferenciais únicos: semáforo de follow-up, metas e relatórios
Três planos com toggle mensal/anual e destaque do plano recomendado
Apresentação do time responsável pelo projeto
Layout mobile-first otimizado para celular e tablet
Central de Educação incluída no plano gratuito
Stack
Next.js 15 · TypeScript · React 19 · Tailwind CSS · Radix UI · Framer Motion · Vercel Analytics · Vercel
Landing Page · SaaS · Conversão · Lista de Espera · Mobile-first · SEO · Animações · Projeto Pessoal