imrprove the styling of cards

Author: SiddiquiSaab04

package.json

@@ -16,6 +16,8 @@
     "@tensorflow-models/coco-ssd": "^2.2.3",
     "@tensorflow/tfjs": "^4.16.0",
     "add": "^2.0.6",
+    "ajv": "^6.12.6",
+    "ajv-keywords": "^3.5.2",
     "axios": "^1.6.8",
     "browser-image-compression": "^2.0.2",
     "classnames": "^2.5.1",

src/App.css

@@ -568,3 +568,19 @@ small {
 ::-webkit-scrollbar {
   width: 25px;
 }
+.glass-card {
+  background: #c1bfbf25; 
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 20px;
+  border: 1px solid rgba(182, 180, 180, 0.2);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  color: #3e5156;
+}
+
+.glass-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.35);
+}
+

src/common/components/Like/Like.jsx

@@ -8,7 +8,7 @@ const Like = ({ onLikeClick, likeObj }) => {
   };
 
   return (
-    <button className="action counted -mr-0.5" onClick={likeClickHandler}>
+    <button className="flex items-center justify-center action counted -mr-0.5" onClick={likeClickHandler}>
       <AiOutlineLike className={liked ? 'hidden' : 'icon'} size="24px" />
       <AiFillLike className={liked ? 'icon' : 'hidden'} size="24px" />
       {number > 0 ? <div className="count-value">{number}</div> : <div />}

src/common/playlists/PlayCard.jsx

@@ -3,57 +3,53 @@ import { Link } from 'react-router-dom';
 import { BsPlayCircleFill } from 'react-icons/bs';
 import { BiLogoTypescript, BiLogoJavascript } from 'react-icons/bi';
 import PlayShare from './PlayShare.jsx';
-
-import Shimmer from 'react-shimmer-effect';
 import Like from 'common/components/Like/Like';
 import userImage from 'images/user.png';
 
 function PlayCard({ play, cover, likeObject }) {
   return (
     <Link to={`/plays/${encodeURI(play.github.toLowerCase())}/${play.slug}`}>
-      <div className="play-card-container">
-        <div className="play-thumb-container">
-          <Shimmer>
-            <img alt="" className="play-card-thumb-img" src={cover} />
-          </Shimmer>
-          <BsPlayCircleFill className="play-icon" color="white" size={80} />
+      <div className="glass-card max-w-sm overflow-hidden">
+        
+        {/* Thumbnail */}
+        <div className="relative group">
+          <img
+            src={cover}
+            alt={play.name}
+            className="min-w-full h-44 object-cover rounded-t-2xl transform group-hover:scale-105 transition duration-500"
+          />
+          <BsPlayCircleFill className="absolute inset-0 m-auto text-gray-700 opacity-80 group-hover:opacity-100 transition" size={70}/>
         </div>
 
-        {/* <div className="border" /> */}
-        <div className="card-header">{play.name}</div>
-        {play.user && (
-          <div className="author">
-            <img
-              alt="avatar"
-              className="rounded-full border border-zink"
-              height="25px"
-              loading="lazy"
-              src={
-                play?.user.avatarUrl
-                  ? play?.user.avatarUrl.length
-                    ? play?.user.avatarUrl
-                    : userImage
-                  : userImage
-              }
-              width="25px"
-            />
-            <div className="author-name">{play?.user.displayName}</div>
-          </div>
-        )}
-        <div className="play-actions mt-4">
-          <div className="like-container">
-            <Like likeObj={likeObject()} onLikeClick={null} />
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-              <PlayShare
-                cover={cover}
-                link={`/plays/${encodeURI(play.github.toLowerCase())}/${play.slug}`}
+        {/* Content */}
+        <div className="p-4 text-center">
+          <h3 className="text-xl font-semibold text-gray-700 drop-shadow-lg">
+            {play.name}
+          </h3>
+
+          {play.user && (
+            <div className="flex items-center justify-center gap-2 mt-2 text-gray-700 text-sm">
+              <img
+                className="w-8 h-8 rounded-full border border-white/40 shadow-md"
+                src={play.user.avatarUrl?.length ? play.user.avatarUrl : userImage}
+                alt="avatar"
               />
-              {play.language === 'ts' ? (
-                <BiLogoTypescript className="lang-icon" color="#007acc" size={25} />
-              ) : (
-                <BiLogoJavascript className="lang-icon" color="#F0DB4F" size={25} />
-              )}
+              <span>{play.user.displayName}</span>
             </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex justify-between items-center mt-4 px-2 text-gray-700 ">
+            <Like likeObj={likeObject()} onLikeClick={null} />
+            <PlayShare
+              cover={cover}
+              link={`/plays/${encodeURI(play.github.toLowerCase())}/${play.slug}`}
+            />
+            {play.language === "ts" ? (
+              <BiLogoTypescript className="text-blue-400" size={22}/>
+            ) : (
+              <BiLogoJavascript className="text-yellow-400" size={22}/>
+            )}
           </div>
         </div>
       </div>