commit eaea57b7e9963f08d744300ccb6a304926de3e20 Author: leonardo-toniolo Date: Fri May 22 18:42:12 2026 -0300 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..545bdc5 --- /dev/null +++ b/README.md @@ -0,0 +1,147 @@ +# RivusLab — Landing Page + +Landing page institucional da RivusLab. +Stack: **Vite + React + TypeScript + Tailwind CSS** com i18n (PT/EN/ES) e tokens de design centralizados em um único arquivo CSS. + +--- + +## Rodando o projeto + +```bash +npm install +npm run dev # ambiente de desenvolvimento (http://localhost:5173) +npm run build # build de produção em ./dist +npm run preview # serve o build de produção localmente +npm run lint # type-check com TypeScript +``` + +Requer **Node 18+** (testado em Node 24). + +--- + +## Personalizando a identidade visual + +> Tudo o que define a marca (cores, tipografia, raios, espaçamentos, sombras) está em **um único arquivo**: +> [`src/styles/theme.css`](src/styles/theme.css) + +Basta editar os valores das CSS variables e a mudança propaga para o site inteiro. + +```css +:root { + --color-primary: 35 196 192; /* #23C4C0 — teal */ + --color-secondary: 15 58 108; /* #0F3A6C — navy */ + --radius-md: 10px; + --space-section-y: 6rem; + /* ...etc */ +} +``` + +> ⚠️ Cores são armazenadas como triplets **R G B** (sem vírgulas, sem `rgb()`). +> Esse formato permite que o Tailwind aplique opacidade automaticamente, ex.: `bg-primary/40`. + +Para encontrar o triplet de um hex, basta converter (ex.: `#23C4C0` → `35 196 192`). + +### Tema escuro (opcional) + +Já vem incluído como `[data-theme="dark"]`. +Para ativar, defina o atributo no ``: + +```html + +``` + +--- + +## Editando os textos + +Os textos vivem em arquivos JSON simples, um por idioma: + +- [`src/i18n/locales/pt.json`](src/i18n/locales/pt.json) — Português (padrão) +- [`src/i18n/locales/en.json`](src/i18n/locales/en.json) — Inglês +- [`src/i18n/locales/es.json`](src/i18n/locales/es.json) — Espanhol + +Para adicionar uma nova chave de texto, edite os três arquivos com a mesma estrutura e referencie via `t('caminho.da.chave')` no componente. + +O idioma padrão é detectado a partir do navegador e é persistido em `localStorage` (chave `rivuslab-lang`). + +--- + +## Trocando os logos + +Os logos estão em `public/`: + +| Arquivo | Onde aparece | +| ----------------------- | ---------------------------------- | +| `public/logo-light.png` | Navbar e footer (fundo claro) | +| `public/logo-dark.png` | Reservado para variações em escuro | +| `public/favicon.svg` | Aba do navegador | + +Para trocar, basta substituir os arquivos mantendo os nomes (ou ajustar os `src` nos componentes `Navbar.tsx` e `Footer.tsx`). + +--- + +## Estrutura + +``` +HomePage/ +├── public/ +│ ├── logo-light.png ← logo principal (fundo claro) +│ ├── logo-dark.png ← logo para fundos escuros +│ └── favicon.svg +├── src/ +│ ├── components/ +│ │ ├── Navbar.tsx +│ │ ├── Hero.tsx +│ │ ├── Services.tsx +│ │ ├── Adaptivework.tsx +│ │ ├── WhyUs.tsx +│ │ ├── Process.tsx +│ │ ├── CTA.tsx +│ │ ├── Footer.tsx +│ │ └── LanguageSwitcher.tsx +│ ├── i18n/ +│ │ ├── index.ts ← setup do i18next +│ │ └── locales/{pt,en,es}.json +│ ├── lib/ +│ │ └── sections.ts ← ids/labels das seções de navegação +│ ├── styles/ +│ │ └── theme.css ← ⭐ arquivo único de customização +│ ├── App.tsx +│ ├── index.css +│ └── main.tsx +├── index.html +├── tailwind.config.ts ← consome variáveis de theme.css +├── postcss.config.js +├── vite.config.ts +└── tsconfig.json +``` + +--- + +## Seções da página + +1. **Hero** — proposta de valor + CTAs + visual com mini "editor" +2. **Services** — Outsourcing, Squads, Consultoria +3. **AdaptiveWork** — destaque para a especialização em Planview AdaptiveWork +4. **Why Us** — 4 pilares de diferenciação +5. **Process** — 4 etapas (Diagnóstico → Proposta → Execução → Evolução) +6. **CTA** — bloco escuro com email/WhatsApp +7. **Footer** — navegação, contato, redes sociais + +--- + +## Dicas + +- O menu mobile abre como drawer abaixo da navbar e bloqueia o scroll do body. +- Todos os ícones vêm de [`lucide-react`](https://lucide.dev) — basta importar e usar. +- Animações de entrada usam `framer-motion` com `whileInView` (`once: true`) para não repetir. +- Acessibilidade: skip-link, `aria-label`, contrastes AA e foco visível. + +--- + +## Próximos passos sugeridos + +- Integrar formulário de contato a um backend (ex.: Resend, Formspree). +- Adicionar página de cases / portfolio. +- Configurar SEO com meta tags por idioma. +- Adicionar analytics (Plausible / Umami).