xuetong932-hub/Tech-website-skill

Site de Exibição de Marca de Tecnologia

Transforme o posicionamento da marca em um site de tecnologia pronto para abrir, com aspiração ao nível de acabamento do Awwwards. Entregue um index.html completo, incluindo todos os estilos, interações e lógica responsiva, sem deixar pseudocódigo ou omitir partes essenciais. O objetivo de qualidade não implica prêmios ou endosso de marca.

Uso e Saída

• Leia o nome da marca, produto, público, idioma, materiais, objetivos de CTA e código existente fornecidos pelo usuário. Novos requisitos do usuário têm prioridade sobre os valores padrão desta skill.
• Quando as informações forem insuficientes, use uma marca de demonstração clara e um texto coeso para completar a página; não invente clientes reais, certificações, métricas de desempenho ou informações de premiações. Os dados de exemplo devem ser identificáveis como valores de demonstração.
• O idioma padrão é o chinês. Primeiro, determine uma narrativa central e um eixo visual para a marca, depois incorpore as características de design a seguir, evitando colar mecanicamente logotipos e tipografias de várias marcas.
• Ao gerar o site, salve o arquivo index.html no diretório de saída gravável da tarefa. Se o usuário solicitar a saída direta do código, responda com um bloco de código HTML completo; se solicitar um arquivo, entregue o link do arquivo. Não confunda a geração da skill em si com uma solicitação para gerar um site de exemplo.
• Este é um fluxo de criação HTML local. Execute operações externas (como implantação, hospedagem ou publicação) apenas quando o usuário solicitar explicitamente.

Sistema Visual

Use uma grade de espaçamento baseada em 8px e gerencie cores de fundo, texto, borda, destaque, espaçamento, bordas arredondadas e parâmetros de animação centralizadamente com variáveis CSS. Adapte-se automaticamente aos modos claro e escuro por meio de prefers-color-scheme, garantindo hierarquia e legibilidade completas em ambos os modos.

Combine os quatro genes de design a seguir, atribuindo prioridade de acordo com o conteúdo:

• Apple: Muito espaço em branco com foco central; branco #FFFFFF, preto #000000, texto #1D1D1F, azul #0066CC. Fonte sans-serif Inter ou do sistema, com pesos 300–600 prioritários, criando hierarquia entre títulos grandes e texto delgado. Navegação com vidro fosco, sombras leves, escala scale(0.98) ao pressionar; revelação progressiva com cubic-bezier(0.25, 0.1, 0.25, 1) e 400–600ms.
• Google: Grade modular Bento com agrupamento claro de informações. Azul #4285F4 como destaque auxiliar; vermelho #EA4335, amarelo #FBBC05, verde #34A853 usados apenas em pequenos gráficos ou detalhes de estado. Efeitos parallax naturais e animações acionadas pelo viewport, mantendo uma sensação arejada.
• Microsoft: Seções técnicas escuras, matriz ou grade digital de baixa opacidade, luz azul-violeta. Cards com bordas arredondadas de 6–12px, bordas nítidas, gradientes sutis nas bordas e brilho externo ao hover; profundidade expressa por camadas e iluminação direcional.
• 影视飓风: Hero com narrativa cinematográfica em tela cheia, títulos grandes sobrepostos, legendas que aparecem linha por linha e transições de seção com rolagem longa. Cores frias com halos azul-ciano, partículas, linhas de varredura e gráficos de dados a serviço da narrativa; visual nítido e transparente, evitando ornamentos excessivos.

Áreas de conteúdo claro e zonas técnicas escuras podem alternar, mas mantenha consistência na fonte, espaçamento e componentes. Use destaques de cor com moderação, evitando que todos os cards usem cores saturadas diferentes simultaneamente.

Arquitetura Padrão da Página

1. Navegação: Fixa no topo, com fundo de vidro fosco que se torna ligeiramente mais opaco e compacto após a rolagem; sublinhado ao hover que acompanha ou expansão suave. Menu hambúrguer totalmente funcional em dispositivos móveis.
2. Hero: Pelo menos um viewport de altura de tela com visual cinematográfico, onde a navegação não obstrui títulos e CTAs. Título com cerca de 64px no desktop e 48px no mobile, usando clamp() para adaptação a telas estreitas; subtítulo com aproximadamente 1.5rem. Dois CTAs (primário e secundário), fundo com gradiente de baixa saturação, partículas ou grade; conteúdos entram em sequência com atraso. Na ausência de vídeo adequado, use visuais de produto CSS/SVG bem elaborados, sem depender fortemente de vídeos externos.
3. Destaques: Grade Bento de 12 colunas no desktop, com combinações como 7:5, 6:6 para criar um ritmo assimétrico, sem dividir todos os cards em partes iguais. Cards elevam-se ao hover, com ligeiro aumento de escala e brilho nas bordas, suportando inclinação leve com o mouse.
4. Narrativa de Conteúdo: Imagem e texto alternam entre esquerda, direita e esquerda, com seções em progressão clara. Em dispositivos móveis, a ordem de leitura natural é unificada. Suave fade-in ao entrar no viewport, com elementos internos podendo subir 12px, e paralaxe de fundo em camadas leves.
5. Dados e Tecnologia: Grade, incremento numérico, barras de progresso e gráficos técnicos; a animação inicia ao entrar no viewport e termina exibindo o valor final exato com unidade.
6. Rodapé: Quatro colunas simples no desktop, empilhadas naturalmente no mobile; links inclinam-se levemente ao hover; informações de direitos autorais e marca completas no final.

