Ajustar nível das perguntas do FAQ

[adrianagardin]

perguntas do FAQ estão como título nível 1. Devem ter o nível hierárquico inferior ao do título FAQ e ter a semântica de botão, seguida do estado "recolhido" ou "Expandido".

[DidoReis]

<div className="boxFaq

                            w-[358px] md:w-[720px]
                            h-[835px] md:h-[699px]
                            mt-[32px] md:mt-[20px]
                            flex 
                            flex-col 
                            items-start md:items-center

                            md:gap-[9px] ">

                {/* Questions */}    
                   {accordionData.map((q) => (
                    <div key={q.id} className='mb-4 last:mb-0'>
                        <button className='text-left flex' 
                        onClick={() => setActiveQuestion(activeQuestion === q.id ? null : q.id)}
                        aria-expanded={activeQuestion === q.id ? "true" : "false"}
                        aria-controls={`answer-${q.id}`}
                        >
                            <h3 className='w-[282px] md:w-[644px] @adrianagardin Adri nessa linha as perguntas estão como h3
                                           h-[auto] md:h-[24px]
                                           font-roboto
                                           text-[16px]
                                           not-italic
                                           font-bold
                                           leading-[24px]
                                           role="button"
                                           tracking-[0.5px]'>{q.question}</h3>
                                           {activeQuestion === q.id ? <BiSolidUpArrow className='text-[15px] text-[#FEAC39]'/> : <BiSolidDownArrow className="text-[15px] text-[#FEAC39]" /> }
                        </button>
                        <div className={`${darkTheme ? "bg-dark-divider" : "bg-light-divider"}
                                        w-[358px] md:w-[720px]
                                        h-[2px]
                                        self-stretch

                    `}></div>

                    {/* Answer sector */}
<AnimatePresence>
{activeQuestion === q.id && (
<motion.div 
initial={{height: 0}}
animate={{height: "auto"}}
exit={{height: 0}}
transition={{ duration: 0.3}}
className='overflow-clip'>
  <p className='p-4
                gap-[10px]
                font-roboto
                text-[16px]
                not-italic
                font-semibold
                leading-[24px]
                tracking-[0.25px]
              bg-white text-[#1C1B1F]'>{q.answer}</p> @adrianagardin E aqui está como paragrafo.
</motion.div>
)}
</AnimatePresence>
                    </div>
                   ))}

@adrianagardin adicionei esse h3 para as perguntas, e o p para as respostas.