Catálogo Completo de Componentes
Demonstração interativa de todos os primitivos visuais, blocos de marketing e overlays. Alterne entre os 8 estilos visuais para testar a transmutação em tempo real.
Os 8 Arquétipos de Design Web
Clique em qualquer botão abaixo para transformar toda a identidade do site instantaneamente.
| Estilo Visual | Traços Estéticos Chave | Nichos Recomendados | Diferencial de UX |
|---|---|---|---|
| 🔮 Glassmorphism | Backdrop blur 16px, bordas luminosas de 1px, translucidez | SaaS de IA, Fintechs, Crypto, Dashboards | Sensação futurista e profundidade 3D suave |
| ⚡ Neobrutalism | Bordas 2.5px pretas, sombras sólidas deslocadas, cores pop | DevTools, Creator Economy, Startups descoladas | Feedback tátil de clique marcante e alto contraste |
| 🌌 Gradient Aurora | Malhas radiais fluidas, brilhos neon cyan/magenta | Plataformas Deep Tech, Agências Digitais, Web3 | Impacto visual vibrante com imersão dark mode |
| 🔘 Neumorphism | Sombras duplas côncavas/convexas, relevo suave | Controles Smart Home, Apps de Áudio, Widgets | Sensação física de botões embutidos na superfície |
| 📜 Skeuomorphism | Chanfro superior iluminado, texturas, relevo realista | Marcas de Luxo, Papelarias, Produtos Artesanais | Nostalgia tátil de objetos físicos e prestígio |
| 📐 Flat Design 2.0 | Tipografia suíça limpa, sem sombras, divisórias de 1px | Advocacia, Consultorias B2B, Clínicas Médicas | Leitura cristalina e velocidade máxima |
| 🍱 Bento Grid | Módulos assimétricos, cantos arredondados generosos | Apresentação de Features estilo Apple e Linear | Alta densidade de informação limpa e organizada |
| 📟 Cyber Terminal | Fundo preto, acentos verde/ciano neon, monospace | Segurança Ofensiva, DevOps, Infraestrutura Web3 | Estética hacker clássica com legibilidade técnica |
1. Botões & Ações (Button & CopySnippet)
Variantes de alta conversão, tamanhos responsivos e estados de carregamento.
2. Badges & Indicadores de Status
Tags informativas com suporte a pulsação de status e ícones vetoriais.
3. Avatares & Grupos (Avatar & AvatarGroup)
Identificação de usuários com status em tempo real e grupos empilhados de prova social.
4. Cards, Superfícies & Divisores
Superfícies táteis e jateadas que se transmutam conforme o arquétipo visual ativo.
Card Padrão (ThemeCard)
Estrutura opaca padrão com suporte nativo a bordas, elevação e sombras reativas aos 8 estilos de design.
GlassCard (Efeito Vidro Jateado)
Card translúcido com desfoque de fundo (`backdrop-filter`) e fallback automático para navegadores sem suporte ou alta acessibilidade.
5. Métricas, KPIs & Avaliações (StatCard & StarRating)
Componentes de autoridade, dados de desempenho e notas de clientes.
Garantido em contrato SLA
Cache global na Edge
Média em campanhas B2B
Sem servidores ociosos
Avaliação Média dos Usuários
Calculado com base em 1.480 reviews verificados.
6. Alertas, Feedbacks & Banners de Notificação
Mensagens contextuais acessíveis com suporte a fechamento em 1 clique.
Informação de Atualização
Operação Concluída com Sucesso
Atenção Necessária
Erro de Conexão
7. Interatividade, Modais & Overlays
Componentes com foco em acessibilidade nativa, trap de foco e zero JavaScript desnecessário.
Abas Semânticas (Tabs)
Acordeão Nativo (<details>)
Como funciona a alternância de temas e estilos?
<head> que lê a preferência do localStorage antes do primeiro paint do navegador, eliminando 100% o efeito FOUC (Flash of Unstyled Content).Os componentes funcionam em navegadores sem JavaScript?
Configurações do Workspace
Painel lateral deslizante ideal para filtros avançados de busca, carrinhos de compras ou menus de configuração.
8. Padrões de Marketing & Alta Conversão
Blocos pré-moldados de precificação, depoimentos, recursos e comparação.
Edge Caching & Core Web Vitals
Distribuição global de ativos estáticos com LCP abaixo de 0.8s e 0ms de bloqueio no thread principal.
Conformidade LGPD & Gated Tracking
Scripts de terceiros isolados em Web Workers via Partytown sem degradar o score do Lighthouse.
Estruturação AIO para IAs Generativas
Suporte nativo a llms.txt, llms-full.txt e schemas Organization/Service para citação no ChatGPT e Gemini.
Plano Starter
Ideal para empresas em fase de validação e lançamento inicial.
- Landing Page Completa em Astro 6
- 100/100 Google PageSpeed Score
- Formulário com HoneyPot Anti-Spam
- Suporte técnico por 30 dias
Plano Enterprise
Solução definitiva para marcas consolidadas com alto volume de tráfego.
- Tudo do plano Starter incluso
- Otimização Completa de SEO e AIO
- Integração Webhook CRM Automatizada
- Suporte Dedicado com SLA de 2h úteis
- A/B Testing e Análise Contínua de CRO
"A migração para a infraestrutura da Suitplus reduziu nosso tempo de carregamento de 3.2s para 0.4s. Nossa conversão de Google Ads subiu 42% no primeiro mês."
"O suporte a AIO com llms.txt colocou nossa empresa diretamente nas respostas recomendadas do ChatGPT e Claude. O melhor investimento de engenharia do ano."
Tabela Comparativa de Recursos
| Recursos & Funcionalidades | Bronze | GoldPopular | Platinum |
|---|---|---|---|
| Infraestrutura & Velocidade | |||
| Tempo de Carregamento < 0.8s | |||
| Score Google PageSpeed 98+ | |||
| Edge Caching Global Cloudflare | |||
| Zero-JS no Main Thread por Padrão | |||
| Marketing, CRO & Conversão | |||
| Formulários com HoneyPot Anti-Spam | |||
| Rastreamento LGPD com Partytown | |||
| Testes A/B e Otimização de Copy | |||
| Integração Webhook CRM (n8n/Make) | |||
| Suporte & SLA | |||
| SLA de Resposta | 48h úteis | 12h úteis | 2h úteis |
| Gerente de Contas Dedicado | |||
9. Skeletons & Estados de Carregamento (Skeleton)
Placeholders com animação shimmer para carregamento fluido de interfaces.