chore: redesign card (#3290)

Author: FRSgit

apps/preview/next/pages/showcases/Card/CardDefault.tsx

@@ -7,9 +7,9 @@ import { SfButton } from '@storefront-ui/react';
 const cardDetails = [
   {
     image: 'http://localhost:3100/@assets/card-3.png',
-    title: 'Sip Sustainably: The Rise of Boxed Water',
+    title: "Trail Running: Nature's Ultimate Challenge",
     description:
-      'Boxed water is a sustainable alternative to traditional plastic bottles, made from renewable resources.',
+      "Explore the exhilarating world of trail running. Embrace nature's rugged terrains, elevate your fitness, and learn to conquer every path.",
     button: 'Read more',
   },
   {
@@ -34,18 +34,23 @@ export default function CardDefault() {
       {cardDetails.map(({ image, title, description, button }) => (
         <div
           key={title}
-          className="flex flex-col min-w-[325px] max-w-[375px] lg:w-[496px] relative border border-neutral-200 rounded-md hover:shadow-xl"
+          className="flex flex-col min-w-[325px] max-w-[375px] lg:w-[496px] relative border border-neutral-200 rounded-3xl hover:shadow-xl active:shadow-none transition-shadow group"
         >
           <a
-            className="absolute inset-0 z-1 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-md"
+            className="absolute inset-0 z-1 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-3xl"
             href="#"
             aria-label={title}
           />
-          <img src={image} alt={title} className="object-cover h-auto rounded-t-md aspect-video" />
-          <div className="flex flex-col items-start p-4 grow">
+          <img src={image} alt={title} className="object-cover h-auto rounded-t-3xl aspect-video" />
+          <div className="flex flex-col items-end p-4 grow">
             <p className="font-medium typography-text-base">{title}</p>
             <p className="mt-1 mb-4 font-normal typography-text-sm text-neutral-700">{description}</p>
-            <SfButton size="sm" variant="tertiary" className="relative mt-auto">
+            <SfButton
+              size="sm"
+              variant="tertiary"
+              className="mt-auto group-has-[:focus-visible]:outline group-has-[:focus-visible]:outline-offset pointer-events-none"
+              tabIndex={-1}
+            >
               {button}
             </SfButton>
           </div>

apps/preview/next/pages/showcases/Card/CategoryCard.tsx

@@ -13,7 +13,7 @@ const categories = [
     image: 'http://localhost:3100/@assets/men_category.png',
   },
   {
-    title: `Kid`,
+    title: `Kids`,
     image: 'http://localhost:3100/@assets/kid_category.png',
   },
 ];
@@ -23,19 +23,19 @@ export default function CategoryCard() {
       {categories.map(({ title, image }) => (
         <div className="relative min-w-[180px] flex-col max-w-[240px] group" key={title}>
           <a
-            className="absolute w-full h-full z-[1] focus-visible:outline focus-visible:outline-offset focus-visible:rounded-md"
+            className="absolute w-full h-full z-[1] focus-visible:outline focus-visible:outline-offset focus-visible:rounded-3xl"
             href="#"
             aria-label={title}
           />
           <img
-            className="rounded-full bg-neutral-100 group-hover:shadow-xl group-active:shadow-none"
+            className="transition-[filter] drop-shadow-none group-hover:drop-shadow-xl group-active:drop-shadow-none"
             src={image}
             alt={title}
             width="240"
             height="240"
           />
-          <div className="flex justify-center">
-            <a className="mt-4 font-semibold no-underline text-normal-900 typography-text-base group-hover:underline group-hover:text-primary-800 group-hover:font-normal group-active:text-primary-800 group-active:font-normal">
+          <div className="flex justify-center p-4 gap-4">
+            <a className="font-medium no-underline text-normal-900 typography-text-base group-hover:underline group-hover:text-primary-900 group-hover:font-normal group-active:underline group-active:text-primary-900 group-active:font-normal">
               {title}
             </a>
           </div>

apps/preview/nuxt/pages/showcases/Card/CardDefault.vue

@@ -4,17 +4,23 @@
     <div
       v-for="({ image, title, description, button }, index) in cardDetails"
       :key="`${title}-${index}`"
-      class="flex flex-col min-w-[325px] max-w-[375px] lg:w-[496px] relative border border-neutral-200 rounded-md hover:shadow-xl"
+      class="flex flex-col min-w-[325px] max-w-[375px] lg:w-[496px] relative border border-neutral-200 rounded-3xl hover:shadow-xl active:shadow-none transition-shadow group"
     >
       <a
-        class="absolute inset-0 z-1 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-md"
+        class="absolute inset-0 z-1 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-3xl"
         href="#"
       />
-      <img :src="image" :alt="title" class="object-cover h-auto rounded-t-md aspect-video" />
-      <div class="flex flex-col items-start p-4 grow">
+      <img :src="image" :alt="title" class="object-cover h-auto rounded-t-3xl aspect-video" />
+      <div class="flex flex-col items-end p-4 grow">
         <p class="font-medium typography-text-base">{{ title }}</p>
         <p class="mt-1 mb-4 font-normal typography-text-sm text-neutral-700">{{ description }}</p>
-        <SfButton size="sm" variant="tertiary" class="relative mt-auto">{{ button }}</SfButton>
+        <SfButton
+          size="sm"
+          variant="tertiary"
+          class="mt-auto group-has-[:focus-visible]:outline group-has-[:focus-visible]:outline-offset pointer-events-none"
+          tabindex="-1"
+          >{{ button }}</SfButton
+        >
       </div>
     </div>
   </div>
@@ -25,9 +31,9 @@ import { SfButton } from '@storefront-ui/vue';
 const cardDetails = [
   {
     image: 'http://localhost:3100/@assets/card-3.png',
-    title: 'Sip Sustainably: The Rise of Boxed Water',
+    title: "Trail Running: Nature's Ultimate Challenge",
     description:
-      'Boxed water is a sustainable alternative to traditional plastic bottles, made from renewable resources.',
+      "Explore the exhilarating world of trail running. Embrace nature's rugged terrains, elevate your fitness, and learn to conquer every path.",
     button: 'Read more',
   },
   {

apps/preview/nuxt/pages/showcases/Card/CategoryCard.vue

@@ -6,20 +6,20 @@
       class="relative flex-col min-w-[140px] max-w-[240px] justify-center group"
     >
       <a
-        class="absolute w-full h-full z-[1] focus-visible:outline focus-visible:outline-offset focus-visible:rounded-md"
+        class="absolute w-full h-full z-[1] focus-visible:outline focus-visible:outline-offset focus-visible:rounded-3xl"
         href="#"
         :aria-label="title"
       />
       <img
-        class="rounded-full bg-neutral-100 group-hover:shadow-xl group-active:shadow-none"
+        class="transition-[filter] drop-shadow-none group-hover:drop-shadow-xl group-active:drop-shadow-none"
         :src="image"
         :alt="title"
         width="240"
         height="240"
       />
-      <div class="flex justify-center">
+      <div class="flex justify-center p-4 gap-4">
         <a
-          class="mt-4 font-semibold no-underline text-normal-900 typography-text-base group-hover:underline group-hover:text-primary-800 group-hover:font-normal group-active:text-primary-800 group-active:font-normal"
+          class="font-medium no-underline text-normal-900 typography-text-base group-hover:underline group-hover:text-primary-900 group-hover:font-normal group-active:underline group-active:text-primary-900 group-active:font-normal"
         >
           {{ title }}
         </a>
@@ -39,7 +39,7 @@ const categories = [
     image: 'http://localhost:3100/@assets/men_category.png',
   },
   {
-    title: `Kid`,
+    title: `Kids`,
     image: 'http://localhost:3100/@assets/kid_category.png',
   },
 ];