feat:Add transition effect to FAQ answers and update page to include …

…FAQList component

src/app/(home)/page.tsx

@@ -1,3 +1,5 @@
+import FAQList from '@/components/FAQ/FAQList'
+
 import { About } from './about'
 import { Schedule } from './schedule'
 import { Sponsors } from './sponsors'
@@ -19,6 +21,9 @@ export default function Home() {
       <div id="sponsors" className="pt-32">
         <Sponsors />
       </div>
+      <div id="FAQList" className="pt-32">
+        <FAQList />
+      </div>
     </div>
   )
 }

src/components/FAQ/FAQItem.tsx

@@ -0,0 +1,41 @@
+'use client'
+import './stylesFAQ.css' // Importa o arquivo CSS
+
+import React from 'react'
+
+type FAQItemProps = {
+  question: string
+  answer: string
+  isOpen: boolean
+  onClick: () => void
+  isLast: boolean
+}
+
+const FAQItem: React.FC<FAQItemProps> = ({
+  question,
+  answer,
+  isOpen,
+  onClick,
+  isLast,
+}) => {
+  return (
+    <div className={`faq-item mb-0 ${isLast && isOpen ? 'last-open' : ''}`}>
+      <div
+        className={`faq-question flex cursor-pointer items-center justify-between bg-[#DD7002] p-4 font-semibold text-white ${isLast ? '' : 'border-b'}`}
+        onClick={onClick}
+      >
+        {question}
+        <span
+          className={`transform transition-transform ${isOpen ? 'rotate-180' : 'rotate-0'}`}
+        >
+          ⌄
+        </span>
+      </div>
+      <div className={`faq-answer bg-[#7A310D] ${isOpen ? 'open' : ''}`}>
+        {answer}
+      </div>
+    </div>
+  )
+}
+
+export default FAQItem

src/components/FAQ/FAQList.tsx

@@ -0,0 +1,64 @@
+'use client'
+import './stylesFAQ.css' // Importa o arquivo CSS
+
+import React, { useState } from 'react'
+
+import { LinkTitleToContent } from '../link-title-to-content'
+import FAQItem from './FAQItem'
+
+type FAQ = {
+  question: string
+  answer: string
+}
+
+const FAQList: React.FC = () => {
+  const [openIndex, setOpenIndex] = useState<number | null>(null)
+
+  const faqs: FAQ[] = [
+    {
+      question: 'O que é o Python Norte 2024?',
+      answer:
+        'Python Norte 2024 é um evento dedicado à tecnologia e à inclusão, promovendo diversidade ao longo de dois dias em setembro. É uma conferência feita pela comunidade e para a comunidade, com o objetivo de fortalecer laços humanos, compartilhar conhecimento tecnológico e promover mudanças positivas.',
+    },
+    {
+      question: 'Quem pode participar do evento?',
+      answer:
+        'O evento é aberto a todos os interessados em tecnologia, especialmente aqueles que desejam promover e participar de um ambiente inclusivo e diversificado.',
+    },
+    {
+      question: 'Como posso me inscrever?',
+      answer:
+        'As inscrições estão abertas agora! Visite o nosso site e inscreva-se para garantir sua participação.',
+    },
+    {
+      question: 'Como são selecionadas as palestras?',
+      answer:
+        'As palestras são escolhidas pela própria comunidade, garantindo uma ampla variedade de temas e perspectivas.',
+    },
+    // Add more FAQs as needed
+  ]
+
+  const handleClick = (index: number) => {
+    setOpenIndex(openIndex === index ? null : index)
+  }
+
+  return (
+    <div>
+      <LinkTitleToContent title="FAQ" hrefId="FAQList" />
+      <div className="pt-4">
+        {faqs.map((faq, index) => (
+          <FAQItem
+            key={index}
+            question={faq.question}
+            answer={faq.answer}
+            isOpen={openIndex === index}
+            onClick={() => handleClick(index)}
+            isLast={index === faqs.length - 1}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default FAQList

src/components/FAQ/stylesFAQ.css

@@ -0,0 +1,50 @@
+.faq-item:first-child .faq-question {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.faq-item:last-child .faq-question {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+.faq-item:last-child .faq-answer {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+.faq-item.last-open .faq-question {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* New border-bottom style for all but the last item */
+.faq-item .faq-question.border-b {
+  border-bottom: 1px ridge rgb(172, 70, 19);
+}
+
+/* Transition for the arrow */
+.faq-question .transform {
+  transition: transform 0.2s ease;
+}
+
+/* Transition for the answer */
+.faq-answer {
+  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+}
+
+.faq-answer.open {
+  max-height: 200px; /* Ajuste conforme necessário */
+  padding: 16px;
+  opacity: 1;
+}
+
+
+/* .center {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  justify-content: center;
+  height: 100%; /* Opcional: ajuste conforme necessário 
+} */