Template de site
Qronos AI/SaaS Product Template
Qronos é um template profissional e responsivo de landing page para sites de marketing de produtos SaaS, IA e agentes autônomos. Ele combina um sistema visual escuro com alto contraste com visualizações de dashboards focados em produto, fluxos de trabalho de agendamento, preços, histórias de clientes e chamadas para ação focadas em conversão.
IA · Kit inicial · Original $69
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 inicial de SaaS, elegante e técnica, alta densidade, escura
- Paleta
fundo #000101; superfícies [#000000, #101112, #ffffff, #7d86ff]; texto #ffffff; texto abafado #757168; primária #7d86ff; destaques [#7d86ff, #ffd230, #ffdf20]
- Tipografia
títulos Google Sans, 400, caixa de frase; corpo system-ui, 18px; escala h1:66px / h2:48px / h3:36px
- Forma e espaçamento
raio do botão 9999px, raio do cartão 14px, bordas brancas finas, sombras rgba(255,255,255,0.08) 0px 1px 0px 0px inset, rgba(0,0,0,0.7) 0px -1px 0px 0px inset, espaçamento entre seções 120px, largura do conteúdo 1288px
- Seções (de cima para baixo)
- Hero — largura total, título centralizado com dois botões CTA, linha de logotipos de parceiros abaixo, fundo escuro
- Execução com estado — título alinhado à esquerda, parágrafo alinhado à direita, pré-visualização do painel com navegação na barra lateral e visualização de linha do tempo
- Autonomia durável — cartões de recursos em três colunas acima de um layout de dois painéis mostrando o pipeline multiagente e os painéis de agendamento flexível
- Acompanhar insights de agentes — título com subtítulo, grande pré-visualização do painel com cartões de KPI, gráfico de barras e tabela de projetos
- Preços — título com subtítulo, cartões de preços em quatro níveis com interruptores para faturamento anual e rótulos de economia
- Histórias de clientes — dois cartões de depoimentos com logotipos, citações, avatares e métricas abaixo
- Rodapé — CTA minimalista com ícones sociais e links de navegação
- Detalhes marcantes
- Tema escuro de alto contraste com destaques sutis em relevo interno
- Pré-visualizações de painel estilizadas como capturas de tela do produto com profundidade de interface
- Barras animadas de linha do tempo nas visualizações de agendamento
- Sombras de cartão flutuantes com brilho interno em duas camadas
- Uso consistente de cantos arredondados e preenchimento suave
- Iconografia monocromática com destaques na cor de acento
- Outras páginas
- /about: breve narrativa da empresa com foto da equipe
- /features: detalhamento completo das funcionalidades com maquetes interativas
- /pricing: comparação expandida de níveis com alternadores de funcionalidades
- /testimonials: grade de citações de clientes com logotipos de marcas
Detalhes do template
- Categoria
- IA, Kit inicial
- Feito com
- Tailwind CSS, Next.js, React, TypeScript, Radix UI
- Autor
- monolythdev
- Publicado em
- 21st.dev
- Preço
- Original $69
- AI
- Tailwind
- Next.js
- React
- Typescript
- 3D Animation
- Radix
- AI Agent
- Starter Template
Design original de monolythdev, 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.
Construa um site de ia inspirado no template "Qronos AI/SaaS Product Template". Brief de referência: Qronos é um template profissional e responsivo de landing page para sites de marketing de produtos SaaS, IA e agentes autônomos. Ele combina um sistema visual escuro com alto contraste com visualizações de dashboards focados em produto, fluxos de trabalho de agendamento, preços, histórias de clientes e chamadas para ação focadas em conversão. Recursos do template: * Hero responsivo com visual animado de agendamento, marquee de parceiros e CTAs principais * Visão geral do produto com agendamento de agentes, guardrails, inbox e visualizações de pipeline multi-agente * Dashboard de insights de agentes com cards de KPIs, medidor de orçamento, gráfico de atividades e tabela de projetos * Planos de preços com toggles de cobrança mensal/anual e mensagens de economia anual * Cards de histórias de clientes, logos de depoimentos e ativos de avatares incluídos * Seções de CTA e footer com navegação responsiva * Visualizações estáticas de dashboard específicas para mobile de agendamento e rastreamento, preservando a clareza visual em telas menores * Componentes reutilizáveis baseados em shadcn/Radix e efeitos de motion personalizados Stack * Next.js 16 * React 19 * TypeScript * Tailwind CSS 4 * Radix UI * Framer Motion * Hugeicons * pnpm Guia de Início Rápido Pré-requisitos * Node.js 20 ou superior * pnpm 10 ou superior Estilo e recursos a refletir: Tailwind, Next.js, React, Typescript, Animação 3D, Radix. Use copy e imagens originais da minha marca em vez do conteúdo 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.
