docs: redesign cards (#8671)

* docs: redesign cards * fix build error
2024-08-20 15:48:17 +03:00
parent 48fe819d9e
commit b4d8e265e3
37 changed files with 493 additions and 476 deletions
--- a/www/apps/book/app/not-found.mdx
+++ b/www/apps/book/app/not-found.mdx
@@ -22,26 +22,22 @@ If you think this is a mistake, please [report this issue on GitHub](https://git
    {
      title: "Get Started Docs",
      href: "/",
-      showLinkIcon: false,
-      startIcon: <BookOpen />
+      icon: BookOpen
    },
    {
      title: "Learning Resources",
      href: "!resources!",
-      showLinkIcon: false,
-      startIcon: <AcademicCapSolid />
+      icon: AcademicCapSolid
    },
    {
      title: "Admin API reference",
      href: "!api!/admin",
-      showLinkIcon: false,
-      startIcon: <ComputerDesktopSolid />
+      icon: ComputerDesktopSolid
    },
    {
      title: "Store API reference",
      href: "!api!/store",
-      showLinkIcon: false,
-      startIcon: <BuildingStorefront />
+      icon: BuildingStorefront
    }
  ]}
 />
--- a/www/apps/book/app/page.mdx
+++ b/www/apps/book/app/page.mdx
@@ -57,43 +57,37 @@ Medusa is for ambitious businesses and developers that are limited by traditiona
    title: "Use Case: D2C",
    text: "How Matt Sleeps built a unique D2C experience with Medusa",
    href: "https://medusajs.com/blog/matt-sleeps/",
-    startIcon: <FlyingBox />,
-    isExternal: true
+    icon: FlyingBox,
  },
  {
    title: "Use Case: OMS",
    text: "How Makro Pro Built an OMS with Medusa",
    href: "https://medusajs.com/blog/makro-pro/",
-    startIcon: <CheckCircleSolid />,
-    isExternal: true
+    icon: CheckCircleSolid,
  },
  {
    title: "Use Case: Marketplace",
    text: "How Foraged built a custom marketplace with Medusa",
    href: "https://medusajs.com/blog/foraged/",
-    startIcon: <BuildingStorefront />,
-    isExternal: true
+    icon: BuildingStorefront,
  },
  {
    title: "Use Case: POS",
    text: "How Tekla built a global webshop and a POS system with Medusa",
    href: "https://medusajs.com/blog/tekla-pos/",
-    startIcon: <ComputerDesktop />,
-    isExternal: true
+    icon: ComputerDesktop,
  },
  {
    title: "Use Case: B2B",
    text: "How Visionary built B2B commerce with Medusa",
    href: "https://medusajs.com/blog/visionary/",
-    startIcon: <BuildingsSolid />,
-    isExternal: true
+    icon: BuildingsSolid,
  },
  {
    title: "Use Case: Platform",
    text: "How Catalog built a B2B platform for SMBs with Medusa",
    href: "https://medusajs.com/blog/catalog/",
-    startIcon: <BuildingsSolid />,
-    isExternal: true
+    icon: BuildingsSolid,
  }
 ]} itemsPerRow={2} />

--- a/www/apps/resources/app/not-found.mdx
+++ b/www/apps/resources/app/not-found.mdx
@@ -22,26 +22,22 @@ If you think this is a mistake, please [report this issue on GitHub](https://git
    {
      title: "Get Started Docs",
      href: "/",
-      showLinkIcon: false,
-      startIcon: <BookOpen />
+      icon: BookOpen
    },
    {
      title: "Learning Resources",
      href: "!resources!",
-      showLinkIcon: false,
-      startIcon: <AcademicCapSolid />
+      icon: AcademicCapSolid
    },
    {
      title: "Admin API reference",
      href: "!api!/admin",
-      showLinkIcon: false,
-      startIcon: <ComputerDesktopSolid />
+      icon: ComputerDesktopSolid
    },
    {
      title: "Store API reference",
      href: "!api!/store",
-      showLinkIcon: false,
-      startIcon: <BuildingStorefront />
+      icon: BuildingStorefront
    }
  ]}
 />
--- a/www/apps/resources/app/page.mdx
+++ b/www/apps/resources/app/page.mdx
@@ -37,40 +37,34 @@ Follow the [Medusa v2 Docs](!docs!) to become an advanced Medusa developer.

 <CardList items={[
  {
-    startIcon: <TagSolid />,
+    icon: TagSolid,
    title: "Product Module",
    href: "/commerce-modules/product",
-    showLinkIcon: false
  },
  {
-    startIcon: <CheckCircleSolid />,
+    icon: CheckCircleSolid,
    title: "Order Module",
    href: "/commerce-modules/order",
-    showLinkIcon: false
  },
  {
-    startIcon: <ShoppingCartSolid />,
+    icon: ShoppingCartSolid,
    title: "Cart Module",
    href: "/commerce-modules/product",
-    showLinkIcon: false
  },
  {
-    startIcon: <CurrencyDollarSolid />,
+    icon: CurrencyDollarSolid,
    title: "Pricing Module",
    href: "/commerce-modules/pricing",
-    showLinkIcon: false
  },
  {
-    startIcon: <UsersSolid />,
+    icon: UsersSolid,
    title: "Customer Module",
    href: "/commerce-modules/customer",
-    showLinkIcon: false
  },
  {
-    startIcon: <PuzzleSolid />,
-    title: "More Modules",
-    href: "/commerce-modules",
-    showLinkIcon: false
+    type: "filler",
+    text: "Find more modules for your commerce application.",
+    href: "/commerce-modules"
  }
 ]} />

@@ -80,28 +74,25 @@ Follow the [Medusa v2 Docs](!docs!) to become an advanced Medusa developer.

 <CardList items={[
  {
-    startIcon: <Stripe className="[&>path]:fill-medusa-fg-subtle" />,
+    icon: Stripe,
    title: "Stripe",
+    iconClassName: "[&_path]:fill-medusa-fg-subtle",
    href: "/commerce-modules/payment/payment-provider/stripe",
-    showLinkIcon: false
  },
  {
-    startIcon: <EnvelopeSolid />,
+    icon: EnvelopeSolid,
    title: "SendGrid",
    href: "/architectural-modules/notification/sendgrid",
-    showLinkIcon: false
  },
  {
-    startIcon: <DocumentTextSolid />,
+    icon: DocumentTextSolid,
    title: "S3",
    href: "/architectural-modules/file/s3",
-    showLinkIcon: false
  },
  {
-    startIcon: <SquaresPlusSolid />,
-    title: "More Integrations",
-    href: "/integrations",
-    showLinkIcon: false
+    type: "filler",
+    text: "Integrate other third-party services to your application.",
+    href: "/integrations"
  }
 ]} />

@@ -111,40 +102,24 @@ Follow the [Medusa v2 Docs](!docs!) to become an advanced Medusa developer.

 <CardList items={[
  {
-    startIcon: <BuildingStorefront />,
+    icon: BuildingStorefront,
    title: "Marketplace",
    href: "/recipes/marketplace",
-    showLinkIcon: false
  },
  {
-    startIcon: <CreditCardSolid />,
+    icon: CreditCardSolid,
    title: "Subscriptions",
    href: "/recipes/subscriptions",
-    showLinkIcon: false
  },
  {
-    startIcon: <PhotoSolid />,
+    icon: PhotoSolid,
    title: "Digital Products",
    href: "/recipes/digital-products",
-    showLinkIcon: false
  },
  {
-    startIcon: <ShoppingCartSolid />,
-    title: "Ecommerce",
-    href: "/recipes/ecommerce",
-    showLinkIcon: false
-  },
-  {
-    startIcon: <ClockSolid />,
-    title: "Commerce Automation",
-    href: "/recipes/commerce-automation",
-    showLinkIcon: false
-  },
-  {
-    startIcon: <BuildingsSolid />,
-    title: "B2B",
-    href: "/recipes/b2b",
-    showLinkIcon: false
+    type: "filler",
+    text: "Find more recipes to implement your use case.",
+    href: "/recipes"
  }
 ]} />

