Template de site

NexaCore

Página de destino para infraestrutura corporativa leve: uma navbar flutuante em formato de pílula que encolhe ao rolar, um hero com vídeo em tela cheia, uma grade escura de cards de serviço que se expandem ao passar o mouse, uma divisão caos versus controle em torno de um vídeo circular em streaming e uma escada de entrega com quatro pilares.

Landing page · SaaS · Grátis

Páginas

Capturas da demonstração, página por página. Role dentro de cada página para vê-la inteira.

/embed/templates/nexacoreNexaCore preview - Hirael
Template de site NexaCore, página /embed/templates/nexacore, parte 1Template de site NexaCore, página /embed/templates/nexacore, parte 2

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 corporativo, futurista e autoritária, densidade média, escura

Paleta

fundo #0d1117; superfícies [#ffffff, #000000, #0a0514, #1c4eff]; texto #ffffff; texto abafado #83799e; primário #1c4eff; acentos [#1a0b54]

Tipografia

títulos Plus Jakarta Sans, 500, caixa de frase; corpo Plus Jakarta Sans, 17px; escala h1/h2 56px, h3 24px

Forma e espaçamento

raio do botão 8px, raio do cartão 36px, sem bordas, sombras suaves, espaçamento entre seções 120px, largura do conteúdo 864px

Seções (de cima para baixo)
  • Navbar — barra flutuante em formato de pastilha com logotipo, links de navegação, ícone de busca e botão azul "Contato"; reduz-se ao rolar; fundo escuro com texto branco
  • Hero — fundo em gradiente de tela inteira com explosão radial de luz; título, subtítulo e tagline centralizados; sobreposição escura para contraste
  • Proposição de valor — bloco de texto centralizado com frase colorida em gradiente "do início à implantação"; quatro cartões escuros abaixo com ícones, títulos e marcadores; passar o mouse revela conteúdo expandido
  • Caos vs Controle — layout dividido com Xs vermelhos no lado esquerdo e marcas de verificação verdes no lado direito; gráfico circular animado central com grade luminosa; fundo branco
  • Pilares de entrega — fluxo horizontal com cinco colunas rotuladas ("Escopos", "Integra", etc.) conectadas por linhas onduladas; onda em gradiente na base; fundo branco
Detalhes marcantes
  • Navbar flutuante que recolhe ao rolar
  • Hero de tela inteira com efeito dinâmico de luz radial
  • Cartões de serviço escuros com expansão acionada ao passar o mouse
  • Gráfico circular animado central na seção caos-controle
  • Onda em gradiente conectando os pilares de entrega
  • Uso consistente de gradientes roxo-laranja em textos e visuais principais
Outras páginas
  • /what-we-build: layout focado em serviços com grade de cartões semelhante
  • /our-method: processo passo a passo com linha do tempo ilustrada
  • /who-we-are: seção de equipe com grade de retratos e biografias
  • /thinking: lista de artigos no estilo blog com miniaturas de imagens em destaque

Detalhes do template

Categoria
Landing page, SaaS
Autor
mohammadshehadeh
Publicado em
21st.dev
Preço
Grátis
  • Landing Page
  • SaaS

Design original de mohammadshehadeh, 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 "NexaCore". Briefing de referência: Página de destino para infraestrutura corporativa leve: uma navbar flutuante em formato de pílula que encolhe ao rolar, um hero com vídeo em tela cheia, uma grade escura de cards de serviço que se expandem ao passar o mouse, uma divisão caos versus controle em torno de um vídeo circular em streaming e uma escada de entrega com quatro pilares. Utilize textos e imagens originais da minha marca em vez do conteúdo placeholder do briefing.

Como usar este template

  1. 1

    Clique em “Usar este template” para abri-lo no Ottermind Studio com o briefing preenchido.

  2. 2

    Acrescente ao briefing sua marca, público, páginas e conteúdo.

  3. 3

    O Ottermind cria um site novo inspirado neste design — continue ajustando pelo chat.