# 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 ``. - 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 `` conforme o tema ativo --- ## Licença Projeto privado — uso interno RivusLab.