Template de site
Folio - Modelo de Landing Page para Inteligência de Dados
Um modelo de marketing em Next.js 15 para produtos de dados e análise, com mock de dashboard ao vivo, carrossel de clientes, sistema de recursos em bento, abas de funcionalidades, preços, contato e temas claros e escuros de primeira classe.
Landing page · Painel · Original $49
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
página de destino, limpa e moderna, densidade média, temas claro/escuro
- Paleta
fundo #ffffff; superfícies [#f5f5f5, #edfaf0, #171717, #fff4eb]; texto #171717; texto suavizado #737373; primário #266df0; acentos [#2b7fff, #00bc7d, #00a6f4]
- Tipografia
títulos Tiempos Headline, 600, caixa de frase; corpo Geist, 20px; escala h1 60px / h2 48px / h3 16px
- Forma e espaçamento
raio do botão 6px, raio do cartão 16px, bordas nenhuma, sombras 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 80px, largura do conteúdo 1216px
- Seções (de cima para baixo)
- Hero — largura total, título centralizado com subtítulo, dois botões CTA, crédito "Crafted with Ruixen UI", mockup de dashboard sobreposto em fundo natural desfocado
- Grade de recursos — layout de três colunas com cartões mostrando feed de atividades, integrações e redação por IA, cada um com ícone e texto descritivo
- Sistema de recursos Bento — grade mista de cartões com diagramas, listas e blocos de texto destacando automações de dados, consultas sugeridas, conecte em qualquer lugar, chat de pesquisa na web e linha do tempo de atividades
- Por que preferir Folio — guias de recursos em quatro colunas com ícones e rótulos, seguidas por um grande mockup de dashboard mostrando interface de IA conversacional
- Carrossel de clientes — linha horizontal de logotipos com espaçamento consistente e efeitos de passagem do mouse sutis
- Depoimentos — grade de cartões de usuários com avatares, nomes, cargos e depoimentos, além de cartão vazio adicional
- Perguntas frequentes — lista no estilo acordeão com perguntas e respostas gerais, seções recolhíveis
- Detalhes marcantes
- Mockups de dashboard com elementos de interface realistas e tabelas de dados
- Sobreposições sutis com gradiente nas seções hero e de recursos
- Layout baseado em cartões limpo com preenchimento consistente e cantos arredondados
- Estados de passagem do mouse em elementos interativos como CTAs e depoimentos
- Suporte integrado ao modo escuro com esquema de cores invertido
- Uso de microinterações em componentes de interface (ex.: interruptores, indicadores de carregamento)
- Outras páginas
- /faq: seção de perguntas frequentes com perguntas e respostas expansíveis
Detalhes do template
- Categoria
- Landing page, Painel, E-commerce, Kit inicial
- Feito com
- shadcn/ui, Tailwind CSS, Next.js
- Autor
- ruixen.ui
- Publicado em
- 21st.dev
- Preço
- Original $49
- Landing Page
- shadcn/ui
- Analytics
- Pricing
- Tailwind
- Next.js
- Startup Landing
- Product Detail Page
- Starter Template
- Dark
Design original de ruixen.ui, 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 modelo "Folio". Briefing de referência: Um modelo de marketing em Next.js 15 para produtos de dados e análise, com mock de dashboard ao vivo, carrossel de clientes, sistema de recursos em bento, abas de funcionalidades, preços, contato e temas claros e escuros de primeira classe. Estilo e funcionalidades a refletir: shadcn/ui, Analytics, Pricing, Tailwind, Next.js, Startup Landing. Use copy e imagens originais para minha marca em vez do conteúdo placeholder da 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.
