# Integração do Componente Beams para Efeito de Feixes de Luz 3D no HERO## ObjetivoIntegrar o componente Beams do React Bits ao HERO do site para criar um efeito de feixes de luz 3D animados. O componente deve funcionar como background do HERO, posicionado atrás de todo o conteúdo existente (imagem, textos, botões), sem substituir ou remover qualquer elemento atual.## Implementação TécnicaUtilizar a implementação JavaScript + CSS do componente Beams baseada nas seguintes bibliotecas:* three* @react-three/fiber* @react-three/drei### Passos de Implementação:1. Instalar Dependências: * Certificar-se de que three, @react-three/fiber e @react-three/drei estão instalados no projeto. Caso contrário, instalá-los.2. Criar Componentes: * Criar um novo arquivo para o componente Beams: src/components/Beams.jsx. * Criar um novo arquivo CSS para o componente: src/components/Beams.css. * Importar o arquivo CSS dentro de src/components/Beams.jsx.3. Lógica do Componente Beams.jsx: * Implementar o componente utilizando Canvas, PerspectiveCamera, ShaderMaterial e animação via useFrame. * Utilizar noise procedural, planos 3D empilhados e iluminação direcional. * Preservar a lógica original do componente Beams e suas propriedades configuráveis.4. Props do Componente: * O componente Beams deve aceitar e expor as seguintes propriedades com seus valores padrão: ```jsx beamWidth={2} beamHeight={15} beamNumber={12} lightColor="#ffffff" speed={2} noiseIntensity={1.75} scale={0.2} rotation={0} ``` * Garantir que cada propriedade funcione individualmente conforme sua descrição: * beamWidth: Largura de cada feixe. * beamHeight: Altura de cada feixe. * beamNumber: Quantidade de feixes. * lightColor: Cor da iluminação dos feixes. * speed: Velocidade da animação dos feixes. * noiseIntensity: Intensidade do efeito de noise. * scale: Escala do padrão de noise. * rotation: Rotação do sistema de feixes.5. Configuração Inicial e Renderização: * Renderizar o componente Beams dentro de um container com position: relative, width: 100% and height: 100% (ou um height fixo como 600px se especificado para o HERO). * Exemplo de renderização: ```jsx <div style={{ width: '100%', height: '600px', position: 'relative' }}> <Beams beamWidth={2} beamHeight={15} beamNumber={12} lightColor="#ffffff" speed={2} noiseIntensity={1.75} scale={0.2} rotation={0} /> </div> ```6. Posicionamento no HERO: * O componente Beams deve ocupar toda a área do HERO. * Estruturar as camadas de conteúdo do HERO na seguinte ordem (do fundo para a frente): 1. Fundo preto 2. Componente Beams 3. Gradientes/overlays 4. Imagem principal 5. Conteúdo textual 6. Botões * Utilizar z-index adequado para garantir que o Beams fique atrás de todo o conteúdo visível, mantendo a legibilidade.7. Identidade Visual: * Adaptar o efeito visual para a identidade do site, utilizando as cores: preto, branco, prata e cinza metálico. * O efeito deve transmitir uma sensação sofisticada e premium, evitando cores vibrantes ou animações exageradas. Os feixes devem atuar como um detalhe visual sutil e luxuoso.8. Responsividade: * Garantir que o componente Beams funcione perfeitamente em desktop, tablet e mobile. * Otimizar a performance em dispositivos móveis, ajustando a intensidade ou quantidade de renderização se necessário. * Evitar que o canvas cause overflow horizontal. * O container do Beams deve ocupar 100% da largura do HERO em todos os dispositivos.9. Performance: * Otimizar o componente para produção, evitando renders desnecessários. * Utilizar useMemo, useRef and useFrame de forma eficiente. * Não carregar recursos externos desnecessários. * Garantir que o componente não cause erros durante o build ou deploy no Vercel. * Respeitar a preferência do usuário por movimento reduzido (prefers-reduced-motion), diminuindo ou desativando a animação quando aplicável.10. Estilização CSS: * Aplicar o seguinte CSS ao container do Beams: ```css .beams-container { position: relative; width: 100%; height: 100%; } ``` * Garantir que o efeito não ultrapasse os limites do HERO.11. Regra Obrigatória para Imagens: * Substitua todos os imports *.asset.json por imports diretos das imagens (.jpeg, .png, .webp). Remova o uso de asset.url e utilize diretamente a imagem importada. O projeto deve funcionar normalmente no Vercel sem depender da pasta __l5e/assets-v1. Faça isso para todas as imagens do projeto. * Substitua todos os imports *.asset.json por imports diretos das imagens (.jpeg, .png, .webp). Remova o uso de asset.url e utilize diretamente a imagem importada. O projeto deve funcionar normalmente no Vercel sem depender da pasta __l5e/assets-v1. Faça isso para todas as imagens do projeto.## Verificações Pós-Implementação1. Verificar se todas as dependências necessárias estão instaladas.2. Confirmar a correção dos imports de componentes e assets.3. Garantir que o projeto compila sem erros.4. Verificar a ausência de erros no console do navegador.5. Assegurar que o HERO permanece responsivo após a integração.6. Validar a execução do build de produção.7. Confirmar a compatibilidade com o ambiente de deploy Vercel.## Resultado Final EsperadoO HERO do site deve exibir um efeito de feixes de luz 3D animado como background, com uma estética premium e sofisticada. Todo o conteúdo original do HERO deve ser preservado e legível. O efeito deve ser responsivo and performático em todos os dispositivos. prata e branco no fundo do heroadicione mais quatro imagens em destaque e diminua o tamanho das imagensotimize para celular e desktop
