From 3333f6a73a91b576116f6e0ddb61c732ccd5e13b Mon Sep 17 00:00:00 2001 From: BeeXD Date: Tue, 23 Jun 2026 23:15:29 +0530 Subject: [PATCH 1/2] Update Render sponsor card format and fix navbar scroll bug --- src/App.tsx | 2 ++ src/components/SponsorRewards.tsx | 19 ++++++++++++++++--- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1150331..1164b93 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -43,6 +43,7 @@ function Navbar({ onNavClick, logoUrl }: { onNavClick: (e: React.MouseEvent window.removeEventListener('scroll', handleScroll); }, []); @@ -189,6 +190,7 @@ export default function App() { useEffect(() => { let prev = window.scrollY > 150 + setIsScrolled(prev) const handleScroll = () => { const current = window.scrollY > 150 if (current !== prev) { diff --git a/src/components/SponsorRewards.tsx b/src/components/SponsorRewards.tsx index a88a281..85aec6b 100644 --- a/src/components/SponsorRewards.tsx +++ b/src/components/SponsorRewards.tsx @@ -38,7 +38,20 @@ const SponsorRewards: React.FC = () => { name: "Render", logo: "/logos/render.png", rewardValue: "$950", - description: "$50 credits for all attendees • Best Use of Render: 1st $500 · 2nd $300 · 3rd $100 • Valid for 1 year" + description: ( + + ) } ]; @@ -570,9 +583,9 @@ const SponsorRewards: React.FC = () => { loading="lazy" /> Reward Details -

+

{sponsor.description} -

+
{sponsor.rewardValue}
From deb7f223055fd9648ee9dc4033c703dfcd27831d Mon Sep 17 00:00:00 2001 From: BeeXD Date: Tue, 23 Jun 2026 23:25:13 +0530 Subject: [PATCH 2/2] Enhance SponsorRewards accessibility and reactivity --- src/components/SponsorRewards.tsx | 48 ++++++++++++++++++++++++------- 1 file changed, 37 insertions(+), 11 deletions(-) diff --git a/src/components/SponsorRewards.tsx b/src/components/SponsorRewards.tsx index 85aec6b..f7f1b6c 100644 --- a/src/components/SponsorRewards.tsx +++ b/src/components/SponsorRewards.tsx @@ -1,18 +1,26 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { motion } from 'framer-motion'; interface SponsorReward { name: string; logo: string; rewardValue: string; - description: string; + description: React.ReactNode; } const SponsorRewards: React.FC = () => { - const [flippedCards, setFlippedCards] = useState>({}); - - const toggleFlip = (index: number) => { - setFlippedCards(prev => ({ ...prev, [index]: !prev[index] })); + const [flippedCards, setFlippedCards] = useState>({}); + const [isMobileView, setIsMobileView] = useState(false); + + useEffect(() => { + const checkMobile = () => setIsMobileView(window.innerWidth < 768); + checkMobile(); + window.addEventListener('resize', checkMobile); + return () => window.removeEventListener('resize', checkMobile); + }, []); + + const toggleFlip = (key: string) => { + setFlippedCards(prev => ({ ...prev, [key]: !prev[key] })); }; const sponsorRewards: SponsorReward[] = [ @@ -231,6 +239,15 @@ const SponsorRewards: React.FC = () => { 50% { transform: rotateY(180deg); } } + @media (prefers-reduced-motion: reduce) { + .flip-card { + transition: none; + } + .flip-hint-icon { + animation: none; + } + } + /* ── Back face ── */ .back-container { width: 100%; @@ -507,13 +524,12 @@ const SponsorRewards: React.FC = () => { ]; const variant = entranceVariants[index] || entranceVariants[1]; - const isMobileView = typeof window !== 'undefined' && window.innerWidth < 768; const initialState = isMobileView ? variant.mobileInitial : variant.initial; - const isFlipped = flippedCards[index] || false; + const isFlipped = flippedCards[sponsor.name] || false; return ( { >
toggleFlip(index)} + role="button" + tabIndex={0} + aria-pressed={isFlipped} + aria-label={`Flip ${sponsor.name} reward details`} + onClick={() => toggleFlip(sponsor.name)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + toggleFlip(sponsor.name); + } + }} > {/* ═══════ FRONT FACE ═══════ */}
@@ -567,7 +593,7 @@ const SponsorRewards: React.FC = () => {
{sponsor.name} - ↻ Tap to flip + ↻ Flip for details