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/hooks/use-active-on-scroll/index.tsx

@@ -14,12 +14,14 @@ export type UseActiveOnScrollProps = {
   rootElm?: Document | HTMLElement
   enable?: boolean
   useDefaultIfNoActive?: boolean
+  maxLevel?: number
 }
 
 export const useActiveOnScroll = ({
   rootElm,
   enable = true,
   useDefaultIfNoActive = true,
+  maxLevel = 3,
 }: UseActiveOnScrollProps) => {
   const [items, setItems] = useState<ActiveOnScrollItem[]>([])
   const [activeItemId, setActiveItemId] = useState("")
@@ -40,12 +42,23 @@ export const useActiveOnScroll = ({
 
     return document
   }, [rootElm, isBrowser, enable])
+  const querySelector = useMemo(() => {
+    let selector = ""
+    for (let i = 2; i <= maxLevel; i++) {
+      if (i > 2) {
+        selector += `,`
+      }
+      selector += `h${i}`
+    }
+
+    return selector
+  }, [maxLevel])
   const getHeadingsInElm = useCallback(() => {
     if (!isBrowser || !enable) {
       return []
     }
 
-    return root?.querySelectorAll("h2,h3")
+    return root?.querySelectorAll(querySelector)
   }, [isBrowser, pathname, root, enable])
   const setHeadingItems = useCallback(() => {
     if (!enable) {