From 7106ea4fa6c19f25b7430761aeec566954741fba Mon Sep 17 00:00:00 2001
From: Guillaume <guillaume@mockoon.com>
Date: Tue, 19 Dec 2023 15:49:34 +0100
Subject: [PATCH] Add playground page

---
 components/accordion.tsx |  41 ++--
 components/footer.tsx    |   4 +-
 components/nav.tsx       | 245 +++++++++++++++++-------
 models/common.model.ts   |   8 +-
 pages/course.tsx         |  30 +--
 pages/playground.tsx     | 399 +++++++++++++++++++++++++++++++++++++++
 pages/pro.tsx            |  45 +++--
 pages/public-roadmap.tsx |  12 +-
 8 files changed, 669 insertions(+), 115 deletions(-)
 create mode 100644 pages/playground.tsx

diff --git a/components/accordion.tsx b/components/accordion.tsx
index d06f397d..1fa81f43 100644
--- a/components/accordion.tsx
+++ b/components/accordion.tsx
@@ -58,17 +58,21 @@ const Accordion: FunctionComponent<{
                 <span
                   className='me-4'
                   id={`accordionContent${dataGroupIndex}${dataItemIndex}`}
-                >
-                  {dataItem.title}
-                </span>
+                  dangerouslySetInnerHTML={{ __html: dataItem.title }}
+                ></span>
 
                 <div className='ms-auto'>
-                  {Array.isArray(dataItem.text) && (
+                  {(Array.isArray(dataItem.content) ||
+                    dataItem.count !== undefined) && (
                     <span className='badge text-bg-gray-200 rounded-pill'>
-                      {dataItem.text.length}{' '}
-                      {dataItem.text.length > 1
-                        ? counterSuffix.plural
-                        : counterSuffix.singular}
+                      {Array.isArray(dataItem.content)
+                        ? dataItem.content.length
+                        : dataItem.count}{' '}
+                      {(Array.isArray(dataItem.content)
+                        ? dataItem.content.length
+                        : dataItem.count) > 1
+                        ? counterSuffix?.plural
+                        : counterSuffix?.singular}
                     </span>
                   )}
                 </div>
@@ -78,13 +82,12 @@ const Accordion: FunctionComponent<{
                 className={`accordion-collapse ${
                   accordionItemState ? '' : 'collapse'
                 }`}
-                id='helpOne'
                 aria-labelledby={`accordionContent${dataGroupIndex}${dataItemIndex}`}
                 data-bs-parent={`#accordion${dataGroupIndex}${dataItemIndex}`}
               >
-                {Array.isArray(dataItem.text) && (
+                {Array.isArray(dataItem.content) && (
                   <ol className='accordion-body text-gray-700 list-group-numbered'>
-                    {dataItem.text.map((textItem, textItemIndex) => {
+                    {dataItem.content.map((textItem, textItemIndex) => {
                       return (
                         <li
                           key={`dataGroup${dataGroupIndex}dataItem${dataItemIndex}textItem${textItemIndex}`}
@@ -95,12 +98,16 @@ const Accordion: FunctionComponent<{
                     })}
                   </ol>
                 )}
-                {!Array.isArray(dataItem.text) && (
-                  <div
-                    className='accordion-body text-gray-700'
-                    dangerouslySetInnerHTML={{ __html: dataItem.text }}
-                  ></div>
-                )}
+                {!Array.isArray(dataItem.content) &&
+                  typeof dataItem.content === 'string' && (
+                    <div
+                      className='accordion-body text-gray-700'
+                      dangerouslySetInnerHTML={{ __html: dataItem.content }}
+                    ></div>
+                  )}
+                {!Array.isArray(dataItem.content) &&
+                  typeof dataItem.content !== 'string' &&
+                  dataItem.content}
               </div>
             </div>
           );
diff --git a/components/footer.tsx b/components/footer.tsx
index 17064d72..f3e61f28 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -188,11 +188,11 @@ const Footer: FunctionComponent<{
               </li>
               <li className='mb-2'>
                 <Link href='/status/' className='text-reset'>
-                  Status
+                  Services status
                 </Link>
               </li>
             </ul>
-            <h6 className='fw-bold text-uppercase text-gray-700'>Tools</h6>
+            <h6 className='fw-bold text-uppercase text-gray-700'>Apps</h6>
 
             <ul className='list-unstyled text-gray-700'>
               <li className='mb-2'>
diff --git a/components/nav.tsx b/components/nav.tsx
index 7ec2d9f3..89c773ed 100644
--- a/components/nav.tsx
+++ b/components/nav.tsx
@@ -4,11 +4,17 @@ import { useRouter } from 'next/router';
 import { FunctionComponent, useState } from 'react';
 import { useAuth } from '../utils/auth';
 
+enum Dropdowns {
+  NONE = 'NONE',
+  APPS = 'APPS',
+  ACCOUNT = 'ACCOUNT',
+  RESOURCES = 'RESOURCES'
+}
+
 const Nav: FunctionComponent = function () {
   const router = useRouter();
   const [show, setShow] = useState(false);
-  const [appsDropdownOpen, setAppsDropdownOpen] = useState(false);
-  const [accountDropdownOpen, setAccountDropdownOpen] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(Dropdowns.NONE);
   const auth = useAuth();
 
   const toggler = (
@@ -28,7 +34,7 @@ const Nav: FunctionComponent = function () {
     e.preventDefault();
 
     await auth.logout();
-    setAccountDropdownOpen(false);
+    setDropdownOpen(Dropdowns.NONE);
   };
 
   return (
@@ -71,41 +77,49 @@ const Nav: FunctionComponent = function () {
               </li>
             )}
 
+            <li className='nav-item'>
+              <DocSearch
+                appId='HV1IDAB8IU'
+                indexName='mockoon'
+                apiKey='c3396e739c9949cf6ccf7305b8da46aa'
+              />
+            </li>
+
             <li
               className='nav-item dropdown text-center'
               onMouseEnter={() => {
-                !show && setAppsDropdownOpen(true);
+                !show && setDropdownOpen(Dropdowns.APPS);
               }}
               onMouseLeave={() => {
-                !show && setAppsDropdownOpen(false);
+                !show && setDropdownOpen(Dropdowns.NONE);
               }}
             >
               <a
                 className={`nav-link dropdown-toggle`}
                 href='#'
                 aria-haspopup='true'
-                aria-expanded={appsDropdownOpen}
+                aria-expanded={dropdownOpen === Dropdowns.APPS}
               >
                 Apps {!show && <i className='icon-arrow_drop_down'></i>}
               </a>
               <ul
                 className={`dropdown-menu ${show ? 'text-center' : ''} ${
-                  appsDropdownOpen ? 'show' : ''
+                  dropdownOpen === Dropdowns.APPS ? 'show' : ''
                 }`}
               >
                 <h6 className='dropdown-header'>Main application</h6>
-                <li className='dropdown-item mb-5 ps-lg-8'>
+                <li className='dropdown-item mb-5'>
                   <Link href='/download/' className='dropdown-link'>
                     Mockoon Desktop
                   </Link>
                 </li>
-                <h6 className='dropdown-header'>Tools</h6>
-                <li className='dropdown-item ps-lg-8'>
+                <h6 className='dropdown-header'>Libs</h6>
+                <li className='dropdown-item'>
                   <Link href='/cli/' className='dropdown-link'>
                     CLI
                   </Link>
                 </li>
-                <li className='dropdown-item ps-lg-8'>
+                <li className='dropdown-item'>
                   <Link href='/serverless/' className='dropdown-link'>
                     Serverless package
                   </Link>
@@ -124,73 +138,178 @@ const Nav: FunctionComponent = function () {
               </Link>
             </li>
 
-            <li className='nav-item'>
-              <Link
-                href='/features/'
-                className={`nav-link ${
-                  router.pathname === '/features' ? 'active' : ''
-                }`}
+            <li
+              className='nav-item dropdown text-center'
+              onMouseEnter={() => {
+                !show && setDropdownOpen(Dropdowns.RESOURCES);
+              }}
+              onMouseLeave={() => {
+                !show && setDropdownOpen(Dropdowns.NONE);
+              }}
+            >
+              <a
+                className={`nav-link dropdown-toggle`}
+                href='#'
+                aria-haspopup='true'
+                aria-expanded={dropdownOpen === Dropdowns.RESOURCES}
               >
-                Features
-              </Link>
-            </li>
-
-            <li className='nav-item'>
-              <Link
-                href='/docs/latest/about/'
-                className={`nav-link ${
-                  router.pathname === '/docs/[...slug]' ? 'active' : ''
-                }`}
+                Resources {!show && <i className='icon-arrow_drop_down'></i>}
+              </a>
+              <div
+                className={`dropdown-menu dropdown-menu-lg ${
+                  show ? 'text-center' : ''
+                } ${dropdownOpen === Dropdowns.RESOURCES ? 'show' : ''}`}
               >
-                Docs
-              </Link>
-            </li>
+                <div className='row gx-0 gx-md-4'>
+                  <div className='col-md-4 mb-4 mb-md-0'>
+                    <div className='row gx-0'>
+                      <div className='col-12 col-lg-6'>
+                        <h6 className='dropdown-header'>Learn</h6>
 
-            <li className='nav-item'>
-              <Link
-                href='/tutorials/'
-                className={`nav-link ${
-                  router.pathname === '/tutorials' ||
-                  router.pathname === '/tutorials/[slug]'
-                    ? 'active'
-                    : ''
-                }`}
-              >
-                Tutorials
-              </Link>
-            </li>
+                        <Link
+                          href='/course/'
+                          className={`dropdown-item ${
+                            router.pathname === '/course' ? 'active' : ''
+                          }`}
+                        >
+                          Course{' '}
+                          <i className='icon-new_releases text-warning'></i>
+                        </Link>
+                        <Link
+                          href='/docs/latest/about/'
+                          className={`dropdown-item ${
+                            router.pathname === '/docs/[...slug]'
+                              ? 'active'
+                              : ''
+                          }`}
+                        >
+                          Docs
+                        </Link>
+                        <Link
+                          href='/tutorials/'
+                          className={`dropdown-item ${
+                            router.pathname === '/tutorials' ||
+                            router.pathname === '/tutorials/[slug]'
+                              ? 'active'
+                              : ''
+                          }`}
+                        >
+                          Tutorials
+                        </Link>
+                      </div>
+                    </div>
+                  </div>
+                  <div className='col-md-4 mb-4 mb-md-0'>
+                    <div className='row gx-0'>
+                      <div className='col-12 col-lg-6'>
+                        <h6 className='dropdown-header'>Tools</h6>
 
-            <li className='nav-item'>
-              <Link
-                href='/course/'
-                className={`nav-link ${
-                  router.pathname === '/course' ? 'active' : ''
-                }`}
-              >
-                Course
-              </Link>
-            </li>
-            <li className='nav-item'>
-              <DocSearch
-                appId='HV1IDAB8IU'
-                indexName='mockoon'
-                apiKey='c3396e739c9949cf6ccf7305b8da46aa'
-              />
+                        <Link
+                          href='/playground/'
+                          className={`dropdown-item ${
+                            router.pathname === '/playground' ? 'active' : ''
+                          }`}
+                        >
+                          API Playground{' '}
+                          <i className='icon-new_releases text-warning'></i>
+                        </Link>
+                        <Link
+                          href='/mock-samples/category/all/'
+                          className={`dropdown-item ${
+                            router.pathname === '/mock-samples/[slug]' ||
+                            router.pathname ===
+                              '/mock-samples/category/[category]'
+                              ? 'active'
+                              : ''
+                          }`}
+                        >
+                          Mock samples
+                        </Link>
+                        <Link
+                          href='/templates/'
+                          className={`dropdown-item ${
+                            router.pathname === '/templates' ? 'active' : ''
+                          }`}
+                        >
+                          Templates
+                        </Link>
+                      </div>
+                    </div>
+                  </div>
+                  <div className='col-md-4 mb-4 mb-md-0'>
+                    <div className='row gx-0'>
+                      <div className='col-12 col-lg-6'>
+                        <h6 className='dropdown-header'>Misc</h6>
+
+                        <Link
+                          href='/blog/'
+                          className={`dropdown-item ${
+                            router.pathname === '/blog' ||
+                            router.pathname === '/blog/[slug]'
+                              ? 'active'
+                              : ''
+                          }`}
+                        >
+                          Blog
+                        </Link>
+                        <a
+                          href='/releases/6.0.1/'
+                          className={`dropdown-item ${
+                            router.pathname === '/releases' ||
+                            router.pathname === '/releases/[version]'
+                              ? 'active'
+                              : ''
+                          }`}
+                        >
+                          Releases
+                        </a>
+                        <Link
+                          href='/features/'
+                          className={`dropdown-item ${
+                            router.pathname === '/features' ? 'active' : ''
+                          }`}
+                        >
+                          Features
+                        </Link>
+                        <Link
+                          href='/faq/'
+                          className={`dropdown-item ${
+                            router.pathname === '/faq' ? 'active' : ''
+                          }`}
+                        >
+                          FAQ
+                        </Link>
+                        <Link
+                          href='/public-roadmap/'
+                          className={`dropdown-item ${
+                            router.pathname === '/public-roadmap'
+                              ? 'active'
+                              : ''
+                          }`}
+                        >
+                          Roadmap
+                        </Link>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </li>
+
             <li
               className='nav-item dropdown text-center'
               onMouseEnter={() => {
-                !show && setAccountDropdownOpen(true);
+                !show && setDropdownOpen(Dropdowns.ACCOUNT);
               }}
               onMouseLeave={() => {
-                !show && setAccountDropdownOpen(false);
+                !show && setDropdownOpen(Dropdowns.NONE);
               }}
             >
               <a
                 className={`nav-link dropdown-toggle`}
                 href='#'
                 aria-haspopup='true'
-                aria-expanded={accountDropdownOpen}
+                aria-expanded={dropdownOpen === Dropdowns.ACCOUNT}
               >
                 <span
                   className={`me-2 vertical-bottom ${
@@ -203,7 +322,7 @@ const Nav: FunctionComponent = function () {
               </a>
               <ul
                 className={`dropdown-menu ${show ? 'text-center' : ''} ${
-                  accountDropdownOpen ? 'show' : ''
+                  dropdownOpen === Dropdowns.ACCOUNT ? 'show' : ''
                 }`}
               >
                 {!auth.isAuth && (
diff --git a/models/common.model.ts b/models/common.model.ts
index bd3ed4c7..13c1cc06 100644
--- a/models/common.model.ts
+++ b/models/common.model.ts
@@ -1,6 +1,12 @@
+import { ReactElement } from 'react';
+
 export type AccordionData = {
   title?: string;
-  items: { title: string; text: string | string[] }[];
+  items: {
+    title: string;
+    content: string | string[] | ReactElement;
+    count?: number;
+  }[];
 }[];
 
 export type MockAPI = {
diff --git a/pages/course.tsx b/pages/course.tsx
index 4850f0ff..4f251eb8 100644
--- a/pages/course.tsx
+++ b/pages/course.tsx
@@ -25,19 +25,23 @@ const faq: AccordionData = [
     items: [
       {
         title: 'When will the course be available?',
-        text: 'The course is currently in production and will be available in Q1 2024. You can subscribe to our newsletter to be notified when the course is released.'
+        content:
+          'The course is currently in production and will be available in Q1 2024. You can subscribe to our newsletter to be notified when the course is released.'
       },
       {
         title: 'How long do I have access to the course?',
-        text: 'You will have lifetime access to the course. You will also have access to all future updates to the course.'
+        content:
+          'You will have lifetime access to the course. You will also have access to all future updates to the course.'
       },
       {
         title: 'Can I share my course with my team or someone else?',
-        text: 'Each course purchase is for a single user. If you want to share the course with your team, you can purchase a team license. <a href="/contact-form/">Contact us</a> for more information.'
+        content:
+          'Each course purchase is for a single user. If you want to share the course with your team, you can purchase a team license. <a href="/contact-form/">Contact us</a> for more information.'
       },
       {
         title: 'Do you offer discounts?',
-        text: 'We offer a discount on the course price for students, teams and non-profit organizations. Do not hesitate to <a href="/contact-form/">contact our support</a> to get a discount.'
+        content:
+          'We offer a discount on the course price for students, teams and non-profit organizations. Do not hesitate to <a href="/contact-form/">contact our support</a> to get a discount.'
       }
     ]
   }
@@ -48,7 +52,7 @@ const courseContent: AccordionData = [
     items: [
       {
         title: 'Getting started',
-        text: [
+        content: [
           'Introduction to Mockoon',
           'Installing Mockoon desktop application',
           'Create your first mock API'
@@ -56,7 +60,7 @@ const courseContent: AccordionData = [
       },
       {
         title: 'Creating responses',
-        text: [
+        content: [
           'Adding a JSON body',
           'Serving external files',
           'Create reusable mock data with the data buckets',
@@ -66,7 +70,7 @@ const courseContent: AccordionData = [
       },
       {
         title: 'Create more realistic responses with templating',
-        text: [
+        content: [
           'Introduction to Handlebars templating',
           'Templating helpers support',
           'Using Mockoon helpers',
@@ -76,7 +80,7 @@ const courseContent: AccordionData = [
       },
       {
         title: 'Dynamic responses with rules',
-        text: [
+        content: [
           'Create multiple responses for a route',
           'Identifying the default response',
           'Random and sequential modes',
@@ -86,7 +90,7 @@ const courseContent: AccordionData = [
       },
       {
         title: 'Create fully automated CRUD mock endpoints',
-        text: [
+        content: [
           'Overview of the CRUD endpoints',
           'Creating a CRUD endpoint',
           'Sorting and pagination'
@@ -94,18 +98,18 @@ const courseContent: AccordionData = [
       },
       {
         title: 'Partial mocking with the proxy mode',
-        text: ['Configure the proxy mode', 'Create a partial mock API']
+        content: ['Configure the proxy mode', 'Create a partial mock API']
       },
       {
         title: 'Logging and recording',
-        text: [
+        content: [
           'Overview of the logs',
           'Record entering requests to create mocks'
         ]
       },
       {
         title: 'Deploy your mocks anywhere with the CLI',
-        text: [
+        content: [
           'Installing the CLI',
           'Deploying your mocks to a server',
           'Using the CLI with CI/CD: GitHub Actions'
@@ -121,7 +125,7 @@ const Course: FunctionComponent = function () {
       <Meta title={meta.title} description={meta.description} />
 
       <Hero
-        title='🎓 Mockoon <span class="text-primary">Official Course</span> <span class="badge text-bg-gray-300 fs-4 align-text-top ms-2">Coming soon</span>'
+        title='🎓 Mockoon <span class="text-primary">Official Course</span> <span class="badge text-bg-gray-300 fs-4 align-text-top ms-2"><i class="icon-new_releases pe-2 text-warning"></i>Coming soon</span>'
         subtitle='Mockoon offers an official course to help you get started with API mocking and API design. Learn how to create and manage your mock APIs with Mockoon.'
         mainPictureWidth={1200}
         mainPictureHeight={783}
diff --git a/pages/playground.tsx b/pages/playground.tsx
new file mode 100644
index 00000000..b2dd7ac3
--- /dev/null
+++ b/pages/playground.tsx
@@ -0,0 +1,399 @@
+import Link from 'next/link';
+import { FunctionComponent } from 'react';
+import Accordion from '../components/accordion';
+import CodeBlock from '../components/code-block';
+import Hero from '../components/hero';
+import Meta from '../components/meta';
+import Layout from '../layout/layout';
+import { AccordionData } from '../models/common.model';
+
+const meta = {
+  title: "Mockoon's Playground API",
+  description:
+    "Mockoon's playground is a ready-to-use mock API for all your prototyping needs: fake JSON data, JSON placeholders, realistic CRUD API mock, etc."
+};
+
+const keyPoints = [
+  'Learning and teaching APIs',
+  'Quick prototyping',
+  'Discovering Mockoon features'
+];
+
+const faq: AccordionData = [
+  {
+    items: [
+      {
+        title: 'Are there any rate limits?',
+        content:
+          "While the playground offers a lot of flexibility, it's not meant to be used in production. We monitor the playground's usage and apply rate limiting (you may get 429 \"Too Many Requests\" errors). Please don't abuse it and use it only for prototyping purposes."
+      },
+      {
+        title: 'Are the data persistent?',
+        content:
+          "All the methods like POST, PUT or DELETE work as expected and will modify the data or return a 404 after deletion. Be kind and don't abuse it, the data is shared between all the users. Work with your own objects! 😉"
+      },
+      {
+        title: 'Are the data reset regularly?',
+        content:
+          'The service is frequently reset to its initial state and goes to sleep after ~15 minutes of inactivity, which also resets its state.'
+      },
+      {
+        title: 'Some requests are slow, why?',
+        content:
+          'The playground goes to sleep after ~15 minutes of inactivity. The first request after this period may be slow (up to 10-20 seconds) as the service is waking up. But it should be fast enough after that.'
+      },
+      {
+        title: 'How was the playground built?',
+        content:
+          'The playground data were created using <a href="/download/">Mockoon Desktop</a>. It is running with the <a href="/cli/">CLI</a> in a <a href="https://github.com/mockoon/mockoon/tree/main/packages/cli#dockerize-command">Docker container</a>. It principally uses the <a href="/docs/latest/api-endpoints/crud-routes/">CRUD routes</a> and <a href="/docs/latest/data-buckets/overview/">data buckets</a> features.'
+      },
+      {
+        title:
+          'I found a bug/have a suggestion for the playground API, what should I do?',
+        content:
+          'You can ask for help or discuss ideas and improvements on our <a href="https://github.com/mockoon/mockoon/discussions">GitHub Discussion forum</a>. You are also welcome on our <a href="https://discord.gg/FtJjkejKGp">Discord server</a>. If you found an issue with the playground, you can open an issue on the <a href="https://github.com/mockooon/playground">playground repository</a>.'
+      }
+    ]
+  }
+];
+
+const resources: AccordionData = [
+  {
+    items: [
+      {
+        title: 'Contacts <code>/contacts</code>',
+        content: (
+          <div className='px-4'>
+            <CodeBlock
+              code={`{
+  "id": "d421a174-8a96-4f42-addb-dccf00872970",
+  "name": "Devyn Stamm",
+  "email": "Raleigh_Ankunding77@gmail.com",
+  "phone": "991-570-7464 x620",
+  "address": {
+    "street": "664 Baumbach Port",
+    "city": "Fort Vanessa",
+    "state": "Maine",
+    "zip": "72249-8454"
+  },
+  "age": 56
+}`}
+              language='json'
+              dark
+              lineBreak
+            ></CodeBlock>
+          </div>
+        ),
+        count: 100
+      },
+      {
+        title: 'Movies <code>/movies</code>',
+        content: (
+          <div className='px-4'>
+            <CodeBlock
+              code={`{
+  "id": "c476c2ce-f138-459d-9b7f-00781e550460",
+  "title": "necessitatibus brevis vicissitudo",
+  "genre": "vulgus",
+  "director": "Stewart Kiehn",
+  "releaseYear": 1954,
+  "rating": 7,
+  "isPopular": false
+}`}
+              language='json'
+              dark
+              lineBreak
+            ></CodeBlock>
+          </div>
+        ),
+        count: 100
+      },
+      {
+        title: 'Photos <code>/photos</code>',
+        content: (
+          <div className='px-4'>
+            <CodeBlock
+              code={`{
+  "id": "f50bf6e1-fbb2-4096-aff1-dad2a3dda30f",
+  "url": "https://loremflickr.com/640/480",
+  "caption": "Adsidue amplexus quam pecco armarium [...]",
+  "likes": 12,
+  "isFeatured": true
+}`}
+              language='json'
+              dark
+              lineBreak
+            ></CodeBlock>
+          </div>
+        ),
+        count: 100
+      },
+      {
+        title: 'Posts <code>/posts</code>',
+        content: (
+          <div className='px-4'>
+            <CodeBlock
+              code={`{
+  "uuid": "0fd57703-4755-40a1-bbf7-2bee858c3a67",
+  "title": "Sumptus appono tametsi [...]",
+  "author": "Jermaine Daniel",
+  "date": "2023-04-30T10:10:02.970Z",
+  "content": "Crustulum consequatur ut audacia [...]",
+  "views": 1289,
+  "isPublished": true
+}`}
+              language='json'
+              dark
+              lineBreak
+            ></CodeBlock>
+          </div>
+        ),
+        count: 100
+      },
+      {
+        title: 'Todos <code>/todos</code>',
+        content: (
+          <div className='px-4'>
+            <CodeBlock
+              code={`{
+  "id": "c7266f89-b777-45aa-83ad-01d4bad47eb7",
+  "title": "optimize real-time architectures",
+  "completed": true,
+  "priority": 0,
+  "dueDate": "2024-09-24T10:13:39.649Z"
+}`}
+              language='json'
+              dark
+              lineBreak
+            ></CodeBlock>
+          </div>
+        ),
+        count: 100
+      },
+      {
+        title: 'Users <code>/users</code>',
+        content: (
+          <div className='px-4'>
+            <CodeBlock
+              code={`{
+  "id": "dabf8912-0eb2-4648-98df-7d113a15bbfc",
+  "name": "Sean Kris",
+  "email": "Carlotta66@gmail.com",
+  "phone": "271-410-4874 x85762",
+  "address": "623 Jailyn Village, Pasadena, IA 54138",
+  "birthdate": "2005-07-26",
+  "isActive": true
+}`}
+              language='json'
+              dark
+              lineBreak
+            ></CodeBlock>
+          </div>
+        ),
+        count: 100
+      }
+    ]
+  }
+];
+
+const Course: FunctionComponent = function () {
+  return (
+    <Layout footerBanner='download'>
+      <Meta title={meta.title} description={meta.description} />
+
+      <Hero
+        title='Mockoon <span class="text-primary">Playground API</span>'
+        subtitle="Mockoon's playground is a ready-to-use mock API for all your prototyping needs: fake JSON data, JSON placeholders, realistic CRUD API mock, etc."
+        mainPictureWidth={1200}
+        mainPictureHeight={783}
+      />
+
+      <section className='py-6 py-md-8 border-top bg-gradient-light-white'>
+        <div className='container'>
+          <div className='row justify-content-center g-10'>
+            <div className='col-12 col-lg-7'>
+              <p>
+                Mockoon's playground is a ready-to-use mock API for all your
+                prototyping needs: <strong>fake JSON data</strong>,{' '}
+                <strong>JSON placeholders</strong>,{' '}
+                <strong>realistic CRUD API mock</strong>, etc. It is also a good
+                way to discover Mockoon's features. The playground offers the
+                resources below, populated with fake data (generated using{' '}
+                <a href='https://fakerjs.dev/' target='_blank'>
+                  Faker.js
+                </a>
+                ).
+              </p>
+              <p>You can use this playground for:</p>
+              <div className='mt-6'>
+                {keyPoints.map((keyPoint, keyPointIndex) => (
+                  <div
+                    key={`taskcomingsoon${keyPointIndex}`}
+                    className='d-flex'
+                  >
+                    <div className='badge badge-rounded-circle text-bg-success-subtle mt-1 me-4'>
+                      <i className='icon icon-check'></i>
+                    </div>
+                    <p className='text-gray-800'>{keyPoint}</p>
+                  </div>
+                ))}
+              </div>
+              <div className='alert quote'>
+                <p>
+                  ➡️ To go further, <Link href={'/download/'}>download</Link>{' '}
+                  Mockoon and follow our{' '}
+                  <Link href={'/tutorials/getting-started/'}>
+                    getting started tutorial
+                  </Link>
+                  .
+                </p>
+              </div>
+
+              <h3 className='my-6'>Available resources</h3>
+
+              <Accordion
+                data={resources}
+                openFirst
+                counterSuffix={{ singular: 'item', plural: 'items' }}
+              />
+            </div>
+
+            <div className='col-12 col-lg-5 sticky-top'>
+              <div className='card shadow-light-lg mb-6 mb-md-0'>
+                <div className='card-body'>
+                  <h3>Playground base URL</h3>
+                  <p>
+                    <code>https://playground.mockoon.com/</code>
+                  </p>
+                  <h4 className='my-6'>
+                    Available routes/methods for each resource
+                  </h4>
+                  <ul className='list-group list-group-flush mb-6'>
+                    <li className='list-group-item d-flex justify-content-between align-items-start pb-2'>
+                      <div className='ms-2 me-auto'>
+                        <div className='d-flex align-items-center'>
+                          <span className='badge text-bg-primary me-2'>
+                            GET
+                          </span>
+                          <code>
+                            /{'{'}resources{'}'}
+                          </code>
+                        </div>
+                        Returns the entire array
+                      </div>
+                    </li>
+                    <li className='list-group-item d-flex justify-content-between align-items-start py-2'>
+                      <div className='ms-2 me-auto'>
+                        <div className='d-flex align-items-center'>
+                          <span className='badge text-bg-primary me-2'>
+                            GET
+                          </span>
+                          <code>
+                            /{'{'}resources{'}'}/:id
+                          </code>
+                        </div>
+                        Returns an object by its id property
+                      </div>
+                    </li>
+                    <li className='list-group-item d-flex justify-content-between align-items-start py-2'>
+                      <div className='ms-2 me-auto'>
+                        <div className='d-flex align-items-center'>
+                          <span className='badge text-bg-success me-2'>
+                            POST
+                          </span>
+                          <code>
+                            /{'{'}resources{'}'}{' '}
+                          </code>
+                        </div>
+                        Inserts a new object in the array (autogenerate the id
+                        (UUID) if not provided)
+                      </div>
+                    </li>
+                    <li className='list-group-item d-flex justify-content-between align-items-start py-2'>
+                      <div className='ms-2 me-auto'>
+                        <div className='d-flex align-items-center'>
+                          <span className='badge text-bg-warning me-2'>
+                            PUT
+                          </span>
+                          <code>
+                            /{'{'}resources{'}'}/:id
+                          </code>
+                        </div>
+                        Performs a full object update by its id (replace)
+                      </div>
+                    </li>
+                    <li className='list-group-item d-flex justify-content-between align-items-start py-2'>
+                      <div className='ms-2 me-auto'>
+                        <div className='d-flex align-items-center'>
+                          <span className='badge text-bg-warning me-2'>
+                            PATCH
+                          </span>
+                          <code>
+                            /{'{'}resources{'}'}/:id
+                          </code>
+                        </div>
+                        Performs a partial object update by its id (merge)
+                      </div>
+                    </li>
+                    <li className='list-group-item d-flex justify-content-between align-items-start pt-2'>
+                      <div className='ms-2 me-auto'>
+                        <div className='d-flex align-items-center'>
+                          <span className='badge text-bg-danger me-2'>
+                            DELETE
+                          </span>
+                          <code>
+                            /{'{'}resources{'}'}/:id
+                          </code>
+                        </div>
+                        Deletes an object by its id
+                      </div>
+                    </li>
+                  </ul>
+
+                  <div className='alert quote mt-4 fst-italic'>
+                    <p>
+                      💡 You can also use the <code className='p-0'>sort</code>,{' '}
+                      <code className='p-0'>order</code>,{' '}
+                      <code className='p-0'>limit</code> and{' '}
+                      <code className='p-0'>page</code> query parameters. You
+                      will find more information about the CRUD routes behavior
+                      in our{' '}
+                      <Link href={'/docs/latest/api-endpoints/crud-routes/'}>
+                        documentation
+                      </Link>
+                      .
+                      <br />
+                      ⚠️ DELETE, PATCH and PUT are disabled on the{' '}
+                      <code className='p-0'>
+                        /{'{'}
+                        resources
+                        {'}'}
+                      </code>{' '}
+                      route.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section
+        className='py-6 py-md-8 border-bottom bg-gradient-light-white'
+        id='faq'
+      >
+        <div className='container'>
+          <div className='row justify-content-center'>
+            <div className='col-12 col-lg-8 align-items-center'>
+              <h2 className='fw-bold mb-6 text-center'>Playground FAQ</h2>
+              <Accordion data={faq} />
+            </div>
+          </div>
+        </div>
+      </section>
+    </Layout>
+  );
+};
+
+export default Course;
diff --git a/pages/pro.tsx b/pages/pro.tsx
index 6ee2fd66..30811689 100644
--- a/pages/pro.tsx
+++ b/pages/pro.tsx
@@ -19,11 +19,13 @@ const faq: AccordionData = [
     items: [
       {
         title: 'When will the "coming soon" services be available?',
-        text: 'We don\'t have a release date yet, but we would like to make the data synchronization for solo developers available later this year (2023). There is no ETA yet for the team synchronization.<br/><br/> <a href="#product-updates-subscribe">Subscribe to the product updates</a> below to be notified of new releases.'
+        content:
+          'We don\'t have a release date yet, but we would like to make the data synchronization for solo developers available later this year (2023). There is no ETA yet for the team synchronization.<br/><br/> <a href="#product-updates-subscribe">Subscribe to the product updates</a> below to be notified of new releases.'
       },
       {
         title: 'Can I give feedback or join a beta test?',
-        text: 'Sure! You can join us on our <a href="https://discord.gg/FtJjkejKGp" target="_blank">Discord server</a>. We will be happy to hear from you.'
+        content:
+          'Sure! You can join us on our <a href="https://discord.gg/FtJjkejKGp" target="_blank">Discord server</a>. We will be happy to hear from you.'
       }
     ]
   },
@@ -32,15 +34,18 @@ const faq: AccordionData = [
     items: [
       {
         title: 'What is the "community support"?',
-        text: "Community support is the free support channel for Mockoon users. It is available on our <a href='https://github.com/mockoon/mockoon/discussions' target='_blank' rel='noopener'>GitHub repository</a> or <a href='https://discord.gg/FtJjkejKGp' target='_blank' rel='noopener'>Discord server</a>."
+        content:
+          "Community support is the free support channel for Mockoon users. It is available on our <a href='https://github.com/mockoon/mockoon/discussions' target='_blank' rel='noopener'>GitHub repository</a> or <a href='https://discord.gg/FtJjkejKGp' target='_blank' rel='noopener'>Discord server</a>."
       },
       {
         title: 'What is the "priority support" (Team and Enterprise plan)?',
-        text: 'We will provide a priority support channel for your team by email or through the platform of your choice (Slack, etc.). Our priority support service is provided during regular business hours and working days in Luxembourg (9 am to 5 pm, Monday to Friday, Luxembourg time (CET/CEST), excluding public holidays). Please refer to the <a href="/terms/">terms of service</a> for more information.'
+        content:
+          'We will provide a priority support channel for your team by email or through the platform of your choice (Slack, etc.). Our priority support service is provided during regular business hours and working days in Luxembourg (9 am to 5 pm, Monday to Friday, Luxembourg time (CET/CEST), excluding public holidays). Please refer to the <a href="/terms/">terms of service</a> for more information.'
       },
       {
         title: 'What is the "welcome online training" (Enterprise plan)?',
-        text: 'We will provide a 1-hour online video call by our founder to help you get started with Mockoon and answer any questions you may have. This training will be scheduled with your team after the purchase of the Enterprise plan. It is limited to 1 session per year and per company. Additional training sessions can be purchased separately. <a href="/contact-form/">Contact us</a> for more information.'
+        content:
+          'We will provide a 1-hour online video call by our founder to help you get started with Mockoon and answer any questions you may have. This training will be scheduled with your team after the purchase of the Enterprise plan. It is limited to 1 session per year and per company. Additional training sessions can be purchased separately. <a href="/contact-form/">Contact us</a> for more information.'
       }
     ]
   },
@@ -49,35 +54,43 @@ const faq: AccordionData = [
     items: [
       {
         title: 'How does per-seat billing work?',
-        text: 'For Team and Enterprise plans, you can choose the number of seats you need. Each seat is billed monthly. You can <a href="/contact-form/">contact us</a> to add or remove seats at any time.'
+        content:
+          'For Team and Enterprise plans, you can choose the number of seats you need. Each seat is billed monthly. You can <a href="/contact-form/">contact us</a> to add or remove seats at any time.'
       },
       {
         title: 'I received emails from Paddle.com, what is it?',
-        text: 'Paddle.com is our payment provider. You will receive emails from them when you purchase a plan, when your subscription is renewed or when you cancel your subscription.'
+        content:
+          'Paddle.com is our payment provider. You will receive emails from them when you purchase a plan, when your subscription is renewed or when you cancel your subscription.'
       },
       {
         title: 'What payment methods do you accept?',
-        text: 'We accept credit cards (Visa, Mastercard, etc.) through our payment provider Paddle. You can also pay by bank transfer for the Enterprise plan. <a href="/contact-form/">Contact us</a> before purchasing for more information.'
+        content:
+          'We accept credit cards (Visa, Mastercard, etc.) through our payment provider Paddle. You can also pay by bank transfer for the Enterprise plan. <a href="/contact-form/">Contact us</a> before purchasing for more information.'
       },
       {
         title: 'Should I contact you before purchasing the "Enterprise" plan?',
-        text: 'The Enterprise plan can be purchased directly on our website or through a quote (should you need to pay by bank transfer for example). <a href="/contact-form/">Contact us</a> for more information.'
+        content:
+          'The Enterprise plan can be purchased directly on our website or through a quote (should you need to pay by bank transfer for example). <a href="/contact-form/">Contact us</a> for more information.'
       },
       {
         title: 'Do you offer discounts for schools, bootcamps or students?',
-        text: 'We offer a discount for education purposes by providing educational institutions with a discount on the Solo plan. Do not hesitate to <a href="/contact-form/">contact us</a> to become a partner.'
+        content:
+          'We offer a discount for education purposes by providing educational institutions with a discount on the Solo plan. Do not hesitate to <a href="/contact-form/">contact us</a> to become a partner.'
       },
       {
         title: 'How can I cancel my subscription?',
-        text: 'You can manage your subscription using the links in the emails you received from Paddle.com. You can also <a href="/contact-form/">contact us</a> and we will help you cancel your subscription.'
+        content:
+          'You can manage your subscription using the links in the emails you received from Paddle.com. You can also <a href="/contact-form/">contact us</a> and we will help you cancel your subscription.'
       },
       {
         title: 'Can I get a refund?',
-        text: 'We may offer a refund on a case-by-case basis if you have not used the service yet (usage quotas, etc.). Please refer to the <a href="/terms/">terms of service</a> for more information. In any case, do not hesitate to <a href="/contact-form/">contact us</a>. We will be happy to help you.'
+        content:
+          'We may offer a refund on a case-by-case basis if you have not used the service yet (usage quotas, etc.). Please refer to the <a href="/terms/">terms of service</a> for more information. In any case, do not hesitate to <a href="/contact-form/">contact us</a>. We will be happy to help you.'
       },
       {
         title: 'VAT',
-        text: 'Prices are in USD and exclude VAT. VAT may or may not be charged during checkout depending on various criteria like your location and quality (individual or business).'
+        content:
+          'Prices are in USD and exclude VAT. VAT may or may not be charged during checkout depending on various criteria like your location and quality (individual or business).'
       }
     ]
   },
@@ -86,11 +99,13 @@ const faq: AccordionData = [
     items: [
       {
         title: 'Do you offer custom services?',
-        text: 'Our custom services can vary. Here is a brief overview of what type of service we provided in the past:<ul><li>Feature prioritization on the roadmap.</li><li>Advanced support during Mockoon tools deployment or configuration.</li><li>Help with your API mock creation.</li><li>Online training with live video conference.</li></ul><a href="/custom-services/">Learn more</a> about our custom services.'
+        content:
+          'Our custom services can vary. Here is a brief overview of what type of service we provided in the past:<ul><li>Feature prioritization on the roadmap.</li><li>Advanced support during Mockoon tools deployment or configuration.</li><li>Help with your API mock creation.</li><li>Online training with live video conference.</li></ul><a href="/custom-services/">Learn more</a> about our custom services.'
       },
       {
         title: 'Contracting company',
-        text: 'Our enterprise services are provided by <a href="https://1kb.software" rel="noopener"><strong>1kB SARL-S</strong></a>, a company incorporated in Luxembourg under the no. B257186.<br/>VAT number: LU33209738'
+        content:
+          'Our enterprise services are provided by <a href="https://1kb.software" rel="noopener"><strong>1kB SARL-S</strong></a>, a company incorporated in Luxembourg under the no. B257186.<br/>VAT number: LU33209738'
       }
     ]
   }
diff --git a/pages/public-roadmap.tsx b/pages/public-roadmap.tsx
index 8f4359fb..043fa554 100644
--- a/pages/public-roadmap.tsx
+++ b/pages/public-roadmap.tsx
@@ -12,19 +12,23 @@ const faq: AccordionData = [
     items: [
       {
         title: 'Where is the roadmap?',
-        text: 'Our <a href="https://github.com/orgs/mockoon/projects/9" target="_blank">public roadmap</a> for our open-source projects is hosted on GitHub. Above is a summary of the current state of the roadmap with the most important features, including the non-open-source ones.'
+        content:
+          'Our <a href="https://github.com/orgs/mockoon/projects/9" target="_blank">public roadmap</a> for our open-source projects is hosted on GitHub. Above is a summary of the current state of the roadmap with the most important features, including the non-open-source ones.'
       },
       {
         title: 'Where are the features listed? How can I contribute?',
-        text: 'All our issues for the public open-source projects are on our <a href="https://github.com/mockoon/mockoon/issues" target="_blank">GitHub repository</a>. This is where you can upvote them and contribute to the <a href="https://github.com/mockoon/mockoon/discussions" target="_blank">discussions</a>.'
+        content:
+          'All our issues for the public open-source projects are on our <a href="https://github.com/mockoon/mockoon/issues" target="_blank">GitHub repository</a>. This is where you can upvote them and contribute to the <a href="https://github.com/mockoon/mockoon/discussions" target="_blank">discussions</a>.'
       },
       {
         title: 'What are the different steps of the public roadmap?',
-        text: '<ul><li><span class="fw-bold">Backlog:</span> contains features that are potential candidates due to their number of upvotes. Number of upvotes is only one indicator, and we may add features with less upvotes if they are more relevant to the project. We avoid adding too many features to the backlog as they may never get implemented.</li><li><span class="fw-bold">Analysis/POC:</span> contains the features that we are currently analyzing. They may be transferred to "To do" or be rejected if we realize they are not a good fit.</li><li><span class="fw-bold">To do:</span> planned features and tasks.</li><li><span class="fw-bold">In progress:</span> features currently being worked on by the maintainers or external contributors.</li><li><span class="fw-bold">Done:</span> contains the features and bug fixes merged to the main branch. As Mockoon is mainly a desktop application, releases happen less often than for web applications. The repository\'s main branch is stable but may contain features not yet released.</li></ul>'
+        content:
+          '<ul><li><span class="fw-bold">Backlog:</span> contains features that are potential candidates due to their number of upvotes. Number of upvotes is only one indicator, and we may add features with less upvotes if they are more relevant to the project. We avoid adding too many features to the backlog as they may never get implemented.</li><li><span class="fw-bold">Analysis/POC:</span> contains the features that we are currently analyzing. They may be transferred to "To do" or be rejected if we realize they are not a good fit.</li><li><span class="fw-bold">To do:</span> planned features and tasks.</li><li><span class="fw-bold">In progress:</span> features currently being worked on by the maintainers or external contributors.</li><li><span class="fw-bold">Done:</span> contains the features and bug fixes merged to the main branch. As Mockoon is mainly a desktop application, releases happen less often than for web applications. The repository\'s main branch is stable but may contain features not yet released.</li></ul>'
       },
       {
         title: 'Is everything on the public roadmap?',
-        text: 'No. Some work may not be listed on the roadmap. It is the case for chores like dependencies updates or work happening on non-open-source products (backend, cloud offering, etc.).'
+        content:
+          'No. Some work may not be listed on the roadmap. It is the case for chores like dependencies updates or work happening on non-open-source products (backend, cloud offering, etc.).'
       }
     ]
   }