Template de site
Shadcn Dashboard and Landing
Painel administrativo com landing page correspondente, disponibilizado em versões Next.js e Vite com o mesmo design.
Landing page · Painel · Grátis
Páginas
Capturas da demonstração, página por página. Role dentro de cada página para vê-la inteira.
Análise do design
Uma leitura feita por IA do design deste template: cores, tipografia, espaçamento, seções e detalhes marcantes. O Ottermind parte dela quando você usa o template.
- Visão geral
Painel de administração, profissional, densidade média, claro
- Paleta
fundo #ffffff; superfícies [#fafafa, #171717, #e7000b, #009689]; texto #0a0a0a; texto abafado #737373; primário #00a63e; destaques [#e7000b, #009689, #f54a00]
- Tipografia
títulos Inter, 700, caixa de frase; corpo Inter, 14px; escala h1 24px, h3 16px
- Forma e espaçamento
raio de botões/cartões 8px/14px, sem bordas, sombra rgba(0,0,0,0.1) 0px 1px 3px 0px, rgba(0,0,0,0.1) 0px 1px 2px -1px, espaçamento entre seções 24px, largura máxima do conteúdo 1200px
- Seções (de cima para baixo)
- Cabeçalho — layout horizontal, logotipo, barra de pesquisa, links de navegação, ações do usuário, fundo branco
- Hero — título centralizado, subtítulo, dois botões CTA, fundo branco
- Grade de estatísticas — quatro cartões com métricas, indicadores de tendência e rótulos de status, fundo branco
- Linha de gráficos — dois cartões lado a lado: gráfico de linhas (desempenho de vendas), gráfico de rosca (divisão de receita), fundo branco
- Transações e Produtos — duas colunas: lista de transações recentes com etiquetas de status, principais produtos com classificações e níveis de estoque, fundo branco
- Insights sobre clientes — visualização com abas (Crescimento, Demografia, Regiões), gráfico de barras com barras de duas cores, métricas-chave em layout de cartões, fundo branco
- Rodapé — texto de atribuição centralizado, fonte pequena, cinza claro
- Detalhes marcantes
- Cartões arredondados com sombras sutis
- Etiquetas de status em cores de destaque (vermelho, verde, laranja)
- Gráficos de barras bicromáticos com séries de dados contrastantes
- Efeitos de passagem do mouse em elementos interativos
- Tipografia limpa e minimalista com espaçamento consistente
- Interface com abas para a seção de insights
- Outras páginas
- /dashboard: painel de administração com métricas e gráficos
- /landing: página inicial com seção hero e recursos
- /auth-pages: formulários de autenticação
- /errors: páginas de tratamento de erros
- /settings: painel de configuração
Detalhes do template
- Categoria
- Landing page, Painel
- Autor
- shadcnstore
- Publicado em
- 21st.dev
- Preço
- Grátis
- Dashboard
- Landing Page
Design original de shadcnstore, publicado no 21st.dev. O Ottermind não copia o código do template: ele cria um site novo a partir do briefing.
O briefing de onde o Ottermind parte
Ele abre no Studio como rascunho — acrescente sua marca, público e páginas antes de enviar.
Crie um site de landing page inspirado no template "Shadcn Dashboard and Landing". Resumo de referência: Painel administrativo com landing page correspondente, disponibilizado em versões Next.js e Vite com o mesmo design. Use textos e imagens originais da minha marca em vez do conteúdo de placeholder do template de referência.
Como usar este template
- 1
Clique em “Usar este template” para abri-lo no Ottermind Studio com o briefing preenchido.
- 2
Acrescente ao briefing sua marca, público, páginas e conteúdo.
- 3
O Ottermind cria um site novo inspirado neste design — continue ajustando pelo chat.
