Fix shadow transition when hover of resource Card

darwinia-network · Feb 1, 2024 · e41a12c · e41a12c
1 parent ec49eee
commit e41a12c
Showing 1 changed file with 22 additions and 21 deletions.
diff --git a/src/components/Resources2/Card.tsx b/src/components/Resources2/Card.tsx
@@ -17,28 +17,29 @@ export default function Card({ icon, title, description, detail }: Props) {
   const { isDesktopWidth, isDesktopHeight } = useApp();
 
   return (
-    <div
-      className={`bg-app-inner-white rounded-[10px] flex flex-col gap-10 h-fit w-full lg:w-[345px] transition-shadow hover:shadow-xl ${
-        isDesktopWidth ? (isDesktopHeight ? "p-[60px]" : "p-[40px]") : "p-5"
-      }`}
-      data-aos="fade-up"
-    >
-      <img alt="" src={icon} className="w-[70px] h-[70px]" />
-      <div className="flex flex-col gap-medium">
-        <h3 className="text-h3 text-black">{title}</h3>
-        <span className="text-t16 text-app-gray">{description}</span>
-      </div>
-      <a
-        rel="noopener noreferrer"
-        target="_blank"
-        href={detail.link}
-        className="w-fit inline-flex items-center gap-medium pl-[15px] pr-[10px] py-[8px] rounded-[40px] transition-colors text-app-black border border-black hover:border-app-main hover:text-app-main"
-        onMouseEnter={() => setIsHovering(true)}
-        onMouseLeave={() => setIsHovering(false)}
+    <div data-aos="fade-up" className="h-fit">
+      <div
+        className={`bg-app-inner-white rounded-[10px] flex flex-col gap-10 h-fit w-full lg:w-[345px] transition-shadow duration-200 hover:shadow-[0_10px_20px_0px_rgba(0,0,0,0.1)] ${
+          isDesktopWidth ? (isDesktopHeight ? "p-[60px]" : "p-[40px]") : "p-5"
+        }`}
       >
-        <span className="text-t16b">Detail</span>
-        <RightArrowRound fill={isHovering ? "main" : "black"} />
-      </a>
+        <img alt="" src={icon} className="w-[70px] h-[70px]" />
+        <div className="flex flex-col gap-medium">
+          <h3 className="text-h3 text-black">{title}</h3>
+          <span className="text-t16 text-app-gray">{description}</span>
+        </div>
+        <a
+          rel="noopener noreferrer"
+          target="_blank"
+          href={detail.link}
+          className="w-fit inline-flex items-center gap-medium pl-[15px] pr-[10px] py-[8px] rounded-[40px] transition-colors text-app-black border border-black hover:border-app-main hover:text-app-main"
+          onMouseEnter={() => setIsHovering(true)}
+          onMouseLeave={() => setIsHovering(false)}
+        >
+          <span className="text-t16b">Detail</span>
+          <RightArrowRound fill={isHovering ? "main" : "black"} />
+        </a>
+      </div>
     </div>
   );
 }