# SoulDK Website v3 # 01 - CONTEXTO --- # Objetivo Você é um Desenvolvedor Full Stack Sênior, UX/UI Designer, Product Designer e Especialista em Experiência do Usuário (UX), com mais de 10 anos de experiência desenvolvendo plataformas modernas, sistemas web e interfaces premium para empresas de tecnologia. Também possui ampla experiência em Design Systems, Front-end, SEO, Performance, Acessibilidade, Responsividade e Conversão. Seu objetivo não é apenas desenvolver um site. Seu objetivo é criar uma experiência digital memorável. Pense como uma equipe composta por designers da Apple, Stripe, Linear, Vercel, Framer, Notion e Raycast trabalhando em conjunto. Todas as decisões devem priorizar: - Elegância - Clareza - Conversão - Performance - Experiência do usuário - Consistência visual - Escalabilidade Sempre escolha a solução mais moderna e sofisticada. Evite soluções comuns, genéricas ou com aparência de template. --- # Sobre a SoulDK A SoulDK é uma empresa especializada em transformar a experiência digital de empresas. Mais do que desenvolver Landing Pages ou Sistemas Inteligentes de Atendimento, a SoulDK analisa toda a jornada do cliente para identificar oportunidades de melhoria e implementar soluções tecnológicas personalizadas. A SoulDK acredita que tecnologia deve aproximar empresas e pessoas. Toda solução desenvolvida deve gerar mais organização, confiança, agilidade e resultados para seus clientes. --- # Posicionamento A SoulDK não vende ferramentas. A SoulDK vende transformação. Landing Pages, Sistemas Inteligentes de Atendimento, automações e integrações são apenas meios para entregar uma experiência digital superior. A comunicação deve transmitir autoridade, inovação, sofisticação e confiança. --- # Produto Principal O principal produto da SoulDK chama-se **DKX**. O DKX é um Sistema Inteligente de Diagnóstico e Experiência Digital. Seu objetivo é analisar como uma empresa se apresenta digitalmente, identificar oportunidades de melhoria e recomendar soluções personalizadas. O DKX deve ser tratado como uma tecnologia exclusiva da SoulDK. Nunca como um simples formulário. Nunca como uma consultoria. Nunca como um orçamento. Sempre como uma experiência inteligente. --- # Público-Alvo O site deve transmitir profissionalismo para empresários que desejam modernizar seus negócios. Entre eles: - Clínicas - Consultórios - Médicos - Dentistas - Psicólogos - Nutricionistas - Advogados - Escritórios - Contabilidades - Imobiliárias - Pizzarias - Restaurantes - Hamburguerias - Cafeterias - Salões de Beleza - Clínicas de Estética - Academias - Autoescolas - Distribuidoras - Pequenas e Médias Empresas O visitante deve sentir que a SoulDK entende seu negócio independentemente do segmento. --- # Objetivo do Site O principal objetivo do site é fazer com que o visitante solicite o DKX. Toda a navegação deve conduzir naturalmente para essa ação. Jamais utilizar chamadas como: - Solicitar orçamento - Pedir proposta - Comprar agora Utilizar chamadas como: - Fazer Análise DKX - Executar DKX - Iniciar Diagnóstico - Receber Diagnóstico Inteligente --- # Personalidade da Marca A SoulDK deve transmitir: - Inovação - Inteligência - Organização - Tecnologia - Confiança - Elegância - Exclusividade - Modernidade - Simplicidade A comunicação deve ser objetiva. Evitar textos longos. Utilizar frases curtas e impactantes. --- # Experiência do Usuário O visitante deve sentir que está navegando em um produto premium. Toda a experiência deve ser fluida. Cada animação deve possuir um propósito. Toda interação deve gerar sensação de qualidade. Jamais exagerar em efeitos. A prioridade é sofisticação. --- # Linguagem Visual A identidade visual deve ser inspirada em empresas de tecnologia modernas. Referências: - Apple - Stripe - Linear - Framer - Notion - Raycast - Vercel Jamais copiar layouts. Utilizar apenas como inspiração para nível de qualidade, minimalismo, hierarquia visual e experiência. --- # Comunicação A comunicação deve parecer consultiva. A SoulDK deve demonstrar que primeiro entende o negócio do cliente. Somente depois apresenta soluções. O visitante deve sentir que existe um processo inteligente antes de qualquer implementação. --- # Objetivo Final Ao terminar a navegação, o visitante deve pensar: "Essa empresa entende do assunto." "Essa empresa parece grande." "Gostaria de saber como funciona o DKX." "Quero realizar meu diagnóstico." Toda decisão de design, estrutura, conteúdo e interação deve contribuir para essa percepção. # SoulDK Website v3 # 02 - DESIGN-SYSTEM --- # Objetivo Este documento define toda a identidade visual da SoulDK. Todas as páginas, componentes e futuras aplicações deverão seguir este Design System. O objetivo é criar uma identidade consistente, moderna, elegante e memorável. Cada elemento visual deve transmitir tecnologia, inovação e confiança. --- # Filosofia de Design A interface deve ser: - Moderna - Elegante - Minimalista - Premium - Intuitiva - Responsiva - Fluida Evitar excesso de elementos. Evitar excesso de texto. Valorizar espaços em branco. A experiência deve parecer um software premium. --- # Referências Visuais Inspirar-se em: - Apple - Stripe - Linear - Framer - Raycast - Notion - Vercel Utilizar apenas como referência de qualidade. Jamais copiar layouts. --- # Paleta de Cores ## Tema Dark (Padrão) Background Principal #0F172A Background Secundário #16213E Surface #1E293B Cards rgba(255,255,255,0.05) Cards Hover rgba(255,255,255,0.08) Border rgba(255,255,255,0.10) Texto Principal #FFFFFF Texto Secundário #CBD5E1 Texto Terciário #94A3B8 --- ## Cores Primárias Primary #6D4AFF Primary Hover #7C63FF Secondary #3B82F6 Accent #00E5FF --- ## Estados Success #22C55E Warning #F59E0B Danger #EF4444 Info #38BDF8 --- ## Gradientes Principal #6D4AFF → #3B82F6 Secundário #3B82F6 → #00E5FF Premium #6D4AFF → #7C3AED → #00E5FF Esses gradientes devem aparecer apenas em elementos de destaque. Jamais exagerar. --- # Tema Light Background #FFFFFF Background Secundário #F8FAFC Cards #FFFFFF Surface #F1F5F9 Border #E2E8F0 Texto Principal #0F172A Texto Secundário #475569 Texto Terciário #64748B Manter exatamente a mesma identidade visual. Apenas adaptar contraste. --- # Alternância de Tema Adicionar botão no Header. Dark Mode inicia por padrão. Ícones: 🌙 Dark ☀️ Light Salvar preferência do usuário. A troca de tema deve possuir animação suave. Jamais trocar instantaneamente. --- # Tipografia Prioridade 1. Plus Jakarta Sans 2. General Sans 3. Satoshi 4. Manrope 5. Inter Caso alguma fonte não esteja disponível, utilizar a próxima. --- # Hierarquia Tipográfica H1 64px Desktop 42px Tablet 34px Mobile Peso 700 --- H2 48px Peso 700 --- H3 36px Peso 600 --- H4 28px Peso 600 --- Texto 18px Peso 400 --- Texto Pequeno 16px Peso 400 --- Legenda 14px Peso 400 --- # Espaçamentos Utilizar sistema baseado em múltiplos de 8. Exemplo: 8 16 24 32 40 48 64 80 96 128 Nunca utilizar espaçamentos aleatórios. --- # Border Radius Inputs 14px Botões 16px Cards 24px Modais 28px Imagens 20px --- # Sombras Utilizar sombras suaves. Jamais utilizar sombras pesadas. Exemplo 0 10px 30px rgba(0,0,0,.15) Hover 0 20px 50px rgba(0,0,0,.25) --- # Glassmorphism Utilizar apenas em pequenos elementos. Cards Premium Navbar Floating Button Modal Jamais exagerar. Blur entre 12px e 20px. --- # Botões Primário Gradiente Roxo Texto Branco Borda Invisível Hover Escala 1.03 Leve brilho Transição 300ms --- Secundário Fundo Transparente Borda Roxa Texto Branco Hover Preencher fundo com a mesma cor da borda. --- Ghost Sem fundo. Sem borda. Hover apenas muda a cor do texto. --- # Cards Todos os cards devem possuir: Bordas arredondadas. Sombra discreta. Hover elegante. Leve elevação. Micro animação. Nunca parecer estático. --- # Inputs Inputs modernos. Placeholder discreto. Borda suave. Glow quando selecionado. Erro em vermelho. Sucesso em verde. Animação de foco. --- # Ícones Utilizar biblioteca moderna. Preferência: Lucide Icons Ícones minimalistas. Espessura uniforme. Jamais utilizar ícones muito detalhados. --- # Navbar Transparente. Background aparece ao rolar. Blur. Glassmorphism. Sombra extremamente discreta. Menu elegante. --- # Footer Minimalista. Poucos elementos. Muito espaço. Informações organizadas. Nada poluído. --- # Botão Flutuante Posição Inferior direito. Sempre visível. Animação de respiração. Glow. Ripple ao clicar. Ao clicar abrir menu: WhatsApp Instagram Email Executar DKX --- # Scroll Scroll extremamente suave. Adicionar comportamento fluido. As seções devem parecer conectadas. --- # Linha Visual Utilizar linhas discretas. Detalhes geométricos. Glow. Pequenos brilhos. Elementos flutuantes. Tudo muito sutil. --- # Microinterações Todos os elementos interativos devem responder ao usuário. Hover Focus Click Scroll Entrada na tela Saída da tela Tudo deve parecer vivo. --- # Responsividade Desktop Notebook Tablet Mobile Cada dispositivo deve possuir uma experiência otimizada. Jamais apenas reduzir elementos. Reposicionar conteúdos. --- # Acessibilidade Contraste adequado. Navegação por teclado. Estados de foco. Texto legível. Botões acessíveis. --- # Consistência Todos os componentes devem compartilhar a mesma identidade visual. Nenhum elemento pode parecer pertencer a outro sistema. Toda a experiência deve transmitir sofisticação, organização e tecnologia. O usuário deve reconhecer imediatamente que está utilizando um produto da SoulDK. # SoulDK Website v3 # 03 - LAYOUT --- # Objetivo Este documento define toda a estrutura do site institucional da SoulDK. O layout deve ser desenvolvido para contar uma história. O visitante não deve sentir que está navegando em um site de agência. Ele deve sentir que está conhecendo uma empresa de tecnologia de alto padrão. Cada seção deve possuir um propósito. Cada seção deve levar naturalmente para a próxima. A navegação deve ser intuitiva, elegante e memorável. --- # Estrutura Geral 1. Hero 2. DKX 3. Soluções 4. Como Trabalhamos 5. Antes x Depois 6. Segmentos 7. Portfólio 8. FAQ 9. CTA Final 10. Footer Cada seção deve possuir identidade própria. Jamais parecer repetitiva. --- # Hero O Hero deve ocupar praticamente toda a primeira tela. Utilizar poucos textos. Muito espaço em branco. Imagem grande. Notebook moderno. Smartphone moderno. Dashboard moderno. Nunca utilizar imagens genéricas. Criar mockups realistas. --- Adicionar um selo pequeno acima do título. Exemplo: ✨ Experiência Digital Premium --- Título Utilizar apenas uma frase. Grande. Impactante. Exemplos: Criamos experiências digitais que fazem empresas crescer. ou Transformamos atendimento em resultados. ou Sua empresa merece uma experiência digital inteligente. --- Subtítulo Máximo de duas linhas. Objetivo. Sem excesso de texto. --- Botões Principal ⚡ Fazer Análise DKX Secundário Conhecer a SoulDK O botão principal deve chamar muito mais atenção. --- Imagem Principal Mostrar um notebook. Mostrar um smartphone. Mostrar um dashboard. Mostrar pequenas animações. O notebook deve exibir uma Landing Page. O smartphone deve exibir um Sistema Inteligente de Atendimento. --- # DKX Esta é a principal seção do site. Dar grande destaque. O DKX deve parecer um produto premium. Não um serviço. --- Título DKX Subtítulo Diagnóstico Inteligente de Experiência Digital --- Texto Explicar em poucas linhas. O DKX analisa a presença digital da empresa. Identifica oportunidades. Recomenda soluções. Tudo de forma inteligente. --- Adicionar um botão. Executar DKX --- Adicionar ilustração exclusiva. Utilizar elementos tecnológicos. Linhas. Glow. Partículas. --- # Soluções Apresentar apenas após o DKX. Nunca antes. O visitante deve entender que as soluções são consequência do diagnóstico. --- Criar cartões modernos. Landing Pages Premium. Sistema Inteligente de Atendimento. Automação de Processos. Integrações. Experiência Digital. Cada card deve possuir: Ícone. Título. Pequena descrição. Hover elegante. Glow discreto. --- # Como Trabalhamos Esta seção deve ser extremamente visual. Não utilizar listas comuns. Criar uma linha animada. A linha deve crescer conforme o usuário desce a página. Ela faz curvas suaves. Conecta todas as etapas. Cada etapa possui um círculo. Quando a linha chega ao círculo: o círculo aumenta. fica iluminado. surge o texto. aparece o ícone. Adicionar pequenas partículas. Etapas Conhecemos seu negócio. ↓ Executamos o DKX. ↓ Identificamos oportunidades. ↓ Criamos um protótipo. ↓ Apresentamos a solução. ↓ Implementamos. ↓ Acompanhamos os resultados. --- # Antes x Depois Esta deve ser uma das seções mais impactantes. Criar dois grandes cards. --- Card Antes Visual monocromático. Cinza. Aspecto sem vida. Adicionar um grande X vermelho. Lista de problemas. Pouca presença digital. Atendimento lento. Perda de clientes. Desorganização. Animações discretas. --- Card Depois Visual moderno. Glow. Gradientes. Linhas luminosas animadas. Pequenas partículas. Adicionar um grande ícone verde de confirmação. Mostrar benefícios. Landing Page. Sistema Inteligente. Respostas rápidas. Mais clientes. Organização. As linhas luminosas devem percorrer o contorno do card continuamente. Sem exageros. --- # Segmentos Mostrar que a SoulDK atende diversos segmentos. Criar uma grade responsiva. Pequenos cartões. Não ocupar muito espaço. Adicionar hover. Segmentos Clínicas Dentistas Psicólogos Nutricionistas Advogados Imobiliárias Contabilidades Escritórios Pizzarias Hamburguerias Restaurantes Cafeterias Salões Estéticas Academias Autoescolas Lojas Distribuidoras Empresas --- # Portfólio Criar uma seção premium. Preparada para crescimento. Utilizar Grid Responsivo. Cada projeto ocupa um card. --- Estado Inicial Imagem ocupando todo o card. Overlay escuro. Nome do projeto centralizado. Tecnologias abaixo. --- Hover Imagem amplia lentamente. Overlay desaparece. Texto desaparece. Surge uma barra inferior. Mostrar: Data Categoria Botão Ver Mais --- Modal Ao clicar. Abrir modal moderno. Aplicar blur ao restante da página. Mostrar Imagem Título Descrição Funcionalidades Tecnologias Cliente Categoria Data Botões Ver Projeto Site Repositório Outros Links --- Adicionar animações. Fade. Scale. Blur. Permitir repetir ao subir novamente a página. --- # FAQ Criar Accordion moderno. Glassmorphism discreto. Animação suave. Apenas uma pergunta aberta por vez. --- Perguntas O que é o DKX? Como funciona? Quanto tempo leva? Preciso trocar meu WhatsApp? As soluções são personalizadas? --- # CTA Final Última oportunidade de conversão. Fundo diferente. Muito destaque. Título Descubra como a tecnologia pode transformar sua empresa. Texto curto. Botão grande. ⚡ Fazer Análise DKX Adicionar pequenos efeitos luminosos. --- # Footer Minimalista. Logo. Menu rápido. Contato. Instagram. WhatsApp. Email. Direitos Reservados. Adicionar botão para voltar ao topo. Com animação suave. --- # Fluxo da Página O usuário deve seguir naturalmente este caminho. Hero ↓ Conhece o DKX ↓ Entende as soluções ↓ Conhece a metodologia ↓ Visualiza o impacto ↓ Percebe que atendemos seu segmento ↓ Conhece nossos projetos ↓ Tira dúvidas ↓ Executa o DKX Nenhuma seção deve quebrar esse fluxo. Toda a navegação deve conduzir naturalmente para a realização do Diagnóstico DKX. --- # Resultado Esperado Ao terminar a navegação o visitante deve sentir: "Essa empresa entende do assunto." "Gostei da experiência." "Quero executar o DKX." "Quero conversar com a SoulDK." # SoulDK Website v3 # 04 - DKX-EXPERIENCE --- # Objetivo O DKX é o principal produto da SoulDK. Ele não deve ser tratado como um formulário. Ele deve parecer um software inteligente desenvolvido pela SoulDK. O visitante deve sentir que está utilizando uma tecnologia exclusiva. Toda a experiência deve transmitir inovação, inteligência e sofisticação. O objetivo é despertar curiosidade, gerar valor e incentivar o visitante a compartilhar seu diagnóstico com a equipe da SoulDK. --- # Fluxo da Experiência Clique no botão ↓ Tela de Inicialização ↓ Perguntas ↓ Análise Inteligente ↓ Resultado ↓ Compartilhar Diagnóstico ↓ Contato com a SoulDK --- # Tela de Inicialização Ao clicar em ⚡ Fazer Análise DKX abrir uma nova página exclusiva. Jamais utilizar popup. Jamais abrir formulário comum. --- # Layout Visual extremamente limpo. Muito espaço em branco. Fundo moderno. Gradientes suaves. Elementos tecnológicos discretos. Glassmorphism. --- Mostrar apenas: Logo SoulDK Logo DKX Nome DKX Subtítulo Sistema Inteligente de Diagnóstico Adicionar uma animação elegante. --- Após aproximadamente 2 segundos iniciar a análise. Exibir mensagens como: Inicializando DKX... Carregando módulos... Analisando estrutura... Preparando diagnóstico... Conectando inteligência... Tudo acompanhado de uma barra de progresso. Nunca parecer falso. A animação deve ser rápida. --- # Barra de Progresso Exibir no topo. Etapa 1 de 10 Etapa 2 de 10 ... Etapa Final A barra cresce suavemente. Adicionar pequenas transições. --- # Estrutura das Perguntas Cada tela deve conter apenas: Uma pergunta. Duas ou três opções. Nenhum outro elemento. Jamais mostrar várias perguntas ao mesmo tempo. Ao selecionar uma resposta: Ir automaticamente para a próxima pergunta. Sem botão "Próximo". Sem botão "Continuar". --- # Perguntas ## Pergunta 1 Sua empresa possui um site profissional? Opções Sim Não --- ## Pergunta 2 Seu WhatsApp responde automaticamente seus clientes? Opções Sim Não --- ## Pergunta 3 Os clientes conseguem encontrar rapidamente todas as informações da sua empresa? Opções Sim Não --- ## Pergunta 4 Você responde clientes mesmo fora do horário comercial? Opções Sim Não --- ## Pergunta 5 Você sabe quantos clientes desistem antes de fechar negócio? Opções Sim Não Não faço ideia --- ## Pergunta 6 Você já perdeu clientes por demora no atendimento? Opções Nunca Algumas vezes Muitas vezes --- ## Pergunta 7 Os clientes conseguem agendar ou solicitar atendimento sem depender de uma pessoa? Opções Sim Não --- ## Pergunta 8 Sua empresa possui uma Landing Page focada em conversão? Opções Sim Não --- ## Pergunta 9 Você utiliza alguma automação para organizar seu atendimento? Opções Sim Não --- ## Pergunta 10 Você acredita que sua empresa poderia vender mais oferecendo uma experiência digital melhor? Opções Sim Não --- # Transições Cada pergunta deve aparecer com: Fade In Pequena subida Blur desaparecendo Ao responder: Slide horizontal Fade Troca extremamente fluida --- # Sistema de Pontuação Cada resposta influencia categorias diferentes. Experiência Digital Atendimento Conversão Automação Presença Digital Organização Nunca mostrar a pontuação durante as perguntas. --- # Tela de Análise Após responder a última pergunta. Mostrar: Analisando respostas... Processando dados... Comparando padrões... Gerando relatório... Identificando oportunidades... Adicionar barra de progresso. Duração aproximada: 2 segundos. --- # Resultado Criar um painel moderno. Exibir barras animadas. Exemplo Experiência Digital 78% Atendimento 54% Conversão 41% Automação 35% Organização 82% As barras devem crescer suavemente. --- # Código DKX Gerar automaticamente um código exclusivo. Exemplo DKX-4F8A92 ou DKX-A91X72 O código deve parecer único. Mostrar destaque visual. --- # Diagnóstico Inteligente Gerar automaticamente um pequeno resumo com base nas respostas. Exemplos Sua empresa possui uma boa estrutura inicial, porém identificamos oportunidades para automatizar processos e melhorar a experiência dos seus clientes. ou Sua presença digital apresenta oportunidades importantes relacionadas ao atendimento, conversão e organização. ou Seu atendimento demonstra potencial de crescimento através de soluções inteligentes e otimização da jornada do cliente. O texto deve variar conforme as respostas. Jamais parecer genérico. --- # Oportunidades Encontradas Exibir cartões modernos. Exemplos Melhorar presença digital. Automatizar atendimento. Organizar processos. Reduzir tempo de resposta. Aumentar conversões. Melhorar experiência do cliente. Mostrar apenas os itens relacionados às respostas. --- # Chamada Final Adicionar um bloco elegante. Título Seu diagnóstico está pronto. Texto O DKX encontrou oportunidades para tornar sua empresa mais organizada, eficiente e preparada para crescer. Nossa equipe pode analisar seu resultado e apresentar soluções específicas para o seu negócio. --- # Botão Principal Enviar meu Diagnóstico DKX Este botão deve chamar muito mais atenção. --- # Compartilhamento Ao clicar no botão. Enviar automaticamente: Código DKX Resultado Pontuações Principais oportunidades Para o WhatsApp da SoulDK. A mensagem deve ser preenchida automaticamente. Exemplo Olá! Acabei de concluir meu Diagnóstico DKX. Código: DKX-4F8A92 Gostaria de receber uma análise personalizada. --- # Tela Final Após o envio. Mostrar uma mensagem elegante. Diagnóstico enviado com sucesso. Nossa equipe analisará seu resultado e retornará com sugestões personalizadas. Enquanto isso, conheça alguns projetos desenvolvidos pela SoulDK. Adicionar botão Ver Projetos Ou Voltar ao Site --- # Experiência Toda a experiência deve lembrar um software moderno. Jamais parecer um formulário. Jamais parecer uma pesquisa. O visitante deve sentir que utilizou uma tecnologia inteligente. O DKX deve ser um dos principais diferenciais competitivos da SoulDK. --- # Objetivo Final Ao concluir o DKX o visitante deve pensar: "Isso foi diferente." "Parece uma tecnologia de verdade." "Quero saber o que a SoulDK pode fazer pela minha empresa." A experiência deve gerar curiosidade, confiança e aumentar significativamente a taxa de conversão para contato com a SoulDK. # SoulDK Website v3 # 05 - ANIMATIONS --- # Objetivo Toda animação deve possuir um propósito. Ela não existe apenas para deixar o site bonito. Ela deve transmitir qualidade, sofisticação, fluidez e tecnologia. O usuário nunca deve perceber travamentos. As animações devem parecer naturais. Evitar exageros. A prioridade é uma experiência premium. --- # Filosofia das Animações Toda animação deve seguir estes princípios. - Fluida - Elegante - Suave - Responsiva - Natural - Moderna Jamais utilizar animações rápidas demais. Jamais utilizar efeitos chamativos em excesso. Toda interação deve transmitir refinamento. --- # Performance Todas as animações devem utilizar: transform opacity filter Jamais animar: width height top left margin padding Sempre priorizar aceleração por GPU. Manter excelente desempenho mesmo em dispositivos móveis. --- # Duração Micro interação 150ms Hover 250ms Botões 300ms Cards 350ms Entrada de seções 500ms Scroll Reveal 600ms Modal 350ms Troca de Tema 400ms --- # Curvas de Animação Utilizar curvas modernas. Preferência: ease-out ease-in-out cubic-bezier suaves Evitar animações lineares. --- # Carregamento Inicial Ao abrir o site. Logo da SoulDK aparece suavemente. Navbar faz fade. Hero surge em sequência. Título. Subtítulo. Botões. Imagem. Cada elemento aparece alguns milissegundos após o anterior. Criar sensação cinematográfica. --- # Scroll Reveal Todas as seções devem surgir quando entram na tela. Aplicar: Fade Pequena subida Blur reduzindo Opacity aumentando Quando a seção sair completamente da tela. Permitir repetir a animação ao retornar. --- # Navbar Inicialmente transparente. Ao iniciar a rolagem. Aplicar: Glassmorphism Blur Background suave Pequena sombra Transição extremamente suave. --- # Hero Imagem principal deve possuir leve movimento. Muito discreto. Nunca exagerado. Adicionar pequeno efeito de profundidade. --- # Mouse Parallax Em Desktop. Alguns elementos acompanham discretamente o movimento do cursor. Amplitude pequena. Somente elementos decorativos. Nunca mover textos. Nunca mover botões. --- # Cursor Glow Criar um pequeno brilho acompanhando o cursor. Muito discreto. Opacidade baixa. Desaparece ao ficar parado. Desabilitar em dispositivos móveis. --- # Botões Hover Leve aumento. Glow. Mudança suave de cor. Preenchimento gradual. Click Pequena redução. Retorno suave. Ripple discreto. --- # Cards Hover Elevação. Leve inclinação em 3D. Aumento muito discreto. Glow. Sombra suave. Imagem amplia lentamente. Nunca exagerar. --- # Portfólio Ao entrar na tela. Cada card aparece em sequência. Fade. Blur. Scale. Subida suave. Delay pequeno entre cada card. --- Hover do Portfólio Imagem faz zoom. Overlay desaparece. Nome desaparece. Tecnologias desaparecem. Barra inferior aparece. Botão ganha destaque. Tudo sincronizado. --- # Modal Ao abrir. Background desfoca. Overlay aparece suavemente. Modal cresce levemente. Fade. Blur desaparece. Ao fechar. Executar animação inversa. --- # Linha da Metodologia Na seção Como Trabalhamos Criar uma linha animada. Ela cresce conforme o usuário rola a página. A linha faz curvas suaves. Conecta todas as etapas. Quando alcançar uma etapa. O círculo cresce. Recebe glow. Ícone aparece. Texto surge. Adicionar pequenas partículas luminosas. --- # Antes x Depois Card Antes Pouca saturação. Sem brilho. Pouco movimento. Ícone X vermelho com leve pulsação. --- Card Depois Glow. Partículas. Linhas luminosas. Gradientes. As linhas percorrem livremente o contorno do card. Nunca repetir exatamente o mesmo caminho. Criar sensação de energia. --- # Partículas Utilizar poucas partículas. Muito discretas. Velocidade lenta. Opacidade baixa. Devem reforçar a sensação de tecnologia. Nunca poluir a tela. --- # Glow Adicionar glow apenas em: Botões principais. Ícones importantes. Cards premium. DKX. Floating Button. Evitar excesso. --- # Floating Button Sempre visível. Animação de respiração. Glow. Leve rotação ao passar o mouse. Ripple ao clicar. Ao abrir. Menu aparece deslizando. Cada opção surge em sequência. --- # DKX Tela de Inicialização Fade. Glow. Barra de progresso. Texto alternando. Ao trocar perguntas. Slide horizontal. Fade. Blur. Transição extremamente fluida. --- # Barras do Resultado As porcentagens crescem animadas. Os números contam até o valor final. Exemplo 0% ↓ 78% As barras acompanham esse crescimento. --- # Tema Dark / Light Ao alternar. Não trocar instantaneamente. Aplicar fade. Mudança gradual. Transição de aproximadamente 400ms. Manter sensação premium. --- # Scroll Aplicar scroll suave. Todas as transições devem acompanhar esse comportamento. Jamais parecer "travado". --- # Microinterações Toda ação do usuário deve possuir resposta visual. Hover. Focus. Click. Scroll. Drag. Open. Close. Tudo deve transmitir qualidade. --- # Acessibilidade Caso o usuário utilize a preferência: prefers-reduced-motion Reduzir significativamente as animações. Preservar apenas o essencial. Garantir acessibilidade. --- # Responsividade Em dispositivos móveis. Remover: Parallax. Cursor Glow. Reduzir partículas. Simplificar efeitos. Priorizar desempenho. --- # Objetivo Final As animações devem fazer o visitante sentir que está utilizando um produto de tecnologia desenvolvido por uma empresa de alto padrão. Toda interação deve transmitir fluidez, confiança, inovação e sofisticação. Nenhuma animação deve existir apenas por estética. Cada movimento deve reforçar a identidade premium da SoulDK. # SoulDK Website v3 # 06 - COMPONENTS --- # Objetivo Este documento define todos os componentes reutilizáveis da SoulDK. Todos os componentes devem seguir exatamente o mesmo Design System. Cada componente deve transmitir tecnologia, sofisticação e qualidade. Nenhum componente pode parecer genérico. Toda a interface deve parecer parte de um único ecossistema. --- # Navbar A Navbar deve permanecer fixa no topo da página. Inicialmente transparente. Ao iniciar a rolagem: • Aplicar Glassmorphism • Blur • Background translúcido • Pequena sombra • Transição suave Itens: • Logo SoulDK • Soluções • DKX • Projetos • FAQ • Contato No lado direito: 🌙 / ☀️ Alternância de Tema ⚡ Fazer Análise DKX No Mobile utilizar Menu Hamburger moderno. Abrir menu lateral com animação suave. --- # Botões Todos os botões devem possuir: • Bordas arredondadas • Hover elegante • Microinterações • Excelente contraste • Estados de foco • Estados de carregamento --- ## Botão Primário Fundo em gradiente. Texto branco. Leve Glow. Hover: • Escala 1.03 • Glow maior • Gradiente mais intenso Click: • Escala 0.97 --- ## Botão Secundário Fundo transparente. Borda colorida. Hover: O fundo deve ser preenchido suavemente utilizando exatamente a mesma cor da borda. --- ## Botão Ghost Sem borda. Sem fundo. Hover altera apenas: • Cor • Opacidade --- ## Botão Loading Mostrar spinner moderno. Desabilitar clique. Manter largura original. --- # Cards Todos os cards devem compartilhar a mesma estrutura. • Border Radius • Glassmorphism discreto • Hover elegante • Elevação • Glow sutil --- ## Card de Serviço Componentes: Ícone Título Descrição curta Botão opcional Hover: • Elevação • Glow • Pequena inclinação --- ## Card de Segmento Mais compacto. Mostrar: Ícone Nome do segmento Hover: • Mudança suave de cor • Pequena escala --- ## Card Antes x Depois Tamanho maior. Elementos internos bem organizados. Card "Depois" deve receber muito mais destaque visual. --- ## Card Portfólio Imagem ocupa todo o espaço. Overlay escuro. Nome centralizado. Tecnologias abaixo. Hover: Imagem amplia. Overlay desaparece. Texto desaparece. Surge barra inferior. Botão Ver Mais. --- # Modal Utilizado em: Projetos Detalhes Outras futuras funcionalidades. Características: Glassmorphism. Blur no restante da página. Animação suave. Botão fechar discreto. Esc pressionado fecha. Clique fora fecha. --- # Inputs Inputs modernos. Border Radius consistente. Placeholder discreto. Estados: Normal Hover Focus Erro Sucesso Adicionar Glow ao receber foco. --- # Select Mesmo padrão visual dos Inputs. Abrir lista com animação. Hover elegante. --- # Textarea Seguir exatamente o padrão dos Inputs. Permitir redimensionamento apenas vertical. --- # Checkbox Personalizado. Utilizar identidade visual da SoulDK. Nunca utilizar checkbox padrão do navegador. --- # Radio Button Mesmo padrão dos Checkboxes. Animação suave. --- # Toggle Utilizado para: Dark Mode Outras configurações futuras. Movimento suave. Feedback visual imediato. --- # Accordion Utilizado no FAQ. Apenas um item aberto por vez. Ícone gira ao abrir. Animação de altura suave. --- # Timeline Utilizada na seção: Como Trabalhamos Composta por: Linha principal. Círculos. Ícones. Textos. Linha cresce durante o scroll. --- # Progress Bar Utilizada no DKX. Barra moderna. Cantos arredondados. Animação suave. Gradiente. --- # Indicadores Mostrar etapas. Exemplo: Etapa 3 de 10 Indicadores devem acompanhar a barra. --- # Badge Pequenos selos. Exemplos: Novo Premium Tecnologia DKX Glassmorphism. --- # Chips Utilizadas para: Tecnologias Categorias Segmentos Pequenas. Coloridas. Minimalistas. --- # Tooltip Surge ao passar o mouse. Fade. Pequena subida. Glassmorphism. --- # Toast Mensagens rápidas. Exemplos: Diagnóstico enviado. Projeto salvo. Mensagem enviada. Aparecer no canto superior direito. Desaparecer automaticamente. --- # Loader Criar Loader exclusivo da SoulDK. Evitar spinner comum. Utilizar: Logo SoulDK. Linhas. Glow. Gradientes. --- # Skeleton Loading Enquanto conteúdos carregam. Utilizar Skeleton moderno. Animação shimmer. --- # Floating Button Sempre presente. Inferior direito. Glow. Respiração. Ripple. Ao clicar. Abrir menu: WhatsApp Instagram Email Executar DKX Cada item surge em cascata. --- # Cursor Desktop apenas. Adicionar Glow discreto. Hover sobre elementos interativos aumenta levemente. Jamais substituir completamente o cursor padrão. --- # Divisores Utilizar linhas discretas. Gradientes. Glow muito leve. Separar seções elegantemente. --- # Ícones Biblioteca: Lucide Icons Todos os ícones devem possuir: Mesmo tamanho. Mesmo peso. Mesmo estilo. Nunca misturar bibliotecas. --- # Ilustrações Utilizar apenas ilustrações modernas. Estilo tecnológico. Poucos detalhes. Gradientes. Jamais utilizar ilustrações infantis. --- # Mockups Utilizar: Notebook. Smartphone. Tablet. Todos extremamente modernos. Exibir telas reais da SoulDK. Nunca utilizar imagens genéricas. --- # Empty States Caso alguma seção não possua conteúdo. Mostrar ilustração elegante. Texto curto. Botão de ação. --- # Estados Todos os componentes devem possuir: Estado Normal Hover Focus Active Disabled Loading Success Error --- # Consistência Todos os componentes devem utilizar: Mesmo Border Radius. Mesma Tipografia. Mesmo Espaçamento. Mesmo Sistema de Cores. Mesmo padrão de animações. Mesmo padrão de sombras. Nenhum componente deve parecer pertencer a outro projeto. Toda a interface deve transmitir uma identidade única da SoulDK. --- # Escalabilidade Todos os componentes devem ser reutilizáveis. Preparados para futuras páginas. Preparados para futuras funcionalidades. Preparados para expansão do ecossistema SoulDK. --- # Objetivo Final Qualquer nova tela desenvolvida para a SoulDK deve reutilizar estes componentes. Isso garante consistência visual, melhor experiência do usuário, facilidade de manutenção e evolução contínua da plataforma. # SoulDK Website v3 # 07 - SEO-PERFORMANCE --- # Objetivo Este documento define todas as diretrizes relacionadas à performance, SEO, acessibilidade, segurança e otimização da SoulDK. O objetivo é entregar uma aplicação extremamente rápida, bem posicionada nos mecanismos de busca e preparada para crescer. Toda decisão técnica deve priorizar: - Performance - SEO - Acessibilidade - Escalabilidade - Segurança - Experiência do Usuário --- # Performance A aplicação deve carregar rapidamente em qualquer dispositivo. Priorizar velocidade sem comprometer a qualidade visual. Objetivos: • First Contentful Paint (FCP) inferior a 1.8 segundos • Largest Contentful Paint (LCP) inferior a 2.5 segundos • Cumulative Layout Shift (CLS) inferior a 0.1 • Time To Interactive (TTI) inferior a 3 segundos Buscar nota acima de 95 no Google Lighthouse. --- # Estrutura do Código Utilizar componentes reutilizáveis. Evitar duplicação. Separar responsabilidades. Organizar arquivos por contexto. Manter código limpo e legível. --- # Carregamento Inteligente Aplicar Lazy Loading para: • Imagens • Vídeos • Projetos • Modais • Componentes pesados Carregar apenas quando necessário. --- # Otimização de Imagens Todas as imagens devem: Utilizar formatos modernos: • WebP • AVIF (quando possível) Nunca utilizar imagens maiores do que o necessário. Criar versões específicas para: Desktop Tablet Mobile Utilizar carregamento responsivo. --- # Fontes Utilizar apenas as fontes necessárias. Carregar pesos utilizados. Aplicar: font-display: swap Evitar bloqueio de renderização. --- # JavaScript Dividir código em módulos. Aplicar Code Splitting. Remover código não utilizado. Carregar scripts não críticos de forma assíncrona. --- # CSS Remover CSS não utilizado. Minificar arquivos. Evitar bibliotecas excessivamente grandes. Priorizar CSS moderno. --- # Cache Configurar cache eficiente para: Imagens Fontes Arquivos estáticos Utilizar políticas adequadas de expiração. --- # Compressão Habilitar: Gzip Brotli Sempre utilizar compressão. --- # SEO Toda página deve possuir: Título único. Descrição única. URL amigável. Heading Hierarchy correta. Meta Tags completas. Open Graph. Twitter Cards. Canonical URL. Robots. Sitemap. --- # Meta Title Cada página deve possuir título otimizado. Exemplo SoulDK | Experiências Digitais Inteligentes --- # Meta Description Criar descrições objetivas. Máximo de aproximadamente 155 caracteres. Destacar: DKX Landing Pages Sistema Inteligente de Atendimento Experiência Digital --- # URLs Utilizar URLs amigáveis. Exemplos / /projetos /dkx /contato Jamais utilizar URLs longas. --- # Heading Hierarchy Utilizar apenas um H1 por página. Organizar corretamente: H1 H2 H3 H4 Nunca utilizar títulos apenas pelo tamanho visual. --- # Open Graph Configurar: Título. Descrição. Imagem. URL. Tipo. Melhorar compartilhamento em: WhatsApp Facebook LinkedIn Discord Telegram --- # Favicon Adicionar: Favicon padrão. Apple Touch Icon. Android Icon. Manifest. --- # Robots Permitir indexação. Bloquear apenas áreas necessárias. --- # Sitemap Gerar automaticamente. Atualizar sempre que novas páginas forem adicionadas. --- # Dados Estruturados Adicionar Schema.org. Informações da empresa. Serviços. Website. FAQ. Contato. Melhorar posicionamento no Google. --- # Acessibilidade Seguir WCAG 2.2. Todos os botões devem possuir: aria-label Todos os inputs devem possuir labels. Todos os ícones importantes devem possuir descrição. Navegação totalmente funcional por teclado. Contraste adequado. Foco visível. --- # Responsividade O site deve funcionar perfeitamente em: Desktop Notebook Tablet Smartphone Jamais esconder informações importantes no Mobile. Reposicionar conteúdos quando necessário. --- # Segurança Utilizar HTTPS. Sanitizar entradas. Evitar exposição de informações sensíveis. Implementar proteção contra ataques comuns. Nunca expor chaves privadas no Front-end. --- # Formulários Validar dados no Front-end. Validar novamente no Back-end. Exibir mensagens claras ao usuário. --- # Analytics Preparar integração com: Google Analytics Google Tag Manager Meta Pixel Microsoft Clarity Registrar eventos importantes. --- # Eventos Registrar: Clique em Fazer Análise DKX Conclusão do DKX Envio do Diagnóstico Clique no WhatsApp Clique em Projetos Troca de Tema Tempo na página Scroll Conversões --- # LGPD Preparar estrutura para: Política de Privacidade Termos de Uso Consentimento de Cookies Gerenciamento de Preferências --- # Manutenção Todo o projeto deve ser facilmente expansível. Novas páginas devem seguir exatamente este padrão. Novas funcionalidades devem reutilizar os componentes existentes. --- # Compatibilidade Garantir funcionamento nos principais navegadores modernos. Chrome Edge Firefox Safari Opera --- # Objetivo Final A SoulDK deve entregar uma experiência extremamente rápida, segura, acessível e preparada para alcançar excelente posicionamento nos mecanismos de busca. Toda otimização deve contribuir para aumentar a confiança do usuário, melhorar a experiência de navegação e maximizar as taxas de conversão. # SoulDK Website v3 # 08 - FINAL-CHECKLIST --- # Objetivo Este documento reúne todos os critérios que devem ser verificados antes da publicação da SoulDK Website v3. O objetivo é garantir que o projeto esteja consistente, elegante, performático, acessível e pronto para representar a SoulDK como uma empresa de tecnologia de alto padrão. Nenhum item abaixo deve ser ignorado. --- # Branding ☐ Logo da SoulDK está corretamente aplicada. ☐ Identidade visual consistente em todas as páginas. ☐ O DKX é apresentado como produto principal. ☐ A comunicação transmite inovação. ☐ A comunicação transmite confiança. ☐ A comunicação transmite tecnologia. ☐ A comunicação transmite sofisticação. ☐ Não existem referências antigas ao SoulDX. ☐ Todos os CTAs utilizam o nome DKX. --- # Hero ☐ Hero ocupa praticamente toda a primeira tela. ☐ Título curto e impactante. ☐ Subtítulo objetivo. ☐ Notebook moderno. ☐ Smartphone moderno. ☐ Dashboard moderno. ☐ Botão principal "⚡ Fazer Análise DKX". ☐ Botão secundário funcionando. ☐ Mockups possuem excelente qualidade. --- # DKX ☐ Seção possui grande destaque. ☐ Parece um produto. ☐ Não parece um formulário. ☐ Explicação objetiva. ☐ Ilustração moderna. ☐ Botão Executar DKX funcionando. --- # Soluções ☐ Landing Pages Premium. ☐ Sistema Inteligente de Atendimento. ☐ Automação de Processos. ☐ Integrações. ☐ Experiência Digital. ☐ Todos os cards possuem hover elegante. --- # Metodologia ☐ Linha cresce durante o scroll. ☐ Linha conecta todas as etapas. ☐ Círculos recebem animação. ☐ Ícones aparecem suavemente. ☐ Textos surgem apenas quando a linha alcança cada etapa. ☐ Toda a animação está fluida. --- # Antes x Depois ☐ Card Antes possui aspecto monocromático. ☐ Card Antes possui X vermelho. ☐ Card Depois possui glow. ☐ Card Depois possui partículas. ☐ Card Depois possui linhas luminosas animadas. ☐ Benefícios estão claros. ☐ Comparação transmite transformação. --- # Segmentos ☐ Diversidade de segmentos. ☐ Grid responsivo. ☐ Hover elegante. ☐ Não ocupa espaço excessivo. --- # Portfólio ☐ Grid responsivo. ☐ Cards modernos. ☐ Hover funcionando. ☐ Barra inferior aparece. ☐ Modal abre corretamente. ☐ Blur aplicado ao fundo. ☐ Informações completas do projeto. ☐ Botões funcionando. ☐ Animações repetem ao retornar com o scroll. --- # FAQ ☐ Accordion moderno. ☐ Apenas um item aberto. ☐ Animação suave. ☐ Respostas objetivas. --- # CTA Final ☐ Chamada impactante. ☐ Texto curto. ☐ Botão principal em destaque. ☐ Direciona para Executar DKX. --- # Footer ☐ Logo. ☐ Navegação rápida. ☐ Contato. ☐ WhatsApp. ☐ Instagram. ☐ Email. ☐ Direitos reservados. ☐ Botão Voltar ao Topo. --- # DKX Experience ☐ Tela exclusiva. ☐ Barra de progresso. ☐ Perguntas individuais. ☐ Transições suaves. ☐ Resultado personalizado. ☐ Código DKX gerado. ☐ Diagnóstico inteligente. ☐ Oportunidades encontradas. ☐ Envio do diagnóstico. ☐ Integração com WhatsApp. ☐ Tela final elegante. --- # Componentes ☐ Navbar. ☐ Botões. ☐ Cards. ☐ Inputs. ☐ Select. ☐ Textarea. ☐ Accordion. ☐ Timeline. ☐ Floating Button. ☐ Toast. ☐ Loader. ☐ Skeleton. ☐ Modal. ☐ Progress Bar. Todos seguindo exatamente o Design System. --- # Tema ☐ Dark Mode como padrão. ☐ Light Mode funcionando. ☐ Alternância suave. ☐ Preferência salva. ☐ Cores consistentes. --- # Animações ☐ Fade. ☐ Scale. ☐ Blur. ☐ Glow. ☐ Hover. ☐ Scroll Reveal. ☐ Timeline. ☐ Partículas. ☐ Cursor Glow. ☐ Floating Button. ☐ Barras animadas. ☐ Portfólio. ☐ Modais. Todas suaves. Nenhuma exagerada. --- # Responsividade ☐ Desktop. ☐ Notebook. ☐ Tablet. ☐ Smartphone. ☐ Conteúdo reorganizado corretamente. ☐ Navegação confortável. --- # Performance ☐ Lazy Loading. ☐ Imagens otimizadas. ☐ Fontes otimizadas. ☐ CSS otimizado. ☐ JavaScript otimizado. ☐ Excelente desempenho. ☐ Lighthouse acima de 95. --- # SEO ☐ Meta Title. ☐ Meta Description. ☐ Open Graph. ☐ Sitemap. ☐ Robots. ☐ Canonical. ☐ Heading Hierarchy. ☐ URLs amigáveis. ☐ Schema.org. --- # Acessibilidade ☐ Navegação por teclado. ☐ aria-labels. ☐ Contraste adequado. ☐ Estados de foco. ☐ WCAG 2.2. ☐ prefers-reduced-motion. --- # Segurança ☐ HTTPS. ☐ Validação de formulários. ☐ Sanitização. ☐ Nenhuma informação sensível exposta. --- # Analytics ☐ Google Analytics. ☐ Google Tag Manager. ☐ Microsoft Clarity. ☐ Meta Pixel. ☐ Eventos DKX. ☐ Conversões. --- # Experiência Ao finalizar a navegação o visitante deve sentir: ☐ Empresa moderna. ☐ Empresa organizada. ☐ Empresa confiável. ☐ Empresa tecnológica. ☐ Produto exclusivo. ☐ Curiosidade pelo DKX. ☐ Desejo de entrar em contato. --- # Critério de Aprovação O projeto somente poderá ser considerado concluído quando todos os itens deste checklist estiverem atendidos. Cada melhoria futura deverá preservar os princípios definidos nos documentos: 01 - CONTEXTO 02 - DESIGN SYSTEM 03 - LAYOUT 04 - DKX EXPERIENCE 05 - ANIMATIONS 06 - COMPONENTS 07 - SEO PERFORMANCE 08 - FINAL CHECKLIST --- # Resultado Esperado A SoulDK Website v3 deve transmitir imediatamente a percepção de uma empresa consolidada de tecnologia. O visitante deve sentir que está utilizando uma plataforma moderna, elegante, intuitiva e cuidadosamente construída. O principal objetivo da experiência é gerar confiança, despertar curiosidade pelo DKX e incentivar o contato com a equipe da SoulDK. Este documento encerra oficialmente a especificação funcional e visual da SoulDK Website v3.