first commit
This commit is contained in:
@@ -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>`:
|
||||||
|
|
||||||
|
```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`](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).
|
||||||
Reference in New Issue
Block a user