docs: improvements to API reference intro sections (#9397)

- Improve intro sections of API reference to utilize divided columns
- Improve the content of the intro sections
- Add a new Workflows section to explain the workflows badge and how to use it
- Fixes to headings and add anchor for copying the link to a section
- Fixes responsiveness of intro sections on mobile devices
- Other: fix loading not showing when a sidebar category is opened.

Closes DOCS-932, DOCS-934, DOCS-937

Preview: https://api-reference-v2-git-docs-api-ref-intro-fixes-medusajs.vercel.app/v2/api/store

www/packages/docs-ui/src/components/MDXComponents/index.tsx

@@ -10,7 +10,10 @@ import {
   DetailsSummary,
   DetailsProps,
   ZoomImg,
-  Link,
+  H1,
+  H2,
+  H3,
+  H4,
 } from "@/components"
 import clsx from "clsx"
 import { Text } from "@medusajs/ui"
@@ -27,78 +30,10 @@ export const MDXComponents: MDXComponentsType = {
   Summary: DetailsSummary,
   Card,
   CardList,
-  h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => {
-    return (
-      <h1
-        className={clsx(
-          "h1-docs [&_code]:!h1-docs [&_code]:!font-mono mb-docs_1 text-medusa-fg-base",
-          props.id && "scroll-m-56",
-          className
-        )}
-        {...props}
-      />
-    )
-  },
-  h2: ({
-    className,
-    children,
-    ...props
-  }: React.HTMLAttributes<HTMLHeadingElement>) => {
-    return (
-      <h2
-        className={clsx(
-          "h2-docs [&_code]:!h2-docs [&_code]:!font-mono mb-docs_1 mt-docs_4 text-medusa-fg-base",
-          props.id && "group/h2 scroll-m-56",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {props.id && (
-          <Link
-            href={`#${props.id}`}
-            className="opacity-0 group-hover/h2:opacity-100 transition-opacity ml-docs_0.5 inline-block"
-          >
-            #
-          </Link>
-        )}
-      </h2>
-    )
-  },
-  h3: ({
-    className,
-    children,
-    ...props
-  }: React.HTMLAttributes<HTMLHeadingElement>) => {
-    return (
-      <h3
-        className={clsx(
-          "h3-docs [&_code]:!h3-docs [&_code]:!font-mono mb-docs_0.5 mt-docs_3 text-medusa-fg-base",
-          props.id && "group/h3 scroll-m-56",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {props.id && (
-          <Link
-            href={`#${props.id}`}
-            className="opacity-0 group-hover/h3:opacity-100 transition-opacity ml-docs_0.5 inline-block"
-          >
-            #
-          </Link>
-        )}
-      </h3>
-    )
-  },
-  h4: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => {
-    return (
-      <h4
-        className={clsx("mb-docs_0.5 text-medusa-fg-base text-h4", className)}
-        {...props}
-      />
-    )
-  },
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
   p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => {
     return (
       <p