docs: change recipes on homepage (#12520)

* docs: changed recipes on homepage

* export icon

www/apps/book/components/Homepage/RecipesSection/index.tsx

@@ -1,5 +1,6 @@
 import clsx from "clsx"
 import {
+  BundledProductIcon,
   CalendarRefreshIcon,
   Card,
   CardProps,
@@ -8,13 +9,19 @@ import {
   IconHeadline,
   ImageBinaryIcon,
   Link,
-  RestockIcon,
   ScrollTextIcon,
   ShopIcon,
 } from "docs-ui"
 
 const HomepageRecipesSection = () => {
   const cards: CardProps[] = [
+    {
+      type: "large",
+      title: "Marketplace",
+      text: "Build a marketplace with multiple vendors.",
+      href: "https://docs.medusajs.com/resources/recipes/marketplace/examples/vendors",
+      icon: ShopIcon,
+    },
     {
       type: "large",
       title: "ERP",
@@ -24,10 +31,10 @@ const HomepageRecipesSection = () => {
     },
     {
       type: "large",
-      title: "Marketplace",
-      text: "Build a marketplace with multiple vendors.",
-      href: "https://docs.medusajs.com/resources/recipes/marketplace/examples/vendors",
-      icon: ShopIcon,
+      title: "Bundled Products",
+      text: "Sell products as bundles with Admin and storefront customizations.",
+      href: "https://docs.medusajs.com/resources/recipes/bundled-products/examples/standard",
+      icon: BundledProductIcon,
     },
     {
       type: "large",
@@ -50,13 +57,6 @@ const HomepageRecipesSection = () => {
       href: "https://docs.medusajs.com/resources/recipes/digital-products/examples/standard",
       icon: ImageBinaryIcon,
     },
-    {
-      type: "large",
-      title: "Restock Notifications",
-      text: "Notify customers when a product is back in stock.",
-      href: "https://docs.medusajs.com/resources/recipes/commerce-automation/restock-notification",
-      icon: RestockIcon,
-    },
   ]
   return (
     <div className={clsx("py-4 w-full")}>

www/packages/docs-ui/src/components/Icons/BundledProduct/index.tsx

@@ -0,0 +1,72 @@
+import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const BundledProductIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        opacity="0.3"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.88892 6.66664V25.3333C4.88892 27.297 6.48079 28.8889 8.44447 28.8889H23.5556C25.5193 28.8889 27.1111 27.297 27.1111 25.3333V6.66664C27.1111 4.70296 25.5193 3.11108 23.5556 3.11108H8.44447C6.48079 3.11108 4.88892 4.70296 4.88892 6.66664ZM12.8889 8.44442C11.1716 8.44442 9.7778 9.83642 9.7778 11.5555C9.7778 13.2746 11.1716 14.6666 12.8889 14.6666H16H19.1111C20.8285 14.6666 22.2222 13.2746 22.2222 11.5555C22.2222 9.83642 20.8285 8.44442 19.1111 8.44442C17.3938 8.44442 16 9.83642 16 11.5555C16 9.83642 14.6062 8.44442 12.8889 8.44442Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16 3.11108V28.8889"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.88892 14.6667H27.1111"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16 14.6667L21.76 20.4267"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.8888 8.44458C11.1715 8.44458 9.77771 9.83658 9.77771 11.5557C9.77771 13.2748 11.1715 14.6668 12.8888 14.6668H15.9999V11.5557C15.9999 9.83658 14.6062 8.44458 12.8888 8.44458Z"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16 14.6667L10.24 20.4267"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.1111 8.44458C20.8284 8.44458 22.2222 9.83658 22.2222 11.5557C22.2222 13.2748 20.8284 14.6668 19.1111 14.6668H16V11.5557C16 9.83658 17.3938 8.44458 19.1111 8.44458Z"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.88892 6.66664V25.3333C4.88892 27.297 6.48079 28.8889 8.44447 28.8889H23.5556C25.5193 28.8889 27.1111 27.297 27.1111 25.3333V6.66664C27.1111 4.70296 25.5193 3.11108 23.5556 3.11108H8.44447C6.48079 3.11108 4.88892 4.70296 4.88892 6.66664Z"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

www/packages/docs-ui/src/components/Icons/index.tsx

@@ -1,4 +1,5 @@
 export * from "./AiAssistant"
+export * from "./BundledProduct"
 export * from "./CalendarRefresh"
 export * from "./ChefHat"
 export * from "./CircleDottedLine"

www/yarn.lock

@@ -6833,9 +6833,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001464, caniuse-lite@npm:^1.0.30001578, caniuse-lite@npm:^1.0.30001579, caniuse-lite@npm:^1.0.30001587":
-  version: 1.0.30001666
-  resolution: "caniuse-lite@npm:1.0.30001666"
-  checksum: 2d49e9be676233c24717f12aad3d01b3e5f902b457fe1deefaa8d82e64786788a8f79381ae437c61b50e15c9aea8aeb59871b1d54cb4c28b9190d53d292e2339
+  version: 1.0.30001718
+  resolution: "caniuse-lite@npm:1.0.30001718"
+  checksum: 67f9ad09bc16443e28d14f265d6e468480cd8dc1900d0d8b982222de80c699c4f2306599c3da8a3fa7139f110d4b30d49dbac78f215470f479abb6ffe141d5d3
   languageName: node
   linkType: hard