diff --git a/src/pages/our-sponsors/SponsorCard/SponsorCard.css b/src/pages/our-sponsors/SponsorCard/SponsorCard.css deleted file mode 100644 index 36c82b4a..00000000 --- a/src/pages/our-sponsors/SponsorCard/SponsorCard.css +++ /dev/null @@ -1,460 +0,0 @@ -/* 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 2d92c8f3..1d964130 100644 --- a/src/pages/our-sponsors/SponsorCard/index.tsx +++ b/src/pages/our-sponsors/SponsorCard/index.tsx @@ -1,20 +1,8 @@ +import { Sponsor } from '@site/src/database/sponsors'; import React from 'react'; import { FaGithub, FaLinkedin, FaTwitter, FaInstagram } from 'react-icons/fa'; -import './SponsorCard.css'; -interface SponsorCardProps { - name: string; - image: string; - description: string; - github?: string; - linkedin?: string; - twitter?: string; - instagram?: string; - featured?: boolean; - category?: string; -} - -const SponsorCard: React.FC = ({ +const SponsorCard: React.FC = ({ name, image, description, @@ -22,103 +10,22 @@ const SponsorCard: React.FC = ({ linkedin, twitter, instagram, - featured = false, - category }) => { - // ✅ FIXED: Handle undefined/empty names safely - const getInitials = (name: string) => { - if (!name || typeof name !== 'string') { - return 'UN'; // Default fallback for undefined names - } - - return name - .trim() - .split(' ') - .filter(word => word.length > 0) // Filter out empty strings - .map(word => word.charAt(0)) - .join('') - .substring(0, 2) - .toUpperCase() || 'UN'; // Fallback if no valid characters - }; - - // ✅ FIXED: Validate social links more safely - 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 !== '#' && link.url.trim() !== ''); - - // ✅ FIXED: Ensure name and description are always strings - const safeName = name || 'Unknown Sponsor'; - const safeDescription = description || 'Community Member'; - return ( -
- {/* Avatar Section */} -
-
- {image && image.trim() ? ( - {safeName} - ) : ( -
- {getInitials(safeName)} -
- )} -
- {featured && ( -
- ⭐ - Featured -
- )} +
+
+ {name}
- - {/* Content Section */} -
-

{safeName}

-

{safeDescription}

