docs: redesign cards (#8671)

* docs: redesign cards

* fix build error

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

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")} />
-}

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,
 }