Perguntas frequetes

Author: Geilson9

css/index.css

@@ -358,9 +358,25 @@ footer {
 }
 
 /* Perguntas Frequentes */
+.faq-answer {
+  display: none;
+  padding: 10px 0;
+  color: #000000;
+}
+
+.faq-question {
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.faq-question:hover {
+  color: #ffffff;
+}
+
 @media screen and (max-width: 768px) {
   .perguntas {
-    padding-left: 20px; 
-    padding-right: 20px; 
+      padding-left: 20px;
+      padding-right: 20px;
   }
 }
+

index.html

@@ -46,7 +46,8 @@ <h1>Slide 4</h1>
                   </div>
                 </div>
             </div>
-        </div><!--fim de "pag1"-->
+        </div>
+        <hr><!--fim de "pag1"-->
 
         <!--Página 2: sobre-->
         <div class="pag2" id="sobre">
@@ -61,7 +62,7 @@ <h3>Pretty Nails é um aplicativo de agenda <br> que permite que a cliente tenha
                         <img src="imagens/1.png" alt="Imagem 1" />
                     </div>
                 </div>
-                
+                <hr>
                 <div class="topico2">
                     <div class="imagem2">
                         <img src="imagens/2.png" alt="Imagem 2" />
@@ -84,20 +85,29 @@ <h3> - Valorização do seu trabalho; <br> - Auxílio; <br> - Facilidade; <br> -
                     </div>
                 </div>
             </div>
-        </div><!--fim de "pag2"-->
+        </div>
+        <hr><!--fim de "pag2"-->
 
         <div class="pag3" id="Suporte">
             <div class="pf">
                 <h1>Perguntas Frequentes</h1>
             </div>
             <div class="perguntas">
                 <div class="pfs">
+                    <div class="faq-item">
+                        <h3 class="faq-question">O aplicativo é gratuito?</h3>
+                        <p class="faq-answer">Sim, o aplicativo é totalmente gratuito para download e uso.</p>
+                    </div>
                     <hr>
-                    <h3>O aplicativo é gratuito?</h3>
-                    <hr>
-                    <h3>Posso cancelar ou remarcar meu agendamento?</h3>
+                    <div class="faq-item">
+                        <h3 class="faq-question">Posso cancelar ou remarcar meu agendamento?</h3>
+                        <p class="faq-answer">Sim, você pode cancelar ou remarcar seu agendamento diretamente pelo aplicativo, desde que esteja dentro do prazo permitido.</p>
+                    </div>
                     <hr>
-                    <h3>Como posso agendar um horário?</h3>
+                    <div class="faq-item">
+                        <h3 class="faq-question">Como posso agendar um horário?</h3>
+                        <p class="faq-answer">Para agendar um horário, basta acessar a seção de agendamentos no aplicativo e seguir as instruções.</p>
+                    </div>
                     <hr>
                 </div>
             </div>

js/index.js

@@ -17,3 +17,11 @@ function autoSlide() {
 
 // Muda o slide automaticamente a cada 5 segundos
 setInterval(autoSlide, 5000);
+
+//Perguntas frequentes
+document.querySelectorAll('.faq-question').forEach(question => {
+  question.addEventListener('click', () => {
+      const answer = question.nextElementSibling;
+      answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
+  });
+});