@@ -2,6 +2,7 @@ import Layout from '@/components/Layout';
22import { useState } from 'react' ;
33import { diamondLinks , goldLinks , silverLinks , sponsorInfo } from '@/../public/data/sponsorInfos' ;
44import SponsorModal from '@/components/Sponsors/SponsorModal' ;
5+ import { EmojiRain } from 'next-emoji-rain' ;
56
67export default function SponsorsPage ( ) {
78const logostyle =
@@ -15,10 +16,27 @@ export default function SponsorsPage() {
1516setShowModal ( true ) ;
1617} ;
1718
19+ const handleRainClick = ( type :string ) => {
20+ const rainElement = document . getElementById ( `${ type } ) ;
21+
22+ if ( ! rainElement ) return ;
23+
24+ rainElement . classList . toggle ( 'opacity-0' , false ) ;
25+ setTimeout ( ( ) => {
26+ rainElement . classList . toggle ( 'opacity-0' , true ) ;
27+ } , 4000 ) ;
28+ } ;
29+
1830return (
1931< Layout >
32+ < div id = "diamondRain" className = "opacity-0" >
33+ < EmojiRain emoji = "💎" />
34+ </ div >
35+ < div id = "goldRain" className = "opacity-0" >
36+ < EmojiRain emoji = "🪙" />
37+ </ div >
2038< section className = "py-8" >
21- < h2 className = "text-4xl font-black text-center font-bold" > DIAMOND SPONSORS</ h2 >
39+ < h2 className = "text-4xl font-black text-center font-bold" onClick = { ( ) => handleRainClick ( 'diamond' ) } > DIAMOND SPONSORS</ h2 >
2240< div >
2341< div className = "w-100 flex flex-col gap-16" >
2442{ showModal && (
@@ -38,7 +56,7 @@ export default function SponsorsPage() {
3856</ div >
3957</ div >
4058</ div >
41- < h2 className = "text-4xl font-black text-center font-bold" > GOLD SPONSORS</ h2 >
59+ < h2 className = "text-4xl font-black text-center font-bold" onClick = { ( ) => handleRainClick ( 'gold' ) } > GOLD SPONSORS</ h2 >
4260< div >
4361< div className = "flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-evenly rounded border-2 border-[#595F6D] my-10" >
4462{ goldLinks . map ( ( item , index ) => {