★ Destaque
#045 · Nav Bars
Menu de topo simples
Logo na esquerda, links no meio, botão na direita
Estrutura primeiro. Copia, cola, gera.
125 pedaços curados pra você combinar com o construtor favorito (Cursor, Lovable, Bolt, v0). Cada thumb mostra a estrutura em escala de cinza — o DS escolhido na sidebar é injetado no prompt quando você copia.
★ Destaque
#047 · Nav Bars
Menu com mega submenu
Quando passa o mouse num link, abre um painel grande com várias colunas
★ Destaque
#049 · Nav Bars
Menu flutuante em pílula
Barra arredondada (pílula) flutuando descolada do topo, com sombra leve
★ Destaque
#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
★ Destaque
#051 · Nav Bars
Menu com busca em destaque
Caixa de busca grande no centro do menu, estilo "command palette"
★ Destaque
#192 · Nav Bars
Menu com efeito vidro fosco
Barra translúcida com blur sobre o conteúdo, sem borda
★ Destaque
#046 · Nav Bars
Menu com logo no centro
Logo centralizado, links divididos dos dois lados
★ Destaque
#048 · Nav Bars
Menu lateral vertical
Coluna lateral fina à esquerda com logo, links empilhados e área do usuário embaixo
★ Destaque
#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
★ Destaque
#023 · Hero Sections
Hero centralizado com screenshot embaixo
Título e botões centralizados em cima, screenshot grande do produto embaixo
★ Destaque
#024 · Hero Sections
Hero em 2 colunas com foto na direita
Texto e botões na esquerda, foto ou screenshot na direita
★ Destaque
#026 · Hero Sections
Hero com fundo gradiente animado
Fundo com gradiente colorido que se move suavemente, texto por cima
★ Destaque
#029 · Hero Sections
Hero só com tipografia gigante
Letras enormes ocupando quase toda a tela, mínimo de elementos
★ Destaque
#030 · Hero Sections
Hero com formulário de email embutido
Título, subtítulo e um campo de email com botão direto embaixo
★ Destaque
#139 · Hero Sections
Hero com tira de logos rolando embaixo
Título e CTA em cima, marquee horizontal de logos de clientes embaixo
★ Destaque
#141 · Hero Sections
Hero tipográfico assimétrico
Letras enormes desalinhadas, com 1 espiada do produto num canto
★ Destaque
#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
★ Destaque
#153 · Hero Sections
Hero com foto de fundo e overlay escuro
Foto ocupando a tela toda, overlay preto, texto à esquerda em branco
★ Destaque
#154 · Hero Sections
Hero cinematográfico com vignette
Foto ou vídeo full-screen + escurecimento nas bordas + texto no centro
★ Destaque
#025 · Hero Sections
Hero com vídeo de fundo
Vídeo em loop ocupando o fundo todo, texto e botões por cima
★ Destaque
#027 · Hero Sections
Hero estilo terminal/código
Janela de terminal ou editor de código no centro, com texto digitando
★ Destaque
#028 · Hero Sections
Hero com cards flutuantes de UI
Vários screenshots/cards do produto espalhados como flutuando ao redor do título
★ Destaque
#038 · Stats Bars
Barra de 4 números horizontais
4 números grandes em linha, cada um com 1 legenda embaixo
★ Destaque
#039 · Stats Bars
Números que sobem animados
4 números grandes que animam contando de 0 até o valor quando entram na tela
★ Destaque
#040 · Stats Bars
Números com ícone
4 estatísticas em linha, cada uma com ícone + número + legenda
★ Destaque
#041 · Stats Bars
Logos de clientes + números
Logos de empresas em cima + estatísticas embaixo (ou ao lado)
★ Destaque
#042 · Stats Bars
Estatísticas empilhadas
Lista vertical de 4 estatísticas, boa pra coluna estreita
★ Destaque
#043 · Stats Bars
Números sobre foto de fundo
Foto ou gradiente full-screen com estatísticas brancas por cima
★ Destaque
#044 · Stats Bars
Estatísticas em cards
Cada número dentro de um card próprio com borda fina
★ Destaque
#015 · Features / Bento
Funcionalidades em 3 colunas com ícone
3 ou 6 cards de feature, cada um com ícone, título e descrição
★ Destaque
#016 · Features / Bento
Bento grid (tiles de tamanhos variados)
Grade com tiles de tamanhos diferentes, como o app Apple Wallet
★ Destaque
#017 · Features / Bento
Linhas alternadas texto+imagem
Várias linhas de feature, texto/imagem alternando lado a cada linha (zigzag)
★ Destaque
#018 · Features / Bento
Funcionalidades com abas
Botões de aba no topo, cada aba mostra uma feature diferente com imagem
★ Destaque
#022 · Features / Bento
Antes/depois com slider
Comparação visual mostrando 2 estados lado a lado ou com slider que arrasta
★ Destaque
#123 · Features / Bento
Bento com 1 tile gigante
Bento grid onde 1 tile ocupa 2x2 como destaque e os outros são menores
★ Destaque
#127 · Features / Bento
Funcionalidades numeradas 01-05
Cada feature com um número gigante (01, 02, 03...) ao lado
★ Destaque
#019 · Features / Bento
Lista sanfona de funcionalidades
Lista vertical onde cada item abre/fecha mostrando a descrição completa
★ Destaque
#020 · Features / Bento
Imagem fixa que muda conforme rola
Imagem do lado esquerdo fica fixa enquanto descrições do outro lado vão rolando
★ Destaque
#021 · Features / Bento
Grade densa de ícones
Muitos quadradinhos pequenos em grade, cada um com 1 ícone + nome curto
★ Destaque
#007 · Pricing
3 planos lado a lado
Pricing clássico: 3 cards lado a lado, com o do meio em destaque
★ Destaque
#008 · Pricing
Pricing com toggle mensal/anual
Botão em cima alterna entre mensal e anual com badge de desconto
★ Destaque
#009 · Pricing
Tabela comparativa de planos
Planos como colunas, funcionalidades como linhas com check ou traço
★ Destaque
#010 · Pricing
1 plano único grande
Um card único centralizado com todos os benefícios e CTA
★ Destaque
#011 · Pricing
Preço com slider de uso
Slider que o usuário arrasta pra ajustar volume e o preço atualiza
★ Destaque
#013 · Pricing
Free vs Pro lado a lado
2 colunas com forte contraste visual entre o plano grátis e o pago
★ Destaque
#115 · Pricing
Pricing com 1 plano enterprise sem preço
2 planos com preço + 1 terceiro "Fale com vendas" sem número
★ Destaque
#012 · Pricing
Pacotes de créditos em grade
Vários cards com quantidade de créditos, preço e badge de melhor oferta
★ Destaque
#014 · Pricing
Pricing empilhado mobile-first
Cards de preço em 1 coluna empilhada, full-width, ideal pra celular
★ Destaque
#053 · Testimonials
Depoimentos em 3 cards
3 cards lado a lado, cada um com foto, nome, cargo e citação
★ Destaque
#054 · Testimonials
Depoimentos em marquee infinito
Tira horizontal de depoimentos rolando devagar em loop
★ Destaque
#055 · Testimonials
Depoimentos em masonry
Grade tipo Pinterest, cards de alturas variadas
★ Destaque
#056 · Testimonials
1 depoimento gigante em destaque
Uma única citação grande com foto, nome, cargo e logo da empresa
★ Destaque
#059 · Testimonials
Logo cloud de clientes
Grade ou linha simples com logos de empresas que usam o produto
★ Destaque
#198 · Testimonials
Depoimento gigante com retrato lateral
Uma citação enorme ocupando a tela com retrato da pessoa do lado
★ Destaque
#057 · Testimonials
Grade de vídeos de depoimento
Cards de vídeo com play, ao clicar abre o vídeo em modal
★ Destaque
#058 · Testimonials
Mural de tweets
Cards estilo post do Twitter/X, com avatar, @, data e texto
★ Destaque
#060 · Testimonials
Carrossel de depoimentos com bolinhas
1 depoimento por vez, setas/bolinhas embaixo pra navegar
★ Destaque
#463 · Galleries / Media Grids
Galeria estilo Pinterest
Grade masonry com fotos de tamanhos variados se encaixando
★ Destaque
#464 · Galleries / Media Grids
Grade uniforme de fotos quadradas
Grade de fotos todas no mesmo tamanho quadrado
★ Destaque
#031 · CTA Banners
CTA full-width com gradiente
Faixa larga com fundo gradiente, título grande e botão
★ Destaque
#032 · CTA Banners
Card de CTA em 2 colunas
Card contido com título à esquerda e botão à direita
★ Destaque
#033 · CTA Banners
Barra de CTA grudada embaixo
Faixa fixa no rodapé da tela, com mensagem e botão (e X pra fechar)
★ Destaque
#036 · CTA Banners
CTA com captura de email inline
Título + campo de email com botão direto embaixo
★ Destaque
#156 · CTA Banners
CTA com selos de confiança embaixo
CTA centralizado + linha de logos/badges de certificação embaixo
★ Destaque
#163 · CTA Banners
CTA com 2 botões equilibrados
Card dividido em 2 metades iguais, cada uma com seu CTA
★ Destaque
#034 · CTA Banners
CTA com fundo texturizado
Seção full-width com padrão geométrico sutil de fundo e CTA centralizado
★ Destaque
#035 · CTA Banners
CTA com 2 botões lado a lado
Título centralizado + 2 botões (primário e secundário) embaixo
★ Destaque
#037 · CTA Banners
CTA com depoimento em cima
Citação de cliente sobre o produto + CTA logo embaixo
★ Destaque
#066 · FAQ
FAQ em coluna única sanfona
Lista vertical de perguntas, cada uma abre a resposta ao clicar
★ Destaque
#067 · FAQ
FAQ em 2 colunas
Perguntas divididas em 2 colunas, cada uma com sua sanfona
★ Destaque
#069 · FAQ
FAQ com busca em cima
Campo de busca grande no topo que filtra perguntas conforme digita
★ Destaque
#070 · FAQ
FAQ com abas de categoria
Abas em cima dividindo perguntas por tema (Pagamento, Suporte, etc)
★ Destaque
#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"
★ Destaque
#085 · Contact
Contato em 2 colunas (form + detalhes)
Formulário na esquerda, detalhes de contato (email, telefone, endereço) na direita
★ Destaque
#086 · Contact
Cards de canais de suporte
Grade de 3-4 cards, cada um com um canal (chat, email, docs, comunidade)
★ Destaque
#087 · Contact
Página de contato minimalista
Página inteira centralizada com título + formulário simples + botão
★ Destaque
#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',
★ Destaque
#061 · Footer
Footer com várias colunas de links
Logo + tagline em uma coluna, e 3-4 colunas de links categorizados
★ Destaque
#062 · Footer
Footer minimalista em 1 linha
Logo + alguns links + copyright tudo em uma linha só
★ Destaque
#063 · Footer
Footer com logo gigante
Wordmark do produto BEM grande no centro, com links pequenos ao redor
★ Destaque
#064 · Footer
Footer com newsletter em destaque
Captura de email grande no topo do footer + links secundários embaixo
★ Destaque
#213 · Footer
Footer com CTA gigante e linha de links
CTA enorme em cima + uma única linha fininha de links no rodapé
★ Destaque
#001 · Auth Forms
Login dividido com visual ao lado
Formulário em uma coluna, screenshot ou ilustração na outra
★ Destaque
#002 · Auth Forms
Card de login flutuando
Card de login centralizado, com foto/gradiente cobrindo o resto da tela
★ Destaque
#003 · Auth Forms
Login minimalista em 1 coluna
Sem card, sem fundo decorativo. Só logo, título, campos e botão.
★ Destaque
#004 · Auth Forms
Login com botões sociais em cima
Botões de Google/GitHub/Apple no topo, email/senha embaixo do divisor
★ Destaque
#005 · Auth Forms
Login só com email (magic link)
Só 1 campo de email e 1 botão, sem senha
★ Destaque
#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
★ Destaque
#077 · Onboarding
Onboarding com checklist
Lista de tarefas pra completar a conta, cada uma com checkmark
★ Destaque
#078 · Onboarding
Tour com tooltips
Pontos coloridos apontando pra elementos da UI com balão explicativo
★ Destaque
#259 · Onboarding
Onboarding em modal de várias etapas
Modal central com passos lineares: barra de progresso + próximo/voltar
★ Destaque
#079 · Onboarding
Onboarding com vídeo modal
Modal central com um vídeo de boas-vindas + botão "Começar"
★ Destaque
#080 · Onboarding
Estado vazio com ilustração
Ilustração customizada no centro, texto explicativo e botão pra começar
★ Destaque
#071 · Dashboards
Dashboard com menu lateral
Sidebar vertical à esquerda + área de conteúdo grande à direita
★ Destaque
#072 · Dashboards
Dashboard com menu no topo
Barra horizontal no topo + área de conteúdo full-width embaixo
★ Destaque
#074 · Dashboards
Quadro Kanban
Colunas representando estágios, cards arrastáveis em cada uma
★ Destaque
#075 · Dashboards
Dashboard com KPIs e gráfico
Grade de cards de métricas em cima + 1 gráfico grande embaixo
★ Destaque
#076 · Dashboards
Dashboard com estado vazio
Quando não tem dados, mostra ilustração centralizada + CTA
★ Destaque
#073 · Dashboards
Dashboard com 3 painéis
Sidebar de menu + lista no meio + detalhes à direita
★ Destaque
#343 · Tables / Data Display
Tabela densa de dados
Tabela tipo planilha com muitas linhas/colunas e primeira coluna fixa
★ Destaque
#346 · Tables / Data Display
Tabela com filtros e ordenação
Tabela padrão + chips de filtro em cima + colunas clicáveis pra ordenar
★ Destaque
#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)
★ Destaque
#323 · Forms
Formulário longo em 1 coluna
Campos empilhados verticalmente com label em cima, largura máxima 640px
★ Destaque
#326 · Forms
Formulário em passos com indicador
Indicador de progresso em cima + 1 passo do formulário por vez
★ Destaque
#331 · Forms
Formulário com abas no topo
Abas alternando entre seções do formulário (Conta, Empresa, Pagamento, etc)
★ Destaque
#333 · Forms
Checkout com resumo do pedido fixo
Formulário de checkout à esquerda + resumo sticky à direita
★ Destaque
#303 · Modals / Dialogs
Modal de confirmação
Modal pequeno centralizado com título, texto e 2 botões (Cancelar / Confirmar)
★ Destaque
#305 · Modals / Dialogs
Sheet que sobe de baixo (mobile)
Painel ancorado embaixo da tela que sobe deslizando, estilo iOS
★ Destaque
#309 · Modals / Dialogs
Modal de busca tipo command palette
Modal central com campo de busca grande e lista de resultados (estilo ⌘K)
★ Destaque
#363 · Cards
Card de produto com botão rápido
Card de produto que, ao passar o mouse, revela um botão "+ adicionar"
★ Destaque
#364 · Cards
Card de perfil com estatísticas
Card de perfil de usuário com avatar grande + 3 estatísticas embaixo
★ Destaque
#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"
★ Destaque
#081 · Blog / Content
Listagem de blog tipo revista
1 post em destaque grande em cima + cards menores numa grade embaixo
★ Destaque
#082 · Blog / Content
Página de artigo em coluna única
Largura confortável pra leitura (700px) com tipografia generosa
★ Destaque
#083 · Blog / Content
Artigo com índice lateral sticky
Artigo na coluna principal + sumário lateral fixo que destaca a seção atual
★ Destaque
#084 · Blog / Content
Blog com filtros por categoria
Tags de categoria em cima + grade de cards filtrável
★ Destaque
#088 · Bonus
Tabela comparativa nós vs concorrentes
Tabela mostrando o produto numa coluna e concorrentes nas outras com check/dash
★ Destaque
#089 · Bonus
Banner de anúncio no topo
Faixa fina no topo da página com aviso, link e botão de fechar
★ Destaque
#090 · Bonus
Banner de cookies
Card no canto inferior com mensagem, botões Aceitar/Recusar e link de configurações
★ Destaque
#091 · Bonus
Página 404
Página de erro com mensagem clara, ilustração e botões pra home/contato
★ Destaque
#092 · Bonus
Estado de carregamento (skeleton)
Esqueleto cinza no formato do conteúdo final, com shimmer animado