Template de site
T3Code - Template de Landing Page SaaS Dark Cinematográfica
Um template de landing page SaaS em modo escuro limpo e de alto desempenho, construído com Next.js 16, React 19, Tailwind CSS v4, Motion e Three.js. Inclui coreografia cinematográfica no hero, efeitos WebGL, layouts responsivos, micro-interações interativas e componentes reutilizáveis.
Landing page · SaaS · Original $45
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, cinematográfica, baixa densidade, escura
- Paleta
fundo #0a0a0a; superfícies [#000000, #ffffff, #4922e5, #a558fb]; texto #ffffff; texto abafado #9f9fa9; primária #4922e5; destaques [#4922e5, #a558fb]
- Tipografia
títulos Syne, 600, caixa de frase; corpo Geist, 14px; escala h1 48px, h2 32px, p 14px
- Forma e espaçamento
raio do botão 12px, raio do cartão 18px, bordas nenhuma, sombras rgba(255, 255, 255, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.5) 0px 1px 2px -1px, espaçamento entre seções 120px, largura do conteúdo 1004px
- Seções (de cima para baixo)
- Hero — largura total, layout centralizado, título em duas linhas com ícone de pixel art, subtítulo, dois botões CTA (Download for macOS, Source), fundo com gradiente roxo curvo brilhante a partir da borda superior
- Depoimentos — linha horizontal rolável com cinco cartões de usuários contendo avatar, nome, identificador, citação e ícone X; cada cartão tem cantos arredondados e sombra sutil; rotulado como "TRUSTED BY BUILDERS AND CREATORS WORLDWIDE" acima
- Recursos — título e parágrafo alinhados à esquerda, três etiquetas em formato de pílula abaixo, gráfico circular abstrato no lado direito com anéis sobrepostos e logotipo no centro
- Chamada para ação — cartão centralizado com cantos arredondados, sobreposição escura, fundo com padrão de pontos, título, subtítulo e dois botões CTA (iguais aos do hero)
- Rodapé — divisor fino, logotipo e direitos autorais alinhados à esquerda, links de navegação alinhados à direita
- Detalhes marcantes
- Brilho ambiente roxo curvo na parte superior do hero
- Padrão sutil de matriz de pontos no fundo do cartão CTA
- Gráfico circular flutuante com anéis concêntricos e logotipo central
- Cartões interativos de depoimentos com efeitos ao passar o cursor
- Coreografia suave de movimento ao rolar
- Efeitos de profundidade no estilo WebGL em visuais abstratos
- Outras páginas
- /docs: Página de documentação com navegação lateral e exemplos de código
- /changelog: Histórico de versões com notas de lançamento e carimbos de data
Detalhes do template
- Categoria
- Landing page, SaaS
- Feito com
- Tailwind CSS, Next.js, React, Three.js
- Autor
- jahed
- Publicado em
- 21st.dev
- Preço
- Original $45
- Animation
- Landing Page
- SaaS
- Tailwind
- Next.js
- React
- Three.js
- Dark
Design original de jahed, 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 website de landing page inspirado no template "T3Code". Resumo de referência: Um template de landing page SaaS em modo escuro limpo e de alto desempenho, construído com Next.js 16, React 19, Tailwind CSS v4, Motion e Three.js. Inclui coreografia cinematográfica no hero, efeitos WebGL, layouts responsivos, micro-interações interativas e componentes reutilizáveis. Estilo e recursos a refletir: Animação, Tailwind, Next.js, React, Three.js, Dark. Use copy e imagens originais da minha marca em vez do conteúdo placeholder do 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.
