Merge pull request #39 from csesoc/CW2-12-add-animations

[CW2-12] Sponsor Rain

Author: Domin0de

frontend/package-lock.json

@@ -22,6 +22,7 @@
     "eslint-config-next": "13.4.19",
     "framer-motion": "^11.2.13",
     "next": "13.4.12",
+    "next-emoji-rain": "^1.0.2",
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",

frontend/package.json

@@ -1,5 +1,6 @@
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
+import 'next-emoji-rain/dist/index.css';
 
 export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;

frontend/src/pages/_app.tsx

@@ -2,6 +2,7 @@ import Layout from '@/components/Layout';
 import { useState } from 'react';
 import { diamondLinks, goldLinks, silverLinks, sponsorInfo } from '@/../public/data/sponsorInfos';
 import SponsorModal from '@/components/Sponsors/SponsorModal';
+import { EmojiRain } from 'next-emoji-rain';
 
 export default function SponsorsPage() {
   const logostyle =
@@ -15,10 +16,30 @@ export default function SponsorsPage() {
     setShowModal(true);
   };
 
+  const handleRainClick = (type: string) => {
+    const rainElement = document.getElementById(`${type}Rain`);
+
+    if (!rainElement) return;
+
+    rainElement.classList.toggle('opacity-0', false);
+    setTimeout(() => {
+      rainElement.classList.toggle('opacity-0', true);
+    }, 4000);
+  };
+
   return (
     <Layout>
+      <div id="diamondRain" className="opacity-0">
+        <EmojiRain emoji="💎" />
+      </div>
+      <div id="goldRain" className="opacity-0">
+        <EmojiRain emoji="🪙" />
+      </div>
+      <div id="silverRain" className="opacity-0">
+        <EmojiRain emoji="🪩" />
+      </div>
       <section className="py-8">
-        <h2 className="text-4xl font-black text-center font-bold">DIAMOND SPONSORS</h2>
+        <h2 className="text-4xl font-black text-center font-bold" onClick={() => handleRainClick('diamond')}>DIAMOND SPONSORS</h2>
         <div>
           <div className="w-100 flex flex-col gap-16">
             {showModal && (
@@ -38,7 +59,7 @@ export default function SponsorsPage() {
             </div>
           </div>
         </div>
-        <h2 className="text-4xl font-black text-center font-bold">GOLD SPONSORS</h2>
+        <h2 className="text-4xl font-black text-center font-bold" onClick={() => handleRainClick('gold')}>GOLD SPONSORS</h2>
         <div>
           <div className="flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-evenly rounded border-2 border-[#595F6D] my-10">
             {goldLinks.map((item, index) => {
@@ -50,7 +71,7 @@ export default function SponsorsPage() {
             })}
           </div>
         </div>
-        <h2 className="text-4xl font-black text-center font-bold">SILVER SPONSORS</h2>
+        <h2 className="text-4xl font-black text-center font-bold" onClick={() => handleRainClick('silver')}>SILVER SPONSORS</h2>
         <div>
           <div className="flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-evenly rounded border-2 border-[#595F6D] mt-10">
             {silverLinks.map((item, index) => {

frontend/src/pages/sponsors.tsx

@@ -0,0 +1 @@
+declare module 'next-emoji-rain';