#045 · Nav Bars
Menu de topo simples
Logo na esquerda, links no meio, botão na direita
Você está gerando
LM Brutalist EditorialCursor
#047 · Nav Bars
Menu com mega submenu
Quando passa o mouse num link, abre um painel grande com várias colunas
#049 · Nav Bars
Menu flutuante em pílula
Barra arredondada (pílula) flutuando descolada do topo, com sombra leve
#050 · Nav Bars
Menu transparente que vira sólido ao rolar
Começa transparente sobre o hero, fica com fundo branco quando o usuário rola pra baixo
#192 · Nav Bars
Menu com efeito vidro fosco
Barra translúcida com blur sobre o conteúdo, sem borda
#048 · Nav Bars
Menu lateral vertical
Coluna lateral fina à esquerda com logo, links empilhados e área do usuário embaixo
#052 · Nav Bars
Barra de navegação inferior (mobile)
Barra fixa na parte de baixo da tela, com 4 ou 5 ícones + nome, estilo aplicativo
#000 · Hero Sections
Hero com foto do especialista
Foto vertical do profissional na direita, copy + credenciais + CTAs na esquerda
#023 · Hero Sections
Hero centralizado com foto de fundo e overlay suave
Título e botões centralizados sobre foto de fundo com overlay escuro bem fraco
#026 · Hero Sections
Hero com fundo gradiente animado
Fundo com gradiente colorido que se move suavemente, texto por cima
#030 · Hero Sections
Hero com formulário de email embutido
Título, subtítulo e um campo de email com botão direto embaixo
#139 · Hero Sections
Hero com tira de logos rolando embaixo
Título e CTA em cima, marquee horizontal de logos de clientes embaixo
#150 · Hero Sections
Hero com fila de avatares de clientes
Título, subtítulo, e uma linha com 5 fotos de pessoas + texto de prova social
#153 · Hero Sections
Hero com foto de fundo e overlay escuro
Foto ocupando a tela toda, overlay preto, texto à esquerda em branco
#154 · Hero Sections
Hero cinematográfico com vignette
Foto ou vídeo full-screen + escurecimento nas bordas + texto no centro
#025 · Hero Sections
Hero com vídeo de fundo
Vídeo em loop ocupando o fundo todo, texto e botões por cima
#027 · Hero Sections
Hero estilo terminal/código
Janela de terminal ou editor de código no centro, com texto digitando
#200 · Hero Sections
Hero 2 colunas com captura (email + telefone com detecção de país)
Form inteligente: digite o +DDI e a bandeira do país aparece automaticamente
#201 · Hero Sections
Hero com foto de fundo, overlay escuro e formulário de captura
Foto de fundo escura com gradiente, form de captura sobreposto à esquerda com glassmorphism
#370 · Marquees & Movimento
Marquee infinito de logos de clientes
Fileira de logos rolando horizontalmente com fades laterais
#371 · Marquees & Movimento
Marquee duplo · 2 fileiras opostas
2 linhas de pílulas rolando em direções opostas com durações diferentes
#372 · Marquees & Movimento
News ticker · barra de avisos rolando
Faixa fina horizontal na cor de destaque com avisos curtos rolando · separadores entre itens
#038 · Stats Bars
Stat narrativo · frase com número destacado
Uma frase grande conta a história, com o número em cor de destaque inline
#039 · Stats Bars
KPI bar ao vivo · ticker animado + variação %
Dashboard com bolinha pulsando, números contando e badge verde/vermelho de variação
#040 · Stats Bars
Stats com imagem lado a lado
2 colunas: stats + headline à esquerda, foto vertical com caption à direita
#041 · Stats Bars
Stats comparativo · antes vs depois
Tabela de transformação com valor antigo riscado e novo destacado
#044 · Stats Bars
Stat herói + 3 suportes
1 número gigante dominante em cima + 3 stats menores embaixo (hierarquia)
#045 · Stats Bars
Stats geográfico · pontos pulsantes no mapa
Mapa abstrato com pontos pulsantes nas capitais + lista de cidades + stat total
#360 · Stats Bars
Contador ao vivo · números em tempo real
4 stats que atualizam via setInterval com bolinha verde pulsando e pulso em cor de destaque a cada update
#015 · Features / Bento
Funcionalidades em 3 colunas com ícone
3 ou 6 cards de feature, cada um com ícone, título e descrição
#016 · Features / Bento
Bento grid (tiles de tamanhos variados)
Grade com tiles de tamanhos diferentes, como o app Apple Wallet
#017 · Features / Bento
Linhas alternadas texto+imagem
Várias linhas de feature, texto/imagem alternando lado a cada linha (zigzag)
#018 · Features / Bento
Funcionalidades com abas
Botões de aba no topo, cada aba mostra uma feature diferente com imagem
#022 · Features / Bento
Antes/depois com slider
Comparação visual mostrando 2 estados lado a lado ou com slider que arrasta
#123 · Features / Bento
Bento com 1 tile gigante
Bento grid onde 1 tile ocupa 2x2 como destaque e os outros são menores
#127 · Features / Bento
Funcionalidades numeradas 01-05
Cada feature com um número gigante (01, 02, 03...) ao lado
#019 · Features / Bento
Lista sanfona de funcionalidades
Lista vertical onde cada item abre/fecha mostrando a descrição completa
#020 · Features / Bento
Imagem fixa que muda conforme rola
Imagem do lado esquerdo fica fixa enquanto descrições do outro lado vão rolando
#021 · Features / Bento
Grade densa de ícones
Muitos quadradinhos pequenos em grade, cada um com 1 ícone + nome curto
#007 · Pricing
3 planos lado a lado
Pricing clássico: 3 cards lado a lado, com o do meio em destaque
#008 · Pricing
Pricing com toggle mensal/anual
Botão em cima alterna entre mensal e anual com badge de desconto
#009 · Pricing
Tabela comparativa de planos
Planos como colunas, funcionalidades como linhas com check ou traço
#010 · Pricing
1 plano único grande
Um card único centralizado com todos os benefícios e CTA
#011 · Pricing
Preço com slider de uso
Slider que o usuário arrasta pra ajustar volume e o preço atualiza
#013 · Pricing
Free vs Pro lado a lado
2 colunas com forte contraste visual entre o plano grátis e o pago
#115 · Pricing
Pricing com 1 plano enterprise sem preço
2 planos com preço + 1 terceiro "Fale com vendas" sem número
#012 · Pricing
Pacotes de créditos em grade
Vários cards com quantidade de créditos, preço e badge de melhor oferta
#014 · Pricing
Pricing empilhado mobile-first
Cards de preço em 1 coluna empilhada, full-width, ideal pra celular
#053 · Testimonials
Depoimentos em 3 cards
3 cards lado a lado, cada um com foto, nome, cargo e citação
#054 · Testimonials
Depoimentos em marquee infinito
Tira horizontal de depoimentos rolando devagar em loop
#055 · Testimonials
Depoimentos em masonry
Grade tipo Pinterest, cards de alturas variadas
#056 · Testimonials
1 depoimento gigante em destaque
Uma única citação grande com foto, nome, cargo e logo da empresa
#059 · Testimonials
Logo cloud de clientes
Grade ou linha simples com logos de empresas que usam o produto
#198 · Testimonials
Depoimento gigante com retrato lateral
Uma citação enorme ocupando a tela com retrato da pessoa do lado
#057 · Testimonials
Grade de vídeos de depoimento
Cards de vídeo com play, ao clicar abre o vídeo em modal
#058 · Testimonials
Mural de tweets
Cards estilo post do Twitter/X, com avatar, @, data e texto
#060 · Testimonials
Carrossel de depoimentos com bolinhas
1 depoimento por vez, setas/bolinhas embaixo pra navegar
#463 · Galleries / Media Grids
Galeria estilo Pinterest
Grade masonry com fotos de tamanhos variados se encaixando
#464 · Galleries / Media Grids
Grade uniforme de fotos quadradas
Grade de fotos todas no mesmo tamanho quadrado
#350 · Galleries / Media Grids
Galeria horizontal infinita · full-width
Fileira de fotos rolando da direita pra esquerda · ocupa largura total · fades nas bordas
#351 · Galleries / Media Grids
Galeria vertical · 3 colunas alternadas
3 colunas verticais · uma sobe, outra desce, outra sobe · loop contínuo em durações diferentes
#031 · CTA Banners
CTA full-width com gradiente
Faixa larga com fundo gradiente, título grande e botão
#032 · CTA Banners
Card de CTA em 2 colunas
Card contido com título à esquerda e botão à direita
#033 · CTA Banners
Barra de CTA grudada embaixo
Faixa fixa no rodapé da tela, com mensagem e botão (e X pra fechar)
#036 · CTA Banners
CTA com captura de email inline
Título + campo de email com botão direto embaixo
#156 · CTA Banners
CTA com selos de confiança embaixo
CTA centralizado + linha de logos/badges de certificação embaixo
#163 · CTA Banners
CTA com 2 botões equilibrados
Card dividido em 2 metades iguais, cada uma com seu CTA
#034 · CTA Banners
CTA com fundo texturizado
Seção full-width com padrão geométrico sutil de fundo e CTA centralizado
#035 · CTA Banners
CTA com 2 botões lado a lado
Título centralizado + 2 botões (primário e secundário) embaixo
#300 · CTA Banners
CTA banner · faixa inteira na cor de destaque
Faixa larga full-color centralizada com headline gigante e 2 CTAs
#301 · CTA Banners
CTA banner · split com imagem
Card grande em 2 colunas com texto+CTA à esquerda e foto vertical à direita
#066 · FAQ
FAQ em coluna única sanfona
Lista vertical de perguntas, cada uma abre a resposta ao clicar
#067 · FAQ
FAQ em 2 colunas
Perguntas divididas em 2 colunas, cada uma com sua sanfona
#069 · FAQ
FAQ com busca em cima
Campo de busca grande no topo que filtra perguntas conforme digita
#070 · FAQ
FAQ com abas de categoria
Abas em cima dividindo perguntas por tema (Pagamento, Suporte, etc)
#230 · FAQ
FAQ com link de contato em cada resposta
Lista de perguntas onde cada resposta termina com "Ainda em dúvida? Fale com a gente"
#085 · Contact
Contato em 2 colunas (form + detalhes)
Formulário na esquerda, detalhes de contato (email, telefone, endereço) na direita
#086 · Contact
Cards de canais de suporte
Grade de 3-4 cards, cada um com um canal (chat, email, docs, comunidade)
#087 · Contact
Página de contato minimalista
Página inteira centralizada com título + formulário simples + botão
#288 · Contact
Página com calendário de agendamento embutido
A maior parte da tela é tomada por um calendário (estilo Cal.com / Calendly)
#000 · About / Sobre
Sobre o especialista com retrato
Foto vertical à esquerda + bio em parágrafo + lista de credenciais e formação
#000 · About / Sobre
Sobre + números do profissional
Foto à esquerda, bio à direita, e uma linha de 3 estatísticas embaixo (anos, clientes, conselhos)',
#000 · About / Sobre
Sobre + linha do tempo da formação
Foto + bio em cima, linha do tempo vertical embaixo com marcos da carreira',
#061 · Footer
Footer com várias colunas de links
Logo + tagline em uma coluna, e 3-4 colunas de links categorizados
#062 · Footer
Footer minimalista em 1 linha
Logo + alguns links + copyright tudo em uma linha só
#064 · Footer
Footer com newsletter em destaque
Captura de email grande no topo do footer + links secundários embaixo
#213 · Footer
Footer com CTA gigante e linha de links
CTA enorme em cima + uma única linha fininha de links no rodapé
#001 · Auth Forms
Login dividido com visual ao lado
Formulário em uma coluna, screenshot ou ilustração na outra
#002 · Auth Forms
Card de login flutuando
Card de login centralizado, com foto/gradiente cobrindo o resto da tela
#003 · Auth Forms
Login minimalista em 1 coluna
Sem card, sem fundo decorativo. Só logo, título, campos e botão.
#004 · Auth Forms
Login com botões sociais em cima
Botões de Google/GitHub/Apple no topo, email/senha embaixo do divisor
#005 · Auth Forms
Login só com email (magic link)
Só 1 campo de email e 1 botão, sem senha
#006 · Auth Forms
Cadastro em vários passos
Indicador de progresso em cima, formulário dividido em 2-3 etapas com botões Próximo/Voltar
#077 · Onboarding
Onboarding com checklist
Lista de tarefas pra completar a conta, cada uma com checkmark
#078 · Onboarding
Tour com tooltips
Pontos coloridos apontando pra elementos da UI com balão explicativo
#259 · Onboarding
Onboarding em modal de várias etapas
Modal central com passos lineares: barra de progresso + próximo/voltar
#079 · Onboarding
Onboarding com vídeo modal
Modal central com um vídeo de boas-vindas + botão "Começar"
#080 · Onboarding
Estado vazio com ilustração
Ilustração customizada no centro, texto explicativo e botão pra começar
#071 · Dashboards
Dashboard com menu lateral
Sidebar vertical à esquerda + área de conteúdo grande à direita
#072 · Dashboards
Dashboard com menu no topo
Barra horizontal no topo + área de conteúdo full-width embaixo
#074 · Dashboards
Quadro Kanban
Colunas representando estágios, cards arrastáveis em cada uma
#075 · Dashboards
Dashboard com KPIs e gráfico
Grade de cards de métricas em cima + 1 gráfico grande embaixo
#076 · Dashboards
Dashboard com estado vazio
Quando não tem dados, mostra ilustração centralizada + CTA
#073 · Dashboards
Dashboard com 3 painéis
Sidebar de menu + lista no meio + detalhes à direita
#343 · Tables / Data Display
Tabela densa de dados
Tabela tipo planilha com muitas linhas/colunas e primeira coluna fixa
#346 · Tables / Data Display
Tabela com filtros e ordenação
Tabela padrão + chips de filtro em cima + colunas clicáveis pra ordenar
#358 · Tables / Data Display
Tabela com badge de status em destaque
Tabela onde cada linha tem 1 pílula colorida indicando status (Ativo/Pendente/Cancelado)
#323 · Forms
Formulário longo em 1 coluna
Campos empilhados verticalmente com label em cima, largura máxima 640px
#326 · Forms
Formulário em passos com indicador
Indicador de progresso em cima + 1 passo do formulário por vez
#331 · Forms
Formulário com abas no topo
Abas alternando entre seções do formulário (Conta, Empresa, Pagamento, etc)
#333 · Forms
Checkout com resumo do pedido fixo
Formulário de checkout à esquerda + resumo sticky à direita
#303 · Modals / Dialogs
Modal de confirmação
Modal pequeno centralizado com título, texto e 2 botões (Cancelar / Confirmar)
#305 · Modals / Dialogs
Sheet que sobe de baixo (mobile)
Painel ancorado embaixo da tela que sobe deslizando, estilo iOS
#309 · Modals / Dialogs
Modal de busca tipo command palette
Modal central com campo de busca grande e lista de resultados (estilo ⌘K)
#363 · Cards
Card de produto com botão rápido
Card de produto que, ao passar o mouse, revela um botão "+ adicionar"
#364 · Cards
Card de perfil com estatísticas
Card de perfil de usuário com avatar grande + 3 estatísticas embaixo
#365 · Cards
Card de artigo com tempo de leitura
Card de blog post com imagem, título, categoria e pílula "5 min de leitura"
#081 · Blog / Content
Listagem de blog tipo revista
1 post em destaque grande em cima + cards menores numa grade embaixo
#082 · Blog / Content
Página de artigo em coluna única
Largura confortável pra leitura (700px) com tipografia generosa
#083 · Blog / Content
Artigo com índice lateral sticky
Artigo na coluna principal + sumário lateral fixo que destaca a seção atual
#084 · Blog / Content
Blog com filtros por categoria
Tags de categoria em cima + grade de cards filtrável
#088 · Bonus
Tabela comparativa nós vs concorrentes
Tabela mostrando o produto numa coluna e concorrentes nas outras com check/dash
#089 · Bonus
Banner de anúncio no topo
Faixa fina no topo da página com aviso, link e botão de fechar
#090 · Bonus
Banner de cookies
Card no canto inferior com mensagem, botões Aceitar/Recusar e link de configurações
#091 · Bonus
Página 404
Página de erro com mensagem clara, ilustração e botões pra home/contato
#092 · Bonus
Estado de carregamento (skeleton)
Esqueleto cinza no formato do conteúdo final, com shimmer animado
#310 · Trust & Garantia
Trust strip · ícones + frase em cards
4 cards horizontais com ícone à esquerda + título + subtítulo · costuma vir abaixo do hero
#311 · Trust & Garantia
Trust strip · linha única com separadores
Faixa fina horizontal com 4 garantias separadas por divisor curto
#312 · Trust & Garantia
Trust strip · cards flutuantes com headline
Seção dedicada com headline + 4 cards flutuantes alternados (zigzag em Y)
#313 · Trust & Garantia
Garantia · selo grande + texto explicativo
Caixa premium com selo gigante à esquerda e texto + bullets + assinatura à direita
#314 · Trust & Garantia
Garantia · faixa horizontal compacta com CTA
Faixa horizontal com escudo, texto curto e CTA inline · perto do pricing
#467 · Trust & Garantia
Garantia · selo redondo (carimbo de qualidade)
Selo redondo gigante centralizado com número de dias dentro, promessa curta e microcopy de 1 linha. Visual estilo carimbo Mercado Livre/Magalu · brasileiro entende em 3 segundos.
#468 · Trust & Garantia
Garantia · split com retrato + assinatura
Layout em 2 colunas: foto vertical do produtor à esquerda com badge de dias sobreposto e rotacionado, headline em 1ª pessoa + body + assinatura SVG à direita. Pessoal e autoridade para high-ticket.
#469 · Trust & Garantia
Garantia · faixa com 3 ícones (escaneável)
Faixa horizontal com 3 pilares de garantia lado a lado. Cada um com círculo de ícone grande no topo, título curto, descrição de 1 linha. Brasileiro escaneia em 3 segundos.
#320 · Para quem é / não é
Para quem é · 3 perfis em cards com check verde
Cabeçalho + 3 cards de perfil com check verde, título, descrição e bullets
#321 · Para quem é / não é
Para quem NÃO é · lista com X vermelho
Lista vertical de motivos pelos quais o produto não é pra você (X vermelho)
#322 · Para quem é / não é
Para quem é vs NÃO é · lado a lado
Comparação 2 colunas: verde+check à esquerda, vermelho+X à direita
#323 · Para quem é / não é
Para quem é · 2 colunas com foto + perfis
Foto vertical com badge verde 'É pra você' + caption + perfis numerados ao lado
#330 · Como funciona
Como funciona · passos numerados em grid
4 passos com círculo numerado em cor de destaque + label Passo N + título + descrição
#331 · Como funciona
Como funciona · timeline vertical
Marcos com duração (Dia 1, Semana 2) em linha vertical conectada por bolinhas
#333 · Como funciona
Como funciona · 2 colunas com imagem sticky
Texto + foto sticky à esquerda + lista de passos numerados à direita rolando
#334 · Como funciona
Como funciona · alternado com screenshots
3 etapas em layout alternado, cada uma com texto + bullets + screenshot/foto real
#340 · Bônus & Entregáveis
Bônus exclusivos · cards + faixa total invertida
4 cards de bônus numerados com valor cada + faixa total invertida (bg fg, texto bg)
#341 · Bônus & Entregáveis
O que você leva · lista vertical com total riscado
Lista vertical de entregáveis com check verde + valor cada · total riscado no fim
#342 · Bônus & Entregáveis
Bônus · cards com imagem + badges flutuantes
Grid 2 colunas, cada card com imagem editorial em cima + 3 badges (Bônus N, Valor, Formato) + texto embaixo
#343 · Bônus & Entregáveis
Bônus · mockups empilhados + lista lateral
3 mockups empilhados com rotação leve à esquerda + lista de entregáveis + CTA à direita
#465 · Bônus & Entregáveis
Offer Stack Hormoziano · âncora de valor
Lista de entregáveis empilhados com valor unitário · subtotal riscado · bloco grande com preço final ou 'Grátis'
#466 · Bônus & Entregáveis
Offer Stack split · card âncora lateral
Layout split: lista de entregáveis à esquerda, card sticky à direita com 'Você paga' grande. Variação visual do offer-stack vertical.