- - {/* 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! -
- )} +

{name}

+

{description}

+
+ {github && } + {linkedin && } + {twitter && } + {instagram && }
- - {/* Card Effects */} -
); }; -export default SponsorCard; +export default SponsorCard; \ No newline at end of file diff --git a/src/pages/our-sponsors/Sponsors.css b/src/pages/our-sponsors/Sponsors.css index d659dea4..4c8e2b72 100644 --- a/src/pages/our-sponsors/Sponsors.css +++ b/src/pages/our-sponsors/Sponsors.css @@ -1,912 +1,414 @@ -/* Enhanced Sponsors Page Styles - Matching Podcasts Design */ - -/* Keyframe Animations */ -@keyframes sponsorFadeIn { - from { - opacity: 0; - transform: translateY(30px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes shimmerEffect { - 0% { - background-position: -200% 0; - } - 100% { - background-position: 200% 0; - } -} - -@keyframes floatAnimation { - 0%, 100% { - transform: translateY(0px); - } - 50% { - transform: translateY(-6px); - } -} - -@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); - } -} - -@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); } -} - -/* 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; -} - -/* 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; -} - -.sponsors-hero-content { - max-width: 900px; - margin: 0 auto; - animation: sponsorFadeIn 0.8s ease-out; -} - -.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; -} - -.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); -} - -.primary-cta-button:hover { - transform: translateY(-3px) scale(1.02); - box-shadow: 0 15px 35px rgba(102, 126, 234, 0.6); - text-decoration: none; -} - -.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); +.sponsor-page { + padding: 2rem; + max-width: 1200px; + margin: 0 auto; } -.secondary-cta-button:hover { - background: rgba(255, 255, 255, 0.2); - color: #ffffff; - text-decoration: none; - transform: translateY(-2px); +[data-theme='dark'] .sponsor-page { + background: var(--dark-bg-primary); + color: var(--dark-text-primary); } -.cta-icon { - font-size: 16px; +.sponsor-page .sponsor-header { + text-align: center; + margin-bottom: 2rem; } -/* View Toggle Section */ -.view-toggle-section { - padding: 40px 20px; - position: relative; - z-index: 2; +.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; } -.view-toggle-container { - max-width: 1200px; - margin: 0 auto; - display: flex; - flex-direction: column; - gap: 24px; - align-items: center; +/* 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; } -.search-section { - width: 100%; - max-width: 500px; +[data-theme='dark'] .tab-button { + color: var(--dark-text-secondary); } -.search-wrapper { - position: relative; +.tab-button.active { + color: #4f46e5; } -.search-icon { - position: absolute; - left: 16px; - top: 50%; - transform: translateY(-50%); - font-size: 18px; - opacity: 0.6; +.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; } -.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; +.tab-button.active .tab-badge { + background-color: #4f46e5; + color: white; } -.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); +.no-sponsors { + grid-column: 1 / -1; + text-align: center; + padding: 2rem; + color: #6b7280; + font-size: 1.1rem; } -.search-input::placeholder { - color: #94a3b8; +.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; } -.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; -} - -.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; +.tab-button.active::after { + width: 100%; } -.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; +.tab-content { + display: none; + animation: fadeIn 0.5s ease; } -.toggle-button:hover::before { - left: 100%; +.tab-content.active { + display: block; } -.toggle-button:hover { - background: rgba(255, 255, 255, 0.1); - color: #ffffff; - transform: translateY(-1px); +.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; } -.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); +[data-theme='dark'] .sponsor-page .sponsor-card { + background: var(--dark-card-bg); + border-color: var(--dark-border); } -.toggle-icon { - font-size: 18px; +.sponsor-page .sponsor-card::before { + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + transition: left 0.3s ease-in-out; } -.toggle-text { - display: flex; - flex-direction: column; - align-items: flex-start; +.sponsor-page .sponsor-card:hover::before { + left: 100%; } -.toggle-count { - font-size: 12px; - opacity: 0.8; - font-weight: 500; +.sponsor-page .sponsor-card:hover { + transform: translateY(-5px); + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); } -/* Section Enhancements */ -.section-count { - font-size: 18px; - opacity: 0.7; - font-weight: 500; - margin-left: 8px; +.sponsor-page .sponsor-card img { + width: 100%; + height: 100%; + object-fit: cover; } -.section-description { - text-align: center; - margin-bottom: 40px; - max-width: 600px; - margin-left: auto; - margin-right: auto; +.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; } -.section-description p { - font-size: 16px; - color: #cbd5e1; - line-height: 1.6; - margin: 0; +.sponsor-page .sponsor-card .sponsor-name { + font-size: 1.2rem; + font-weight: 600; + margin-bottom: 4px; + color: #111827; } -.we-sponsor-section { - margin-bottom: 60px; +[data-theme='dark'] .sponsor-page .sponsor-card .sponsor-name { + color: var(--dark-text-primary); } -.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); +.sponsor-page .sponsor-card .sponsor-desc { + font-size: 0.95rem; + color: #4b5563; + margin-bottom: 10px; + line-height: 1.4; } -.partnership-button.secondary { - background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); +[data-theme='dark'] .sponsor-page .sponsor-card .sponsor-desc { + color: var(--dark-text-secondary); } -.partnership-button.secondary:hover { - background: linear-gradient(135deg, #34d399 0%, #0891b2 100%); - box-shadow: 0 15px 35px rgba(16, 185, 129, 0.4); +.sponsor-page .sponsor-card .social-links { + display: flex; + justify-content: center; + gap: 10px; + margin-top: 8px; } -/* 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 { +.sponsor-page .sponsor-card .social-links a { + display: flex; + width: 36px; + height: 36px; + border-radius: 50%; + color: #fff; + background-color: var(--ifm-color-primary); 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; - } - - .section-count { - font-size: 16px; - margin-left: 0; - } + transition: background-color 0.3s, transform 0.3s; } -/* 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; -} - -.filter-search { - position: relative; - max-width: 400px; - margin: 0 auto; -} - -.search-icon { - position: absolute; - left: 16px; - top: 50%; - transform: translateY(-50%); - font-size: 18px; - opacity: 0.6; +.sponsor-page .sponsor-card .social-links a:hover { + transform: scale(1.1); } -.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.github:hover { + background-color: #333; } -.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 .social-links a.linkedin:hover { + background-color: #0073b1; } -.search-input::placeholder { - color: #94a3b8; +.sponsor-page .sponsor-card .social-links a.twitter:hover { + background-color: #1da1f2; } -.filter-tabs { - display: flex; - justify-content: center; - gap: 12px; - flex-wrap: wrap; +.sponsor-page .sponsor-card .social-links a.instagram:hover { + background-color: #e4405f; } -.filter-tab { +.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; display: flex; + flex-direction: column; align-items: center; - gap: 8px; - padding: 12px 20px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); + justify-content: center; + min-height: 200px; border-radius: 12px; - color: #cbd5e1; - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); position: relative; overflow: hidden; } -.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; -} - -.filter-tab: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); -} - -.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); -} - -.tab-icon { - font-size: 16px; -} - -/* Content Section */ -.sponsors-content-section { - padding: 40px 20px 80px; - position: relative; - z-index: 2; +.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); } -.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; +.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; } -.title-icon { - font-size: 28px; +.sponsor-page .sponsor-card.empty-card:hover::before { + left: 100%; } -/* Featured Sponsors */ -.featured-sponsors-section { - margin-bottom: 80px; +.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); } -.featured-sponsors-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - gap: 32px; - max-width: 1400px; - margin: 0 auto; +.sponsor-page .sponsor-card.empty-card h3 { + font-size: 1.1rem; + font-weight: 600; + color: #4f46e5; + margin-top: 1rem; + z-index: 2; } -/* Regular Sponsors */ -.current-sponsors-section, -.past-sponsors-section { - margin-bottom: 60px; +.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; } -.sponsors-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - gap: 24px; - max-width: 1400px; - margin: 0 auto; -} - -.sponsor-wrapper, -.featured-sponsor-wrapper { - animation: sponsorFadeIn 0.6s ease-out both; -} - -/* Partnership Section */ -.partnership-section { - margin: 80px auto 20px; - max-width: 800px; -} - -.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; +.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; } -.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-content { + position: relative; + padding: 2rem; + border-radius: 8px; + text-align: center; + max-width: 400px; + width: 100%; + background: white; } -.partnership-card:hover::before { - opacity: 1; +[data-theme='dark'] .scanner-content { + background: var(--dark-bg-secondary); + color: var(--dark-text-primary); } -.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); +.sponsors-section { + margin-top: 2rem; } -.partnership-icon { - font-size: 48px; - margin-bottom: 20px; - animation: floatAnimation 4s ease-in-out infinite; +.support-links { + margin-top: 5rem; + display: flex; + justify-content: center; + gap: 16px; + align-items: center; } -.partnership-title { - font-size: 28px; - font-weight: 700; - color: #ffffff; - margin: 0 0 16px 0; +.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; } -.partnership-description { - font-size: 16px; - color: #cbd5e1; - line-height: 1.6; - margin: 0 0 32px 0; +.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; } -.partnership-benefits { - display: flex; - justify-content: center; - gap: 24px; - margin-bottom: 32px; - flex-wrap: wrap; +.scanner-button > * { + position: relative; + z-index: 2; } -.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; +.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); } -.benefit-icon { - font-size: 14px; +.scanner-button:hover::before { + left: 100%; } -.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); +.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); } -.button-icon { - font-size: 16px; +.close-button { + position: absolute; + top: 12px; + right: 12px; + background: transparent; + border: none; + color: #444; + cursor: pointer; + padding: 4px; + transition: color 0.2s; } -/* 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); +.close-button:hover { + color: #000; } -.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; -} +@media (max-width: 600px) { + .sponsor-card { + width: 100%; + } +} \ No newline at end of file diff --git a/src/pages/our-sponsors/index.tsx b/src/pages/our-sponsors/index.tsx index a0cc9315..15653ba4 100644 --- a/src/pages/our-sponsors/index.tsx +++ b/src/pages/our-sponsors/index.tsx @@ -1,356 +1,219 @@ -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'; +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'; + }; -interface FilteredSponsor { - name: string; - image: string; - description: string; - github?: string; - linkedin?: string; - twitter?: string; - instagram?: string; - category: 'current' | 'past' | 'we-sponsor'; -} + const handleCloseModal = () => setShowScanner(false); -export default function OurSponsors(): ReactElement { - const [activeView, setActiveView] = useState<'sponsors' | 'we-sponsor'>('sponsors'); - const [searchTerm, setSearchTerm] = useState(''); + const handleTabChange = (tab: TabType) => { + setActiveTab(tab); + }; - // // 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'; - // }; + useEffect(() => { + if (!showScanner) return; -const processedSponsors = sponsors - .filter(sponsor => { - // Ensure sponsor has required fields - return sponsor && - sponsor.name && - typeof sponsor.name === 'string' && - sponsor.name.trim() !== '' && - sponsor.description && - typeof sponsor.description === 'string'; - }) - .map(sponsor => { - let category: 'current' | 'past' | 'we-sponsor' = 'current'; - - if (sponsor.isWeSponsor) { - category = 'we-sponsor'; - } else if (sponsor.isPastSponsor) { - category = 'past'; - } else { - category = 'current'; - } + const controller = new AbortController(); + const { signal } = controller; - return { - name: sponsor.name, - image: sponsor.image || '', - description: sponsor.description, - github: sponsor.github, - linkedin: sponsor.linkedin, - twitter: sponsor.twitter, - instagram: sponsor.instagram, - category + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Escape') 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; - }); - // 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' } - ]; + const handleClickOutside = (e: MouseEvent) => { + if (modalRef.current && !modalRef.current.contains(e.target as Node)) { + handleCloseModal(); + } + }; - // 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') - }; - } - }; + document.addEventListener('keydown', handleKeyDown, { signal }); + document.addEventListener('mousedown', handleClickOutside, { signal }); - const currentViewSponsors = getCurrentViewSponsors(); + return () => controller.abort(); + }, [showScanner]); return ( -
- {/* Hero Section */} -
-
-
- 🤝 - Community Partnership -
-

- Our Valued Community -

-

- Join us in empowering the open-source community through your generous support. Your sponsorship directly fuels innovation by enabling developers to create valuable resources and maintain our growing knowledge base. We deeply appreciate your commitment to advancing open-source technology and education. -

- - {/* Partnership CTA */} -
- - 🚀 - Become a Sponsor - - - 📧 - Get in Touch - -
- - {/* Stats */} -
- {sponsorStats.map((stat, index) => ( -
-
{stat.number}
-
{stat.label}
-
- ))} -
-
+ +