wizz-method 1.4.0 → 1.5.0

package/src/skills-lib/premium-landing-ui-researcher/references/landing-page-strategy.md

@@ -0,0 +1,227 @@
+## Landing Page Strategy
+
+Sempre que criar landing page, entregar:
+
+1. diagnóstico do projeto;
+2. nível recomendado do site;
+3. direção visual;
+4. estratégia de copy;
+5. estrutura completa da página;
+6. textos prontos;
+7. componentes recomendados;
+8. animações recomendadas;
+9. fontes usadas;
+10. plano de implementação;
+11. melhorias de conversão;
+12. estratégia de CTA externo / WhatsApp, se aplicável;
+13. plano de dashboard, se relevante;
+14. plano 3D/WebGL, se relevante.
+
+### Landing Page Required Structure
+
+A landing page deve incluir, quando fizer sentido:
+
+**Header / Topo**: logo, menu curto, CTA principal, CTA secundário (se aplicável), navegação clara, versão mobile.
+
+**Hero Section**: headline específica e forte, subheadline com promessa realista, proposta clara, CTA principal, CTA secundário (se fizer sentido), prova rápida ou microcredibilidade, sugestão visual, animação recomendada.
+
+**Sobre / Autoridade**: apresentação do negócio, credibilidade, posicionamento, contexto estratégico.
+
+**Problema / contexto**: cenário atual do público, custo da inação, evitar dor exagerada.
+
+**Solução / mecanismo**: explicar a solução com clareza, por que funciona, apresentar método, produto ou serviço.
+
+**Produto / Serviço**: descrição clara, benefícios, diferenciais, aplicação prática, o que está incluso, para quem é, para quem não é.
+
+**Benefícios**: ganhos práticos, ganhos emocionais, benefícios de status/clareza/velocidade/segurança, transformação esperada.
+
+**Diferenciais**: comparar contra alternativas ruins; método, experiência, velocidade, suporte ou curadoria.
+
+**Prova / Credibilidade**: depoimentos ou placeholders, números, validação, logos, autoridade, cases, antes e depois.
+
+**Quebra de Objeções**: dúvidas principais, riscos percebidos, barreiras de decisão (tempo, preço, confiança, complexidade, suporte, resultado esperado).
+
+**Conversão**: oferta, reforço de valor, CTA forte, bônus/garantia/segurança (se existir), urgência ética (se fizer sentido), redução de risco.
+
+**FAQ**: perguntas frequentes relevantes, respostas diretas e objetivas, objeções respondidas.
+
+**Footer**: links úteis, contato, social, legal, CTA final (se fizer sentido).
+
+### Case Study / Portfolio Requirements
+
+Quando o site for para agência, consultoria, estúdio, dev premium, designer, produto autoral ou marca pessoal, sempre considerar uma seção de portfolio.
+
+Incluir:
+
+- **selected work**: grid editorial com 4-8 cases curados (não galeria infinita);
+- **case cards**: thumbnail + nome do cliente (ou placeholder) + ano + tags de capability + linha de descrição curta;
+- **case deep-dive**: 1 case em destaque com storytelling longo na própria landing, ou link para página individual `/work/[slug]`;
+- **problema**: contexto, restrições, o que estava travando;
+- **decisões**: as escolhas não óbvias, o mecanismo, o porquê;
+- **resultado**: o outcome visual + métricas se existirem;
+- **stack**: tecnologias usadas, em mono type, como metadata editorial;
+- **métricas reais quando existirem**: usar números específicos, datados e atribuídos;
+- **placeholders editáveis quando faltarem dados**: marcar claramente como `[editável]` ou `[Cliente sob NDA]`.
+
+**Regra crítica:** nunca inventar clientes, números ou resultados. Usar `[editável]` quando faltar informação real. Inventar prova queima credibilidade no momento que o usuário fornecer os dados verdadeiros.
+
+Padrões editoriais recomendados:
+
+- numeração mono nos cases (`01 — `, `02 — `);
+- ano em mono type ao lado do nome;
+- tags de capability separadas por `·` em vez de pílulas coloridas;
+- thumbnails com aspect ratio consistente (16:10 ou 4:3 funciona bem para tech);
+- hover com clip-path reveal ou image scale sutil + accent border;
+- cases sob NDA podem aparecer como `[Cliente confidencial · setor]` com descrição genérica do trabalho.
+
+Para case deep-dive na landing ou em página própria:
+
+- estrutura em 3 atos: Context → Decisions → Outcome;
+- intercalar texto editorial com mockups grandes e estáticos (animar entrada, não loop);
+- evitar carrossel automático de imagens (controlar o pace);
+- terminar com CTA discreto de "Ver mais trabalhos" ou "Conversar sobre um projeto".
+
+Quando o cliente não tiver portfolio ainda (lançamento de novo estúdio, rebrand, pivot), substituir `Selected Work` por `In Progress` ou `Currently Building` com 1-2 itens reais em desenvolvimento, sem inventar histórico.
+
+### Copywriting Requirements
+
+Escrever todos os textos do site: headlines, subtítulos, descrições, CTAs, textos de apoio, FAQ, textos prontos para uso.
+
+A copy deve ser: clara, elegante, estratégica, orientada à conversão, profissional, moderna, específica, convincente sem exageros, adaptada ao nível de consciência do público, focada em resultado e transformação, premium sem parecer inflada.
+
+A copy não pode soar: genérica, amadora, superficial, artificial, inflada sem substância, caricata, cheia de promessas milagrosas.
+
+Regras práticas:
+
+- Usar 2ª pessoa: "você".
+- Ser claro antes de ser criativo.
+- Priorizar precisão, especificidade e prova sobre adjetivos vagos.
+- Evitar clichês como "revolucione", "transforme sua vida", "potencialize seu sucesso" sem substância.
+- Evitar promessas milagrosas.
+- Tratar oferta low ticket como entrada estratégica de valor, não como produto barato.
+- Aumentar percepção premium com precisão, especificidade, clareza e prova.
+- Preferir frases curtas e fortes.
+- Explicar benefícios com consequência prática.
+- Adaptar a copy ao nível de consciência do público.
+- Criar CTAs específicos, não apenas "Saiba mais".
+- Não explicar teoria.
+- Entregar como copywriter profissional.
+
+### Conversion Optimization
+
+Sempre sugerir melhorias de conversão:
+
+- CTA acima da dobra;
+- CTA repetido estrategicamente;
+- clareza de oferta;
+- redução de objeções;
+- prova social;
+- reforço de autoridade;
+- comparação antes/depois;
+- escassez ética, se fizer sentido;
+- garantias, se existirem;
+- seção de dúvidas;
+- microcopy em botões;
+- layout mobile-first;
+- contraste em CTAs;
+- teste A/B de headline;
+- teste A/B de hero visual;
+- teste A/B de CTA;
+- simplificação de formulário;
+- elementos de confiança.
+
+### External CTA / WhatsApp Conversion Mode
+
+Quando o objetivo da página for captar leads via WhatsApp, Telegram, Calendly, DM, ligação ou link externo, adaptar a estratégia de conversão.
+
+Usar quando:
+
+- objetivo for "chamar no WhatsApp";
+- objetivo for "agendar reunião";
+- objetivo for "captar diagnóstico";
+- objetivo for "conversar com especialista";
+- objetivo for "falar com consultor";
+- produto ou serviço vender melhor por conversa.
+
+Para WhatsApp:
+
+- CTA deve ser claro e orientado à ação;
+- evitar CTA genérico como "Saiba mais";
+- usar microcopy que reduza fricção;
+- explicar o que acontece depois do clique;
+- reforçar que é rápido, direto e sem compromisso, se for verdade;
+- repetir o CTA em pontos estratégicos;
+- usar botão fixo/sticky no mobile, se fizer sentido;
+- criar seção de objeções antes do CTA final;
+- usar prova social antes de pedir conversa;
+- CTA deve combinar intenção + benefício.
+
+Exemplos de CTA para WhatsApp:
+
+- "Agendar diagnóstico pelo WhatsApp"
+- "Quero ver minha automação funcionando"
+- "Falar com um especialista agora"
+- "Receber uma análise da minha clínica"
+- "Quero automatizar meu atendimento"
+- "Ver como isso funcionaria na minha operação"
+
+Microcopy de apoio:
+
+- "Você será direcionado para uma conversa rápida no WhatsApp."
+- "Sem compromisso. A ideia é entender seu cenário e mostrar o melhor caminho."
+- "Ideal para clínicas que querem captar, responder e agendar com mais consistência."
+
+Quando o CTA for WhatsApp, incluir no plano de implementação:
+
+- link formatado com mensagem pré-preenchida;
+- botão fixo mobile opcional;
+- eventos de tracking;
+- variações A/B de CTA;
+- fallback para desktop;
+- mensagem inicial sugerida.
+
+Exemplo de mensagem pré-preenchida:
+
+```text
+Olá, quero entender como uma automação com IA poderia ajudar minha clínica a captar mais leads e agendar mais avaliações.
+```
+
+### Visual Direction Requirements
+
+Sempre descrever: estilo visual ideal, cores sugeridas, tipografia, layout, elementos visuais, sensação que o site deve transmitir, motion style, nível de sofisticação, referências de componentes, hierarquia visual, direção de imagens, uso de 3D (se fizer sentido), fallback mobile.
+
+### Implementation Output
+
+Se o usuário pedir implementação, entregar:
+
+- file structure;
+- dependencies;
+- component architecture;
+- animation strategy;
+- responsive behavior;
+- mobile fallback;
+- performance notes;
+- accessibility notes;
+- SEO basics;
+- recommended components;
+- sections order;
+- implementation steps.
+
+Para projetos avançados, incluir: lazy loading, reduced motion support, canvas optimization, dynamic imports, mobile particle reduction, asset compression, animation budget, Core Web Vitals considerations.
+
+#### Regras de implementação
+
+- Respeitar padrões existentes do projeto.
+- Não reescrever arquitetura sem necessidade.
+- Criar componentes reutilizáveis.
+- Usar TypeScript quando o projeto usa TypeScript.
+- Usar Tailwind quando o projeto usa Tailwind.
+- Usar shadcn/ui se já estiver instalado ou se for claramente adequado.
+- Evitar dependências novas quando CSS/Framer Motion resolver.
+- Adicionar Three.js ou React Three Fiber somente quando necessário.
+- Garantir responsividade.
+- Garantir estados de hover/focus.
+- Não quebrar acessibilidade.
+- Não deixar texto placeholder genérico, salvo depoimentos/cases quando o usuário não tiver prova real.
+- Para placeholders, escrever textos realistas e marcá-los como editáveis.
+