@@ -154,15 +129,14 @@ Follow the [Medusa v2 Docs](!docs!) to become an advanced Medusa developer.

 <CardList itemsPerRow={2} items={[
  {
-    startIcon: <CommandLineSolid />,
+    icon: CommandLineSolid,
    title: "Medusa CLI",
    href: "/medusa-cli",
-    showLinkIcon: false
  },
  {
-    startIcon: <NextJs />,
+    icon: NextJs,
+    iconClassName: "[&_path]:fill-medusa-fg-subtle",
    title: "Next.js Starter",
    href: "/nextjs-starter",
-    showLinkIcon: false
  },
 ]} />
--- a/www/apps/resources/app/recipes/b2b/page.mdx
+++ b/www/apps/resources/app/recipes/b2b/page.mdx
@@ -41,8 +41,7 @@ You can create a sales channel through the Medusa Admin or Admin REST APIs.
    href: "#",
    title: "Option 1: Use Medusa Admin",
    text: "Create the sales channel using the Medusa Admin.",
-    startIcon: <UsersSolid />,
-    showLinkIcon: false,
+    icon: UsersSolid,
    badge: {
      variant: "blue",
      children: "Guide Soon"
@@ -52,8 +51,7 @@ You can create a sales channel through the Medusa Admin or Admin REST APIs.
    href: "!api!/api/admin#sales-channels_postsaleschannels",
    title: "Option 2: Using the REST APIs",
    text: "Create the sales channel using the REST APIs.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -79,8 +77,7 @@ You can create a publishable API key through the Medusa Admin or the Admin REST
    href: "#",
    title: "Option 1: Use Medusa Admin",
    text: "Create the publishable API key using the Medusa Admin.",
-    startIcon: <UsersSolid />,
-    showLinkIcon: false,
+    icon: UsersSolid,
    badge: {
      variant: "blue",
      children: "Guide Soon"
@@ -90,8 +87,7 @@ You can create a publishable API key through the Medusa Admin or the Admin REST
    href: "!api!/api/admin#api-keys_postapikeys",
    title: "Option 2: Using the REST APIs",
    text: "Create the publishable API key using the REST APIs.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -104,8 +100,7 @@ You can create a publishable API key through the Medusa Admin or the Admin REST
    href: "#",
    title: "Option 1: Use Medusa Admin",
    text: "Associate the publishable API key with the B2B sales channel using the Medusa Admin.",
-    startIcon: <UsersSolid />,
-    showLinkIcon: false,
+    icon: UsersSolid,
    badge: {
      variant: "blue",
      children: "Guide Soon"
@@ -115,8 +110,7 @@ You can create a publishable API key through the Medusa Admin or the Admin REST
    href: "#",
    title: "Option 2: Using the REST APIs",
    text: "Associate the publishable API key with the B2B sales channel using the REST APIs.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -135,8 +129,7 @@ You can create new products or add existing ones to the B2B sales channel using
    href: "#",
    title: "Using Medusa Admin",
    text: "Create products using the Medusa Admin.",
-    startIcon: <UsersSolid />,
-    showLinkIcon: false,
+    icon: UsersSolid,
    badge: {
      variant: "blue",
      children: "Guide Soon"
@@ -146,8 +139,7 @@ You can create new products or add existing ones to the B2B sales channel using
    href: "!api!/api/admin#products_postproducts",
    title: "Using REST APIs",
    text: "Create products using the REST APIs.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -160,8 +152,7 @@ You can create new products or add existing ones to the B2B sales channel using
    href: "#",
    title: "Using Medusa Admin",
    text: "Add the products to the B2B sales channel using the Medusa Admin.",
-    startIcon: <UsersSolid />,
-    showLinkIcon: false,
+    icon: UsersSolid,
    badge: {
      variant: "blue",
      children: "Guide Soon"
@@ -171,8 +162,7 @@ You can create new products or add existing ones to the B2B sales channel using
    href: "!api!/api/admin#sales-channels_postsaleschannelsidproductsbatchadd",
    title: "Using REST APIs",
    text: "Add the products to the B2B sales channel using the REST APIs.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -197,15 +187,13 @@ Module Relationships is coming soon.
    href: "!docs!/basics/modules-and-services",
    title: "Create Module",
    text: "Learn how to create a module in Medusa.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/data-models",
    title: "Create Data Models",
    text: "Learn how to create data models.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -213,8 +201,7 @@ Module Relationships is coming soon.
  href="!docs!/advanced-development/modules/module-relationships"
  title="Create Module Relationships"
  text="Learn how to create a relationship between modules."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
  className="mt-1"
 /> */}

@@ -522,8 +509,7 @@ You can do that through the Medusa Admin or Admin REST APIs.
    href: "#",
    title: "Option 1: Use Medusa Admin",
    text: "Create the customers using the Medusa Admin.",
-    startIcon: <UsersSolid />,
-    showLinkIcon: false,
+    icon: UsersSolid,
    badge: {
      variant: "blue",
      children: "Guide Soon"
@@ -533,8 +519,7 @@ You can do that through the Medusa Admin or Admin REST APIs.
    href: "!api!/api/admin#customers_postcustomers",
    title: "Option 2: Using the REST APIs",
    text: "Create the customers using the REST APIs.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -547,8 +532,7 @@ You can do that through the Medusa Admin or Admin REST APIs.
    href: "#",
    title: "Option 1: Use Medusa Admin",
    text: "Assign the customers to the B2B customer group using the Medusa Admin.",
-    startIcon: <UsersSolid />,
-    showLinkIcon: false,
+    icon: UsersSolid,
    badge: {
      variant: "blue",
      children: "Guide Soon"
@@ -558,8 +542,7 @@ You can do that through the Medusa Admin or Admin REST APIs.
    href: "!api!/api/admin#customer-groups_postcustomergroupsidcustomersbatch",
    title: "Option 2: Using the REST APIs",
    text: "Assign the customers to the B2B customer group using the REST APIs.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -578,8 +561,7 @@ You can create a price list using the Medusa Admin or the Admin REST APIs. Make
    href: "#",
    title: "Using Medusa Admin",
    text: "Create the price list using the Medusa Admin.",
-    startIcon: <UsersSolid />,
-    showLinkIcon: false,
+    icon: UsersSolid,
    badge: {
      variant: "blue",
      children: "Guide Soon"
@@ -589,8 +571,7 @@ You can create a price list using the Medusa Admin or the Admin REST APIs. Make
    href: "!api!/api/admin#price-lists_postpricelists",
    title: "Using REST APIs",
    text: "Create the price list using the REST APIs.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -606,8 +587,7 @@ This provides more granular control of your B2B sales and allows you to build fe
  href="!docs!/basics/data-models"
  title="Create a Data Model"
  text="Learn how to create a custom data model in a module."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 ---
@@ -622,8 +602,7 @@ The API route can check if the customer has any group with an associated company
  href="!docs!/basics/api-routes"
  title="Create an API Route"
  text="Learn how to create an API Route in Medusa."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 {/* <Details summaryContent="Example">
@@ -759,22 +738,19 @@ The Medusa Admin plugin can be extended to add widgets, new pages, and setting p
    href: "!docs!/advanced-development/admin/widgets",
    title: "Create Admin Widget",
    text: "Learn how to add widgets into existing admin pages.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/advanced-development/admin/ui-routes",
    title: "Create Admin UI Routes",
    text: "Learn how to add new pages to your Medusa Admin.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/advanced-development/admin/setting-pages",
    title: "Create Admin Setting Page",
    text: "Learn how to add new page to the Medusa Admin settings.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -791,15 +767,13 @@ Use the publishable API key you associated with your B2B sales channel in the st
    href: "/nextjs-starter",
    title: "Next.js Storefront",
    text: "Learn how to install and customize the Next.js storefront.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "/storefront-development",
    title: "Storefront Development",
    text: "Find guides for your storefront development.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -807,7 +781,6 @@ Use the publishable API key you associated with your B2B sales channel in the st
  href="!api!/api/store#publishable-api-key"
  title="Use Publishable API Keys"
  text="Learn how to use the publishable API key in client requests."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
  className="mt-1"
 />
--- a/www/apps/resources/app/recipes/commerce-automation/page.mdx
+++ b/www/apps/resources/app/recipes/commerce-automation/page.mdx
@@ -45,15 +45,13 @@ The `inventory-item.updated` event is currently not emitted.
    href: "!docs!/basics/modules-and-services",
    title: "Create a Module",
    text: "Learn how to create a module in Medusa.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/data-models",
    title: "Create a Data Model",
    text: "Learn how to create a data model.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -62,15 +60,13 @@ The `inventory-item.updated` event is currently not emitted.
    href: "!docs!/basics/api-routes",
    title: "Create an API Route",
    text: "Learn how to create an API route in Medusa.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/events-and-subscribers",
    title: "Create a Subscriber",
    text: "Learn how to create a subscriber in Medusa.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} className="mt-1" />

@@ -419,15 +415,13 @@ Medusa also provides Notification Module Providers that integrate with third-par
    href: "/architectural-modules/notification",
    title: "Notification Module",
    text: "Learn about the Notification Module.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/events-and-subscribers",
    title: "Create Subscriber",
    text: "Learn how to create a subscriber to handle events.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -446,8 +440,7 @@ To implement that:
  href="!docs!/basics/scheduled-jobs"
  title="Create a Scheduled Job"
  text="Learn how to create a scheduled job in Medusa."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 <Details summaryContent="Example: Synchronizing products with a third-party service">
@@ -673,8 +666,7 @@ The `order.placed` event is currently not emitted.
  href="!docs!/basics/events-and-subscribers"
  title="Create a Subscriber"
  text="Learn how to create a subscriber in Medusa."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 {/* <CardList items={[
@@ -682,15 +674,13 @@ The `order.placed` event is currently not emitted.
    href: "!docs!/basics/events-and-subscribers",
    title: "Create a Subscriber",
    text: "Learn how to create a subscriber in Medusa.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "/events-reference",
    title: "Events Reference",
    text: "Check out triggered events by each commerce module.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} /> */}

@@ -711,15 +701,13 @@ Medusa's commerce features are geared towards automating RMA flows and ensuring
    href: "/commerce-modules/orders",
    title: "Order Module",
    text: "Learn about the Order Module and its features.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/events-and-subscribers",
    title: "Create a Subscriber",
    text: "Learn how to create a subscriber in Medusa.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -750,22 +738,19 @@ The `order.placed` event is currently not emitted.
    href: "/commerce-modules/customer",
    title: "Customer Module",
    text: "Learn about the Customer Module and its features.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "/commerce-modules/pricing",
    title: "Pricing Module",
    text: "Learn about the Pricing Module and its features.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/events-and-subscribers",
    title: "Create a Subscriber",
    text: "Learn how to create a subscriber in Medusa.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -867,15 +852,13 @@ You can also create a scheduled job that checks whether the number of new produc
    href: "!docs!/basics/events-and-subscribers",
    title: "Create a Subscriber",
    text: "Learn how to create a subscriber in Medusa.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/scheduled-jobs",
    title: "Scheduled Jobs",
    text: "Learn how to create a scheduled job in Medusa.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

--- a/www/apps/resources/app/recipes/digital-products/examples/standard/page.mdx
+++ b/www/apps/resources/app/recipes/digital-products/examples/standard/page.mdx
@@ -29,15 +29,13 @@ By following this example, you’ll have a commerce application with the followi
    href: "https://github.com/medusajs/examples/tree/main/digital-product",
    title: "Digital Products Example Repository",
    text: "Find the full code for this recipe example in this repository.",
-    startIcon: <Github />,
-    showLinkIcon: false
+    icon: Github,
  },
  {
    href: "https://res.cloudinary.com/dza7lstvk/raw/upload/v1721654620/OpenApi/Digital_Products_Postman_vjr3jg.yml",
    title: "OpenApi Specs for Postman",
    text: "Imported this OpenApi Specs file into tools like Postman.",
-    startIcon: <PlaySolid />,
-    showLinkIcon: false
+    icon: PlaySolid,
  },
 ]} />

--- a/www/apps/resources/app/recipes/digital-products/page.mdx
+++ b/www/apps/resources/app/recipes/digital-products/page.mdx
@@ -30,15 +30,13 @@ During development, you can use the Local File Module Provider, which is install
    href: "/architectural-modules/file",
    title: "File Module Providers",
    text: "Check out available file module providers.",
-    startIcon: <PuzzleSolid />,
-    showLinkIcon: false
+    icon: PuzzleSolid,
  },
  {
    href: "/references/file-provider-module",
    title: "Create a File Module Provider",
    text: "Learn how to create a file module provider.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -54,8 +52,7 @@ The module will hold your custom data models and the service implementing digita
  href="!docs!/basics/modules-and-services"
  title="How to Create a Module"
  text="Learn how to create a module."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 ### Create Custom Data Model
@@ -69,15 +66,13 @@ Then, you can link your custom data model to data models from other modules. For
    href: "!docs!/basics/data-models",
    title: "How to Create a Data Model",
    text: "Learn how to create a data model.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/advanced-development/modules/module-links",
    title: "Module Links",
    text: "Learn how to link data models of different modules.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -91,8 +86,7 @@ Medusa facilitates implementing data-management features using the service facto
  href="!docs!/advanced-development/modules/service-factory"
  title="Service Factory"
  text="Learn about the service factory and how to use it."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 ---
@@ -107,8 +101,7 @@ You can create custom API routes that allow merchants to list and create digital
  href="!docs!/basics/api-routes"
  title="API Routes"
  text="Learn how to create an API route."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 ---
@@ -123,8 +116,7 @@ Create workflows to implement these flows, then utilize these workflows in other
  href="!docs!/basics/workflows"
  title="Workflows"
  text="Learn how to create a workflow."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 ---
@@ -140,15 +132,13 @@ Use the remote link to create a link between two records, and use the remote que
    href: "!docs!/advanced-development/modules/remote-link",
    title: "How to Use the Remote Link",
    text: "Learn how to link data models of different modules.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/advanced-development/modules/remote-query",
    title: "How to Use the Remote Query",
    text: "Learn how to fetch data across modules with remote query.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -165,15 +155,13 @@ In your customizations, you send requests to the API routes you created to creat
    href: "!docs!/advanced-development/admin/widgets",
    title: "Create a Widget",
    text: "Learn how to create a widget in the Medusa Admin.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/advanced-development/admin/ui-routes",
    title: "Create UI Route",
    text: "Learn how to create a UI route in the Medusa Admin.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -195,8 +183,7 @@ Fulfillment providers are under development.
  href="/commerce-modules/fulfillment"
  title="Fulfillment Module"
  text="Learn about the Fulfillment Module and its providers."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 ---
@@ -214,14 +201,12 @@ Alternatively, you can build the storefront with your preferred tech stack.
    href: "/nextjs-starter",
    title: "Next.js Starter",
    text: "Learn how to install and use the Next.js Starter storefront.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "/storefront-development",
    title: "Storefront Guides",
    text: "Learn how to build a storefront for your Medusa application.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />
--- a/www/apps/resources/app/recipes/ecommerce/page.mdx
+++ b/www/apps/resources/app/recipes/ecommerce/page.mdx
@@ -52,8 +52,7 @@ For example, you can integrate Stripe for payment, or SendGrid for notifications
  href="/integrations"
  title="Integrations"
  text="Check out available integrations for your Medusa application."
-  startIcon={<PuzzleSolid />}
-  showLinkIcon={false}
+  icon={PuzzleSolid}
 />

 ---
@@ -66,8 +65,7 @@ Our documentation has step-by-step guides to deploy your Medusa application, Med
  href="/deployment"
  title="Deployment Guides"
  text="Learn how to deploy the Medusa application, Medusa Admin, and Next.js starter storefront."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 ---
--- a/www/apps/resources/app/recipes/integrate-ecommerce-stack/page.mdx
+++ b/www/apps/resources/app/recipes/integrate-ecommerce-stack/page.mdx
@@ -31,8 +31,7 @@ Then, resolve the module's main service in other resources, such as API routes o
  href="!docs!/basics/modules-and-services"
  title="Create a Module"
  text="Learn how to create a module in Medusa."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 <Details summaryContent="Example: Create a module integrating an ERP system">
@@ -154,8 +153,7 @@ Workflows guarantee data consistency through their compensation feature. You can
  href="!docs!/basics/workflows"
  title="Workflows"
  text="Learn more about Workflows and how to create them."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 <Details summaryContent="Example: Create products across systems with workflows">
@@ -300,8 +298,7 @@ For example, suppose an administrator changes the product data in the ERP system
  href="!docs!/basics/api-routes"
  title="Create an API Route"
  text="Learn how to create an API Route in Medusa."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 <Details summaryContent="Example: Create a webhook listener for ERP changes">
--- a/www/apps/resources/app/recipes/marketplace/examples/vendors/page.mdx
+++ b/www/apps/resources/app/recipes/marketplace/examples/vendors/page.mdx
@@ -28,15 +28,13 @@ By following this example, you’ll have a marketplace with the following featur
    href: "https://github.com/medusajs/examples/tree/main/marketplace",
    title: "Marketplace Example Repository",
    text: "Find the full code for this recipe example in this repository.",
-    startIcon: <Github />,
-    showLinkIcon: false
+    icon: Github,
  },
  {
    href: "https://res.cloudinary.com/dza7lstvk/raw/upload/v1720603521/OpenApi/Marketplace_OpenApi_n458oh.yml",
    title: "OpenApi Specs for Postman",
    text: "Imported this OpenApi Specs file into tools like Postman.",
-    startIcon: <PlaySolid />,
-    showLinkIcon: false
+    icon: PlaySolid,
  },
 ]} />

--- a/www/apps/resources/app/recipes/marketplace/page.mdx
+++ b/www/apps/resources/app/recipes/marketplace/page.mdx
@@ -33,15 +33,13 @@ You can create a marketplace module that implements data models for vendors, the
    href: "!docs!/basics/modules-and-services",
    title: "Create a Module",
    text: "Learn how to create a module.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/data-models",
    title: "Create Data Models",
    text: "Create data models in the module.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -57,8 +55,7 @@ For example, if you defined a vendor data model in a marketplace module, you can
  href="!docs!/advanced-development/modules/module-links"
  title="Define a Module Link"
  text="Learn how to define a module link."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 ---
@@ -73,8 +70,7 @@ Then, you guard custom API routes to only allow authenticated vendor admins.
  href="/commerce-modules/auth/create-actor-type"
  title="Create an Actor Type"
  text="Learn how to create an actor type and authenticate it."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 ---
@@ -88,15 +84,13 @@ If you provide vendor or sellers with custom features, or a different way of man
    href: "!docs!/basics/api-routes",
    title: "Create API Routes",
    text: "Learn how to create an API Route in Medusa.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/advanced-development/api-routes/protected-routes",
    title: "Protect Routes",
    text: "Learn how to guard routes to allow authenticated users only.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -112,8 +106,7 @@ If your flow requires different steps, such as creating a parent order then crea
  href="!docs!/basics/workflows"
  title="Create a Workflow"
  text="Learn how to create a workflow in Medusa."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 ---
@@ -129,15 +122,13 @@ You can also create a custom storefront from scratch.
    href: "/nextjs-starter",
    title: "Next.js Storefront",
    text: "Learn how to install and customize the Next.js storefront.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "/storefront-development",
    title: "Storefront Development",
    text: "Find useful guides for creating a custom storefront.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

--- a/www/apps/resources/app/recipes/multi-region-store/page.mdx
+++ b/www/apps/resources/app/recipes/multi-region-store/page.mdx
@@ -38,8 +38,7 @@ During checkout, the taxes are calculated based on the customer's region, tax co
    href: "#",
    title: "Manage Taxes in Medusa Admin",
    text: "Manage taxes in Medusa Admin.",
-    startIcon: <UsersSolid />,
-    showLinkIcon: false,
+    icon: UsersSolid,
    badge: {
      variant: "blue",
      children: "Guide Soon"
@@ -49,8 +48,7 @@ During checkout, the taxes are calculated based on the customer's region, tax co
    href: "!api!/admin#tax-regions_posttaxregions",
    title: "Manage Taxes Using Admin APIs",
    text: "Manage tax settings using the Admin APIs.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -58,8 +56,7 @@ During checkout, the taxes are calculated based on the customer's region, tax co
  href="/references/tax/provider"
  title="Create Tax Provider"
  text="Learn how to create a tax provider."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
  className="mt-1"
 />

@@ -77,8 +74,7 @@ Medusa provides official module providers for payment and fulfillment. You can a
    href: "#",
    title: "Manage Providers in Medusa Admin",
    text: "Learn how to manage providers in Medusa Admin.",
-    startIcon: <UsersSolid />,
-    showLinkIcon: false,
+    icon: UsersSolid,
    badge: {
      variant: "blue",
      children: "Guide Soon"
@@ -88,8 +84,7 @@ Medusa provides official module providers for payment and fulfillment. You can a
    href: "/integrations",
    title: "Integrations",
    text: "Check out available integrations, including payment module providers.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -106,8 +101,7 @@ Using the tax-inclusive feature, merchants can specify prices including taxes pe
    href: "#",
    title: "Setting Product Prices in Medusa Admin",
    text: "Learn how to set a product prices in Medusa Admin.",
-    startIcon: <UsersSolid />,
-    showLinkIcon: false,
+    icon: UsersSolid,
    badge: {
      variant: "blue",
      children: "Guide Soon"
@@ -117,8 +111,7 @@ Using the tax-inclusive feature, merchants can specify prices including taxes pe
    href: "/storefront-development/products/price",
    title: "Display Product Price in Storefront",
    text: "Learn how to display the correct product price in a storefront.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false,
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -137,8 +130,7 @@ A multi-regional setup lets merchants manage their inventory through Medusa acro
    href: "#",
    title: "Manage Stock Locations",
    text: "Learn how to manage stock locations in the Medusa Admin.",
-    startIcon: <UsersSolid />,
-    showLinkIcon: false,
+    icon: UsersSolid,
    badge: {
      variant: "blue",
      children: "Guide Soon"
@@ -148,8 +140,7 @@ A multi-regional setup lets merchants manage their inventory through Medusa acro
    href: "#",
    title: "Manage Inventory",
    text: "Learn how to manage inventory in the Medusa Admin.",
-    startIcon: <UsersSolid />,
-    showLinkIcon: false,
+    icon: UsersSolid,
    badge: {
      variant: "blue",
      children: "Guide Soon"
@@ -169,6 +160,5 @@ To integrate a third-party system, create a custom module whose main service con
  href="!docs!/basics/modules-and-services"
  title="Create a Module"
  text="Learn how to create a module in Medusa."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />
--- a/www/apps/resources/app/recipes/omnichannel/page.mdx
+++ b/www/apps/resources/app/recipes/omnichannel/page.mdx
@@ -29,8 +29,7 @@ Medusa's commerce features are available as REST APIs that storefronts can acces
  href="!api!/store"
  title="Store REST APIs"
  text="Check out available Store REST APIs in Medusa."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 ---
@@ -50,15 +49,13 @@ Another channel that attracts customer sales is social media. You can create a c
    href: "/commerce-modules/sales-channels",
    title: "Sales Channels",
    text: "Learn about the Sales Channel Module.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/modules-and-services",
    title: "Create a Module",
    text: "Learn how to create a module.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -79,14 +76,12 @@ Medusa’s architecture also makes it easier to integrate any third-party servic
    href: "!docs!/basics/modules-and-services",
    title: "Create a Module",
    text: "Learn how to create a module.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/api-routes",
    title: "Create an API Route",
    text: "Learn how to create an API route.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />
--- a/www/apps/resources/app/recipes/oms/page.mdx
+++ b/www/apps/resources/app/recipes/oms/page.mdx
@@ -40,22 +40,19 @@ For example, you can support importing orders into Medusa through a custom API R
    href: "!api!/store#carts",
    title: "Store REST APIs",
    text: "Learn how to use the Store REST APIs to create an order.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/api-routes",
    title: "Create API Route",
    text: "Learn how to create a custom API Route.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/scheduled-jobs",
    title: "Create Scheduled Jobs",
    text: "Learn how to create a scheduled job.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  }
 ]} />

@@ -82,15 +79,13 @@ Emitting of event `order.fulfillment_created` isn't implemented yet.
    href: "/references/fulfillment/provider",
    title: "Create a Fulfillment Module Provider",
    text: "Learn how to create a fulfillment provider in Medusa.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/events-and-subscribers",
    title: "Create a Subscriber",
    text: "Learn about create a subscriber",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  }
 ]} />

@@ -113,15 +108,13 @@ Emitting of event `order.payment_captured` isn't implemented yet.
    href: "/references/payment/provider",
    title: "Create a Payment Module Provider",
    text: "Learn how to create a payment module provider.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/events-and-subscribers",
    title: "Create a Subscriber",
    text: "Learn about create a subscriber",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  }
 ]} />

