showcase page design update

Author: meetoza30

src/pages/showcase/_components/ShowcaseCard/index.tsx

@@ -1,4 +1,3 @@
-
 import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
@@ -10,40 +9,46 @@ import { Tag, TagList, Tags, TagType, User } from '@site/src/data/users';
 import { sortBy } from '@site/src/utils/jsUtils';
 import IdealImage from '@theme/IdealImage';
 
-const TagComp = React.forwardRef<HTMLLIElement, Tag>(
-  ({label, color, description}, ref) => (
-    <li ref={ref} className={styles.tag} title={description}>
-      <span className={styles.textLabel}>{label.toLowerCase()}</span>
-      <span className={styles.colorLabel} style={{backgroundColor: color}} />
-    </li>
-  ),
-);
+const TagComp = React.forwardRef<
+  HTMLLIElement,
+  Tag & {label: string}
+>(({label, color, description}, ref) => (
+  <li 
+    ref={ref} 
+    className={styles.enhancedTag}
+    style={{
+      '--tag-color': color,
+      backgroundColor: `${color}20`,
+      borderColor: `${color}40`
+    } as React.CSSProperties}
+  >
+    <span className={styles.tagDot} style={{backgroundColor: color}}></span>
+    {label.toLowerCase()}
+  </li>
+));
 
 function ShowcaseCardTag({tags}: {tags: TagType[]}) {
   const tagObjects = tags.map((tag) => ({tag, ...Tags[tag]}));
-
-  // Keep same order for all tags
   const tagObjectsSorted = sortBy(tagObjects, (tagObject) =>
     TagList.indexOf(tagObject.tag),
   );
 
   return (
-    <>
+    <ul className={styles.enhancedTagsList}>
       {tagObjectsSorted.map((tagObject, index) => {
         const id = `showcase_card_tag_${tagObject.tag}`;
-
         return (
           <Tooltip
             key={index}
             text={tagObject.description}
-            anchorEl="#__docusaurus"
+            anchorEl={`#${id}`}
             id={id}
           >
             <TagComp key={index} {...tagObject} />
           </Tooltip>
         );
       })}
-    </>
+    </ul>
   );
 }
 
@@ -54,50 +59,59 @@ function ShowcaseCard({user}: {user: User}) {
 
   const handleSourceClick = (e: React.MouseEvent) => {
     e.stopPropagation();
-    // The link will handle the navigation
   };
 
+  console.log(user.preview)
+
   return (
-    <li key={user.title} className={clsx('card shadow--md', styles.card)}>
-      <div className={styles.cardLink} onClick={handleCardClick} />
-      <div className={clsx('card__image', styles.showcaseCardImage)}>
+    <div className={styles.enhancedShowcaseCard}>
+      {/* Image Section */}
+      <div className={styles.showcaseCardImage}>
         <IdealImage img={user.preview} alt={user.title} />
+        {user.tags.includes('favorite') && (
+          <div className={styles.favoriteIcon}>
+            <FavoriteIcon svgClass={styles.svgIconFavorite} size="small" />
+          </div>
+        )}
+        {user.source && (
+          <a
+            href={user.source}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.sourceButton}
+            onClick={handleSourceClick}
+            title="View Source Code"
+          >
+            <span className={styles.sourceIcon}>💻</span>
+            <span className={styles.sourceText}>source</span>
+          </a>
+        )}
       </div>
-      <div className="card__body">
+
+      {/* Content Section */}
+      <div className={styles.showcaseCardContent}>
         <div className={styles.showcaseCardHeader}>
-          <h4 className={styles.showcaseCardTitle}>
-            <Link 
-              href={user.website} 
-              className={styles.showcaseCardLink}
-              target="_blank"
-            >
-              {user.title}
-            </Link>
-          </h4>
-          {user.tags.includes('favorite') && (
-            <FavoriteIcon svgClass={styles.svgIconFavorite} size="small" />
-          )}
-          {user.source && (
-            <Link
-              href={user.source}
-              className={clsx(
-                'button button--secondary button--sm',
-                styles.showcaseCardSrcBtn,
-              )}
-              target="_blank"
-              rel="noopener noreferrer"
-              onClick={handleSourceClick}
-            >
-              <Translate id="showcase.card.sourceLink">source</Translate>
-            </Link>
-          )}
+          <h3 className={styles.showcaseCardTitle}>{user.title}</h3>
         </div>
-        <p className={styles.showcaseCardBody}>{user.description}</p>
-      </div>
-      <ul className={clsx('card__footer', styles.cardFooter)}>
+        
+        <p className={styles.showcaseCardDescription}>{user.description}</p>
+        
+        {/* Tags */}
         <ShowcaseCardTag tags={user.tags} />
-      </ul>
-    </li>
+        
+        {/* Footer */}
+        <div className={styles.showcaseCardFooter}>
+          <button className={styles.viewButton} onClick={handleCardClick}>
+           
+            <span className={styles.viewIcon}>👁️</span>
+            View Project
+          </button>
+        </div>
+      </div>
+
+      {/* Card Effects */}
+      <div className={styles.cardGlow}></div>
+    </div>
   );
 }