Merge pull request #859 from pengkev/dev

added medals to sponsor cards

Author: nrakhshan

client/src/pages/Home/Home.jsx

@@ -30,6 +30,11 @@ import facultylogo from '../../assets/misc/facultylogo.png';
 import bsologo from '../../assets/misc/bsologo.svg';
 import slideshow1 from '../../assets/homeSlideshow/2T5/back.jpg';
 
+import DiamondMedal from './sponsormedals/diamond.png';
+import GoldMedal from './sponsormedals/gold.png';
+import SilverMedal from './sponsormedals/silver.png';
+import BronzeMedal from './sponsormedals/bronze.png';
+
 const PageHome = () => {
   return (
     <>
@@ -319,6 +324,9 @@ const HomePageSponsors = () => {
               const rankClass = item.rank ? `sponsor-card--${item.rank.toLowerCase()}` : '';
               // Extract only the sponsor's name from the label
               const sponsorName = item.label.includes(':') ? item.label.split(': ')[1] : item.label;
+              // Get the appropriate medal icon
+              const medalIcon = getMedalIcon(item.rank);
+              
               return (
                 <div key={`${item.name}-${index}`} className={`sponsor-card ${rankClass}`}>
                   <a
@@ -327,6 +335,13 @@ const HomePageSponsors = () => {
                     rel="noreferrer"
                     className="sponsor-card-link"
                   >
+                    {medalIcon && (
+                      <img 
+                        src={medalIcon} 
+                        alt={`${item.rank} sponsor`} 
+                        className="sponsor-medal-icon"
+                      />
+                    )}
                     <div className="sponsor-image-wrapper">
                       {darkMode ? (
                         <LazyLoadImage
@@ -370,4 +385,20 @@ const PleaseSponsor = () => {
   );
 };
 
+// Create a helper function to map ranks to medal images
+const getMedalIcon = (rank) => {
+  switch (rank?.toLowerCase()) {
+    case 'diamond':
+      return DiamondMedal;
+    case 'gold':
+      return GoldMedal;
+    case 'silver':
+      return SilverMedal;
+    case 'bronze':
+      return BronzeMedal;
+    default:
+      return null;
+  }
+};
+
 export { PageHome };

client/src/pages/Home/Home.scss

@@ -466,6 +466,23 @@
 
   &:hover {
     transform: translateY(-8px);
+    &.sponsor-card--diamond {
+      // Change from var(--jam) (purple) to a diamond-like color
+      border-bottom-color: #a0d8ef; // Light blue diamond color
+      // Optional: Add a subtle shine/sparkle with box-shadow
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 
+                  0 8px 15px rgba(160, 216, 239, 0.3),
+                  0 0 5px rgba(255, 255, 255, 0.6);
+    }
+    &.sponsor-card--gold {
+      border-bottom-color: var(--mikado);
+    }
+    &.sponsor-card--silver {
+      border-bottom-color: #c0c0c0;
+    }
+    &.sponsor-card--bronze {
+      border-bottom-color: #cd7f32;
+    }
   }
 
   // This pseudo-element creates the unobtrusive but obvious border glow
@@ -588,4 +605,25 @@
   }
 }
 
+.sponsor-card {
+  // existing styles...
+  position: relative; // Ensure relative positioning for absolute medal positioning
+}
+
+.sponsor-medal-icon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 35px;
+  height: 35px;
+  object-fit: contain;
+  z-index: 2;
+  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
+  
+  // Add a subtle shine to the medal icons
+  &:hover {
+    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2)) brightness(1.1);
+  }
+}
+
 // --- END: Sponsor styles replacement ---