@@ -138,15 +131,13 @@ When an order is placed, the item's quantity is reserved from the stock location
    href: "/commerce-modules/inventory",
    title: "Inventory Module",
    text: "Learn about the Inventory Module's concepts and features.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "/commerce-modules/stock-location",
    title: "Stock Location Module",
    text: "Learn about the Stock Location Module's concepts and features.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  }
 ]} />

@@ -154,8 +145,7 @@ When an order is placed, the item's quantity is reserved from the stock location
  href="/commerce-modules/sales-channel"
  title="Sales Channel Module"
  text="Learn about the Sales Channel Module's concepts and features."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
  className="mt-1"
 />

@@ -186,14 +176,12 @@ Emitting of event `order.return_requested` isn't implemented yet.
    href: "/commerce-modules/order/order-change",
    title: "Order Changes",
    text: "Learn about how to use order changes.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/events-and-subscribers",
    title: "Create a Subscriber",
    text: "Learn about create a subscriber",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  }
 ]} />
--- a/www/apps/resources/app/recipes/personalized-products/page.mdx
+++ b/www/apps/resources/app/recipes/personalized-products/page.mdx
@@ -50,15 +50,13 @@ In more complex cases, you can create a custom module that stores and manages th
    href: "!docs!/basics/modules-and-services",
    title: "Create a Module",
    text: "Learn how to create a module.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/data-models",
    title: "Create a Data Model",
    text: "Learn how to create a data model.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  }
 ]} />

