{ "versao": "1.1.0", "atualizado": "2026-08-31", "contrato": "CLAUDE.md", "descricao": "Indice de maquina da biblioteca. Toda busca por componente comeca aqui, antes de escrever qualquer secao nova. Gerado por bin/indice.py.", "categorias": [ { "id": "navegacao", "nome": "Navegação", "descricao": "Menu, drawer, botões flutuantes, âncoras, progresso de leitura." }, { "id": "hero", "nome": "Hero", "descricao": "Aberturas de página, acima da dobra." }, { "id": "conteudo", "nome": "Conteúdo", "descricao": "Blocos de texto e imagem: manifesto, colunas, alternado, grids editoriais." }, { "id": "listas", "nome": "Listas e coleções", "descricao": "Serviços, etapas, perguntas — tudo que enumera com interação." }, { "id": "midia", "nome": "Mídia", "descricao": "Carrossel, galeria, vídeo, antes-e-depois." }, { "id": "prova", "nome": "Prova social", "descricao": "Logos, depoimentos, números, cases, imprensa." }, { "id": "conversao", "nome": "Conversão", "descricao": "CTA, formulário, agendamento, planos, campos de formulário." }, { "id": "dados", "nome": "Dados e diagramas", "descricao": "Mapas, globos, diagramas calculados, gráficos." }, { "id": "rodape", "nome": "Rodapé", "descricao": "Rodapés e faixas legais." }, { "id": "overlay", "nome": "Sobreposições", "descricao": "Modal, drawer de conteúdo, toast, aviso de cookies." }, { "id": "efeitos", "nome": "Efeitos e primitivas", "descricao": "Quebras de seção, cursor, transições reaproveitáveis." } ], "componentes": [ { "id": "navegacao/nav-fixa-vidro", "nome": "Menu fixo com fundo de vidro", "categoria": "navegacao", "prefixo": "nav-", "status": "estavel", "complexidade": "media", "resumo": "Menu fixo transparente sobre o hero que ganha fundo de vidro e linha inferior depois de 30px de rolagem. Sublinhado animado nos links, CTA em pílula.", "tags": [ "menu", "header", "fixo", "vidro", "scroll", "sublinhado" ], "libs": [], "temJs": true, "pasta": "componentes/navegacao/nav-fixa-vidro", "compoe": [], "pareia_com": [ "navegacao/drawer-fullscreen" ], "origem": [ "liberta-wealth" ] }, { "id": "navegacao/botao-flutuante", "nome": "Botão flutuante de contato", "categoria": "navegacao", "prefixo": "fab-", "status": "estavel", "complexidade": "baixa", "resumo": "Atalho circular fixo no canto inferior direito, na cor de marca. Link real, sem JavaScript.", "tags": [ "whatsapp", "contato", "flutuante", "fixo", "css-puro" ], "libs": [], "temJs": false, "pasta": "componentes/navegacao/botao-flutuante", "compoe": [], "pareia_com": [], "origem": [ "liberta-wealth" ] }, { "id": "navegacao/drawer-fullscreen", "nome": "Menu mobile de tela cheia", "categoria": "navegacao", "prefixo": "drawer-", "status": "estavel", "complexidade": "baixa", "resumo": "Painel de tela cheia deslizando da direita, com trava de scroll, fechamento por Esc e devolução de foco a quem abriu.", "tags": [ "menu", "mobile", "drawer", "overlay", "acessibilidade" ], "libs": [], "temJs": true, "pasta": "componentes/navegacao/drawer-fullscreen", "compoe": [], "pareia_com": [ "navegacao/nav-fixa-vidro" ], "origem": [ "liberta-wealth" ] }, { "id": "hero/full-bleed-media", "nome": "Hero full-bleed com mídia, headline em linhas e régua de stats", "categoria": "hero", "prefixo": "hero-", "status": "estavel", "complexidade": "alta", "resumo": "Abertura de tela cheia com foto sangrada, scrim duplo, headline revelada linha a linha e régua opcional de 4 números.", "tags": [ "hero", "above-the-fold", "imagem", "parallax", "stats", "institucional" ], "libs": [], "temJs": true, "pasta": "componentes/hero/full-bleed-media", "compoe": [], "pareia_com": [], "origem": [ "liberta-wealth" ] }, { "id": "conteudo/grid-entidades", "nome": "Grade de entidades em cards de vidro", "categoria": "conteudo", "prefixo": "ent-", "status": "estavel", "complexidade": "baixa", "resumo": "Quatro cards de vidro, cada um com uma marca (logo ou texto) e uma lista curta de atributos. Alinha logo e texto pela mesma faixa de altura fixa.", "tags": [ "estrutura", "grupo", "entidades", "quatro-colunas", "vidro", "logos" ], "libs": [], "temJs": false, "pasta": "componentes/conteudo/grid-entidades", "compoe": [], "pareia_com": [ "dados/globo-canvas" ], "origem": [ "liberta-wealth" ] }, { "id": "conteudo/grid-equipe", "nome": "Equipe com pessoa em destaque e grade", "categoria": "conteudo", "prefixo": "team-", "status": "estavel", "complexidade": "baixa", "resumo": "Cabeçalho centralizado, uma pessoa em destaque num card largo e o restante do time em grade de três. Placeholder de iniciais enquanto não há fotos.", "tags": [ "equipe", "pessoas", "sobre", "grade", "vidro", "placeholder" ], "libs": [], "temJs": false, "pasta": "componentes/conteudo/grid-equipe", "compoe": [], "pareia_com": [], "origem": [ "liberta-wealth" ] }, { "id": "conteudo/imagem-lista-numerada", "nome": "Imagem com parallax e lista numerada ao lado", "categoria": "conteudo", "prefixo": "duo-", "status": "estavel", "complexidade": "baixa", "resumo": "Duas colunas: foto que estica na altura da linha e desloca em parallax, e lista numerada de 3 a 4 diferenciais com título e frase.", "tags": [ "diferenciais", "duas-colunas", "imagem", "parallax", "lista-numerada" ], "libs": [], "temJs": true, "pasta": "componentes/conteudo/imagem-lista-numerada", "compoe": [], "pareia_com": [], "origem": [ "liberta-wealth" ] }, { "id": "conteudo/manifesto-citacao", "nome": "Manifesto com citação em duas colunas", "categoria": "conteudo", "prefixo": "man-", "status": "estavel", "complexidade": "baixa", "resumo": "Citação grande em itálico revelada palavra a palavra, com parágrafo de apoio e link de texto na coluna ao lado.", "tags": [ "manifesto", "citacao", "sobre", "duas-colunas", "split" ], "libs": [], "temJs": false, "pasta": "componentes/conteudo/manifesto-citacao", "compoe": [], "pareia_com": [], "origem": [ "liberta-wealth" ] }, { "id": "conteudo/pilares-texto-na-foto", "nome": "Três pilares com o texto dentro da foto", "categoria": "conteudo", "prefixo": "pil-", "status": "estavel", "complexidade": "baixa", "resumo": "Grade de três cards em retrato; número, título e frase ficam dentro da imagem, sobre gradiente e blur mascarado.", "tags": [ "pilares", "valores", "tres-colunas", "imagem", "veu", "texto-sobre-foto" ], "libs": [], "temJs": false, "pasta": "componentes/conteudo/pilares-texto-na-foto", "compoe": [], "pareia_com": [], "origem": [ "liberta-wealth" ] }, { "id": "listas/baralho-sticky", "nome": "Baralho de cards que se empilham sobre foto pinada", "categoria": "listas", "prefixo": "deck-", "status": "estavel", "complexidade": "alta", "resumo": "Etapas em cards de vidro que grudam no topo em alturas escalonadas, encolhendo e apagando conforme são cobertos, sobre uma foto que fica pinada por uma tela inteira.", "tags": [ "etapas", "metodo", "processo", "sticky", "scroll", "vidro", "pilha" ], "libs": [], "temJs": true, "pasta": "componentes/listas/baralho-sticky", "compoe": [], "pareia_com": [], "origem": [ "liberta-wealth" ] }, { "id": "listas/leque-paineis", "nome": "Leque de painéis verticais", "categoria": "listas", "prefixo": "fan-", "status": "estavel", "complexidade": "media", "resumo": "4 a 6 painéis de foto lado a lado; o ativo expande e revela título e descrição, os fechados mostram número e título vertical.", "tags": [ "servicos", "lista", "imagem", "hover", "acordeao", "expansivel" ], "libs": [], "temJs": true, "pasta": "componentes/listas/leque-paineis", "compoe": [], "pareia_com": [], "origem": [ "liberta-wealth" ] }, { "id": "listas/acordeao-faq", "nome": "Acordeão de perguntas frequentes", "categoria": "listas", "prefixo": "faq-", "status": "estavel", "complexidade": "baixa", "resumo": "Lista de perguntas com abertura em altura animada e sinal +/- que gira. Um item aberto por vez, com aria-expanded e aria-controls.", "tags": [ "faq", "acordeao", "duvidas", "objecoes", "acessibilidade" ], "libs": [], "temJs": true, "pasta": "componentes/listas/acordeao-faq", "compoe": [], "pareia_com": [], "origem": [ "liberta-wealth" ] }, { "id": "midia/galeria-pasta", "nome": "Galeria em pasta com leque de fotos", "categoria": "midia", "prefixo": "fold-", "status": "externo", "complexidade": "alta", "resumo": "Pilha de fotos dentro de uma pasta: hover abre em leque, clique estende em linha e arrastar uma foto para baixo fecha. O leque é CSS puro; o script só abre, fecha e arrasta.", "tags": [ "galeria", "imagem", "hover", "arrastar", "institucional", "pasta" ], "libs": [], "temJs": true, "pasta": "componentes/midia/galeria-pasta", "compoe": [], "pareia_com": [], "origem": [ "21st.dev" ] }, { "id": "midia/galeria-scroll-horizontal", "nome": "Galeria de cases em scroll horizontal", "categoria": "midia", "prefixo": "hgal-", "status": "experimental", "complexidade": "media", "resumo": "Faixa de cases que sangra até a borda e rola na horizontal com encaixe. Cada card é uma foto 4:3 que ganha cor no hover, com distintivo de marca no canto e nome e tipo sobre a imagem.", "tags": [ "galeria", "carrossel", "scroll-horizontal", "portfolio", "cases", "imagem", "snap", "teclado" ], "libs": [], "temJs": true, "pasta": "componentes/midia/galeria-scroll-horizontal", "compoe": [], "pareia_com": [], "origem": [ "gabriel-rocha-studio" ] }, { "id": "prova/stats-contador-regua", "nome": "Régua de números com contagem", "categoria": "prova", "prefixo": "stat-", "status": "experimental", "complexidade": "media", "resumo": "Três números gigantes separados por filetes verticais, com rótulo curto embaixo. Cada um conta de zero até o alvo em 1,8s quando a faixa entra na tela, uma vez só. Sem lib.", "tags": [ "prova-social", "numeros", "contador", "metricas", "resultados", "count-up", "intersection-observer" ], "libs": [], "temJs": true, "pasta": "componentes/prova/stats-contador-regua", "compoe": [], "pareia_com": [], "origem": [ "gabriel-rocha-studio" ] }, { "id": "prova/marquee-logos", "nome": "Esteira infinita de logos", "categoria": "prova", "prefixo": "marquee-", "status": "estavel", "complexidade": "baixa", "resumo": "Faixa de prova social com rótulo centralizado e fileira de logos em loop contínuo, pausando no hover. CSS puro.", "tags": [ "prova-social", "logos", "parceiros", "clientes", "loop", "css-puro" ], "libs": [], "temJs": false, "pasta": "componentes/prova/marquee-logos", "compoe": [], "pareia_com": [], "origem": [ "liberta-wealth" ] }, { "id": "conversao/cta-formulario-lead", "nome": "CTA com formulário de captura", "categoria": "conversao", "prefixo": "lead-", "status": "revisar", "complexidade": "alta", "resumo": "Seção de conversão com foto de fundo esmaecida: argumento e lista de benefícios de um lado (sticky), card de vidro com formulário do outro.", "tags": [ "cta", "formulario", "lead", "conversao", "vidro", "sticky" ], "libs": [], "temJs": true, "pasta": "componentes/conversao/cta-formulario-lead", "compoe": [ "conversao/select-custom" ], "pareia_com": [ "conversao/cta-fechamento-foto" ], "origem": [ "liberta-wealth" ] }, { "id": "conversao/select-custom", "nome": "Select customizado acessível", "categoria": "conversao", "prefixo": "csel-", "status": "estavel", "complexidade": "media", "resumo": "Substituto do