package/src/skills-lib/premium-landing-ui-researcher/references/mandatory-process.md

@@ -0,0 +1,36 @@
+## Mandatory Process
+
+Sempre seguir este processo. **Os passos 6, 7 e 8 são CHECKPOINTS DE FONTES e devem ser executados antes de qualquer código de UI.**
+
+1. Analisar o contexto do projeto.
+2. Fazer até 5 perguntas se faltarem dados essenciais.
+3. Classificar o nível do projeto.
+4. Definir direção visual.
+5. Decidir se precisa de landing, dashboard, 3D/WebGL ou combinação.
+6. **CHECKPOINT: Inventário de fontes do usuário.** Listar e inspecionar (ls + leitura mínima de READMEs/package.json) o conteúdo de `/modelos lp/` (ou pasta equivalente que o usuário tiver), do projeto atual se houver, e do cérebro/vault. Identificar quais componentes/efeitos do que ele já tem podem ser reutilizados antes de qualquer fonte externa.
+7. **CHECKPOINT: Source-First Protocol (obrigatório).** Executar o protocolo definido em references/source-first-protocol.md: invocar Magic MCP do 21st.dev, v0 via MCP, e pedir autorização pra clones temporários quando aplicável. Voltar pro usuário com **3-5 opções concretas de componentes/animações reais** com link/nome da fonte. Nunca pular este passo silenciosamente.
+8. **CHECKPOINT: Apresentar opções e obter confirmação.** Mostrar ao usuário o que cada fonte oferece e qual combinação faria sentido para a landing dele. Só prosseguir quando ele aprovar a direção das fontes escolhidas.
+9. Recomendar componentes e animações (já curados nos checkpoints anteriores).
+10. Escrever copy e estrutura.
+11. Sugerir plano de implementação (adaptação das fontes à marca, não recriação).
+12. **CHECKPOINT: Audit Protocol** (Pass 1 Taste Skill → Pass 2 Impeccable → Pass 3 Cross-check → Pass 4 Acessibilidade/Perf). Definido em references/audit-protocol.md. Nunca pular passes silenciosamente.
+
+### Checkpoint de honestidade: antes de implementar
+
+Antes de escrever qualquer componente, responder internamente:
+
+- Eu inspecionei o que o usuário já tem em `/modelos lp/` (ou equivalente)?
+- Eu invoquei o Magic MCP do 21st.dev, ou declarei explicitamente que está indisponível?
+- Eu pedi autorização para clonar fontes autorizadas quando elas tinham o efeito ideal (Ali Imam pra shader, React Bits pra animação, Cult UI pra section)?
+- O componente que estou prestes a escrever do zero **realmente não existe** em nenhuma das fontes inventariadas?
+
+Se a resposta for "não" para qualquer uma dessas perguntas, **PARE e volte para o Source-First Protocol antes de continuar**.
+
+### Detalhamento das etapas
+
+**Analisar o projeto.** Antes de criar ou alterar qualquer coisa, inspecione o projeto quando houver acesso ao repositório. Verifique: framework (Next.js, React, Vite, Remix), linguagem (TS/JS), styling (Tailwind, CSS Modules, styled-components, shadcn/ui, Radix), bibliotecas já instaladas (framer-motion, gsap, three, @react-three/fiber, lucide-react), estrutura de pastas, rotas existentes, componentes reutilizáveis, tema/cores/fontes/tokens, nível visual atual, problemas de UX, gargalos de conversão, responsividade e performance. Se não houver projeto acessível, trabalhar como planejador.
+
+**Entender o negócio.** Sempre identificar: negócio/produto/serviço, público-alvo, objetivo da página, oferta, diferenciais, nível de consciência do público, objeções prováveis, tom de marca, etapa do funil, ação principal desejada.
+
+**Escolher referências e componentes.** Com base no nível classificado, decidir: quais seções devem existir, quais componentes melhoram conversão, quais animações ajudam ou atrapalham, quais referências visuais combinam com a marca, quais efeitos no hero, quais elementos devem ser estáticos por performance, quais componentes criar do zero, quais vêm de fontes autorizadas. Toda animação deve ter função: clareza, desejo, profundidade, guia visual, prova de valor ou sofisticação.
+

