add how-to sidebar

www/apps/resources/app/admin-components/page.mdx

@@ -1,20 +1,24 @@
 import { ChildDocs } from "docs-ui"
 
 export const metadata = {
-  title: `Admin Components`,
+  title: `Admin Components & Layouts`,
 }
 
 # {metadata.title}
 
-In this section, you'll find examples of implementing common Medusa Admin components and layouts.
+In this section of the documentation, you'll learn how to implement common Medusa Admin components and layouts.
 
-These components are useful to follow the same design conventions as the Medusa Admin, and are build on top of the [Medusa UI package](!ui!).
+These guides are useful to build components and layouts that follow the same design conventions as the Medusa Admin. The components and layouts are built on top of the [Medusa UI package](!ui!).
+
+<Note title="Tip">
 
 Refer to the [Medusa UI documentation](!ui!) for a full list of components.
 
+</Note>
+
 ## Layouts
 
-Use these components to set the layout of your UI route.
+These layout components allow you to set the layout of your [UI routes](!docs!/learn/fundamentals/admin/ui-routes) similar to the layouts used in the Medusa Admin.
 
 <ChildDocs showItems={["Layouts"]} onlyTopLevel={false} hideTitle />
 
@@ -22,6 +26,6 @@ Use these components to set the layout of your UI route.
 
 ## Components
 
-Use these components in your widgets and UI routes.
+These components allow you to use common Medusa Admin components in your custom UI routes and widgets.
 
 <ChildDocs showItems={["Components"]} onlyTopLevel={false} hideTitle />

www/apps/resources/app/deployment/page.mdx

@@ -1,4 +1,4 @@
-import { ChildDocs } from "docs-ui"
+import { CardList, Card } from "docs-ui"
 
 export const metadata = {
   title: `Deployments`,
@@ -32,7 +32,20 @@ With Medusa Cloud, you maintain full customization control as you deploy your ow
 
 To host and maintain Medusa on your own, check out the following guides.
 
-<ChildDocs showItems={["Self-Hosting"]} hideTitle={true} />
+<CardList
+  items={[
+    {
+      title: "General Guide",
+      href: "https://docs.medusajs.com/learn/deployment/general",
+      text: "General steps to deploy Medusa.",
+    },
+    {
+      title: "Railway",
+      href: "/deployment/medusa-application/railway",
+      text: "Deploy Medusa on Railway.",
+    }
+  ]}
+/>
 
 ---
 
@@ -40,4 +53,8 @@ To host and maintain Medusa on your own, check out the following guides.
 
 Learn how to deploy the Next.js Starter Storefront.
 
-<ChildDocs showItems={["Next.js Starter"]} hideTitle={true} />
+<Card
+  title="Vercel"
+  path="/deployment/storefront/vercel"
+  text="Deploy the Next.js Starter Storefront on Vercel."
+/>

www/apps/resources/app/how-to-tutorials/page.mdx

@@ -0,0 +1,25 @@
+import { ChildDocs } from "docs-ui"
+
+export const metadata = {
+  title: `How-to & Tutorials`,
+}
+
+# {metadata.title}
+
+In this section of the documentation, you'll find how-to guides and tutorials that will help you customize the Medusa server and admin. These guides are useful after you've learned Medusa's main concepts in the [Get Started](!docs!/learn) section of the documentation.
+
+You can follow these guides to learn how to customize the Medusa server and admin to fit your business requirements. This section of the documentation also includes deployment guides to help you deploy your Medusa server and admin to different platforms.
+
+## Example Snippets
+
+For a quick access to code snippets of the different concepts you learned about, such as API routes and workflows, refer to the [Examples Snippets](../examples/page.mdx) documentation.
+
+---
+
+<ChildDocs showItems={["How-To Guides", "Tutorials"]} defaultItemsPerRow={2} />
+
+---
+
+## Deployment Guides
+
+Deployment guides are a collection of guides that help you deploy your Medusa server and admin to different platforms. Learn more in the [Deployment Overview](../deployment/page.mdx) documentation.

www/apps/resources/app/medusa-workflows-reference/page.mdx

@@ -20,7 +20,7 @@ Through this reference, you'll learn about the available workflows and steps in
 
 All workflows and steps in this reference are exported by the `@medusajs/medusa/core-flows` package.
 
-<ChildDocs childLevel={2} hideItems={["Overview", "Steps"]} defaultItemsPerRow={2} search={{
+<ChildDocs startChildLevel={2} hideItems={["Overview", "Steps"]} defaultItemsPerRow={2} search={{
   enable: true,
   placeholder: "Search workflows...",
   storageKey: "medusa-workflows-reference",