@@ -77,15 +75,13 @@ Medusa provides a Next.js Starter storefront with basic ecommerce functionalitie
    href: "/nextjs-starter",
    title: "Next.js Starter",
    text: "Learn about the Next.js Starter and how to install it.",
-    startIcon: <NextJs />,
-    showLinkIcon: false
+    icon: NextJs,
  },
  {
    href: "/storefront-development",
    title: "Storefront Development",
    text: "Find guides for your storefront development.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -110,15 +106,13 @@ The `order.placed` event is currently not emitted.
    href: "!docs!/basics/api-routes",
    title: "Create API Route",
    text: "Learn how to create an API route.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/events-and-subscribers",
    title: "Create a Subscriber",
    text: "Learn how to create a subscriber.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -134,6 +128,5 @@ The Fulfillment Module registers your fulfillment module provider to use it to f
  href="/references/fulfillment/provider"
  title="Create a Fulfillment Service"
  text="Learn how to create a fulfillment provider in Medusa."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />
--- a/www/apps/resources/app/recipes/pos/page.mdx
+++ b/www/apps/resources/app/recipes/pos/page.mdx
@@ -35,8 +35,7 @@ Medusa's modular architecture removes any restrictions you may have while making
  href="!api!/admin"
  title="Admin REST APIs"
  text="Check out available Admin REST APIs in Medusa."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 ---
@@ -58,15 +57,13 @@ To search through product variants by their barcode, create a custom API Route a
      href: "/commerce-modules/product",
      title: "Product Module",
      text: "Learn about the Product Module.",
-      startIcon: <AcademicCapSolid />,
-      showLinkIcon: false,
+      icon: AcademicCapSolid,
    },
    {
      href: "!docs!/basics/api-routes",
      title: "Create API Route",
      text: "Learn how to create an API Route.",
-      startIcon: <AcademicCapSolid />,
-      showLinkIcon: false,
+      icon: AcademicCapSolid,
    },
  ]}
 />
