docs: add cloud plans & pricing page (#13420)

* docs: add cloud plans & pricing page

* fix buttons

* simplify condition

* remove test frontmatter

* design fixes and changes

* styling fixes

* change node version for tests

* fix build error

* fix tests

* fix github pipeline

www/apps/cloud/app/faq/page.mdx

@@ -36,7 +36,7 @@ Yes, your code is hosted on your GitHub repository. You can also export a dump o
 
 ## Can I deploy multiple projects on Cloud?
 
-Yes, if your plan supports multiple projects. Learn more in the [Pricing](https://medusajs.com/pricing/) page.
+Yes, if your plan supports multiple projects. Learn more in the [Plans & Pricing](../pricing/page.mdx) guide.
 
 ---
 

www/apps/cloud/app/organizations/page.mdx

@@ -119,7 +119,7 @@ In this window, you can view the members of the organization, their roles, and t
 
 Based on your organization's plan, you may have a limited number of seats available for members. You can view the number of available seats at the top of the Team tab.
 
-If you need more seats, learn more about [other available plans](https://medusajs.com/pricing).
+If you need more seats, learn more about [other available plans](../pricing/page.mdx) or [purchasing add-on resources](../billing/page.mdx#purchase-add-on-resources).
 
 ![Window showing the organization members in the Team tab with the available seats highlighted](https://res.cloudinary.com/dza7lstvk/image/upload/v1749737803/Cloud/CleanShot_2025-06-12_at_17.16.13_2x_zk8n32.png)
 

www/apps/cloud/app/pricing/content.tsx

@@ -0,0 +1,68 @@
+"use server"
+
+import { sanityClient } from "../../utils/sanity-client"
+import { PricingQueryResult } from "../../utils/types"
+import HeroPricing from "../../components/Pricing/HeroPricing"
+import { notFound } from "next/navigation"
+import FeatureSections from "../../components/Pricing/FeatureSections"
+import { H2, Hr, Loading } from "docs-ui"
+import { cache, Suspense } from "react"
+
+export default async function PricingPage() {
+  if (process.env.NEXT_PUBLIC_ENV === "CI") {
+    return <div>Pricing page is not available in the CI environment.</div>
+  }
+  const data = await loadPricingData()
+
+  const heroPricingData = data.find((item) => item._type === "heroPricing")
+  const featureTableData = data.find((item) => item._type === "featureTable")
+
+  // Ensure both data pieces are present
+  if (
+    !featureTableData?.featureTableFields ||
+    !heroPricingData?.heroPricingFields
+  ) {
+    return notFound()
+  }
+
+  return (
+    <Suspense fallback={<Loading />}>
+      <H2 id="cloud-plans">Cloud Plans</H2>
+      <HeroPricing data={heroPricingData.heroPricingFields} />
+      <Hr />
+      <H2 id="plans-features">Plans Features</H2>
+      <FeatureSections
+        featureSections={featureTableData.featureTableFields.featureSections}
+        columnCount={featureTableData.featureTableFields.columnHeaders.length}
+        columns={featureTableData.featureTableFields.columnHeaders}
+      />
+    </Suspense>
+  )
+}
+
+const loadPricingData = cache(async () => {
+  const data: PricingQueryResult = await sanityClient.fetch(
+    `*[
+      (_type == "featureTable" && _id == "9cb4e359-786a-4cdb-9334-88ad4ce44f05") ||
+      (_type == "heroPricing" && _id == "8d8f33e1-7f18-4b2f-8686-5bc57da697db")
+    ]{
+      _type,
+      _id,
+      // For featureTable
+      "featureTableFields": select(
+        _type == "featureTable" => {
+          columnHeaders,
+          featureSections,
+          links
+        }
+      ),
+      // For heroPricing
+      "heroPricingFields": select(
+        _type == "heroPricing" => {
+          options
+        }
+      )
+    }`
+  )
+  return data
+})

www/apps/cloud/app/pricing/page.mdx

@@ -0,0 +1,15 @@
+---
+generate_toc: true
+---
+
+import Page from "./content"
+
+export const metadata = {
+  title: `Plans & Pricing`,
+}
+
+# {metadata.title}
+
+In this guide, find details about the different Cloud plans and pricing.
+
+<Page />