package/src/skills-lib/premium-landing-ui-researcher/references/output-format-and-quality.md

@@ -0,0 +1,129 @@
+
+## Final Response Format
+
+Quando a skill entregar uma resposta completa, usar esta estrutura:
+
+1. Diagnóstico do projeto
+2. Nível recomendado
+3. Direção visual
+4. Estratégia de copy
+5. Estrutura da landing
+6. Copy completa
+7. Componentes recomendados
+8. Animações recomendadas
+9. Fontes usadas
+10. Plano de implementação
+11. Melhorias de conversão
+12. Estratégia de CTA externo / WhatsApp, se aplicável
+13. Selected Work + Case Deep-Dive, se Portfolio / Authority Mode estiver ativo
+14. Dashboard SaaS, se aplicável
+15. Plano 3D/WebGL, se aplicável
+16. Observações de performance/mobile
+
+Os blocos "Fontes usadas", "Estratégia de CTA externo / WhatsApp", "Selected Work" e "Plano 3D/WebGL" devem aparecer explicitamente quando aplicáveis.
+
+### Formato quando o usuário pedir análise + plano
+
+```markdown
+# Diagnóstico do projeto
+
+## Nível recomendado
+...
+
+## Direção estratégica da landing
+...
+
+## Referências e fontes usadas
+...
+
+## Componentes e animações escolhidos
+...
+
+## Estrutura da página
+...
+
+## Copy completa
+...
+
+## Direção visual
+...
+
+## Plano de implementação
+...
+
+## Melhorias de conversão
+...
+
+## Estratégia de CTA externo / WhatsApp (se aplicável)
+...
+
+## Selected Work + Case Deep-Dive (se Portfolio / Authority Mode ativo)
+...
+
+## Plano 3D/WebGL (se aplicável)
+...
+
+## Dashboard SaaS (se aplicável)
+...
+```
+
+### Formato quando houver implementação no repositório
+
+Entregar:
+
+1. breve diagnóstico;
+2. arquivos alterados/criados;
+3. comandos necessários;
+4. componentes usados;
+5. fontes usadas;
+6. como testar;
+7. observações de performance;
+8. próximos passos.
+
+Não esconder decisões importantes. Se uma biblioteca pesada foi adicionada, justificar.
+
+## Quality Bar
+
+O resultado final deve parecer:
+
+- premium;
+- estratégico;
+- moderno;
+- pronto para implementação;
+- orientado à conversão;
+- visualmente sofisticado;
+- criado por especialista;
+- adequado ao valor do projeto;
+- não genérico;
+- não amador;
+- não artificial.
+
+Sempre buscar aumentar: clareza, desejabilidade, credibilidade, valor percebido, diferenciação visual, conversão real.
+
+Nunca entregar uma landing page que pareça template sem posicionamento.
+
+### Final Rule
+
+A skill não deve apenas procurar componentes bonitos.
+
+A skill deve escolher componentes, animações, copy e direção visual com base em: objetivo da página, público-alvo, oferta, nível de consciência, ticket, sofisticação necessária, performance, clareza, marca, conversão, diferenciação.
+
+A entrega deve parecer um trabalho premium de estratégia, copywriting, design e implementação.
+
+### Self-check antes de fechar a entrega
+
+Antes de declarar a landing pronta, perguntar-se honestamente:
+
+- Eu **chamei o Magic MCP do 21st.dev** ou declarei que ele não estava disponível? Se não chamei nem declarei, voltar e fazer.
+- Eu **invoquei o v0 via v0-platform-mcp** ou declarei indisponível? Mesma regra.
+- Eu **inspecionei `/modelos lp/`** (ou pasta equivalente) do usuário antes de escrever shader/animação/hero?
+- Eu **pedi autorização para clones** das fontes autorizadas quando o efeito era específico (Ali Imam pra shader, React Bits pra animação)?
+- Cada componente que entreguei tem uma **fonte rastreável** (link 21st.dev, output v0, repo clonado, ou pasta do usuário), ou foi escrito do zero com declaração explícita?
+- Apliquei os 4 passes do **Audit Protocol** (Taste Skill cedo → Impeccable tarde → Cross-check com referências → Acessibilidade/Perf), ou declarei qual passe foi pulado e por quê?
+- O **Pass 4 (Acessibilidade + Performance)** foi executado? Esse passe nunca pode ser pulado.
+
+Se qualquer resposta for "não" sem justificativa declarada ao usuário, **a entrega não está pronta**. Voltar pro Source-First Protocol ou pro Audit Protocol conforme o caso.
+
+Esta skill é um agregador de fontes maduras. Reinventar shaders/animações/componentes do zero é o anti-pattern principal. Releia o `<EXTREMELY-IMPORTANT>` no topo de references/source-first-protocol.md se houver qualquer dúvida.
+
+---

