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