Template de site
Northstar - AI Agency & Agent Studio Site
Modelo production-ready em Next.js para agências de IA, estúdios de agentes e equipes de desenvolvimento que precisam apresentar entregas de software com clareza. Inclui quatro idiomas (EN, RU, KA, HY), hero com shader responsivo, demonstrações animadas de produtos, páginas de soluções, estudos de caso, blog em Markdown, páginas de serviços, integrações com PostHog e Vercel Analytics, metadados, alternativas por idioma, sitemap e JSON-LD. O código pronto para compra usa marca fictícia da Northstar, pessoas, clientes, mídias, contatos e domínios de exemplo — tudo substituível com segurança. Não requer CMS nem banco de dados; o conteúdo é armazenado em pacotes tipados de localização em TypeScript e arquivos Markdown.
Landing page · Portfólio · Original $39
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, profissional, densidade média, clara
- Paleta
fundo #fcfcfa; superfícies [#111113, #0d0d0f, #eef1ff, #0cc78a]; texto #111312; texto suavizado #6b7280; primária #0cc78a; acentos [#1e3a8a, #0b9f6e, #ff5f57]
- Tipografia
títulos Onest, 400, caixa de frase; corpo Onest, 20px; escala h1 88px / h2 11px / h3 19px
- Forma e espaçamento
raio do botão 4px, raio do cartão 16px, sem bordas, sombras sutis, espaçamento entre seções 80px, largura do conteúdo 1040px
- Seções (de cima para baixo)
- Cabeçalho — navegação horizontal com logotipo centralizado, seletor de idioma, botão CTA, fundo branco
- Hero — manchete em largura total com "don't build it" em azul, submanchete, dois botões CTA, captura de tela da demonstração do produto abaixo, fundo cinza claro
- Soluções — grade de cartões com famílias de produtos, cada um com título, descrição e link "View family", fundo branco
- Projetos — grade de 8 cartões com ícones e títulos de projetos, fundo branco
- Pré-visualização do blog — fundo escuro com 6 cartões em destaque mostrando fluxos de agentes de IA, cada um com ícone, título e breve descrição
- Rodapé — mínimo, oculto nas capturas de tela
- Detalhes marcantes
- Efeito animado de shader na manchete do hero
- Capturas de tela da demonstração do produto com sobreposições de interface e indicadores de status
- Uso consistente de cantos arredondados e sombras suaves
- Etiquetas de status codificadas por cores (verde, amarelo, vermelho) em tabelas
- Layout limpo e minimalista com espaçamento generoso
- Elementos interativos com estados de passagem do mouse e microinterações
- Outras páginas
- /blog: lista de artigos em duas colunas com filtros por categoria, metadados e tempo de leitura
- /arm: igual à página inicial, mas com texto em língua armênia e CTA localizada
Detalhes do template
- Categoria
- Landing page, Portfólio, SaaS, IA, Agência
- Autor
- lyanchouss
- Publicado em
- 21st.dev
- Preço
- Original $39
- Portfolio
- Landing Page
- AI
- Marketing
- Startup
- Agency
- Personal Website
- SaaS
- Startup Landing
- Shader
Design original de lyanchouss, 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 uma página de destino inspirada no modelo "Northstar". Brief de referência: Modelo production-ready em Next.js para agências de IA, estúdios de agentes e equipes de desenvolvimento que precisam apresentar entregas de software com clareza. Inclui quatro idiomas (EN, RU, KA, HY), hero com shader responsivo, demonstrações animadas de produtos, páginas de soluções, estudos de caso, blog em Markdown, páginas de serviços, integrações com PostHog e Vercel Analytics, metadados, alternativas por idioma, sitemap e JSON-LD. O código pronto para compra usa marca fictícia da Northstar, pessoas, clientes, mídias, contatos e domínios de exemplo — tudo substituível com segurança. Não requer CMS nem banco de dados; o conteúdo é armazenado em pacotes tipados de localização em TypeScript e arquivos Markdown. Estilo e funcionalidades a refletir: Marketing, Startup, Site Pessoal, Página de Destino para Startup, Shader. Use o conteúdo original da minha marca — não os textos e imagens de exemplo do modelo.
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.
