# 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).