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
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
Basta editar os valores das CSS variables e a mudança propaga para o site inteiro.
: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>:
<html lang="pt-BR" data-theme="dark">
Editando os textos
Os textos vivem em arquivos JSON simples, um por idioma:
src/i18n/locales/pt.json— Português (padrão)src/i18n/locales/en.json— Inglêssrc/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
- Hero — proposta de valor + CTAs + visual com mini "editor"
- Services — Outsourcing, Squads, Consultoria
- AdaptiveWork — destaque para a especialização em Planview AdaptiveWork
- Why Us — 4 pilares de diferenciação
- Process — 4 etapas (Diagnóstico → Proposta → Execução → Evolução)
- CTA — bloco escuro com email/WhatsApp
- 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— basta importar e usar. - Animações de entrada usam
framer-motioncomwhileInView(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).