Feature - New product cards

public/components/marketing-product-cards/10.html

@@ -0,0 +1,28 @@
+<a href="#" class="relative block rounded-tr-3xl border border-gray-100">
+  <span
+    class="absolute -right-px -top-px rounded-bl-3xl rounded-tr-3xl bg-rose-600 px-6 py-4 font-medium uppercase tracking-widest text-white"
+  >
+    Save 10%
+  </span>
+
+  <img
+    src="https://images.unsplash.com/photo-1485955900006-10f4d324d411?q=80&w=2672&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    alt=""
+    class="-ml-6 -mt-6 h-80 w-full rounded-bl-3xl rounded-tr-3xl border border-gray-300 object-cover"
+  />
+
+  <div class="p-4 text-center">
+    <strong class="text-xl font-medium text-gray-900"> Aloe Vera </strong>
+
+    <p class="mt-2 text-pretty text-gray-700">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet officia rem vel voluptatum in
+      eum vitae aliquid at sed dignissimos.
+    </p>
+
+    <span
+      class="mt-4 block rounded-md border border-indigo-900 bg-indigo-900 px-5 py-3 text-sm font-medium uppercase tracking-widest text-white transition-colors hover:bg-white hover:text-indigo-900"
+    >
+      Learn More
+    </span>
+  </div>
+</a>

public/components/marketing-product-cards/9.html

@@ -0,0 +1,28 @@
+<a href="#" class="relative block rounded-tr-3xl border border-gray-100">
+  <span
+    class="absolute -right-px -top-px rounded-bl-3xl rounded-tr-3xl bg-rose-600 px-6 py-4 font-medium uppercase tracking-widest text-white"
+  >
+    Save 10%
+  </span>
+
+  <img
+    src="https://images.unsplash.com/photo-1485955900006-10f4d324d411?q=80&w=2672&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    alt=""
+    class="h-80 w-full rounded-tr-3xl object-cover"
+  />
+
+  <div class="p-4 text-center">
+    <strong class="text-xl font-medium text-gray-900"> Aloe Vera </strong>
+
+    <p class="mt-2 text-pretty text-gray-700">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet officia rem vel voluptatum in
+      eum vitae aliquid at sed dignissimos.
+    </p>
+
+    <span
+      class="mt-4 block rounded-md border border-indigo-900 bg-indigo-900 px-5 py-3 text-sm font-medium uppercase tracking-widest text-white transition-colors hover:bg-white hover:text-indigo-900"
+    >
+      Learn More
+    </span>
+  </div>
+</a>

src/data/components/marketing-product-cards.mdx

@@ -8,17 +8,26 @@ seo:
   description: Product card components created with Tailwind CSS
 components:
   1:
-    title: Simple
+    title: Product with image, title and price
   2:
-    title: Simple with Variant Count
+    title: Product with image, title, price and variant count
   3:
-    title: Simple with Description
+    title: Product with image, title, price and description
   4:
-    title: Simple (Rounded)
+    title: Product with rounded image, title and price
   5:
-    title: With Color Variants
+    title: Product with image, title, price and variant options
   6:
-    title: Contained Sections with Wishlist
+    title: Product with image, title, price, tag, wishlist and call to action
+  7:
+    title: Collection with image, title and description
+  8:
+    title: Collection with image, title, description and call to action
+  9:
+    title: Collection with image, title, description, offer and call to action
+  10:
+    title: Collection with outside image, title, description, offer and call to action
+    container: p-6 !pt-12 max-w-md mx-auto
 ---
 
 # Product Card Components