Implementação de Animações e Interações

• A transição padrão para interações é cubic-bezier(0.4, 0, 0.2, 1), com cerca de 400ms. A transição global all mencionada nos prompts originais deve ser implementada listando explicitamente propriedades como transform, opacity, box-shadow, border-color, evitando animações indesejadas em largura, altura e layout.
• Saída de rolagem comum: opacity: 0 → 1, translateY(24px) → 0, com stagger de 150ms para grupos. Use IntersectionObserver para acionamento sob demanda; o conteúdo ainda deve ser visível se o usuário não puder executar JS ou se o CDN falhar.
• Botões: sobem 2px ao hover, com sombra mais profunda; ativos encolhem para 0.98; cards podem ampliar para 1.02, garantindo que não cortem ou cubram conteúdo adjacente. Sublinhados em links expandem a partir do centro.
• Fundo do Hero: leve acompanhamento do ponteiro; cards oferecem destaque próximo ao cursor e inclinação limitada; botões podem ter ripple ao clique. Use camadas de transformação independentes ou variáveis CSS para evitar que animações de entrada, hover, inclinação e parallax sobrescrevam transform.
• Combine atualizações de ponteiro e rolagem com requestAnimationFrame; redefina ao sair do ponteiro. Partículas implementadas com Canvas de baixa densidade ou CSS; pausar quando a página não estiver visível ou o Canvas estiver fora da tela. Evite leituras contínuas de layout e criação cíclica de DOM.
• Ative inclinação do ponteiro, luz de destaque e acompanhamento de fundo apenas em hover: hover e pointer: fine. Em dispositivos móveis, reduza custos de partículas, parallax e desfoque, mantendo o conteúdo principal e CTAs.
• Quando prefers-reduced-motion: reduce estiver ativo, desligue partículas, parallax, rastreamento, inclinação, ripple e animações de deslocamento; exiba imediatamente o conteúdo completo, valores finais e progresso. Trate tanto a inicialização do JS quanto as mudanças de preferência.

Restrições Técnicas

• Arquivo HTML5 único, usando tags semânticas header, nav, main, section, footer. Tailwind CSS v3 via CDN verificado como disponível e com versão explícita, sem misturar configurações do v4.
• Estilos e lógica inline, organizados em seções comentadas por: estrutura do documento, estilos de tema, componentes, responsividade, acessibilidade e lógica de interação; descreva claramente o propósito dos estados de animação, observadores e lógica de fallback, sem repetir o significado de cada linha de código.
• Priorize JS nativo; se realmente necessário, adicione uma dependência leve do Anime.js e verifique a API oficial e o método de carregamento da versão escolhida. Não misture chamadas anime() do v3 com a API animate() do v4. Não adicione GSAP, jQuery ou outros frameworks para animações opcionais.
• Mobile-First: cubra larguras abaixo de 640px por padrão; a partir de 640px ajuste conforme o conteúdo, 768px para tablets e 1024px ou mais para desktop. Verifique telas estreitas de 320px, conteúdo horizontal e títulos longos, evitando rolagem horizontal.
• Use unidades de viewport como 100svh para se adaptar a navegadores móveis; navegação fixa com espaço no topo do conteúdo, scroll-margin-top para âncoras e links de pular navegação.
• Priorize recursos da dobra: a imagem principal do Hero não deve ser lazy-loaded; imagens abaixo devem ter lazy loading com dimensões ou proporção explícitas. Imagens precisam de alt; gráficos decorativos usam aria-hidden. Soluções que dependem de CDN exigem conexão com a internet; não declare como totalmente offline. Mantenha CSS inline básico para reduzir o impacto de falhas em recursos externos.
• Interações usam botões e links reais. Botões de menu têm nome, aria-expanded e aria-controls; suportam tecla Escape, foco razoável após abertura e retorno de foco após fechamento. Forneça :focus-visible claro; menus ocultos não devem ser focalizáveis por teclado.
• Contraste de texto do corpo e de UI crítica: pelo menos 4.5:1. Não use azul tecnológico claro para texto de baixo contraste. Todos os CTAs têm destinos válidos ou interação local completa, sem usar href="#" vazio, downloads inválidos ou apenas popups de placeholder.

Verificação de Entrega

Abra o arquivo gerado em um navegador disponível e verifique em tela estreita, tablet, desktop, modos claro e escuro, preferência de movimento reduzido, operação por teclado do menu, âncoras, CTAs, estados finais de valores e erros no console. Se não for possível executar um navegador, faça uma verificação estática e declare honestamente o escopo da verificação, não afirmando que a verificação real foi concluída.

Verifique se o conteúdo da dobra não requer espera por animações ou CDN para ser lido, se os cards não transbordam, se os títulos não estão obstruídos, se os recursos de imagem estão disponíveis, se as animações não competem por propriedades de transformação e se não há conteúdo oculto quando os efeitos de movimento estão desligados. Corrija os problemas encontrados e entregue o arquivo completo, sem deixar "semelhante ao restante" ou comentários de tarefas pendentes que omitam implementações.