Responsive and accessible accordeon widget

Hi!

For the "FAQ" abbreviation, you might want to use abbr tag with the title attribute to explain the abbreviation to the user (a tooltip is shown when user hovers on it):

<h1 className="font-bold text-[2rem] leading-[38px] desktop:text-[3.5rem] desktop:leading-[65.7px] text-purple-dark">
  <abbr title="Frequently Asked Questions">
    FAQs
  </abbr>
</h1>

You could use the details and summary tags to create the accordion. You wouldn't need to implement open/close functionality, as it's already in place. It would look something like that:

export default function Accordeon({
  topic,
  content,
  open,
  onOpenChange,
}: AccordeonProps) {
  return (
    <details open={open}>
      <summary>{topic}</summary>
      <p>{content}</p>
    </details>
  );
}

Great job!