diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx index 1420a139..255ffd2d 100644 --- a/client/src/pages/Home/Home.jsx +++ b/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 (
{ rel="noreferrer" className="sponsor-card-link" > + {medalIcon && ( + {`${item.rank} + )}
{darkMode ? ( { ); }; +// 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 }; diff --git a/client/src/pages/Home/Home.scss b/client/src/pages/Home/Home.scss index 8ba38d98..a94b80b5 100644 --- a/client/src/pages/Home/Home.scss +++ b/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 --- diff --git a/client/src/pages/Home/sponsormedals/bronze.png b/client/src/pages/Home/sponsormedals/bronze.png new file mode 100644 index 00000000..14684d78 Binary files /dev/null and b/client/src/pages/Home/sponsormedals/bronze.png differ diff --git a/client/src/pages/Home/sponsormedals/diamond.png b/client/src/pages/Home/sponsormedals/diamond.png new file mode 100644 index 00000000..5246fa3b Binary files /dev/null and b/client/src/pages/Home/sponsormedals/diamond.png differ diff --git a/client/src/pages/Home/sponsormedals/gold.png b/client/src/pages/Home/sponsormedals/gold.png new file mode 100644 index 00000000..9a2fbd97 Binary files /dev/null and b/client/src/pages/Home/sponsormedals/gold.png differ diff --git a/client/src/pages/Home/sponsormedals/silver.png b/client/src/pages/Home/sponsormedals/silver.png new file mode 100644 index 00000000..0584e29e Binary files /dev/null and b/client/src/pages/Home/sponsormedals/silver.png differ