@@ -128,22 +125,19 @@ This also opens the door for other business opportunities, such as an endless ai
      href: "/commerce-modules/inventory",
      title: "Inventory Module",
      text: "Learn about the Inventory Module.",
-      startIcon: <AcademicCapSolid />,
-      showLinkIcon: false,
+      icon: AcademicCapSolid,
    },
    {
      href: "/commerce-modules/stock-location",
      title: "Stock Location Module",
      text: "Learn about the Stock Location Module.",
-      startIcon: <AcademicCapSolid />,
-      showLinkIcon: false,
+      icon: AcademicCapSolid,
    },
    {
      href: "/commerce-modules/sales-channel",
      title: "Sales Channel Module",
      text: "Learn about the Sales Channel Module.",
-      startIcon: <AcademicCapSolid />,
-      showLinkIcon: false,
+      icon: AcademicCapSolid,
    },
  ]}
 />
@@ -164,22 +158,19 @@ You can also create custom modules to provide features for a better customer exp
      href: "/commerce-modules/customer",
      title: "Customer Module",
      text: "Learn about the Customer Module.",
-      startIcon: <AcademicCapSolid />,
-      showLinkIcon: false,
+      icon: AcademicCapSolid,
    },
    {
      href: "/commerce-modules/promotion",
      title: "Promotion Module",
      text: "Learn about the Promotion Module.",
-      startIcon: <AcademicCapSolid />,
-      showLinkIcon: false,
+      icon: AcademicCapSolid,
    },
    {
      href: "!docs!/basics/modules-and-services",
      title: "Create a Module",
      text: "Learn how to create a module.",
-      startIcon: <AcademicCapSolid />,
-      showLinkIcon: false,
+      icon: AcademicCapSolid,
    },
  ]}
 />
