From c591c10e0540bc772c0ad67b5657937b36fa075f Mon Sep 17 00:00:00 2001 From: meetoza30 Date: Sat, 30 Aug 2025 22:02:12 +0530 Subject: [PATCH 1/2] updated the design of the /our-sponsors page --- .../our-sponsors/SponsorCard/SponsorCard.css | 460 +++++++ src/pages/our-sponsors/SponsorCard/index.tsx | 114 +- src/pages/our-sponsors/Sponsors.css | 1102 ++++++++++++----- src/pages/our-sponsors/index.tsx | 502 +++++--- 4 files changed, 1675 insertions(+), 503 deletions(-) create mode 100644 src/pages/our-sponsors/SponsorCard/SponsorCard.css diff --git a/src/pages/our-sponsors/SponsorCard/SponsorCard.css b/src/pages/our-sponsors/SponsorCard/SponsorCard.css new file mode 100644 index 00000000..36c82b4a --- /dev/null +++ b/src/pages/our-sponsors/SponsorCard/SponsorCard.css @@ -0,0 +1,460 @@ +/* Enhanced Sponsor Card Styles */ + +@keyframes cardFloat { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-4px); + } +} + +@keyframes socialPulse { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } +} + +@keyframes tierGlow { + 0%, 100% { + box-shadow: 0 0 0 0 var(--tier-color, rgba(102, 126, 234, 0.4)); + } + 50% { + box-shadow: 0 0 0 4px var(--tier-color, rgba(102, 126, 234, 0.1)); + } +} + +/* Main Card */ +.enhanced-sponsor-card { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 20px; + padding: 24px; + backdrop-filter: blur(20px); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + height: 100%; +} + +.enhanced-sponsor-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(240, 147, 251, 0.02) 100%); + opacity: 0; + transition: opacity 0.4s ease; +} + +.enhanced-sponsor-card:hover::before { + opacity: 1; +} + +.enhanced-sponsor-card:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(102, 126, 234, 0.3); + transform: translateY(-8px) scale(1.02); + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.2), + 0 10px 20px rgba(102, 126, 234, 0.15); +} + +/* Featured Cards */ +.enhanced-sponsor-card.featured { + background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 50%, rgba(240, 147, 251, 0.1) 100%); + border: 1px solid rgba(102, 126, 234, 0.3); + padding: 32px; +} + +.enhanced-sponsor-card.featured:hover { + transform: translateY(-12px) scale(1.03); + box-shadow: + 0 30px 60px rgba(0, 0, 0, 0.3), + 0 15px 30px rgba(102, 126, 234, 0.2); +} + +/* Tier Styling */ +.enhanced-sponsor-card.tier-platinum { + --tier-color: rgba(229, 231, 235, 0.4); + border-color: rgba(229, 231, 235, 0.2); +} + +.enhanced-sponsor-card.tier-gold { + --tier-color: rgba(245, 158, 11, 0.4); + border-color: rgba(245, 158, 11, 0.2); +} + +.enhanced-sponsor-card.tier-silver { + --tier-color: rgba(156, 163, 175, 0.4); + border-color: rgba(156, 163, 175, 0.2); +} + +.enhanced-sponsor-card.tier-bronze { + --tier-color: rgba(217, 119, 6, 0.4); + border-color: rgba(217, 119, 6, 0.2); +} + +/* Tier Badge */ +.tier-badge { + position: absolute; + top: 16px; + right: 16px; + display: flex; + align-items: center; + gap: 4px; + padding: 6px 12px; + border-radius: 20px; + font-size: 12px; + font-weight: 700; + color: white; + text-transform: uppercase; + letter-spacing: 0.5px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + animation: tierGlow 3s infinite; +} + +.tier-icon { + font-size: 12px; +} + +.tier-text { + font-size: 10px; +} + +/* Avatar Section */ +.sponsor-avatar-section { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 20px; + position: relative; +} + +.sponsor-avatar { + width: 80px; + height: 80px; + border-radius: 20px; + overflow: hidden; + margin-bottom: 12px; + position: relative; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); + transition: all 0.3s ease; +} + +.enhanced-sponsor-card:hover .sponsor-avatar { + transform: scale(1.05); + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); +} + +.enhanced-sponsor-card.featured .sponsor-avatar { + width: 100px; + height: 100px; + border-radius: 25px; +} + +.avatar-image { + width: 100%; + height: 100%; + object-fit: cover; +} + +.avatar-placeholder { + width: 100%; + height: 100%; + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + display: flex; + align-items: center; + justify-content: center; +} + +.avatar-initials { + font-size: 24px; + font-weight: 700; + color: white; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.enhanced-sponsor-card.featured .avatar-initials { + font-size: 32px; +} + +/* Featured Badge */ +.featured-badge { + display: flex; + align-items: center; + gap: 4px; + padding: 4px 12px; + background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); + border-radius: 15px; + font-size: 12px; + font-weight: 600; + color: white; + box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); + animation: cardFloat 3s ease-in-out infinite; +} + +.featured-icon { + font-size: 12px; + animation: socialPulse 2s infinite; +} + +/* Content Section */ +.sponsor-content { + flex: 1; + display: flex; + flex-direction: column; + text-align: center; +} + +.sponsor-name { + font-size: 20px; + font-weight: 700; + color: #ffffff; + margin: 0 0 8px 0; + line-height: 1.3; + background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.enhanced-sponsor-card.featured .sponsor-name { + font-size: 24px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.sponsor-description { + font-size: 14px; + color: #94a3b8; + margin: 0 0 20px 0; + line-height: 1.4; + flex: 1; +} + +.enhanced-sponsor-card.featured .sponsor-description { + font-size: 16px; + color: #cbd5e1; +} + +/* Social Links */ +.sponsor-social-links { + margin: 16px 0; +} + +.social-links-header { + margin-bottom: 12px; +} + +.social-label { + font-size: 12px; + color: #94a3b8; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.social-icons { + display: flex; + justify-content: center; + gap: 12px; +} + +.social-link { + width: 36px; + height: 36px; + border-radius: 10px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + display: flex; + align-items: center; + justify-content: center; + color: #cbd5e1; + text-decoration: none; + transition: all 0.3s ease; + backdrop-filter: blur(10px); +} + +.social-link:hover { + background: var(--social-color); + border-color: var(--social-color); + color: white; + transform: translateY(-2px) scale(1.1); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); +} + +.social-icon { + font-size: 16px; +} + +.enhanced-sponsor-card.featured .social-link { + width: 40px; + height: 40px; + border-radius: 12px; +} + +.enhanced-sponsor-card.featured .social-icon { + font-size: 18px; +} + +/* Appreciation Message */ +.appreciation-message { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + margin-top: auto; + padding: 12px 16px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 25px; + font-size: 13px; + color: #cbd5e1; + font-weight: 600; + transition: all 0.3s ease; +} + +.enhanced-sponsor-card:hover .appreciation-message { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(102, 126, 234, 0.3); + color: #ffffff; +} + +.appreciation-icon { + font-size: 14px; + animation: socialPulse 3s infinite; +} + +.appreciation-text { + font-size: 12px; +} + +.enhanced-sponsor-card.featured .appreciation-message { + padding: 14px 20px; + font-size: 14px; + margin-top: 20px; +} + +.enhanced-sponsor-card.featured .appreciation-text { + font-size: 13px; +} + +/* Card Glow Effect */ +.card-glow { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 20px; + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; + background: radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 70%); +} + +.enhanced-sponsor-card:hover .card-glow { + opacity: 1; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .enhanced-sponsor-card { + padding: 20px; + } + + .enhanced-sponsor-card.featured { + padding: 24px; + } + + .sponsor-avatar { + width: 70px; + height: 70px; + } + + .enhanced-sponsor-card.featured .sponsor-avatar { + width: 85px; + height: 85px; + } + + .sponsor-name { + font-size: 18px; + } + + .enhanced-sponsor-card.featured .sponsor-name { + font-size: 20px; + } + + .social-icons { + gap: 10px; + } + + .social-link { + width: 32px; + height: 32px; + } + + .enhanced-sponsor-card.featured .social-link { + width: 36px; + height: 36px; + } + + .social-icon { + font-size: 14px; + } + + .enhanced-sponsor-card.featured .social-icon { + font-size: 16px; + } +} + +@media (max-width: 480px) { + .tier-badge { + position: relative; + top: 0; + right: 0; + margin-bottom: 12px; + align-self: center; + } + + .sponsor-avatar { + width: 60px; + height: 60px; + } + + .enhanced-sponsor-card.featured .sponsor-avatar { + width: 75px; + height: 75px; + } + + .avatar-initials { + font-size: 20px; + } + + .enhanced-sponsor-card.featured .avatar-initials { + font-size: 26px; + } +} + +/* Force consistent colors */ +[data-theme='dark'] .enhanced-sponsor-card *, +[data-theme='light'] .enhanced-sponsor-card *, +html[data-theme='dark'] .enhanced-sponsor-card *, +html[data-theme='light'] .enhanced-sponsor-card * { + color: inherit !important; +} + +[data-theme='dark'] .enhanced-sponsor-card .sponsor-name, +[data-theme='light'] .enhanced-sponsor-card .sponsor-name { + color: #ffffff !important; +} diff --git a/src/pages/our-sponsors/SponsorCard/index.tsx b/src/pages/our-sponsors/SponsorCard/index.tsx index 1d964130..c3271dae 100644 --- a/src/pages/our-sponsors/SponsorCard/index.tsx +++ b/src/pages/our-sponsors/SponsorCard/index.tsx @@ -1,8 +1,20 @@ -import { Sponsor } from '@site/src/database/sponsors'; import React from 'react'; import { FaGithub, FaLinkedin, FaTwitter, FaInstagram } from 'react-icons/fa'; +import './SponsorCard.css'; -const SponsorCard: React.FC = ({ +interface SponsorCardProps { + name: string; + image: string; + description: string; + github?: string; + linkedin?: string; + twitter?: string; + instagram?: string; + featured?: boolean; + category?: string +} + +const SponsorCard: React.FC = ({ name, image, description, @@ -10,22 +22,98 @@ const SponsorCard: React.FC = ({ linkedin, twitter, instagram, + featured = false, + category }) => { + const getInitials = (name: string) => { + return name + .split(' ') + .map(word => word.charAt(0)) + .join('') + .substring(0, 2) + .toUpperCase(); + }; + + const socialLinks = [ + { url: github, icon: FaGithub, label: 'GitHub', color: '#333' }, + { url: linkedin, icon: FaLinkedin, label: 'LinkedIn', color: '#0077B5' }, + { url: twitter, icon: FaTwitter, label: 'Twitter', color: '#1DA1F2' }, + { url: instagram, icon: FaInstagram, label: 'Instagram', color: '#E4405F' }, + ].filter(link => link.url && link.url !== '#'); + return ( -
-
- {name} +
+ {/* Tier Badge */} + + + {/* Avatar Section */} +
+
+ {image ? ( + {name} + ) : ( +
+ {getInitials(name)} +
+ )} +
+ {featured && ( +
+ ⭐ + Featured +
+ )}
-

{name}

-

{description}

-
- {github && } - {linkedin && } - {twitter && } - {instagram && } + + {/* Content Section */} +
+

{name}

+

{description}

+ + {/* Social Links */} + {socialLinks.length > 0 && ( +
+
+ Connect: +
+
+ {socialLinks.map((link, index) => { + const IconComponent = link.icon; + return ( + + + + ); + })} +
+
+ )} + + {/* Appreciation Message */} + {category != 'we-sponsor' && +
+ 🙏 + Thank you for your support! +
+ } +
+ + {/* Card Effects */} +
); }; -export default SponsorCard; \ No newline at end of file +export default SponsorCard; diff --git a/src/pages/our-sponsors/Sponsors.css b/src/pages/our-sponsors/Sponsors.css index 4c8e2b72..d659dea4 100644 --- a/src/pages/our-sponsors/Sponsors.css +++ b/src/pages/our-sponsors/Sponsors.css @@ -1,414 +1,912 @@ -.sponsor-page { - padding: 2rem; - max-width: 1200px; - margin: 0 auto; +/* Enhanced Sponsors Page Styles - Matching Podcasts Design */ + +/* Keyframe Animations */ +@keyframes sponsorFadeIn { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } } -[data-theme='dark'] .sponsor-page { - background: var(--dark-bg-primary); - color: var(--dark-text-primary); +@keyframes shimmerEffect { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } } -.sponsor-page .sponsor-header { - text-align: center; - margin-bottom: 2rem; +@keyframes floatAnimation { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-6px); + } } -.TitleText { - margin-top: 1rem; - background: linear-gradient(90deg, - rgb(152 0 255) 0%, - rgb(246 41 41) 50%, - rgb(255 169 8) 100%); - background-clip: text; - -webkit-text-fill-color: transparent; +@keyframes cardGlow { + 0%, 100% { + box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); + } + 50% { + box-shadow: 0 0 0 8px rgba(102, 126, 234, 0.1); + } } -/* Tabs Styling */ -.tabs { - display: flex; - justify-content: center; - margin-bottom: 2rem; - border-bottom: 1px solid #e2e8f0; - padding-bottom: 0.5rem; -} - -[data-theme='dark'] .tabs { - border-bottom-color: var(--dark-border); -} - -.tab-button { - padding: 0.75rem 1.5rem; - margin: 0 0.5rem; - border: none; - background: none; - font-size: 1.1rem; - font-weight: 600; - color: #6b7280; - cursor: pointer; - transition: all 0.3s ease; - position: relative; - outline: none; - display: flex; - align-items: center; - gap: 8px; +@keyframes backgroundShift { + 0%, 100% { transform: translateX(0px) translateY(0px) scale(1); } + 25% { transform: translateX(30px) translateY(-20px) scale(1.02); } + 50% { transform: translateX(-10px) translateY(30px) scale(0.98); } + 75% { transform: translateX(-25px) translateY(-15px) scale(1.01); } } -[data-theme='dark'] .tab-button { - color: var(--dark-text-secondary); +/* Main Container */ +.enhanced-sponsors-container { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; + background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important; + color: #e2e8f0 !important; + min-height: 100vh; + position: relative; + overflow: hidden; } -.tab-button.active { - color: #4f46e5; +/* Force theme independence */ +[data-theme='dark'] .enhanced-sponsors-container, +[data-theme='light'] .enhanced-sponsors-container, +html[data-theme='dark'] .enhanced-sponsors-container, +html[data-theme='light'] .enhanced-sponsors-container { + background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important; + color: #e2e8f0 !important; +} + +/* Background Effects */ +.enhanced-sponsors-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.08) 0%, transparent 60%), + radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.06) 0%, transparent 60%), + radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.04) 0%, transparent 60%); + animation: backgroundShift 25s ease-in-out infinite; + pointer-events: none; +} + +/* Hero Section */ +.sponsors-hero { + padding: 80px 20px 60px; + text-align: center; + position: relative; + z-index: 1; } -.tab-badge { - background-color: #e0e7ff; - color: #4f46e5; - border-radius: 9999px; - font-size: 0.75rem; - font-weight: 600; - padding: 2px 8px; - min-width: 24px; - text-align: center; - transition: all 0.2s ease; +.sponsors-hero-content { + max-width: 900px; + margin: 0 auto; + animation: sponsorFadeIn 0.8s ease-out; } -.tab-button.active .tab-badge { - background-color: #4f46e5; - color: white; +.hero-badge { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 12px 24px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 50px; + font-size: 14px; + font-weight: 600; + margin-bottom: 24px; + backdrop-filter: blur(10px); +} + +.badge-icon { + font-size: 16px; + animation: floatAnimation 3s ease-in-out infinite; +} + +.sponsors-hero-title { + font-size: 48px; + font-weight: 900; + background: linear-gradient(135deg, #ffffff 0%, #f8fafc 30%, #e2e8f0 60%, #cbd5e1 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin: 0 0 24px 0; + line-height: 1.1; + letter-spacing: -0.02em; +} + +.sponsors-hero-description { + font-size: 18px; + color: #cbd5e1; + line-height: 1.6; + margin: 0 0 40px 0; + opacity: 0.9; +} + +/* Partnership CTA */ +.partnership-cta { + display: flex; + justify-content: center; + gap: 16px; + margin-bottom: 50px; + flex-wrap: wrap; } -.no-sponsors { - grid-column: 1 / -1; - text-align: center; - padding: 2rem; - color: #6b7280; - font-size: 1.1rem; +.primary-cta-button { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + text-align: center; + + padding: 16px 32px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + border: none; + border-radius: 12px; + color: white; + font-weight: 700; + font-size: 16px; + cursor: pointer; + transition: all 0.4s ease; + text-transform: uppercase; + letter-spacing: 0.5px; + text-decoration: none; + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); } -.tab-button::after { - content: ''; - position: absolute; - bottom: -0.5rem; - left: 0; - width: 0; - height: 3px; - background: linear-gradient(90deg, #4f46e5, #7c3aed); - transition: width 0.3s ease; +.primary-cta-button:hover { + transform: translateY(-3px) scale(1.02); + box-shadow: 0 15px 35px rgba(102, 126, 234, 0.6); + text-decoration: none; } -.tab-button.active::after { - width: 100%; +.secondary-cta-button { + display: flex; + align-items: center; + gap: 8px; + padding: 16px 32px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 12px; + color: #cbd5e1; + font-weight: 600; + font-size: 16px; + cursor: pointer; + text-decoration: none; + transition: all 0.3s ease; + backdrop-filter: blur(10px); } -.tab-content { - display: none; - animation: fadeIn 0.5s ease; +.secondary-cta-button:hover { + background: rgba(255, 255, 255, 0.2); + color: #ffffff; + text-decoration: none; + transform: translateY(-2px); } -.tab-content.active { - display: block; +.cta-icon { + font-size: 16px; } -.sponsor-page .sponsors-list { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); - gap: 20px; - margin-top: 20px; -} - -.sponsor-page .sponsor-card { - position: relative; - border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 20px; - background: #fff; - text-align: center; - transition: transform 0.3s ease, box-shadow 0.3s ease; - display: flex; - flex-direction: column; - align-items: center; +/* View Toggle Section */ +.view-toggle-section { + padding: 40px 20px; + position: relative; + z-index: 2; } -[data-theme='dark'] .sponsor-page .sponsor-card { - background: var(--dark-card-bg); - border-color: var(--dark-border); +.view-toggle-container { + max-width: 1200px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 24px; + align-items: center; } -.sponsor-page .sponsor-card::before { - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - transition: left 0.3s ease-in-out; +.search-section { + width: 100%; + max-width: 500px; } -.sponsor-page .sponsor-card:hover::before { - left: 100%; +.search-wrapper { + position: relative; } -.sponsor-page .sponsor-card:hover { - transform: translateY(-5px); - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); +.search-icon { + position: absolute; + left: 16px; + top: 50%; + transform: translateY(-50%); + font-size: 18px; + opacity: 0.6; } -.sponsor-page .sponsor-card img { - width: 100%; - height: 100%; - object-fit: cover; +.search-input { + width: 100%; + padding: 16px 16px 16px 48px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 12px; + color: #ffffff; + font-size: 16px; + backdrop-filter: blur(10px); + transition: all 0.3s ease; +} + +.search-input:focus { + outline: none; + border-color: #667eea; + background: rgba(255, 255, 255, 0.15); + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); +} + +.search-input::placeholder { + color: #94a3b8; +} + +.view-toggle { + display: flex; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + padding: 8px; + backdrop-filter: blur(20px); + gap: 8px; } -.sponsor-page .sponsor-card .avatar-wrapper { - width: 110px; - height: 110px; - margin-bottom: 12px; - border-radius: 50%; - overflow: hidden; - box-shadow: 0 0 0 4px #f9fafb; +.toggle-button { + display: flex; + align-items: center; + gap: 12px; + padding: 16px 24px; + background: transparent; + border: none; + border-radius: 12px; + color: #cbd5e1; + font-size: 15px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + white-space: nowrap; } -.sponsor-page .sponsor-card .sponsor-name { - font-size: 1.2rem; - font-weight: 600; - margin-bottom: 4px; - color: #111827; +.toggle-button::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent); + transition: left 0.6s ease; } -[data-theme='dark'] .sponsor-page .sponsor-card .sponsor-name { - color: var(--dark-text-primary); +.toggle-button:hover::before { + left: 100%; } -.sponsor-page .sponsor-card .sponsor-desc { - font-size: 0.95rem; - color: #4b5563; - margin-bottom: 10px; - line-height: 1.4; +.toggle-button:hover { + background: rgba(255, 255, 255, 0.1); + color: #ffffff; + transform: translateY(-1px); } -[data-theme='dark'] .sponsor-page .sponsor-card .sponsor-desc { - color: var(--dark-text-secondary); +.toggle-button.active { + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + color: #ffffff; + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); } -.sponsor-page .sponsor-card .social-links { - display: flex; - justify-content: center; - gap: 10px; - margin-top: 8px; +.toggle-icon { + font-size: 18px; +} + +.toggle-text { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.toggle-count { + font-size: 12px; + opacity: 0.8; + font-weight: 500; +} + +/* Section Enhancements */ +.section-count { + font-size: 18px; + opacity: 0.7; + font-weight: 500; + margin-left: 8px; +} + +.section-description { + text-align: center; + margin-bottom: 40px; + max-width: 600px; + margin-left: auto; + margin-right: auto; } -.sponsor-page .sponsor-card .social-links a { - display: flex; - width: 36px; - height: 36px; - border-radius: 50%; - color: #fff; - background-color: var(--ifm-color-primary); +.section-description p { + font-size: 16px; + color: #cbd5e1; + line-height: 1.6; + margin: 0; +} + +.we-sponsor-section { + margin-bottom: 60px; +} + +.we-sponsor-card { + background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%); + border-color: rgba(16, 185, 129, 0.2); +} + +.partnership-button.secondary { + background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); +} + +.partnership-button.secondary:hover { + background: linear-gradient(135deg, #34d399 0%, #0891b2 100%); + box-shadow: 0 15px 35px rgba(16, 185, 129, 0.4); +} + +/* Responsive Design for Toggle */ +@media (max-width: 768px) { + .view-toggle-container { + padding: 0 16px; + } + + .view-toggle { + flex-direction: column; + width: 100%; + max-width: 400px; + } + + .toggle-button { + justify-content: center; + padding: 16px 20px; + } + + .toggle-text { align-items: center; + } + + .search-input { + font-size: 14px; + } +} + +@media (max-width: 480px) { + .toggle-button { + padding: 14px 18px; + font-size: 14px; + } + + .toggle-icon { + font-size: 16px; + } + + .section-title { + font-size: 24px; + flex-wrap: wrap; justify-content: center; - transition: background-color 0.3s, transform 0.3s; + } + + .section-count { + font-size: 16px; + margin-left: 0; + } } -.sponsor-page .sponsor-card .social-links a:hover { - transform: scale(1.1); +/* Stats */ +.sponsors-stats { + display: flex; + justify-content: center; + gap: 40px; + margin-top: 50px; + flex-wrap: wrap; +} + +.stat-item { + text-align: center; + padding: 20px; + background: rgba(255, 255, 255, 0.05); + border-radius: 16px; + border: 1px solid rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + transition: all 0.3s ease; + min-width: 140px; +} + +.stat-item:hover { + background: rgba(255, 255, 255, 0.1); + transform: translateY(-4px); + box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); +} + +.stat-number { + font-size: 32px; + font-weight: 900; + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 8px; +} + +.stat-label { + font-size: 14px; + color: #94a3b8; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +/* Filters Section */ +.sponsors-filters { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 20px; + padding: 24px; + margin: 40px auto; + max-width: 1200px; + backdrop-filter: blur(20px); + display: flex; + flex-direction: column; + gap: 20px; + position: relative; + z-index: 2; } -.sponsor-page .sponsor-card .social-links a.github:hover { - background-color: #333; +.filter-search { + position: relative; + max-width: 400px; + margin: 0 auto; } -.sponsor-page .sponsor-card .social-links a.linkedin:hover { - background-color: #0073b1; +.search-icon { + position: absolute; + left: 16px; + top: 50%; + transform: translateY(-50%); + font-size: 18px; + opacity: 0.6; } -.sponsor-page .sponsor-card .social-links a.twitter:hover { - background-color: #1da1f2; +.search-input { + width: 100%; + padding: 16px 16px 16px 48px; + background: rgba(255, 255, 255, 0.1); + background-color: purple; + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 12px; + color: #000000; + font-size: 16px; + backdrop-filter: blur(10px); + transition: all 0.3s ease; } -.sponsor-page .sponsor-card .social-links a.instagram:hover { - background-color: #e4405f; +.search-input:focus { + outline: none; + color: black; + + border-color: #667eea; + background: rgba(255, 255, 255, 0.15); + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); } -.sponsor-page .sponsor-card.empty-card { - cursor: pointer; - background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%); - border: 2px dashed #4f46e5; - color: #4f46e5; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - padding: 40px 20px; +.search-input::placeholder { + color: #94a3b8; +} + +.filter-tabs { display: flex; - flex-direction: column; - align-items: center; justify-content: center; - min-height: 200px; + gap: 12px; + flex-wrap: wrap; +} + +.filter-tab { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 20px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); + color: #cbd5e1; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; position: relative; overflow: hidden; } -.sponsor-page .sponsor-card.empty-card:hover { - transform: translateY(-3px); - box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); +.filter-tab::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent); + transition: left 0.6s ease; } -.sponsor-page .sponsor-card.empty-card::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 300%; - height: 100%; - background: linear-gradient( - 90deg, - transparent, - rgba(255, 255, 255, 0.4), - transparent - ); - transition: 0.5s; - z-index: 1; +.filter-tab:hover::before { + left: 100%; } -.sponsor-page .sponsor-card.empty-card:hover::before { - left: 100%; +.filter-tab:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(102, 126, 234, 0.3); + transform: translateY(-2px); } -.sponsor-page .sponsor-card.empty-card:hover { - transform: translateY(-5px); - box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); +.filter-tab.active { + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + border-color: transparent; + color: #ffffff; + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); } -.sponsor-page .sponsor-card.empty-card h3 { - font-size: 1.1rem; - font-weight: 600; - color: #4f46e5; - margin-top: 1rem; - z-index: 2; +.tab-icon { + font-size: 16px; } -.sponsor-page .sponsor-card.empty-card .join-icon { - font-size: 2rem; - color: #4f46e5; - transition: transform 0.3s ease; - z-index: 2; - margin: 0; - padding: 0; +/* Content Section */ +.sponsors-content-section { + padding: 40px 20px 80px; + position: relative; + z-index: 2; } -.sponsor-page .scanner-popup { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - justify-content: center; - align-items: center; - z-index: 1000; +.section-title { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + font-size: 32px; + font-weight: 700; + color: #ffffff; + margin-bottom: 40px; + text-align: center; } -.scanner-content { - position: relative; - padding: 2rem; - border-radius: 8px; - text-align: center; - max-width: 400px; - width: 100%; - background: white; +.title-icon { + font-size: 28px; } -[data-theme='dark'] .scanner-content { - background: var(--dark-bg-secondary); - color: var(--dark-text-primary); +/* Featured Sponsors */ +.featured-sponsors-section { + margin-bottom: 80px; } -.sponsors-section { - margin-top: 2rem; +.featured-sponsors-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 32px; + max-width: 1400px; + margin: 0 auto; } -.support-links { - margin-top: 5rem; - display: flex; - justify-content: center; - gap: 16px; - align-items: center; +/* Regular Sponsors */ +.current-sponsors-section, +.past-sponsors-section { + margin-bottom: 60px; } -.scanner-button { - background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); - color: white; - padding: 12px 28px 12px 28px; /* Fixed padding to prevent jumping */ - border-radius: 8px; - cursor: pointer; - border: none; - font-size: 1rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; - box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3), 0 2px 4px -1px rgba(79, 70, 229, 0.2); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - position: relative; - overflow: hidden; - min-width: 200px; - text-align: center; +.sponsors-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 24px; + max-width: 1400px; + margin: 0 auto; } -.scanner-button::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); - transition: 0.5s; - z-index: 1; +.sponsor-wrapper, +.featured-sponsor-wrapper { + animation: sponsorFadeIn 0.6s ease-out both; } -.scanner-button > * { - position: relative; - z-index: 2; +/* Partnership Section */ +.partnership-section { + margin: 80px auto 20px; + max-width: 800px; } -.scanner-button:hover { - transform: translateY(-2px); - box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4), 0 4px 6px -2px rgba(79, 70, 229, 0.2); +.partnership-card { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 24px; + padding: 40px; + backdrop-filter: blur(20px); + text-align: center; + transition: all 0.4s ease; + position: relative; + overflow: hidden; } -.scanner-button:hover::before { - left: 100%; +.partnership-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(240, 147, 251, 0.02) 100%); + opacity: 0; + transition: opacity 0.4s ease; } -.scanner-button:active { - transform: translateY(0); - box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3), 0 2px 4px -1px rgba(79, 70, 229, 0.2); +.partnership-card:hover::before { + opacity: 1; +} + +.partnership-card:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(102, 126, 234, 0.3); + transform: translateY(-6px); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); +} + +.partnership-icon { + font-size: 48px; + margin-bottom: 20px; + animation: floatAnimation 4s ease-in-out infinite; } -.close-button { - position: absolute; - top: 12px; - right: 12px; - background: transparent; - border: none; - color: #444; - cursor: pointer; - padding: 4px; - transition: color 0.2s; +.partnership-title { + font-size: 28px; + font-weight: 700; + color: #ffffff; + margin: 0 0 16px 0; } -.close-button:hover { - color: #000; +.partnership-description { + font-size: 16px; + color: #cbd5e1; + line-height: 1.6; + margin: 0 0 32px 0; } -@media (max-width: 600px) { - .sponsor-card { - width: 100%; - } -} \ No newline at end of file +.partnership-benefits { + display: flex; + justify-content: center; + gap: 24px; + margin-bottom: 32px; + flex-wrap: wrap; +} + +.benefit-item { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + background: rgba(255, 255, 255, 0.1); + border-radius: 20px; + font-size: 14px; + font-weight: 600; +} + +.benefit-icon { + font-size: 14px; +} + +.partnership-button { + display: inline-flex; + align-items: center; + justify-content: center; + /* gap: 10px; */ + padding: 16px 32px; + margin-left: auto; + margin-right: auto; + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + border: none; + border-radius: 12px; + color: white; + font-weight: 700; + font-size: 16px; + cursor: pointer; + transition: all 0.4s ease; + text-transform: uppercase; + letter-spacing: 0.5px; + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); +} + +.partnership-button:hover { + transform: translateY(-3px) scale(1.02); + box-shadow: 0 15px 35px rgba(102, 126, 234, 0.6); +} + +.button-icon { + font-size: 16px; +} + +/* Appreciation Section */ +.appreciation-section { + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 24px; + padding: 60px 40px; + margin: 80px auto 40px; + max-width: 800px; + text-align: center; + backdrop-filter: blur(20px); +} + +.appreciation-title { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + font-size: 28px; + font-weight: 700; + color: #ffffff; + margin: 0 0 20px 0; +} + +.appreciation-text { + font-size: 18px; + color: #cbd5e1; + line-height: 1.6; + margin: 0; +} + +/* No Results */ +.no-results { + text-align: center; + padding: 80px 20px; + max-width: 400px; + margin: 0 auto; +} + +.no-results-icon { + font-size: 64px; + margin-bottom: 24px; + opacity: 0.6; +} + +.no-results h3 { + font-size: 24px; + font-weight: 700; + color: #ffffff; + margin-bottom: 12px; +} + +.no-results p { + color: #94a3b8; + font-size: 16px; +} + +/* Responsive Design */ +@media (max-width: 1200px) { + .sponsors-grid { + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 20px; + } + + .featured-sponsors-grid { + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + } +} + +@media (max-width: 768px) { + .enhanced-sponsors-container { + padding: 0 16px; + } + + .sponsors-hero { + padding: 60px 20px 40px; + } + + .sponsors-hero-title { + font-size: 36px; + } + + .sponsors-stats { + flex-direction: column; + gap: 16px; + align-items: center; + } + + .stat-item { + min-width: 120px; + } + + .partnership-cta { + flex-direction: column; + align-items: center; + } + + .sponsors-filters { + margin: 20px 16px; + } + + .filter-tabs { + flex-direction: column; + gap: 8px; + } + + .filter-tab { + justify-content: center; + width: 100%; + } + + .sponsors-grid, + .featured-sponsors-grid { + grid-template-columns: 1fr; + gap: 20px; + } + + .partnership-card { + padding: 32px 20px; + } + + .partnership-benefits { + flex-direction: column; + align-items: center; + gap: 12px; + } +} + +@media (max-width: 480px) { + .sponsors-hero-title { + font-size: 28px; + } + + .section-title { + font-size: 24px; + } + + .search-input { + font-size: 14px; + } + + .primary-cta-button, + .secondary-cta-button, + .partnership-button { + padding: 14px 24px; + font-size: 14px; + text-decoration: none; + } +} + +/* Force all text colors to be consistent */ +[data-theme='dark'] .enhanced-sponsors-container *, +[data-theme='light'] .enhanced-sponsors-container *, +html[data-theme='dark'] .enhanced-sponsors-container *, +html[data-theme='light'] .enhanced-sponsors-container * { + color: inherit !important; +} + +[data-theme='dark'] .enhanced-sponsors-container h1, +[data-theme='dark'] .enhanced-sponsors-container h2, +[data-theme='dark'] .enhanced-sponsors-container h3, +[data-theme='light'] .enhanced-sponsors-container h1, +[data-theme='light'] .enhanced-sponsors-container h2, +[data-theme='light'] .enhanced-sponsors-container h3 { + color: #ffffff !important; +} diff --git a/src/pages/our-sponsors/index.tsx b/src/pages/our-sponsors/index.tsx index 15653ba4..e2951c5e 100644 --- a/src/pages/our-sponsors/index.tsx +++ b/src/pages/our-sponsors/index.tsx @@ -1,219 +1,345 @@ -import React, { useState, useRef, useEffect } from "react"; -import SponsorCard from "./SponsorCard"; -import "./Sponsors.css"; -import Layout from "@theme/Layout"; -import { FaPlusCircle, FaTimes } from 'react-icons/fa'; -import Head from "@docusaurus/Head"; -import sponsors from "@site/src/database/sponsors"; -import { useHistory } from '@docusaurus/router'; - -type TabType = 'current' | 'past'; - -const OurSponsors: React.FC = () => { - const [showScanner, setShowScanner] = useState(false); - const [activeTab, setActiveTab] = useState('current'); - const modalRef = useRef(null); - const history = useHistory(); - -// Filter for current sponsors (exclude isWeSponsor) - const currentSponsors = sponsors.filter( - (s) => !s.isPastSponsor && !s.isWeSponsor); - const pastSponsors = sponsors.filter(s => s.isPastSponsor); - - // Filter for people we sponsor - const weSponsorPeople = sponsors.filter((s) => s.isWeSponsor); - - const handleJoinSponsor = () => setShowScanner(true); - - const handlePaymentSuccess = () => { - setShowScanner(false); - alert("Thanks, we will redirect to Github Sponsors page, upon sponsoring you will be added to our sponsors list."); - window.location.href = 'https://github.com/sponsors/sanjay-kv?o=esb'; - }; +import React, { useState } from 'react'; +import Layout from '@theme/Layout'; +import type { ReactElement } from 'react'; +import SponsorCard from './SponsorCard/index'; +import sponsors from '@site/src/database/sponsors'; +import './Sponsors.css'; +import Link from '@docusaurus/Link'; - const handleCloseModal = () => setShowScanner(false); +interface FilteredSponsor { + name: string; + image: string; + description: string; + github?: string; + linkedin?: string; + twitter?: string; + instagram?: string; + category: 'current' | 'past' | 'we-sponsor'; +} - const handleTabChange = (tab: TabType) => { - setActiveTab(tab); - }; +export default function OurSponsors(): ReactElement { + const [activeView, setActiveView] = useState<'sponsors' | 'we-sponsor'>('sponsors'); + const [searchTerm, setSearchTerm] = useState(''); - useEffect(() => { - if (!showScanner) return; + // // Enhanced function to determine tier based on description and profile strength + // const determineTier = (sponsor: any): 'platinum' | 'gold' | 'silver' | 'bronze' => { + // const description = sponsor.description.toLowerCase(); + // const socialCount = [sponsor.github, sponsor.linkedin, sponsor.twitter, sponsor.instagram].filter(Boolean).length; + + // // Platinum tier - Directors, Team leads, Major organizations + // if (description.includes('director') || + // description.includes('team lead') || + // description.includes('founder') || + // sponsor.name === 'Homebrew' || + // sponsor.name === 'GSSOC' || + // sponsor.name === 'Sarah Drasner' || + // sponsor.name === 'Eduardo San Martin' || + // sponsor.name === 'Razvan Stoenescu') { + // return 'platinum'; + // } + + // // Gold tier - Senior developers, Engineers, Multi-social presence + // if (description.includes('engineer') || + // description.includes('developer at') || + // description.includes('sde at') || + // description.includes('devops') || + // description.includes('co-founder') || + // socialCount >= 3) { + // return 'gold'; + // } + + // // Silver tier - Developers, Interns, Students at prestigious institutions + // if (description.includes('developer') || + // description.includes('intern') || + // description.includes('iit') || + // description.includes('iiit') || + // socialCount >= 2) { + // return 'silver'; + // } + + // // Bronze tier - Default + // return 'bronze'; + // }; - const controller = new AbortController(); - const { signal } = controller; + // Convert sponsors to our format with proper categorization + const processedSponsors: FilteredSponsor[] = sponsors.map(sponsor => { + let category: 'current' | 'past' | 'we-sponsor' = 'current'; + + // Determine category based on flags + if (sponsor.isWeSponsor) { + category = 'we-sponsor'; + } else if (sponsor.isPastSponsor) { + category = 'past'; + } else { + category = 'current'; + } - const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === 'Escape') handleCloseModal(); + return { + ...sponsor, + category }; + }); - const handleClickOutside = (e: MouseEvent) => { - if (modalRef.current && !modalRef.current.contains(e.target as Node)) { - handleCloseModal(); - } - }; + // Filter sponsors based on search term only + const filteredSponsors = processedSponsors.filter(sponsor => { + const matchesSearch = sponsor.name.toLowerCase().includes(searchTerm.toLowerCase()) || + sponsor.description.toLowerCase().includes(searchTerm.toLowerCase()); + return matchesSearch; + }); - document.addEventListener('keydown', handleKeyDown, { signal }); - document.addEventListener('mousedown', handleClickOutside, { signal }); + // Get counts for each category + const counts = { + current: processedSponsors.filter(s => s.category === 'current').length, + past: processedSponsors.filter(s => s.category === 'past').length, + weSponsor: processedSponsors.filter(s => s.category === 'we-sponsor').length + }; + + const sponsorStats = [ + { number: `${counts.current}+`, label: 'Current Sponsors' }, + { number: `${counts.past}+`, label: 'Past Supporters' }, + { number: `${counts.weSponsor}+`, label: 'People We Sponsored' }, + { number: '50K+', label: 'Community Impact' } + ]; + + // Get sponsors for current view + const getCurrentViewSponsors = () => { + if (activeView === 'sponsors') { + return { + current: filteredSponsors.filter(s => s.category === 'current'), + past: filteredSponsors.filter(s => s.category === 'past') + }; + } else { + return { + weSponsor: filteredSponsors.filter(s => s.category === 'we-sponsor') + }; + } + }; - return () => controller.abort(); - }, [showScanner]); + const currentViewSponsors = getCurrentViewSponsors(); return ( - -