Catálogo vivo de todos os componentes reutilizáveis do projeto — cada um isolado, com o caminho do arquivo — mais uma coleção de blocos experimentais de UX.
Estrutura de página, seções e primitivas de composição.
Casca de página: fundo, tipografia, header e footer globais.
<PageShell>{conteúdo}</PageShell> — envolve a página inteira com SiteHeader, main e SiteFooter.Hero padrão com eyebrow, título com acento, CTAs e visual orbital opcional.
Texto introdutório do hero padrão do site.
Visual orbital animado usado no hero.
Seção padrão com eyebrow, título, intro e dois tons de fundo.
Texto de apoio da seção.
Conteúdo da seção.
Grade de cards com título, descrição e lista opcional.
Mapeamento de competências.
Aprendizagem aplicada.
Indicadores contínuos.
Lista de itens com marcador roxo, em 1 a 3 colunas.
Etapas numeradas de metodologia.
Mapear o cenário.
Aplicar as trilhas.
Medir resultados.
Bloco de conversão de fim de página.
Nota legal discreta.
Resultados variam conforme o contexto de cada organização.
Etiqueta de seção em pílula roxa.
Halo radial decorativo com pulsação.
Entrada suave ao aparecer na viewport.
Header global, rodapé e padrões de orientação do usuário.
Header global com mega menu desktop e accordion mobile. Já está montado no topo desta página.
Menu contextual expansível com resumo, imagem e progresso.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Blocos editoriais, FAQ e formulários de contato.
Perguntas frequentes em acordeão com um item aberto por vez.
Formulário de diagnóstico de CX em 3 etapas, com lógica condicional.
Mídia fixa à esquerda com pontos-chave rolando à direita.
Diagnóstico de competências por squad e por pessoa
Trilhas aplicadas a projetos reais do negócio
Mentoria contínua com especialistas de mercado
Indicadores de evolução acompanhados mês a mês
Mosaico assimétrico com zoom e legenda no hover.
Marquee infinito de logos com máscara e pausa no hover.
Profissionais formados atuam em times como
Depoimentos em carrossel com avatar, citação e indicadores.
“Em três meses o time passou a comunicar decisões técnicas com clareza para o negócio. O impacto apareceu direto nas entregas.”
CTA com gradiente reativo ao cursor.
Diagnóstico gratuito de competências e um plano de evolução em até 7 dias.
Falar com a equipeVariações de card interativo usadas nas páginas de referência.
Vitrine de case com imagem em camadas e métricas.
Programa combinado de soft skills, inglês corporativo e adoção de IA aplicado a 8 squads ao longo de dois trimestres.
0%
menos retrabalho
0x
velocidade de entrega
0%
retenção do time
Cards que revelam conteúdo secundário no hover e no foco.
Comportamento
Rise Skills
Trilhas de comunicação, ownership e pensamento crítico aplicadas em projetos reais.
Inglês corporativo
Rise Language
Fluência prática para reuniões, apresentações e escrita técnica no dia a dia global.
IA aplicada
Rise Adoption
Adoção de IA com governança, casos de uso priorizados e ganho mensurável.
Painéis de vidro com profundidade reativa ao cursor.
Pessoas
Comportamento, liderança e colaboração como base da performance.
Skills
Competências técnicas e comunicação aplicadas ao dia a dia.
Tech
Adoção de IA e engenharia moderna com governança.
Cards 3D com reflexo de luz e borda reativa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Cards compactos que expandem por clique (seguro em mobile).
Comparativo antes/depois com arraste e teclado.
AntesCards que reagem ao tempo na página e ao dispositivo.
Camadas assimétricas flutuando em torno de um visual central.
Card com holofote roxo que segue o cursor.
Passe o cursor sobre este card
Inclinação 3D sutil no hover.
Elemento com tilt
Todos os componentes shadcn/ui disponíveis em src/components/ui.
Lista expansível de itens, um aberto por vez.
Mensagem informativa inline.
Confirmação bloqueante para ações destrutivas.
Mantém proporção fixa para mídia.
Imagem de perfil com fallback por iniciais.
Etiqueta de status em quatro variantes.
Seletor de datas com navegação por teclado.
Contêiner base com header, conteúdo e rodapé.
Slider horizontal com controles acessíveis.
Wrapper de Recharts com tooltip temática.
Seleção múltipla com label associada.
Bloco expansível controlado.
Lista com busca no estilo paleta de comandos.
Modal centralizado com foco preso.
Painel deslizante inferior, ideal para mobile.
Integração com react-hook-form, labels e mensagens de erro.
Prévia de conteúdo ao passar o cursor.
Campo de texto padrão.
Entrada de código de verificação.
Rótulo acessível associado a controles.
Navegação entre páginas de listagem.
Painel flutuante ancorado a um gatilho.
Barra de progresso controlada.
Escolha única entre opções.
Painéis redimensionáveis por arraste.
Área rolável com barra estilizada.
Seleção em lista suspensa.
Divisor horizontal ou vertical.
Bloco superior
Bloco inferior
Painel lateral deslizante.
Placeholder de carregamento.
Seleção de valor em intervalo.
Notificações temporárias. O Toaster fica montado apenas nesta demo.
Alternância binária.
Tabela de dados com cabeçalho.
| Squad | Programa | Evolução |
|---|---|---|
| Checkout | Rise Skills | +32% |
| Plataforma | Rise Adoption | +18% |
Alternância entre painéis de conteúdo.
Campo de texto multilinha.
Botão de estado ativo/inativo.
Conjunto de toggles com seleção única ou múltipla.
Dica contextual no hover ou foco.
Capítulos completos usados na rota /reference-4.
Entrada com deslocamento e desfoque.
Bloco revelado
Headline revelada palavra a palavra.
Contador animado ao entrar na viewport.
0+
Elemento atraído suavemente pelo cursor.
Deslocamento suave conforme o scroll.
Camada com parallax
Marcador de capítulo com número e rótulo.
Hero cinematográfico com parallax multicamada.
Um ecossistema vivo que conecta pessoas, competências e tecnologia para acelerar carreiras e transformar resultados de negócio.
Capítulo editorial com layout quebrado.
Nosso trabalho começa onde os dashboards param: no comportamento, na comunicação e na maturidade técnica de quem constrói. É por isso que cada solução nasce de um diagnóstico humano — e termina em indicador de negócio.
“Não existe transformação digital sem transformação de pessoas.”
É o princípio que organiza os seis produtos do ecossistema Geração In Rise.
Trilhas curtas, prática aplicada ao contexto real do time e acompanhamento contínuo. O aprendizado acontece dentro da entrega — e é medido nela.
Conheça a metodologia
Diagrama SVG interativo de rede humana.
Cada nó da rede alimenta o próximo. Toque em um deles para entender como pessoas, competências, tecnologia e empresas se conectam dentro da Geração In Rise.
Profissionais em desenvolvimento contínuo, com mentoria e comunidade ativa.
Marquee de imagens e mosaico imersivo.
Pessoas reais aprendendo, liderando e construindo tecnologia. É essa a matéria-prima do que entregamos.
“Colocamos gente no centro da tecnologia — e a tecnologia a serviço de quem entrega.”
Manifesto Geração In Rise
Explorador do ecossistema em trilho horizontal.
Comece por onde a dor é maior. Cada produto funciona sozinho — e multiplica quando combinado com os outros.
Aceleração de carreira para desenvolvedores que querem atuar em times internacionais.
Hunting, staff augmentation e squads dedicados com governança de entrega.
Desenvolvimento comportamental aplicado ao dia a dia da engenharia.
Fluência real para reuniões, apresentações e negociação técnica.
Adoção de inteligência artificial com casos de uso, risco e retorno mapeados.
Jornadas fluidas do primeiro contato ao pós-venda, com automação inteligente.
Aceleração de carreira para desenvolvedores que querem atuar em times internacionais.
Hunting, staff augmentation e squads dedicados com governança de entrega.
Desenvolvimento comportamental aplicado ao dia a dia da engenharia.
Fluência real para reuniões, apresentações e negociação técnica.
Adoção de inteligência artificial com casos de uso, risco e retorno mapeados.
Jornadas fluidas do primeiro contato ao pós-venda, com automação inteligente.
Jornada sticky com progressão por etapas.
Mapeamos maturidade técnica, comportamental e de idioma do time — sem achismo, com evidência.
Desenhamos trilhas curtas e aplicadas, integradas ao ciclo de entrega, sem parar a operação.
Mentoria, pareamento e desafios reais transformam conteúdo em comportamento observável.
Indicadores de negócio, produtividade e retenção acompanhados trimestre a trimestre.
Painel editorial de métricas.
“Em um trimestre o time deixou de depender de heróis. A entrega ficou previsível — e as pessoas, muito mais confiantes.”
FAQ organizado em trilhas de conhecimento.
Escolha uma trilha e descubra as respostas no seu ritmo.
Fechamento cinematográfico com CTA.
Conte o seu desafio. Devolvemos um plano com escopo, prazo e o indicador que vamos mover juntos.
Padrões de interação avançada usados na rota /reference-5.
Hero em camadas com profundidade por cursor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem metric
87%
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
“Lorem ipsum dolor sit amet, consectetur.”
Ipsum Dolor — Sit Amet Co.
Headline que alterna palavras com máscara vertical.
Bento grid modular com blocos de tamanhos distintos.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum0+
Pessoas — lorem ipsum
0%
Tecnologia — lorem ipsum
0,0x
Performance — lorem ipsum
0
Módulos — lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
“Lorem ipsum dolor sit amet, consectetur adipiscing elit.”
Ipsum Dolor · Head of Lorem, Amet Corp.
Layout editorial assimétrico com tipografia forte.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
0%
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
“Lorem ipsum dolor sit amet.”
Rede SVG com nós, etiquetas e linhas animadas.
Nó selecionado
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Módulos filtráveis com transição de layout.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Visual fixo com etapas progressivas no scroll.
01Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
02Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
03Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
04Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sequência horizontal guiada por scroll vertical.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Revelação em sequência: título, contexto, visual, dado e CTA.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
0x
Lorem
0%
Ipsum
0k
Dolor
Clímax claro→escuro com frase que se forma.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Consectetur adipiscingLorem ipsum dolor sit amet, consectetur adipiscing elit.
Novos blocos criados para esta biblioteca, prontos para reuso.
Roadmap horizontal com etapas selecionáveis e barra de progresso.
Desenho
Trilhas sob medida combinando pessoas, skills e tecnologia.
Métricas com contadores animados e sparkline SVG.
0+
Profissionais formados
0x
Aumento de empregabilidade
0%
Satisfação dos times
0%
Redução de turnover
Tabela comparativa com destaque de coluna no hover.
| Recursos | Essencial | Avançado | Enterprise |
|---|---|---|---|
| Diagnóstico de competências | |||
| Trilhas de soft skills | 2 trilhas | 6 trilhas | Ilimitado |
| Mentoria individual | |||
| Inglês corporativo | |||
| Governança e indicadores | Trimestral | Mensal | |
| Squad dedicado |
Visualização de fluxo de IA com nós conectados e detalhe dinâmico.
Dados
Fontes internas conectadas e tratadas com governança.