@@ -200,15 +191,13 @@ Then, merchants can view all orders coming from different sales channels using t
      href: "/references/payment/provider",
      title: "Create a Payment Module Provider",
      text: "Learn how to create a payment module provider.",
-      startIcon: <AcademicCapSolid />,
-      showLinkIcon: false,
+      icon: AcademicCapSolid,
    },
    {
      href: "!api!/admin",
      title: "Admin REST APIs",
      text: "Check out available Admin REST APIs.",
-      startIcon: <AcademicCapSolid />,
-      showLinkIcon: false,
+      icon: AcademicCapSolid,
    },
  ]}
 />
--- a/www/apps/resources/app/recipes/subscriptions/examples/standard/page.mdx
+++ b/www/apps/resources/app/recipes/subscriptions/examples/standard/page.mdx
@@ -29,15 +29,13 @@ By following this example, you’ll have a subscription commerce store with the
    href: "https://github.com/medusajs/examples/tree/main/subscription",
    title: "Subscription Example Repository",
    text: "Find the full code for this recipe example in this repository.",
-    startIcon: <Github />,
-    showLinkIcon: false
+    icon: Github,
  },
  {
    href: "https://res.cloudinary.com/dza7lstvk/raw/upload/v1721125608/OpenApi/Subscriptions_OpenApi_b371x4.yml",
    title: "OpenApi Specs for Postman",
    text: "Imported this OpenApi Specs file into tools like Postman.",
-    startIcon: <PlaySolid />,
-    showLinkIcon: false
+    icon: PlaySolid,
  },
 ]} />

--- a/www/apps/resources/app/recipes/subscriptions/page.mdx
+++ b/www/apps/resources/app/recipes/subscriptions/page.mdx
@@ -36,15 +36,13 @@ You can link the subscription data model to models of other modules, such as the
    href: "!docs!/basics/modules-and-services",
    title: "Create a Module",
    text: "Learn how to create a module.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/data-models",
    title: "Create a Data Model",
    text: "Learn how to create a data model.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
 ]} />

@@ -62,8 +60,7 @@ If you want to create subscriptions on the product level, you can link the subsc
  href="!docs!/advanced-development/modules/module-links"
  title="Define a Module Link"
  text="Learn how to define a module link."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 ---
@@ -87,15 +84,13 @@ Implementing the logic depends on your use case, but you'll mainly implement the
    href: "!docs!/basics/api-routes",
    title: "Create an API Route",
    text: "Learn how to create an API route.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/basics/scheduled-jobs",
    title: "Create a Scheduled Job",
    text: "Learn how to create a scheduled job.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  }
 ]} />

@@ -111,8 +106,7 @@ Although Medusa provides a Stripe module provider, it doesn't handle subscriptio
  href="/references/payment/provider"
  title="Create Payment Module Provider"
  text="Learn how to create a payment module provider."
-  startIcon={<AcademicCapSolid />}
-  showLinkIcon={false}
+  icon={AcademicCapSolid}
 />

 ---
@@ -128,15 +122,13 @@ Extend the Medusa Admin to add widgets to existing pages or add new pages.
    href: "!docs!/advanced-development/admin/widget",
    title: "Create Admin Widget",
    text: "Learn how to add widgets into existing admin pages.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "!docs!/advanced-development/admin/ui-routes",
    title: "Create Admin UI Routes",
    text: "Learn how to add new pages to your Medusa Admin.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  }
 ]} />

@@ -151,14 +143,12 @@ Medusa provides a Next.js Starter. Since you've customized your Medusa project,
    href: "/nextjs-starter",
    title: "Option 1: Use Next.js Starter",
    text: "Install the Next.js Starter to customize it.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  },
  {
    href: "/storefront-development",
    title: "Option 2: Build Custom Storefront",
    text: "Find guides for your storefront development.",
-    startIcon: <AcademicCapSolid />,
-    showLinkIcon: false
+    icon: AcademicCapSolid,
  }
 ]} />
--- a/www/apps/ui/src/app/not-found.mdx
+++ b/www/apps/ui/src/app/not-found.mdx
@@ -22,26 +22,22 @@ If you think this is a mistake, please [report this issue on GitHub](https://git
    {
      title: "Get Started Docs",
      href: "/",
-      showLinkIcon: false,
-      startIcon: <BookOpen />
+      icon: BookOpen
    },
    {
      title: "Learning Resources",
      href: "!resources!",
-      showLinkIcon: false,
-      startIcon: <AcademicCapSolid />
+      icon: AcademicCapSolid
    },
    {
      title: "Admin API reference",
      href: "!api!/admin",
-      showLinkIcon: false,
-      startIcon: <ComputerDesktopSolid />
+      icon: ComputerDesktopSolid
    },
    {
      title: "Store API reference",
      href: "!api!/store",
-      showLinkIcon: false,
-      startIcon: <BuildingStorefront />
+      icon: BuildingStorefront
    }
  ]}
 />
--- a/www/apps/ui/src/app/not-found.tsx
+++ b/www/apps/ui/src/app/not-found.tsx
@@ -32,26 +32,22 @@ export default function NotFound() {
          {
            title: "Get Started Docs",
            href: "/",
-            showLinkIcon: false,
-            startIcon: <BookOpen />,
+            icon: BookOpen,
          },
          {
            title: "Learning Resources",
            href: "!resources!",
-            showLinkIcon: false,
-            startIcon: <AcademicCapSolid />,
+            icon: AcademicCapSolid,
          },
          {
            title: "Admin API reference",
            href: "!api!/admin",
-            showLinkIcon: false,
-            startIcon: <ComputerDesktopSolid />,
+            icon: ComputerDesktopSolid,
          },
          {
            title: "Store API reference",
            href: "!api!/store",
-            showLinkIcon: false,
-            startIcon: <BuildingStorefront />,
+            icon: BuildingStorefront,
          },
        ]}
      />
--- a/www/apps/ui/src/components/figma-card.tsx
+++ b/www/apps/ui/src/components/figma-card.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+import { Card } from "docs-ui"
+import { basePathUrl } from "../lib/base-path-url"
+
+export const FigmaCard = () => {
+  return (
+    <Card
+      title="Medusa UI"
+      text="Colors, type, icons and components"
+      href="https://www.figma.com/community/file/1278648465968635936/Medusa-UI"
+      image={basePathUrl("/images/figma.png")}
+      iconClassName="!p-0"
+    />
+  )
+}
--- a/www/apps/ui/src/components/figma-icon.tsx
+++ b/www/apps/ui/src/components/figma-icon.tsx
@@ -1,6 +0,0 @@
-import { BorderedIcon } from "docs-ui"
-import { basePathUrl } from "../lib/base-path-url"
-
-export const FigmaIcon = () => {
-  return <BorderedIcon icon={basePathUrl("/images/figma.png")} />
-}
--- a/www/apps/ui/src/components/mdx-components.tsx
+++ b/www/apps/ui/src/components/mdx-components.tsx
@@ -10,7 +10,7 @@ import { HookValues } from "@/components/hook-values"
 import { IconSearch } from "@/components/icon-search"
 import { PackageInstall } from "@/components/package-install"
 import { Feedback } from "@/components/feedback"
