create an FAQ Accordion plugin

I have been asked to build a WordPress plugin to show FAQs

• Renderable with either a shortcode or a Gutenberg block.
• Collapsible and smoothly animated.
• With the exception of ACF functions, all code should be contained inside the plugin.
• Any fields added should also be output in valid FAQ structured data.

I have some basic code to start:

<?php
/*
    Plugin Name: FAQs PLugin
    Plugin URI: https://google.com
    Description: Empty wordpress plugin
    Author: Ben
    Author URI: https://google.co.uk
    Version: 1.0.0
*/

if (function_exists('acf_add_options_page')) {
    acf_add_options_page(
        array(
            'page_title' => 'FAQ Settings',
            'menu_title' => 'FAQ Settings'
        )
    );
}

I have a design to go by and I have this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Quisque rhoncus laoreet urna ac faucibus?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac aliquet mauris, vel tristique neque. Nam dictum leo ligula, sit amet viverra erat ultrices at. Donec sit amet feugiat est, quis pulvinar felis. Praesent eget libero nec mi consectetur semper. Integer vitae auctor massa, at tristique sem. Fusce id cursus ex. Proin egestas mi id sem pretium elementum. Sed porttitor vehicula cursus. Nam sed leo non tellus placerat maximus ut sit amet orci. Duis lorem justo, viverra a augue ac, gravida pharetra orci. Suspendisse potenti.</p>"
      }
    },
    {
      "@type": "Question",
      "name": "Donec eget blandit dui, vel pharetra sapien?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Duis at ipsum dui. Praesent bibendum nisl ut interdum auctor. Cras et nulla at diam viverra tempor quis eu diam. Donec nec maximus libero, nec rutrum justo. Ut pretium mauris at nibh tincidunt, commodo laoreet felis ullamcorper. Aenean pharetra turpis in massa pretium ultrices. Phasellus cursus accumsan nunc id dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed et dictum leo, vitae imperdiet sem. Maecenas nulla orci, lacinia sed felis ac, varius ornare neque. Vivamus feugiat sit amet nibh sed imperdiet. Mauris aliquet accumsan pellentesque. Nullam pharetra eleifend ante.</p>"
      }
    },
    {
      "@type": "Question",
      "name": "Quisque nec purus imperdiet?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Sed sodales dolor dui, non dignissim orci dignissim non. Nullam in magna quis orci accumsan convallis eget nec ex. Vivamus bibendum justo sed mi faucibus consequat. Duis varius nibh quis odio maximus pulvinar. Maecenas varius vehicula ligula, at pharetra ligula porta at. Suspendisse laoreet ut neque sit amet mattis. In eu sem in ligula consectetur faucibus. Aenean vehicula odio et eleifend pellentesque. Fusce vel enim arcu. Ut id tincidunt tellus, id euismod metus.</p>"
      }
    }
  ]
}
</script>

I am really not sure where to start here, can someone please direct me to a tutorial?