package/src/skills-lib/premium-landing-ui-researcher/references/prompt-templates.md

@@ -0,0 +1,206 @@
+### Prompt base para criação de landing page
+
+Use este briefing como base quando o usuário pedir uma landing page completa.
+
+```text
+Crie uma landing page completa, premium e estratégica para o seguinte negócio/produto:
+
+[DESCREVA AQUI O NEGÓCIO, PRODUTO, SERVIÇO OU OFERTA]
+
+Público-alvo:
+[DESCREVA O PÚBLICO]
+
+Objetivo da página:
+[EX: vender, captar leads, agendar reuniões, apresentar serviço, vender produto low ticket]
+
+Oferta:
+[DESCREVA A OFERTA]
+
+Diferenciais:
+[LISTE OS DIFERENCIAIS]
+
+Tom desejado:
+Profissional, moderno, estratégico, sofisticado, claro e orientado à conversão.
+
+A estrutura do site deve incluir:
+
+Header / topo:
+- menu sugerido
+
+Hero Section:
+- headline forte
+- subheadline
+- proposta clara
+- CTA principal
+- sugestão visual
+
+Sobre / Autoridade:
+- apresentação do negócio
+- construção de credibilidade
+
+Serviços / Produto:
+- descrição clara
+- benefícios
+- diferenciais
+
+Seção de Benefícios:
+- ganhos práticos e emocionais
+
+Prova / Credibilidade:
+- depoimentos ou placeholders
+- números, autoridade ou validação
+
+Quebra de Objeções:
+- principais dúvidas respondidas
+
+Seção de Conversão:
+- oferta ou chamada para ação
+- reforço de valor
+
+FAQ:
+- perguntas frequentes relevantes
+
+Footer:
+- estrutura sugerida
+
+Escreva todos os textos do site:
+- headlines
+- subtítulos
+- descrições
+- CTAs
+- textos de apoio
+- FAQ
+- textos prontos para uso
+
+Também descreva a direção visual e design:
+- estilo visual ideal
+- cores sugeridas
+- tipografia
+- layout
+- elementos visuais
+- sensação que o site deve transmitir
+
+Sugira melhorias de conversão:
+- otimizações estratégicas
+- testes A/B
+- melhorias de UX
+- elementos extras que aumentam conversão
+
+EXIGÊNCIAS DE QUALIDADE
+
+A landing page deve ser escrita com base nestes princípios:
+- linguagem clara, elegante e orientada à conversão
+- estrutura lógica e fluida
+- alto valor percebido
+- texto convincente sem exageros caricatos
+- tom profissional, estratégico e moderno
+- foco em resultado e transformação
+- copy adaptada ao nível de consciência do público
+- equilíbrio entre sofisticação e objetividade
+
+O texto não pode soar:
+- genérico
+- amador
+- superficial
+- artificial
+- inflado sem substância
+
+Priorize precisão, especificidade e prova sobre adjetivos vagos. Escreva com a clareza de quem domina o assunto.
+
+INSTRUÇÕES ESTRATÉGICAS IMPORTANTES
+
+Trate a oferta low ticket como uma solução valiosa, não como algo "barato".
+
+Use elementos de copywriting, marketing e percepção premium.
+
+Escreva pensando em conversão real.
+
+Sempre que possível, aumente:
+- a clareza
+- a desejabilidade
+- a credibilidade
+
+Evite promessas milagrosas.
+
+Não explique teoria.
+
+Entregue a landing page pronta.
+
+Se faltarem dados, complete com hipóteses estratégicas coerentes.
+
+Use 2ª pessoa: "você".
+
+REGRAS IMPORTANTES
+
+Não seja genérico.
+
+Não explique o que está fazendo.
+
+Entregue como um especialista real.
+
+Use linguagem clara, estratégica e profissional.
+
+Foque em valor percebido e conversão.
+
+RESULTADO ESPERADO
+
+O resultado deve parecer um site premium, estratégico, pronto para implementação, com alto nível de qualidade.
+
+Agora crie o site completo com base nas informações fornecidas.
+```
+
+### Prompt para hero section com animação 3D no scroll
+
+Use este prompt quando o usuário pedir uma hero section cinematográfica com vídeo ou animação 3D no scroll.
+
+```text
+Create me a 3d scroll animation hero section based on the folder that has the skill.
+
+Here is the video: [COLE A ROTA DO VÍDEO AQUI]
+
+You must put the video inside the repository and tell Claude the exact path.
+
+Also include what your website is about and the contents you want to place on the page.
+
+Crie um site cinematográfico, moderno e altamente visual usando React, Tailwind, Framer Motion, Three.js e React Three Fiber.
+
+O site deve combinar elementos visuais premium, animações fluidas e interações avançadas para transmitir uma sensação de profundidade, tecnologia e sofisticação.
+
+Desenvolva uma página com fundo 3D interativo no tema "Inovação Espacial".
+
+No centro, inclua uma esfera de partículas que reage ao movimento do mouse.
+
+Sobreponha um menu minimalista e um bloco Glassmorphism com a visão da empresa.
+
+Use tons de azul profundo, preto e ciano neon.
+
+Crie uma experiência de storytelling visual com Parallax avançado usando Framer Motion, useScroll e useTransform.
+
+Inclua imagens em preto e branco, textos com destaque em amarelo neon e tipografias deslizando atrás das imagens com máscaras orgânicas.
+
+Adicione uma navegação lateral mostrando o progresso da jornada.
+
+O visual deve seguir uma estética ultra-minimalista inspirada no design suíço.
+
+Use bastante espaço negativo, layout assimétrico, linhas finas de 1px, transições suaves de fade entre seções e visual limpo sem sombras pesadas.
+
+Utilize tipografia forte com Space Grotesk para títulos, Inter/SF Pro para textos gerais e fonte mono para detalhes técnicos.
+
+Inclua uma interface de "Computação Espacial" inspirada no design da Apple.
+
+Use um fundo com gradiente dinâmico e cards Glassmorphism com reflexos internos, bordas brilhantes e profundidade visual.
+
+No hover, os cards devem reagir em 3D seguindo o cursor.
+
+Adicione ícones flutuando em diferentes camadas para criar sensação espacial.
+
+Desenvolva também um componente Three.js com um terreno infinito em wireframe animado por Vertex Shader com ruído Perlin.
+
+O usuário deve conseguir mover levemente a câmera com o mouse.
+
+Use linhas neon azuis sobre fundo preto e adicione fog para criar profundidade e atmosfera futurista.
+
+O site deve ser responsivo, performático e otimizado para mobile, reduzindo partículas e efeitos pesados quando necessário.
+
+A experiência final deve parecer cinematográfica, premium, futurista e pronta para uma marca de tecnologia, inovação ou produto digital de alto valor.
+```