docs: redesign cards (#8671)

* docs: redesign cards * fix build error
2024-08-20 14:48:17 +02:00
parent 48fe819d9e
commit b4d8e265e3
37 changed files with 493 additions and 476 deletions
@@ -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
    }
  ]}
 />
@@ -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} />

@@ -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
    }
  ]}
 />
@@ -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
  },
 ]} />
@@ -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"
 />
@@ -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,
  },
 ]} />

@@ -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,
  },
 ]} />

@@ -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,
  },
 ]} />
@@ -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}
 />

 ---
@@ -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">
@@ -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,
  },
 ]} />

@@ -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,
  },
 ]} />

@@ -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}
 />
@@ -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,
  },
 ]} />
@@ -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,
  }
 ]} />
@@ -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}
 />
@@ -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,
    },
  ]}
 />
@@ -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,
  },
 ]} />

@@ -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,
  }
 ]} />
@@ -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
    }
  ]}
 />
@@ -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,
          },
        ]}
      />
@@ -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"
+    />
+  )
+}
@@ -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")} />
-}
@@ -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,
 }

@@ -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

@@ -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
    }
  ]}
 />