-import { FigmaIcon } from "@/components/figma-icon"
+import { FigmaCard } from "@/components/figma-card"
 import { ComponentReference } from "@/components/component-reference"
 import { Link, Card, BorderedIcon, MDXComponents, CodeBlock } from "docs-ui"

@@ -53,7 +53,7 @@ const components = {
  Colors,
  Card,
  BorderedIcon,
-  FigmaIcon,
+  FigmaCard,
  ComponentReference,
 }

--- a/www/apps/ui/src/content/docs/index.mdx
+++ b/www/apps/ui/src/content/docs/index.mdx
@@ -7,14 +7,7 @@ Welcome to Medusa UI, a React implementation of the Medusa design system.
 It is a collection of components, hooks, utility functions, icons, and [Tailwind CSS](https://tailwindcss.com/) classes that can be used to build
 a consistent user interface across the Medusa Admin and other Medusa applications.

-<Card
-  title="Medusa UI"
-  text="Colors, type, icons and components"
-  href="https://www.figma.com/community/file/1278648465968635936/Medusa-UI"
-  startIcon={
-    <FigmaIcon />
-  }
-/>
+<FigmaCard />

 ## Packages

--- a/www/apps/user-guide/app/not-found.mdx
+++ b/www/apps/user-guide/app/not-found.mdx
@@ -22,26 +22,22 @@ If you think this is a mistake, please [report this issue on GitHub](https://git
    {
      title: "Get Started Docs",
      href: "/",
-      showLinkIcon: false,
-      startIcon: <BookOpen />
+      icon: BookOpen
    },
    {
      title: "Learning Resources",
      href: "!resources!",
-      showLinkIcon: false,
-      startIcon: <AcademicCapSolid />
+      icon: AcademicCapSolid
    },
    {
      title: "Admin API reference",
      href: "!api!/admin",
-      showLinkIcon: false,
-      startIcon: <ComputerDesktopSolid />
+      icon: ComputerDesktopSolid
    },
    {
      title: "Store API reference",
      href: "!api!/store",
-      showLinkIcon: false,
-      startIcon: <BuildingStorefront />
+      icon: BuildingStorefront
    }
  ]}
 />
--- a/www/packages/docs-ui/src/components/BorderedIcon/index.tsx
+++ b/www/packages/docs-ui/src/components/BorderedIcon/index.tsx
@@ -17,6 +17,7 @@ export const BorderedIcon = ({
  iconWrapperClassName,
  iconClassName,
  iconColorClassName = "",
+  wrapperClassName,
 }: BorderedIconProps) => {
  return (
    <span
@@ -26,23 +27,25 @@ export const BorderedIcon = ({
        iconWrapperClassName
      )}
    >
-      {!IconComponent && (
-        <img
-          src={icon || ""}
-          className={clsx(iconClassName, "bordered-icon")}
-          alt=""
-        />
-      )}
-      {IconComponent && (
-        <IconComponent
-          className={clsx(
-            "text-medusa-fg-subtle rounded-docs_sm",
-            iconClassName,
-            "bordered-icon",
-            iconColorClassName
-          )}
-        />
-      )}
+      <span className={clsx("rounded-docs_xs", wrapperClassName)}>
+        {!IconComponent && (
+          <img
+            src={icon || ""}
+            className={clsx(iconClassName, "bordered-icon")}
+            alt=""
+          />
+        )}
+        {IconComponent && (
+          <IconComponent
+            className={clsx(
+              "text-medusa-fg-subtle rounded-docs_xs",
+              iconClassName,
+              "bordered-icon",
+              iconColorClassName
+            )}
+          />
+        )}
+      </span>
    </span>
  )
 }
