docs: added personalized products guide (#13012)

* docs: added personalized products guide

* lint content

* add product

www/apps/resources/app/recipes/personalized-products/page.mdx

@@ -1,10 +1,12 @@
 ---
 products:
   - product
+  - cart
   - order
 ---
 
 import { AcademicCapSolid, NextJs } from "@medusajs/icons"
+import { Card, CardList }  from "docs-ui"
 
 export const metadata = {
   title: `Personalized Products Recipe`,
@@ -14,6 +16,13 @@ export const metadata = {
 
 This recipe provides the general steps to build personalized products in Medusa.
 
+<Card
+  title="Personalized Products Example"
+  text="Find a complete example of personalized products in Medusa."
+  href="/recipes/personalized-products/example"
+  icon={AcademicCapSolid}
+/>
+
 ## Overview
 
 Personalized products are products that customers can customize based on their need. For example, they can upload an image to print on a shirt or provide a message to include in a letter.