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/apps/api-reference/components/MDXComponents/H2/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useScrollController, useSidebar } from "docs-ui"
+import { useScrollController, useSidebar, H2 as UiH2 } from "docs-ui"
 import { useEffect, useMemo, useRef, useState } from "react"
 import getSectionId from "../../../utils/get-section-id"
 
@@ -39,9 +39,9 @@ const H2 = ({ children, ...props }: H2Props) => {
   }, [id])
 
   return (
-    <h2 {...props} id={id} ref={headingRef}>
+    <UiH2 {...props} id={id} passRef={headingRef}>
       {children}
-    </h2>
+    </UiH2>
   )
 }
 

www/apps/api-reference/components/Section/Container/index.tsx

@@ -14,9 +14,12 @@ const SectionContainer = forwardRef<HTMLDivElement, SectionContainerProps>(
     ref
   ) {
     return (
-      <div className={clsx("relative pb-7", !noTopPadding && "pt-7")} ref={ref}>
+      <div
+        className={clsx("relative pb-4 md:pb-7", !noTopPadding && "pt-7")}
+        ref={ref}
+      >
         {children}
-        {!noDivider && <SectionDivider className="-left-1.5 lg:!-left-4" />}
+        {!noDivider && <SectionDivider className="-left-1.5 lg:!-left-full" />}
       </div>
     )
   }

www/apps/api-reference/components/Section/index.tsx

@@ -19,6 +19,7 @@ const Section = ({
     rootElm: sectionRef.current || undefined,
     enable: checkActiveOnScroll,
     useDefaultIfNoActive: false,
+    maxLevel: 2,
   })
   const { setActivePath } = useSidebar()
   const router = useRouter()

www/apps/api-reference/components/Tags/index.tsx

@@ -90,6 +90,7 @@ const Tags = () => {
             title: tag.name,
             children: childItems,
             loaded: childItems.length > 0,
+            showLoadingIfEmpty: true,
             onOpen: () => {
               if (location.hash !== tagPathName) {
                 router.push(`#${tagPathName}`, {