Bem-vindo ao repositório da Landing Page do advogado Matias Ramão. Este projeto foi desenvolvido para apresentar os serviços jurídicos, a trajetória profissional e os diferenciais do escritório, oferecendo uma experiência moderna, responsiva e de alta performance para os visitantes.
Esta Landing Page tem como objetivo principal converter visitantes em clientes, fornecendo informações claras sobre as áreas de atuação (Direito do Consumidor, Trabalhista, Cível, Urbanístico) e facilitando o contato através de formulário integrado e WhatsApp
.
O design foi cuidadosamente elaborado para transmitir profissionalismo, seriedade e acessibilidade, utilizando uma paleta de cores "Gold" (#B08D57) e "Black" para evocar sofisticação e confiança.
- Hero Section: Cabeçalho impactante com proposta de valor e CTA principal para WhatsApp
- About Section: História pessoal e profissional com animações de entrada suaves
- Diferenciais: Cards animados destacando a visão 360°, advocacia estratégica e comunicação clara
- Áreas de Atuação: Grade responsiva com 6 especialidades jurídicas
- Contato: Formulário integrado com Netlify Forms + link direto para WhatsApp
- Footer: Copyright dinâmico e links para redes sociais
- ✅ Validação de Email em Tempo Real: Feedback visual com ícones verde/vermelho
- ✅ Contador de Caracteres: Limite de 500 caracteres para mensagem do formulário
- ✅ Máscara de Telefone: Formatação automática (XX) XXXXX-XXXX
- ✅ Botão Scroll to Top: Aparece após 300px de scroll com animação suave
- ✅ Animações de Scroll: Fade-in automático ao entrar na viewport
- ✅ Ano Dinâmico no Footer: Atualização automática do copyright
- ✅ Proteção Anti-Spam: Honeypot no formulário Netlify
- ✅ SEO Otimizado: Meta tags completas (Open Graph, Twitter Cards)
- ✅ Responsivo: Layout adaptável para mobile, tablet e desktop
O projeto foi construído utilizando as seguintes tecnologias modernas:
- Vue.js 3.4.21: Framework JavaScript progressivo com Composition API
- TypeScript 5.2.2: Superset do JavaScript com tipagem estática
- Vite 5.2.0: Build tool de próxima geração com HMR ultrarrápido
- Tailwind CSS 3.4.4: Framework CSS utility-first para estilização rápida
- Vue Router 4.6.3: Roteador oficial do Vue.js para SPA
- VueUse 13.9.0: Composables essenciais para Vue 3
- Vue Feather 2.0.0: Componente para ícones Feather Icons
- v-mask 1.0.0: Diretiva para máscaras de input
lp-matias-ramao-adv/
├── public/ # Arquivos estáticos públicos
│ └── favicon.png # Favicon do site
├── src/
│ ├── assets/ # Recursos estáticos (imagens)
│ │ └── images/ # Fotos do advogado
│ ├── components/ # Componentes Vue reutilizáveis
│ │ ├── common/ # Componentes genéricos
│ │ │ ├── FadeIn.vue # Wrapper de animação fade-in
│ │ │ └── ScrollToTopButton.vue
│ │ ├── AboutSection.vue
│ │ ├── AreasDeAtuacaoSection.vue
│ │ ├── ContactSection.vue
│ │ ├── DiferencialSection.vue
│ │ ├── FooterSection.vue
│ │ └── HeroSection.vue
│ ├── router/ # Configuração de rotas
│ │ └── index.ts # Definição das rotas SPA
│ ├── styles/ # Estilos centralizados
│ │ └── animations.css # Animações reutilizáveis
│ ├── views/ # Páginas principais
│ │ ├── LandingPage.vue # Página inicial (/)
│ │ └── ThankYouPage.vue # Página de confirmação (/obrigado)
│ ├── App.vue # Componente raiz
│ ├── main.ts # Ponto de entrada da aplicação
│ └── style.css # Estilos globais + Tailwind directives
├── index.html # HTML principal com meta tags SEO
├── package.json # Dependências e scripts
├── tsconfig.json # Configuração TypeScript
├── vite.config.ts # Configuração Vite
└── tailwind.config.js # Configuração Tailwind CSS
- Node.js versão 16.x ou superior
- npm (incluído com Node.js)
-
Clone o repositório:
git clone https://github.com/alessandrolsdev/lp-matias-ramao-adv.git cd lp-matias-ramao-adv -
Instale as dependências:
npm install
Execute o servidor de desenvolvimento:
npm run devO projeto estará acessível em http://localhost:5173 (ou outra porta indicada no terminal).
Para gerar a versão otimizada de produção:
npm run buildOs arquivos otimizados serão gerados na pasta dist.
Para visualizar a build de produção localmente:
npm run preview- ✅ Componentização: Separação lógica em componentes reutilizáveis
- ✅ TypeScript Strict: Tipagem estática em todos os arquivos
- ✅ Composition API: Uso de
<script setup>para código mais limpo - ✅ CSS Centralizado: Animações reutilizáveis em arquivo único
- ✅ DRY Principle: Eliminação de código duplicado
- ✅ Documentação JSDoc: Todos os componentes e funções documentados em PT-BR
- ✅ Single Responsibility: Cada componente com responsabilidade única
- ✅ Código Limpo: Comentários profissionais, sem conversação
- ✅ Code Splitting: Lazy loading com Vue Router
- ✅ Tree Shaking: Tailwind CSS purge para remover CSS não utilizado
- ✅ Otimização de Imagens: Imagens otimizadas para web
- ✅ HMR: Hot Module Replacement com Vite
- ✅ Will-change CSS: Otimização de animações com GPU
- ✅ Transition Delay Staggered: Animações escalonadas eficientes
- ✅ Meta Tags Completas: Description, Keywords, Open Graph, Twitter Cards
- ✅ Semantic HTML: Uso de tags semânticas (
<header>,<section>,<footer>) - ✅ ARIA Labels: Rótulos de acessibilidade em botões e links
- ✅ Alt Text: Descrições em todas as imagens
- ✅ Canonical URL: Tag canonical para evitar conteúdo duplicado
- ✅ Language Attribute: lang="pt-BR" no HTML
- ✅ Honeypot Anti-Spam: Proteção contra bots no formulário
- ✅ noopener noreferrer: Links externos seguros
- ✅ Validação Client-Side: Validação de email antes do envio
- ✅ Sanitização de Inputs: Campos limitados e validados
Solução: Execute npm install para instalar todas as dependências.
Solução: Verifique se style.css está importado em main.ts e se o Tailwind está configurado corretamente em tailwind.config.js.
Solução:
- Verifique se a porta 5173 está livre
- Limpe o cache:
rm -rf node_modulesenpm install - Verifique se o Node.js está atualizado:
node --version(deve ser 16+)
Solução: Execute npm run build novamente. Se persistir, verifique os erros TypeScript com npx vue-tsc --noEmit.
Este projeto passou por uma auditoria completa de código em Janeiro de 2026, onde foram identificados e corrigidos:
- ✅ 6 Componentes Vue Corrompidos: Estrutura incompleta (falta de tags
<script>e<template>) - ✅ Link WhatsApp Quebrado: href="#" corrigido para número real
- ✅ Falta de Meta Tags SEO: Adicionadas 20+ meta tags para SEO
- ✅ CSS Duplicado Eliminado: 200+ linhas de CSS refatoradas para arquivo centralizado
- ✅ Scripts TypeScript Faltantes: 9 componentes sem lógica agora implementados
- ✅ Comentários Conversacionais: Removidos e substituídos por JSDoc profissional
- ✅ Validações Implementadas: Email, contador de caracteres, máscara de telefone
- ✅ Ano Dinâmico: Footer com copyright automático
- ✅ Scroll to Top: Botão flutuante funcional com animações
- ✅ 100% do Código Documentado: JSDoc em PT-BR em todos os arquivos
- ✅ README Profissional: Este arquivo com badges, seções organizadas e troubleshooting
- ✅ Comentários Padronizados: Estilo consistente em todo o projeto
Todo o código fonte foi documentado com comentários em Português (PT-BR) para facilitar o entendimento da lógica, dos componentes e das configurações.
- Configurações: Arquivos como
vite.config.tsetailwind.config.jspossuem explicações detalhadas - Componentes: Cada componente Vue possui JSDoc descrevendo propósito e funcionalidades
- Lógica: Funções e blocos complexos estão documentados com comentários explicativos
Contribuições são bem-vindas! Se você encontrar bugs ou tiver sugestões de melhorias:
- Faça um fork do projeto
- Crie uma branch para sua feature (
git checkout -b feature/MinhaFeature) - Commit suas mudanças (
git commit -m 'Adiciona MinhaFeature') - Push para a branch (
git push origin feature/MinhaFeature) - Abra um Pull Request
Padrões de Código:
- Use TypeScript strict mode
- Documente novos componentes/funções com JSDoc em PT-BR
- Siga a estrutura de componentes existente
- Execute
npm run buildantes de enviar PR
Este projeto está sob a licença MIT.
Desenvolvido com dedicação para Matias Ramão Advocacia | 2026