Update getting-started.mdx #1702
Conversation
ajuste esse cod para mobile sem tirar alterar nada, somenet ajuste
|
ajuste esse cod para mobile sem tirar alterar nada, somenet ajuste |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
Este pull request substitui completamente o conteúdo do arquivo getting-started.mdx por uma página de destino (landing page). O arquivo original continha documentação sobre como configurar o HTMLHint. Esta alteração parece ser um engano, pois o nome e a localização do arquivo (website/src/content/docs/getting-started.mdx) sugerem que ele deveria conter documentação. Além disso, o novo código HTML contém alguns problemas que precisam de atenção, como caminhos de arquivo provavelmente incorretos para CSS e imagens, o uso de JavaScript inline e links de placeholder.
| <p class="guarantee-text">Compre com tranquilidade! Se você não ficar satisfeito por qualquer motivo, devolvemos o seu dinheiro.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Final CTA Section --> | ||
| <section class="final-cta-section"> | ||
| <div class="container"> | ||
| <div class="final-cta-content"> | ||
| <h3 class="final-cta-title animate-fade-in-up">Invista no Seu Melhor. Acesso Ilimitado e Vitalício.</h3> | ||
|
|
||
| <div class="final-price animate-scale-in"> | ||
| <div class="final-price-value">R$19,90</div> | ||
| <p class="final-price-text">Oferta limitada - Não perca esta oportunidade</p> | ||
| </div> | ||
|
|
||
| <div class="final-cta-button animate-scale-in"> | ||
| <button class="btn btn-final-cta">QUERO GARANTIR MEU PACOTE! 🎯</button> | ||
| </div> | ||
|
|
||
| <p class="final-guarantee animate-fade-in-up">✅ Garantia de 7 dias • ✅ Acesso imediato • ✅ Sem mensalidades</p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </main> | ||
|
|
||
| <!-- Footer --> | ||
| <footer class="footer"> | ||
| <div class="container"> | ||
| <div class="footer-content"> | ||
| <p class="footer-copyright">Todos os direitos reservados | Biblioteca Encantada</p> | ||
| <div class="footer-links"> | ||
| <a href="#" class="footer-link">Termos de Uso</a> | ||
| <a href="#" class="footer-link">Política de Privacidade</a> | ||
| <a href="#" class="footer-link">Contato</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
|
|
||
| <script> | ||
| // Scroll animation observer | ||
| document.addEventListener('DOMContentLoaded', function() { | ||
| const observerOptions = { | ||
| threshold: 0.1, | ||
| rootMargin: '0px 0px -100px 0px' | ||
| }; | ||
|
|
||
| const observer = new IntersectionObserver((entries) => { | ||
| entries.forEach((entry) => { | ||
| if (entry.isIntersecting) { | ||
| const animatedElements = entry.target.querySelectorAll( | ||
| '.animate-fade-in-up, .animate-scale-in, .animate-slide-in-left, .animate-slide-in-right' | ||
| ); | ||
|
|
||
| animatedElements.forEach((element, index) => { | ||
| setTimeout(() => { | ||
| element.classList.add('animate'); | ||
| }, index * 100); | ||
| }); | ||
| } | ||
| }); | ||
| }, observerOptions); | ||
|
|
||
| // Observe all sections | ||
| const sections = document.querySelectorAll('section'); | ||
| sections.forEach((section) => observer.observe(section)); | ||
| }); | ||
|
|
||
| // FAQ Toggle Function | ||
| function toggleFAQ(button) { | ||
| const faqItem = button.parentElement; | ||
| const answer = faqItem.querySelector('.faq-answer'); | ||
| const icon = button.querySelector('.faq-icon'); | ||
|
|
||
| // Close all other FAQ items | ||
| document.querySelectorAll('.faq-item').forEach(item => { | ||
| if (item !== faqItem) { | ||
| item.classList.remove('active'); | ||
| item.querySelector('.faq-answer').style.maxHeight = '0'; | ||
| item.querySelector('.faq-icon').textContent = '+'; | ||
| } | ||
| }); | ||
|
|
||
| // Toggle current FAQ item | ||
| if (faqItem.classList.contains('active')) { | ||
| faqItem.classList.remove('active'); | ||
| answer.style.maxHeight = '0'; | ||
| icon.textContent = '+'; | ||
| } else { | ||
| faqItem.classList.add('active'); | ||
| answer.style.maxHeight = answer.scrollHeight + 'px'; | ||
| icon.textContent = '-'; | ||
| } | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |
There was a problem hiding this comment.
O conteúdo deste arquivo, que era a documentação "Getting Started" do HTMLHint, foi completamente substituído por uma página de vendas em HTML. Isso parece ser um erro, pois o nome e o local do arquivo indicam que ele deveria conter documentação. Por favor, verifique se este é o arquivo correto a ser modificado. Se a intenção era adicionar uma nova página, ela deveria estar em um novo arquivo com um nome apropriado, e não substituindo a documentação existente.
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> | ||
|
|
||
| <!-- External CSS --> | ||
| <link rel="stylesheet" href="style.css"> |
There was a problem hiding this comment.
O caminho para o arquivo CSS (href="style.css") é relativo. Dado que este arquivo está em website/src/content/docs/, o navegador tentará carregar website/src/content/docs/style.css. É provável que o arquivo CSS esteja em outro diretório (por exemplo, na raiz do site ou em uma pasta de assets). Por favor, corrija o caminho para que o estilo seja aplicado corretamente.
| </div> | ||
|
|
||
| <div class="hero-image animate-slide-in-right"> | ||
| <img src="./src/assets/hero-audiobooks.jpg" alt="Audiolivros de desenvolvimento pessoal" class="hero-img"> |
There was a problem hiding this comment.
O caminho para a imagem (src="./src/assets/hero-audiobooks.jpg") também é relativo e provavelmente está incorreto. Ele aponta para website/src/content/docs/src/assets/hero-audiobooks.jpg. Verifique a estrutura de pastas do projeto e corrija o caminho para o local correto do arquivo de imagem.
|
|
||
| <div class="faq-accordion"> | ||
| <div class="faq-item animate-fade-in-up"> | ||
| <button class="faq-question" onclick="toggleFAQ(this)"> |
There was a problem hiding this comment.
Para melhorar a separação de responsabilidades entre HTML e JavaScript, sugiro remover o atributo onclick. A lógica do clique deve ser adicionada no bloco de script principal. Farei outra sugestão no final do arquivo para adicionar o event listener correspondente.
<button class="faq-question">
| </div> | ||
|
|
||
| <div class="faq-item animate-fade-in-up"> | ||
| <button class="faq-question" onclick="toggleFAQ(this)"> |
There was a problem hiding this comment.
Para melhorar a separação de responsabilidades entre HTML e JavaScript, sugiro remover o atributo onclick. A lógica do clique deve ser adicionada no bloco de script principal.
<button class="faq-question">
| </div> | ||
|
|
||
| <div class="faq-item animate-fade-in-up"> | ||
| <button class="faq-question" onclick="toggleFAQ(this)"> |
There was a problem hiding this comment.
Para melhorar a separação de responsabilidades entre HTML e JavaScript, sugiro remover o atributo onclick. A lógica do clique deve ser adicionada no bloco de script principal.
<button class="faq-question">
| <a href="#" class="footer-link">Termos de Uso</a> | ||
| <a href="#" class="footer-link">Política de Privacidade</a> | ||
| <a href="#" class="footer-link">Contato</a> |
There was a problem hiding this comment.
Os links no rodapé (Termos de Uso, Política de Privacidade, Contato) estão usando href="#" como placeholder. Isso faz com que a página role para o topo ao clicar. Se estas páginas ainda não existem, o ideal é apontar para as URLs corretas ou, como alternativa, usar javascript:void(0); para evitar o comportamento de rolagem.
<a href="javascript:void(0);" class="footer-link">Termos de Uso</a>
<a href="javascript:void(0);" class="footer-link">Política de Privacidade</a>
<a href="javascript:void(0);" class="footer-link">Contato</a>
| sections.forEach((section) => observer.observe(section)); | ||
| }); |
There was a problem hiding this comment.
Para completar a refatoração dos botões da FAQ, adicione aqui os event listeners que chamarão a função toggleFAQ quando os botões forem clicados.
sections.forEach((section) => observer.observe(section));
// Add event listeners for FAQ
document.querySelectorAll('.faq-question').forEach(button => {
button.addEventListener('click', () => toggleFAQ(button));
});
});
ajuste esse cod para mobile sem tirar alterar nada, somenet ajuste
Short description of what this resolves
Proposed changes