193 lines
5.7 KiB
Markdown
193 lines
5.7 KiB
Markdown
# RivusLab — Landing Page
|
|
|
|
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
|
|
|
|
---
|
|
|
|
## Início rápido
|
|
|
|
```bash
|
|
npm install
|
|
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)
|
|
```
|
|
|
|
Requer **Node 18+**.
|
|
|
|
---
|
|
|
|
## 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 |
|
|
|
|
---
|
|
|
|
## Personalizar a marca
|
|
|
|
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).
|
|
|
|
```css
|
|
:root {
|
|
--color-primary: 35 196 192; /* #23C4C0 */
|
|
--color-secondary: 15 58 108; /* #0F3A6C */
|
|
--color-badge-fg: 15 58 108; /* texto dos badges (tema claro) */
|
|
/* ... */
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
--color-bg: 11 22 38;
|
|
--color-badge-fg: 147 220 218; /* texto dos badges (tema escuro) */
|
|
/* ... */
|
|
}
|
|
```
|
|
|
|
> Cores usam triplets **R G B** (sem `rgb()`), para o Tailwind aplicar opacidade (`bg-primary/40`, etc.).
|
|
> Ex.: `#23C4C0` → `35 196 192`.
|
|
|
|
### Tema claro / escuro
|
|
|
|
- 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).
|
|
|
|
| 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 |
|
|
|
|
---
|
|
|
|
## Textos (i18n)
|
|
|
|
Um JSON por idioma:
|
|
|
|
- [`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)
|
|
|
|
Use a mesma chave nos três arquivos e no componente: `t('secao.chave')`.
|
|
|
|
Chaves de tema (exemplo): `theme.switchToLight`, `theme.switchToDark`.
|
|
|
|
---
|
|
|
|
## Logos e favicon
|
|
|
|
Coloque os arquivos em **`public/`**:
|
|
|
|
| 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 |
|
|
|
|
Os caminhos estão centralizados em [`src/lib/logos.ts`](src/lib/logos.ts). Para outros nomes de arquivo, altere só esse módulo.
|
|
|
|
---
|
|
|
|
## Estrutura do projeto
|
|
|
|
```
|
|
HomePage/
|
|
├── public/
|
|
│ ├── logo-light.png
|
|
│ ├── logo-dark.png
|
|
│ └── favicon.svg
|
|
├── src/
|
|
│ ├── components/
|
|
│ │ ├── Navbar.tsx # menu + idioma + tema
|
|
│ │ ├── Hero.tsx
|
|
│ │ ├── Services.tsx
|
|
│ │ ├── Adaptivework.tsx
|
|
│ │ ├── WhyUs.tsx
|
|
│ │ ├── Process.tsx
|
|
│ │ ├── CTA.tsx
|
|
│ │ ├── Footer.tsx
|
|
│ │ ├── LanguageSwitcher.tsx
|
|
│ │ └── ThemeToggle.tsx
|
|
│ ├── hooks/
|
|
│ │ └── useTheme.ts
|
|
│ ├── i18n/
|
|
│ │ ├── index.ts
|
|
│ │ └── locales/{pt,en,es}.json
|
|
│ ├── lib/
|
|
│ │ ├── logos.ts
|
|
│ │ ├── sections.ts # ids e labels da navegação
|
|
│ │ └── theme.ts
|
|
│ ├── styles/
|
|
│ │ └── theme.css # tokens de design
|
|
│ ├── App.tsx
|
|
│ ├── index.css # componentes (.badge, .btn, …)
|
|
│ └── main.tsx
|
|
├── index.html
|
|
├── tailwind.config.ts
|
|
├── vite.config.ts
|
|
└── package.json
|
|
```
|
|
|
|
---
|
|
|
|
## Seções da página
|
|
|
|
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).
|
|
|
|
---
|
|
|
|
## Próximos passos (sugestões)
|
|
|
|
- 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
|
|
|
|
---
|
|
|
|
## Licença
|
|
|
|
Projeto privado — uso interno RivusLab.
|