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/layouts/main-content.tsx

@@ -7,6 +7,7 @@ import { Bannerv2, MainNav, useIsBrowser } from ".."
 
 export type MainContentLayoutProps = {
   mainWrapperClasses?: string
+  contentClassName?: string
   showBanner?: boolean
   children: React.ReactNode
 }
@@ -15,6 +16,7 @@ export const MainContentLayout = ({
   children,
   mainWrapperClasses,
   showBanner = true,
+  contentClassName,
 }: MainContentLayoutProps) => {
   const { isBrowser } = useIsBrowser()
   const { desktopSidebarOpen } = useSidebar()
@@ -57,7 +59,8 @@ export const MainContentLayout = ({
         <div
           className={clsx(
             "flex justify-center",
-            "pt-docs_4 lg:pt-docs_6 pb-docs_8 lg:pb-docs_4"
+            "pt-docs_4 lg:pt-docs_6 pb-docs_8 lg:pb-docs_4",
+            contentClassName
           )}
         >
           {children}

www/packages/docs-ui/src/layouts/wide.tsx

@@ -14,6 +14,7 @@ export const WideLayout = ({
     <RootLayout
       {...props}
       mainWrapperClasses={clsx(props.mainWrapperClasses, "mx-auto flex")}
+      contentClassName="w-full px-1"
     >
       <main
         className={clsx(