--- a/www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx
+++ b/www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx
@@ -0,0 +1,78 @@
+import React from "react"
+import clsx from "clsx"
+import { Badge, BorderedIcon, Link } from "@/components"
+import { ArrowUpRightOnBox, TriangleRightMini } from "@medusajs/icons"
+import { CardProps } from "../../.."
+import { useIsExternalLink } from "../../../.."
+
+export const CardDefaultLayout = ({
+  icon,
+  image,
+  title,
+  text,
+  href,
+  className,
+  contentClassName,
+  iconClassName,
+  children,
+  badge,
+}: CardProps) => {
+  const isExternal = useIsExternalLink({ href })
+
+  return (
+    <div
+      className={clsx(
+        "bg-medusa-bg-component w-full rounded-docs_DEFAULT",
+        "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+        "py-docs_0.5 px-docs_0.75 relative",
+        "flex justify-start items-center gap-docs_0.75 transition-shadow",
+        href &&
+          "hover:shadow-elevation-card-hover dark:hover:shadow-elevation-card-hover-dark",
+        className
+      )}
+    >
+      {icon && (
+        <BorderedIcon
+          wrapperClassName={clsx(
+            "p-[4.5px] bg-medusa-bg-component-hover",
+            iconClassName
+          )}
+          IconComponent={icon}
+        />
+      )}
+      {image && (
+        <BorderedIcon
+          wrapperClassName={clsx(
+            "p-[4.5px] bg-medusa-bg-component-hover",
+            iconClassName
+          )}
+          icon={image}
+        />
+      )}
+      <div className={clsx("flex flex-col flex-1", contentClassName)}>
+        {title && (
+          <div className="text-compact-small-plus text-medusa-fg-base truncate">
+            {title}
+          </div>
+        )}
+        {text && (
+          <span className="text-compact-small text-medusa-fg-subtle">
+            {text}
+          </span>
+        )}
+        {children}
+      </div>
+      {badge && <Badge {...badge} />}
+      <span className="text-medusa-fg-muted">
+        {isExternal ? <ArrowUpRightOnBox /> : <TriangleRightMini />}
+      </span>
+
+      {href && (
+        <Link
+          href={href}
+          className="absolute left-0 top-0 h-full w-full rounded"
+        />
+      )}
+    </div>
+  )
+}
--- a/www/packages/docs-ui/src/components/Card/Layout/Filler/index.tsx
+++ b/www/packages/docs-ui/src/components/Card/Layout/Filler/index.tsx
@@ -0,0 +1,30 @@
+import React from "react"
+import { CardProps } from "../../../.."
+import clsx from "clsx"
+import Link from "next/link"
+
+export const CardFillerLayout = ({ text, href, className }: CardProps) => {
+  return (
+    <div
+      className={clsx(
+        "flex justify-center items-center w-full",
+        "gap-docs_0.75 px-docs_0.75 py-docs_0.5 rounded-docs_DEFAULT",
+        "border border-dashed border-medusa-border-strong",
+        "bg-medusa-bg-component text-medusa-fg-subtle",
+        className
+      )}
+    >
+      <div>
+        <span className="text-compact-small">{text}</span>
+        {href && (
+          <>
+            {" "}
+            <Link href={href} className="text-compact-small-plus">
+              Show All↗
+            </Link>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/www/packages/docs-ui/src/components/Card/Layout/Large/index.tsx
+++ b/www/packages/docs-ui/src/components/Card/Layout/Large/index.tsx
@@ -0,0 +1,63 @@
+import React from "react"
+import { CardProps } from "../.."
+import { useIsExternalLink } from "../../../.."
+import clsx from "clsx"
+import { ArrowRightMini, ArrowUpRightOnBox } from "@medusajs/icons"
+import Link from "next/link"
+
+export const CardLargeLayout = ({
+  title,
+  text,
+  image,
+  icon,
+  href,
+  className,
+}: CardProps) => {
+  const isExternal = useIsExternalLink({ href })
+  const IconComponent = icon
+
+  return (
+    <div
+      className={clsx(
+        "relative flex flex-col gap-docs_0.75",
+        "justify-start group",
+        className
+      )}
+    >
+      <div
+        className={clsx(
+          "rounded-docs_DEFAULT bg-medusa-bg-component w-[290px] h-[144px]",
+          "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+          href &&
+            "group-hover:shadow-elevation-card-hover group-hover:dark:shadow-elevation-card-hover-dark",
+          "px-docs_0.75 py-docs_0.5 flex justify-center items-center"
+        )}
+      >
+        {IconComponent && (
+          <IconComponent className="w-docs_2 h-docs_2 text-medusa-fg-subtle" />
+        )}
+        {image && (
+          <img src={image} alt={title || text || ""} className="w-[144px]" />
+        )}
+      </div>
+      <div className="flex flex-col">
+        <div className="flex gap-docs_0.25 items-center text-medusa-fg-base">
+          {title && <span className="text-compact-small-plus">{title}</span>}
+          {href && isExternal && <ArrowUpRightOnBox />}
+          {href && !isExternal && <ArrowRightMini />}
+        </div>
+        {text && (
+          <span className="text-compact-small text-medusa-fg-subtle">
+            {text}
+          </span>
+        )}
+      </div>
+      {href && (
+        <Link
+          href={href}
+          className="absolute left-0 top-0 h-full w-full rounded"
+        />
+      )}
+    </div>
+  )
+}
--- a/www/packages/docs-ui/src/components/Card/index.tsx
+++ b/www/packages/docs-ui/src/components/Card/index.tsx
@@ -1,79 +1,31 @@
 import React from "react"
-import { ArrowUpRightOnBox } from "@medusajs/icons"
-import clsx from "clsx"
-import { Badge, BadgeProps, Link } from "@/components"
+import { BadgeProps } from "@/components"
+import { CardDefaultLayout } from "./Layout/Default"
+import { IconProps } from "@medusajs/icons/dist/types"
+import { CardLargeLayout } from "./Layout/Large"
+import { CardFillerLayout } from "./Layout/Filler"

 export type CardProps = {
-  startIcon?: React.ReactNode
-  endIcon?: React.ReactNode
+  type?: "default" | "large" | "filler"
+  icon?: React.FC<IconProps>
+  image?: string
  title?: string
  text?: string
  href?: string
  className?: string
  contentClassName?: string
+  iconClassName?: string
  children?: React.ReactNode
-  showLinkIcon?: boolean
-  isExternal?: boolean
  badge?: BadgeProps
 }

-export const Card = ({
-  startIcon,
-  endIcon,
-  title,
-  text,
-  href,
-  className,
-  contentClassName,
-  children,
-  showLinkIcon = true,
-  isExternal = false,
-  badge,
-}: CardProps) => {
-  return (
-    <div
-      className={clsx(
-        "bg-medusa-bg-subtle w-full rounded",
-        "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark p-docs_0.75 relative",
-        "flex items-start gap-docs_0.75 transition-shadow",
-        href &&
-          "hover:shadow-elevation-card-hover dark:hover:shadow-elevation-card-hover-dark",
-        className
-      )}
-    >
-      {startIcon}
-      <div className="flex items-start gap-docs_1 justify-between flex-1 max-w-full">
-        <div className={clsx("flex flex-col max-w-full", contentClassName)}>
-          {title && (
-            <span className={clsx(badge && "flex gap-docs_0.5")}>
-              <span className="text-compact-medium-plus text-medusa-fg-base block truncate">
-                {title}
-              </span>
-              {badge && <Badge {...badge} />}
-            </span>
-          )}
-          {text && (
-            <span className="text-compact-medium text-medusa-fg-subtle">
-              {text}
-            </span>
-          )}
-          {children}
-        </div>
-
-        {href && (
-          <>
-            {showLinkIcon && (
-              <ArrowUpRightOnBox className="text-medusa-fg-subtle min-w-[20px]" />
-            )}
-            <Link
-              href={href}
-              className="absolute left-0 top-0 h-full w-full rounded"
-              target={isExternal ? "_blank" : undefined}
-            />
-          </>
-        )}
-      </div>
-      {endIcon}
-    </div>
-  )
+export const Card = ({ type = "default", ...props }: CardProps) => {
+  switch (type) {
+    case "large":
+      return <CardLargeLayout {...props} />
+    case "filler":
+      return <CardFillerLayout {...props} />
+    default:
+      return <CardDefaultLayout {...props} />
+  }
 }
--- a/www/packages/docs-ui/src/components/ChildDocs/index.tsx
+++ b/www/packages/docs-ui/src/components/ChildDocs/index.tsx
@@ -141,7 +141,6 @@ export const ChildDocs = ({
            return {
              title: childItem.title,
              href,
-              showLinkIcon: false,
            }
          }) || []
        }
@@ -170,14 +169,13 @@ export const ChildDocs = ({
                  itemChildren?.map((childItem) => ({
                    title: childItem.title,
                    href: childItem.type === "link" ? childItem.path : "",
-                    showLinkIcon: false,
                  })) || []
                }
              />
            </>
          )}
          {!HeadingComponent && item.type === "link" && (
-            <Card title={item.title} href={item.path} showLinkIcon={false} />
+            <Card title={item.title} href={item.path} />
          )}
        </React.Fragment>
      )
--- a/www/packages/docs-ui/src/components/Icons/StripeColored/index.tsx
+++ b/www/packages/docs-ui/src/components/Icons/StripeColored/index.tsx
--- a/www/packages/docs-ui/src/components/Icons/index.tsx
+++ b/www/packages/docs-ui/src/components/Icons/index.tsx
@@ -3,5 +3,6 @@ export * from "./CircleDottedLine"
 export * from "./DecisionProcess"
 export * from "./QuestionMark"
 export * from "./ShadedBg"
+export * from "./StripeColored"
 export * from "./ThumbDown"
 export * from "./ThumbUp"
--- a/www/packages/docs-ui/src/hooks/index.ts
+++ b/www/packages/docs-ui/src/hooks/index.ts
@@ -4,6 +4,7 @@ export * from "./use-collapsible"
 export * from "./use-collapsible-code-lines"
 export * from "./use-copy"
 export * from "./use-current-learning-path"
+export * from "./use-is-external-link"
 export * from "./use-is-browser"
 export * from "./use-keyboard-shortcut"
 export * from "./use-page-scroll-manager"
--- a/www/packages/docs-ui/src/hooks/use-is-external-link/index.tsx
+++ b/www/packages/docs-ui/src/hooks/use-is-external-link/index.tsx
@@ -0,0 +1,19 @@
+import { useMemo } from "react"
+
+type UseIsExternalLinkProps = {
+  href?: string
+}
+
+export const useIsExternalLink = ({ href }: UseIsExternalLinkProps) => {
+  const isExternal = useMemo(() => {
+    return (
+      href &&
+      !href.startsWith("/") &&
+      !href.startsWith("https://docs.medusajs.com") &&
+      !href.startsWith("http://localhost:") &&
+      !href.startsWith("#")
+    )
+  }, [href])
+
+  return isExternal
+}
--- a/www/packages/remark-rehype-plugins/src/utils/estree-to-js.ts
+++ b/www/packages/remark-rehype-plugins/src/utils/estree-to-js.ts
@@ -66,9 +66,5 @@ function expressionToJs(
    case "JSXElement":
      // ignore JSXElements
      return
-    default:
-      console.warn(
-        `[expressionToJs] can't parse expression of type ${expression.type}`
-      )
  }
 }