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
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 — é o único arquivo de tokens. As variáveis são consumidas pelo Tailwind em tailwind.config.ts.
: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"oudata-theme="dark"no<html>. - Script inline em
index.htmlevita flash na primeira carga. - Lógica React:
src/lib/theme.ts,src/hooks/useTheme.ts, botãosrc/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— padrão / fallbacksrc/i18n/locales/en.jsonsrc/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. 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
- Hero — proposta de valor e CTAs
- Services — outsourcing, consultoria
- AdaptiveWork — especialização Planview
- Why Us — diferenciais
- Process — etapas do trabalho
- CTA — contato (e-mail / WhatsApp)
- Footer — links, redes e copyright
Navegação por âncoras (#services, #contact, etc.) definidas em src/lib/sections.ts.
Classes utilitárias (CSS)
Definidas em 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. Animações: framer-motion com whileInView (once: true).
Deploy
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-colorno<meta>conforme o tema ativo
Licença
Projeto privado — uso interno RivusLab.