diff --git a/src/database/sponsors/index.tsx b/src/database/sponsors/index.tsx index 8502bc04..69a76a51 100644 --- a/src/database/sponsors/index.tsx +++ b/src/database/sponsors/index.tsx @@ -1,4 +1,4 @@ -interface Sponsor { +export interface Sponsor { name: string; image: string; description: string; @@ -6,6 +6,7 @@ interface Sponsor { linkedin?: string; twitter?: string; instagram?: string; + isPastSponsor?: boolean; } const sponsors: Sponsor[] = [ @@ -15,9 +16,7 @@ const sponsors: Sponsor[] = [ description: "Computer Science Student of La Salle", github: "https://github.com/carlosromerorodriguez", linkedin: "https://www.linkedin.com/in/carlos-romero-rdgz/", - }, - { name: "Sanjay Viswanathan", image: "https://github.com/sanjay-kv.png", @@ -26,24 +25,38 @@ const sponsors: Sponsor[] = [ linkedin: "https://www.linkedin.com/in/sanjay-k-v/", twitter: "https://x.com/sanjay_kv_", }, - { - name: "Sanjay Viswanathan", + name: "Rahul Dravid", image: "https://github.com/sanjay-kv.png", description: "Data Engineer", github: "https://github.com/sanjay-kv", linkedin: "https://www.linkedin.com/in/sanjay-k-v/", twitter: "https://x.com/sanjay_kv_", }, - { - name: "Sanjay Viswanathan", + name: "Sanjay Singhania", image: "https://github.com/sanjay-kv.png", description: "Data Engineer", github: "https://github.com/sanjay-kv", linkedin: "https://www.linkedin.com/in/sanjay-k-v/", twitter: "https://x.com/sanjay_kv_", }, + { + name: "Old Sponsor A", + image: "https://github.com/sanjay-kv.png", + description: "Past supporter of the Hive", + github: "https://github.com/example", + linkedin: "https://linkedin.com", + isPastSponsor: true, + }, + { + name: "Old Sponsor B", + image: "https://github.com/sanjay-kv.png", + description: "Legacy sponsor", + github: "https://github.com/example2", + linkedin: "https://linkedin.com", + isPastSponsor: true, + }, ]; export default sponsors; diff --git a/src/pages/our-sponsors/SponsorCard/index.tsx b/src/pages/our-sponsors/SponsorCard/index.tsx index da6f7569..1d964130 100644 --- a/src/pages/our-sponsors/SponsorCard/index.tsx +++ b/src/pages/our-sponsors/SponsorCard/index.tsx @@ -1,30 +1,31 @@ +import { Sponsor } from '@site/src/database/sponsors'; import React from 'react'; import { FaGithub, FaLinkedin, FaTwitter, FaInstagram } from 'react-icons/fa'; -interface SponsorCardProps { - name: string; - image: string; - description: string; - github?: string; - linkedin?: string; - twitter?: string; - instagram?: string; -} - -const SponsorCard: React.FC = ({ name, image, description, github, linkedin, twitter, instagram }) => { - return ( -
- {name} -

{name}

-

{description}

-
- {github && } - {linkedin && } - {twitter && } - {instagram && } -
-
- ); +const SponsorCard: React.FC = ({ + name, + image, + description, + github, + linkedin, + twitter, + instagram, +}) => { + return ( +
+
+ {name} +
+

{name}

+

{description}

+
+ {github && } + {linkedin && } + {twitter && } + {instagram && } +
+
+ ); }; 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 06970a5a..b35dd7db 100644 --- a/src/pages/our-sponsors/Sponsors.css +++ b/src/pages/our-sponsors/Sponsors.css @@ -8,30 +8,33 @@ } .TitleText { - background: linear-gradient( - 90deg, - rgb(152 0 255) 0%, - rgb(246 41 41) 50%, - rgb(255 169 8) 100% - ); + 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; - } +} .sponsor-page .sponsors-list { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); - gap: 1rem; - margin-top: 2rem; + 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 #ddd; - border-radius: 8px; - padding: 16px; + position: relative; + border: 1px solid #e2e8f0; + border-radius: 12px; + padding: 20px; + background: #fff; text-align: center; - transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: transform 0.3s ease, box-shadow 0.3s ease; + display: flex; + flex-direction: column; + align-items: center; } .sponsor-page .sponsor-card::before { @@ -49,36 +52,58 @@ .sponsor-page .sponsor-card:hover { transform: translateY(-5px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); } .sponsor-page .sponsor-card img { - border-radius: 50%; - width: 100px; - height: 100px; + width: 100%; + height: 100%; object-fit: cover; } +.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; +} + +.sponsor-page .sponsor-card .sponsor-name { + font-size: 1.2rem; + font-weight: 600; + margin-bottom: 4px; + color: #111827; +} + +.sponsor-page .sponsor-card .sponsor-desc { + font-size: 0.95rem; + color: #4b5563; + margin-bottom: 10px; + line-height: 1.4; +} + .sponsor-page .sponsor-card .social-links { - margin-top: 8px; display: flex; justify-content: center; - gap: 8px; + gap: 10px; + margin-top: 8px; } .sponsor-page .sponsor-card .social-links a { - display: inline-flex; - align-items: center; - justify-content: center; - width: 35px; - height: 35px; + display: flex; + width: 36px; + height: 36px; border-radius: 50%; color: #fff; background-color: var(--ifm-color-primary); - text-decoration: none; - transition: background-color 0.3s ease, transform 0.3s ease; + align-items: center; + justify-content: center; + transition: background-color 0.3s, transform 0.3s; } + .sponsor-page .sponsor-card .social-links a:hover { transform: scale(1.1); } @@ -100,15 +125,12 @@ } .sponsor-page .sponsor-card.empty-card { - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - background-color: #f0f0f0; - border: 2px dashed #007bff; - color: #007bff; - position: relative; - overflow: hidden; + cursor: pointer; + background-color: #f9fafb; + border: 2px dashed #0a78ff; + color: #0a78ff; + transition: all 0.3s; + padding: 32px 16px; } .sponsor-page .sponsor-card.empty-card::before { @@ -132,11 +154,11 @@ } .sponsor-page .sponsor-card.empty-card h3 { - margin: 0; - font-size: 1.2em; - display: flex; - align-items: center; - gap: 8px; + font-size: 1.1rem; + font-weight: 500; + display: flex; + align-items: center; + gap: 8px; } .sponsor-page .sponsor-card.empty-card .join-icon { @@ -157,6 +179,7 @@ } .scanner-content { + position: relative; padding: 2rem; border-radius: 8px; text-align: center; @@ -165,6 +188,10 @@ background: white; } +.sponsors-section { + margin-top: 2rem; +} + .support-links { margin-top: 5rem; display: flex; @@ -182,8 +209,24 @@ border: none; } +.close-button { + position: absolute; + top: 12px; + right: 12px; + background: transparent; + border: none; + color: #444; + cursor: pointer; + padding: 4px; + transition: color 0.2s; +} + +.close-button:hover { + color: #000; +} + @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 23ad132a..c2e3adfe 100644 --- a/src/pages/our-sponsors/index.tsx +++ b/src/pages/our-sponsors/index.tsx @@ -1,24 +1,49 @@ -import React, { useState } from "react"; +import React, { useState, useRef, useEffect } from "react"; import SponsorCard from "./SponsorCard"; import "./Sponsors.css"; import Layout from "@theme/Layout"; -import { FaPlusCircle } from 'react-icons/fa'; +import { FaPlusCircle, FaTimes } from 'react-icons/fa'; import Head from "@docusaurus/Head"; import sponsors from "@site/src/database/sponsors"; +import { useHistory } from '@docusaurus/router'; const OurSponsors: React.FC = () => { - const [showScanner, setShowScanner] = useState(false); + const [showScanner, setShowScanner] = useState(false); + const modalRef = useRef(null); + const history = useHistory(); - const handleJoinSponsor = () => { - setShowScanner(true); - }; + const handleJoinSponsor = () => setShowScanner(true); const handlePaymentSuccess = () => { setShowScanner(false); alert("Payment successful! Please fill in your sponsor info."); - window.location.href = "https://forms.gle/8zBeFP98bpjDxm9u8"; + history.push('https://forms.gle/8zBeFP98bpjDxm9u8'); }; + const handleCloseModal = () => setShowScanner(false); + + useEffect(() => { + if (!showScanner) return; + + const controller = new AbortController(); + const { signal } = controller; + + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Escape') handleCloseModal(); + }; + + const handleClickOutside = (e: MouseEvent) => { + if (modalRef.current && !modalRef.current.contains(e.target as Node)) { + handleCloseModal(); + } + }; + + document.addEventListener('keydown', handleKeyDown, { signal }); + document.addEventListener('mousedown', handleClickOutside, { signal }); + + return () => controller.abort(); + }, [showScanner]); + return ( @@ -26,12 +51,12 @@ const OurSponsors: React.FC = () => { async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5832817025080991" crossOrigin="anonymous" - /> + />