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

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

Basta editar os valores das CSS variables e a mudança propaga para o site inteiro.

: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 lang="pt-BR" data-theme="dark">

Editando os textos

Os textos vivem em arquivos JSON simples, um por idioma:

src/i18n/locales/pt.json — Português (padrão)
src/i18n/locales/en.json — Inglês
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

Hero — proposta de valor + CTAs + visual com mini "editor"
Services — Outsourcing, Squads, Consultoria
AdaptiveWork — destaque para a especialização em Planview AdaptiveWork
Why Us — 4 pilares de diferenciação
Process — 4 etapas (Diagnóstico → Proposta → Execução → Evolução)
CTA — bloco escuro com email/WhatsApp
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 — 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).

4.7 KiB Raw Blame History