2026-05-22 18:42:12 -03:00
# RivusLab — Landing Page
2026-05-22 18:44:46 -03:00
Landing page institucional da **RivusLab ** : engenharia de software sob medida e especialização em Planview AdaptiveWork.
**Stack: ** Vite · React 18 · TypeScript · Tailwind CSS · i18next (PT / EN / ES) · Framer Motion
2026-05-22 18:42:12 -03:00
---
2026-05-22 18:44:46 -03:00
## Início rápido
2026-05-22 18:42:12 -03:00
``` bash
npm install
2026-05-22 18:44:46 -03:00
npm run dev # http://localhost:5173
npm run build # saída em ./dist
npm run preview # preview do build de produção
npm run lint # type-check (tsc --noEmit)
2026-05-22 18:42:12 -03:00
```
2026-05-22 18:44:46 -03:00
Requer **Node 18+ ** .
2026-05-22 18:42:12 -03:00
---
2026-05-22 18:44:46 -03:00
## Funcionalidades
| Recurso | Comportamento |
| -------- | ------------- |
| **Idiomas ** | PT, EN e ES; detecção pelo navegador; persistência em `localStorage` (`rivuslab-lang` ) |
| **Tema claro/escuro ** | Segue o sistema por padrão; botão na navbar alterna e grava `light` ou `dark` em `rivus-theme` |
| **Logos ** | `logo-light.png` no tema claro, `logo-dark.png` no escuro (navbar e footer) |
| **Design tokens ** | Cores, tipografia, raios e sombras centralizados em `src/styles/theme.css` |
| **Acessibilidade ** | Skip link, `aria-label` , foco visível, contraste pensado para AA |
---
2026-05-22 18:42:12 -03:00
2026-05-22 18:44:46 -03:00
## Personalizar a marca
2026-05-22 18:42:12 -03:00
2026-05-22 18:44:46 -03:00
Edite * * [`src/styles/theme.css` ](src/styles/theme.css )** — é o único arquivo de tokens. As variáveis são consumidas pelo Tailwind em [`tailwind.config.ts` ](tailwind.config.ts ).
2026-05-22 18:42:12 -03:00
``` css
: root {
2026-05-22 18:44:46 -03:00
--color-primary : 35 196 192 ; /* #23C4C0 */
--color-secondary : 15 58 108 ; /* #0F3A6C */
--color-badge-fg : 15 58 108 ; /* texto dos badges (tema claro) */
/* ... */
2026-05-22 18:42:12 -03:00
}
2026-05-22 18:44:46 -03:00
[ data-theme = 'dark' ] {
--color-bg : 11 22 38 ;
--color-badge-fg : 147 220 218 ; /* texto dos badges (tema escuro) */
/* ... */
}
```
2026-05-22 18:42:12 -03:00
2026-05-22 18:44:46 -03:00
> Cores usam triplets **R G B** (sem `rgb()`), para o Tailwind aplicar opacidade (`bg-primary/40`, etc.).
> Ex.: `#23C4C0` → `35 196 192`.
2026-05-22 18:42:12 -03:00
2026-05-22 18:44:46 -03:00
### Tema claro / escuro
2026-05-22 18:42:12 -03:00
2026-05-22 18:44:46 -03:00
- Ativação: `data-theme="light"` ou `data-theme="dark"` no `<html>` .
- Script inline em [`index.html` ](index.html ) evita flash na primeira carga.
- Lógica React: [`src/lib/theme.ts` ](src/lib/theme.ts ), [`src/hooks/useTheme.ts` ](src/hooks/useTheme.ts ), botão [`src/components/ThemeToggle.tsx` ](src/components/ThemeToggle.tsx ).
2026-05-22 18:42:12 -03:00
2026-05-22 18:44:46 -03:00
| Situação | Resultado |
| -------- | --------- |
| Sem valor em `rivus-theme` | Segue `prefers-color-scheme` do SO |
| Usuário clicou no toggle | Grava `light` ou `dark` e mantém a escolha |
| SO muda o tema | Só atualiza o site se não houver preferência salva |
2026-05-22 18:42:12 -03:00
---
2026-05-22 18:44:46 -03:00
## Textos (i18n)
2026-05-22 18:42:12 -03:00
2026-05-22 18:44:46 -03:00
Um JSON por idioma:
2026-05-22 18:42:12 -03:00
2026-05-22 18:44:46 -03:00
- [`src/i18n/locales/pt.json` ](src/i18n/locales/pt.json ) — padrão / fallback
- [`src/i18n/locales/en.json` ](src/i18n/locales/en.json )
- [`src/i18n/locales/es.json` ](src/i18n/locales/es.json )
2026-05-22 18:42:12 -03:00
2026-05-22 18:44:46 -03:00
Use a mesma chave nos três arquivos e no componente: `t('secao.chave')` .
2026-05-22 18:42:12 -03:00
2026-05-22 18:44:46 -03:00
Chaves de tema (exemplo): `theme.switchToLight` , `theme.switchToDark` .
2026-05-22 18:42:12 -03:00
---
2026-05-22 18:44:46 -03:00
## Logos e favicon
2026-05-22 18:42:12 -03:00
2026-05-22 18:44:46 -03:00
Coloque os arquivos em * * `public/` **:
2026-05-22 18:42:12 -03:00
2026-05-22 18:44:46 -03:00
| Arquivo | Uso |
| ------- | --- |
| `logo-light.png` | Navbar e footer no **tema claro ** |
| `logo-dark.png` | Navbar e footer no **tema escuro ** |
| `favicon.svg` | Ícone da aba |
2026-05-22 18:42:12 -03:00
2026-05-22 18:44:46 -03:00
Os caminhos estão centralizados em [`src/lib/logos.ts` ](src/lib/logos.ts ). Para outros nomes de arquivo, altere só esse módulo.
2026-05-22 18:42:12 -03:00
---
2026-05-22 18:44:46 -03:00
## Estrutura do projeto
2026-05-22 18:42:12 -03:00
```
HomePage/
├── public/
2026-05-22 18:44:46 -03:00
│ ├── logo-light.png
│ ├── logo-dark.png
2026-05-22 18:42:12 -03:00
│ └── favicon.svg
├── src/
│ ├── components/
2026-05-22 18:44:46 -03:00
│ │ ├── Navbar.tsx # menu + idioma + tema
2026-05-22 18:42:12 -03:00
│ │ ├── Hero.tsx
│ │ ├── Services.tsx
│ │ ├── Adaptivework.tsx
│ │ ├── WhyUs.tsx
│ │ ├── Process.tsx
│ │ ├── CTA.tsx
│ │ ├── Footer.tsx
2026-05-22 18:44:46 -03:00
│ │ ├── LanguageSwitcher.tsx
│ │ └── ThemeToggle.tsx
│ ├── hooks/
│ │ └── useTheme.ts
2026-05-22 18:42:12 -03:00
│ ├── i18n/
2026-05-22 18:44:46 -03:00
│ │ ├── index.ts
2026-05-22 18:42:12 -03:00
│ │ └── locales/{pt,en,es}.json
│ ├── lib/
2026-05-22 18:44:46 -03:00
│ │ ├── logos.ts
│ │ ├── sections.ts # ids e labels da navegação
│ │ └── theme.ts
2026-05-22 18:42:12 -03:00
│ ├── styles/
2026-05-22 18:44:46 -03:00
│ │ └── theme.css # tokens de design
2026-05-22 18:42:12 -03:00
│ ├── App.tsx
2026-05-22 18:44:46 -03:00
│ ├── index.css # componentes (.badge, .btn, …)
2026-05-22 18:42:12 -03:00
│ └── main.tsx
├── index.html
2026-05-22 18:44:46 -03:00
├── tailwind.config.ts
2026-05-22 18:42:12 -03:00
├── vite.config.ts
2026-05-22 18:44:46 -03:00
└── package.json
2026-05-22 18:42:12 -03:00
```
---
## Seções da página
2026-05-22 18:44:46 -03:00
1. **Hero ** — proposta de valor e CTAs
2. **Services ** — outsourcing, consultoria
3. **AdaptiveWork ** — especialização Planview
4. **Why Us ** — diferenciais
5. **Process ** — etapas do trabalho
6. **CTA ** — contato (e-mail / WhatsApp)
7. **Footer ** — links, redes e copyright
Navegação por âncoras (`#services` , `#contact` , etc.) definidas em [`src/lib/sections.ts` ](src/lib/sections.ts ).
---
## Classes utilitárias (CSS)
Definidas em [`src/index.css` ](src/index.css ):
- `.container-rl` — largura máxima e padding horizontal
- `.btn-primary` / `.btn-secondary` / `.btn-ghost`
- `.badge` — pills (cor do texto via `--color-badge-fg` )
- `.card` / `.card-hover`
- `.heading` — títulos de seção
Ícones: [Lucide React ](https://lucide.dev ). Animações: `framer-motion` com `whileInView` (`once: true` ).
---
## Deploy
``` bash
npm run build
```
Publique o conteúdo de * * `dist/` ** (Netlify, Vercel, S3 + CloudFront, nginx estático, etc.).
Configure fallback para `index.html` se o host usar SPA routing (esta landing é single-page com âncoras).
2026-05-22 18:42:12 -03:00
---
2026-05-22 18:44:46 -03:00
## Próximos passos (sugestões)
2026-05-22 18:42:12 -03:00
2026-05-22 18:44:46 -03:00
- Formulário de contato (Resend, Formspree, API própria)
- Página de cases / portfólio
- Meta tags e Open Graph por idioma
- Analytics (Plausible, Umami, etc.)
- Atualizar `theme-color` no `<meta>` conforme o tema ativo
2026-05-22 18:42:12 -03:00
---
2026-05-22 18:44:46 -03:00
## Licença
2026-05-22 18:42:12 -03:00
2026-05-22 18:44:46 -03:00
Projeto privado — uso interno RivusLab.
