From 2717fbc5711a358df04058377942f6ee8aa5d888 Mon Sep 17 00:00:00 2001
From: Kakabay <2kakabayashyrberdyew@gmail.com>
Date: Mon, 25 Nov 2024 14:34:54 +0500
Subject: [PATCH] confetti added. react-confetti & zustand added

---
 app/(main)/(lottery)/lottery/page.tsx         |   21 +-
 components/lottery/confetti/Confetti.tsx      |   23 +-
 components/lottery/countDown/CountDown.tsx    |   57 -
 .../lottery/countDown/LotteryCountDown.tsx    |   95 ++
 ...tDownCell.tsx => LotteryCountDownCell.tsx} |    8 +-
 ...olmn.tsx => LotteryCountDownSemicolmn.tsx} |    4 +-
 components/lottery/spinWheel/SpinWheel.tsx    |  270 ++---
 components/vote/Countdown.tsx                 |   66 +-
 package-lock.json                             | 1011 +++++++++--------
 package.json                                  |    6 +-
 10 files changed, 753 insertions(+), 808 deletions(-)
 delete mode 100644 components/lottery/countDown/CountDown.tsx
 create mode 100644 components/lottery/countDown/LotteryCountDown.tsx
 rename components/lottery/countDown/{CountDownCell.tsx => LotteryCountDownCell.tsx} (68%)
 rename components/lottery/countDown/{CountDownSemicolmn.tsx => LotteryCountDownSemicolmn.tsx} (72%)

diff --git a/app/(main)/(lottery)/lottery/page.tsx b/app/(main)/(lottery)/lottery/page.tsx
index d6978e9..8c41b13 100644
--- a/app/(main)/(lottery)/lottery/page.tsx
+++ b/app/(main)/(lottery)/lottery/page.tsx
@@ -1,7 +1,7 @@
-import CountDown from '@/components/lottery/countDown/CountDown';
-import SpinWheel from '@/components/lottery/spinWheel/SpinWheel';
-import Image from 'next/image';
-import React from 'react';
+import LotteryCountDown from "@/components/lottery/countDown/LotteryCountDown";
+import SpinWheel from "@/components/lottery/spinWheel/SpinWheel";
+import Image from "next/image";
+import React from "react";
 
 const page = () => {
   return (
@@ -20,7 +20,7 @@ const page = () => {
               />
             </div>
 
-            <CountDown />
+            <LotteryCountDown startDate="2024-11-25" />
           </div>
         </div>
       </section>
@@ -32,7 +32,9 @@ const page = () => {
             <div className="flex flex-col w-full p-8 gap-4">
               <div className="flex flex-col gap-2 pb-4 border-b border-lightOutlineVariant">
                 <h4 className="font-heading-3-regular">Results</h4>
-                <p className="font-base-medium">The results after each stage will be shown here.</p>
+                <p className="font-base-medium">
+                  The results after each stage will be shown here.
+                </p>
               </div>
 
               {/* {[...Array(5)].map((item, index) => (
@@ -60,10 +62,11 @@ const page = () => {
                 <h3 className="font-heading-5-regular">Umumy düzgünler:</h3>
                 <ul className="list-disc flex flex-col gap-4 pl-[16px]">
                   {Array(5)
-                    .fill(' ')
+                    .fill(" ")
                     .map((item, i) => (
                       <li className="font-small-regular" key={i}>
-                        Ilkinji we dogry jogap beren sanawda ilkinji ýeri eýelýär
+                        Ilkinji we dogry jogap beren sanawda ilkinji ýeri
+                        eýelýär
                       </li>
                     ))}
                 </ul>
@@ -73,7 +76,7 @@ const page = () => {
                 <h3 className="font-heading-5-regular">Üns beriň:</h3>
                 <ul className="list-disc flex flex-col gap-4 pl-[16px]">
                   {Array(1)
-                    .fill(' ')
+                    .fill(" ")
                     .map((item) => (
                       <li className="font-small-regular">SMS = 1 manat</li>
                     ))}
diff --git a/components/lottery/confetti/Confetti.tsx b/components/lottery/confetti/Confetti.tsx
index 9e8ce39..371b4ed 100644
--- a/components/lottery/confetti/Confetti.tsx
+++ b/components/lottery/confetti/Confetti.tsx
@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
-import React, { useEffect, useState } from 'react';
-import { cn } from '@/lib/utils'; // Assuming `cn` is defined in `lib/utils`
+import React, { useEffect, useState } from "react";
+import { cn } from "@/lib/utils"; // Assuming `cn` is defined in `lib/utils`
 
 const Confetti: React.FC = () => {
   const [confetti, setConfetti] = useState<number[]>([]);
@@ -19,11 +19,11 @@ const Confetti: React.FC = () => {
 
   const randomColor = () => {
     const colors = [
-      'linear-gradient(45deg, #5D5D72, #8589DE)',
-      'linear-gradient(45deg, #E1E0FF, #575992)',
-      '#8589DE',
-      '#575992',
-      '#E1E0FF',
+      "linear-gradient(45deg, #5D5D72, #8589DE)",
+      "linear-gradient(45deg, #E1E0FF, #575992)",
+      "#8589DE",
+      "#575992",
+      "#E1E0FF",
     ];
     return colors[Math.floor(Math.random() * colors.length)];
   };
@@ -44,7 +44,7 @@ const Confetti: React.FC = () => {
         return (
           <div
             key={i}
-            className={cn('absolute', 'confetti-piece')}
+            className={cn("absolute", "confetti-piece")}
             style={
               {
                 top: `${randomStartY}%`,
@@ -55,9 +55,10 @@ const Confetti: React.FC = () => {
                 animationDuration: `${randomDuration}s`,
                 animationDelay: `${randomDelay}s`,
                 transform: `rotate(${randomRotation}deg)`,
-                '--end-x': `${randomEndX}vw`,
+                "--end-x": `${randomEndX}vw`,
               } as React.CSSProperties
-            }></div>
+            }
+          ></div>
         );
       })}
     </div>
diff --git a/components/lottery/countDown/CountDown.tsx b/components/lottery/countDown/CountDown.tsx
deleted file mode 100644
index ff2502d..0000000
--- a/components/lottery/countDown/CountDown.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-const CountDown = () => {
-  return (
-    <div className="bg-lightSurfaceContainer pb-8 flex flex-col w-full gap-2 rounded-[12px]">
-      {/* Countdown */}
-      <div className="flex items-center gap-6">
-        {/* {Array(5)
-          .fill(' ')
-          .map((item, index) =>
-            index % 2 === 0 ? (
-              <div className="flex flex-col items-center justify-center flex-1 p-6">
-                <h3 className="text-[80px] leading-[88px] -tracking-[1%]">12</h3>
-                <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">sagat</h4>
-              </div>
-            ) : (
-              <div className="flex flex-col gap-3">
-                <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
-                <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
-              </div>
-            ),
-          )} */}
-        <div className="flex flex-col items-center justify-center flex-1 p-6">
-          <h3 className="text-[80px] leading-[88px] -tracking-[1%]">12</h3>
-          <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">sagat</h4>
-        </div>
-
-        <div className="flex flex-col gap-3">
-          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
-          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
-        </div>
-
-        <div className="flex flex-col items-center justify-center flex-1 p-6">
-          <h3 className="text-[80px] leading-[88px] -tracking-[1%]">44</h3>
-          <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">minut</h4>
-        </div>
-
-        <div className="flex flex-col gap-3">
-          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
-          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
-        </div>
-
-        <div className="flex flex-col items-center justify-center flex-1 p-6">
-          <h3 className="text-[80px] leading-[88px] -tracking-[1%]">36</h3>
-          <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">sekund</h4>
-        </div>
-      </div>
-
-      {/* Seperator */}
-      <div className="w-full bg-lightOutlineVariant h-[1px]"></div>
-
-      <div className="flex items-center justify-center text-lightOnSurface font-heading-1-regular">
-        <span>-dan başlar</span>
-      </div>
-    </div>
-  );
-};
-
-export default CountDown;
diff --git a/components/lottery/countDown/LotteryCountDown.tsx b/components/lottery/countDown/LotteryCountDown.tsx
new file mode 100644
index 0000000..1839558
--- /dev/null
+++ b/components/lottery/countDown/LotteryCountDown.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+interface LotteryCountDownProps {
+  startDate: string; // Event start date in "YYYY-MM-DD" format
+}
+
+const LotteryCountDown: React.FC<LotteryCountDownProps> = ({ startDate }) => {
+  const [timeLeft, setTimeLeft] = useState({
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+
+  const calculateTimeLeft = () => {
+    const now = new Date();
+    const eventDate = new Date(`${startDate}T00:00:00+05:00`); // Set the time to midnight UTC+5
+    const timeDifference = eventDate.getTime() - now.getTime();
+
+    if (timeDifference <= 0) {
+      return { hours: 0, minutes: 0, seconds: 0 }; // Event has started or passed
+    }
+
+    const hours = Math.floor(timeDifference / (1000 * 60 * 60));
+    const minutes = Math.floor(
+      (timeDifference % (1000 * 60 * 60)) / (1000 * 60)
+    );
+    const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
+
+    return { hours, minutes, seconds };
+  };
+
+  useEffect(() => {
+    // Update time left every second
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer); // Clean up interval on component unmount
+  }, [startDate]);
+
+  return (
+    <div className="bg-lightSurfaceContainer pb-8 flex flex-col w-full gap-2 rounded-[12px]">
+      {/* LotteryCountDown */}
+      <div className="flex items-center gap-6">
+        <div className="flex flex-col items-center justify-center flex-1 p-6">
+          <h3 className="text-[80px] leading-[88px] -tracking-[1%]">
+            {timeLeft.hours}
+          </h3>
+          <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">
+            hours
+          </h4>
+        </div>
+
+        <div className="flex flex-col gap-3">
+          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+        </div>
+
+        <div className="flex flex-col items-center justify-center flex-1 p-6">
+          <h3 className="text-[80px] leading-[88px] -tracking-[1%]">
+            {timeLeft.minutes}
+          </h3>
+          <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">
+            minutes
+          </h4>
+        </div>
+
+        <div className="flex flex-col gap-3">
+          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+        </div>
+
+        <div className="flex flex-col items-center justify-center flex-1 p-6">
+          <h3 className="text-[80px] leading-[88px] -tracking-[1%]">
+            {timeLeft.seconds}
+          </h3>
+          <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">
+            seconds
+          </h4>
+        </div>
+      </div>
+
+      {/* Separator */}
+      <div className="w-full bg-lightOutlineVariant h-[1px]"></div>
+
+      <div className="flex items-center justify-center text-lightOnSurface font-heading-1-regular">
+        <span>-dan başlar</span>
+      </div>
+    </div>
+  );
+};
+
+export default LotteryCountDown;
diff --git a/components/lottery/countDown/CountDownCell.tsx b/components/lottery/countDown/LotteryCountDownCell.tsx
similarity index 68%
rename from components/lottery/countDown/CountDownCell.tsx
rename to components/lottery/countDown/LotteryCountDownCell.tsx
index ee286d1..733ac15 100644
--- a/components/lottery/countDown/CountDownCell.tsx
+++ b/components/lottery/countDown/LotteryCountDownCell.tsx
@@ -3,13 +3,15 @@ interface IProps {
   title: string;
 }
 
-const CountDownCell = ({ number, title }: IProps) => {
+const LotteryCountDownCell = ({ number, title }: IProps) => {
   return (
     <div className="flex flex-col items-center justify-center flex-1 p-6">
       <h3 className="text-[80px] leading-[88px] -tracking-[1%]">{number}</h3>
-      <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">{title}</h4>
+      <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">
+        {title}
+      </h4>
     </div>
   );
 };
 
-export default CountDownCell;
+export default LotteryCountDownCell;
diff --git a/components/lottery/countDown/CountDownSemicolmn.tsx b/components/lottery/countDown/LotteryCountDownSemicolmn.tsx
similarity index 72%
rename from components/lottery/countDown/CountDownSemicolmn.tsx
rename to components/lottery/countDown/LotteryCountDownSemicolmn.tsx
index c3e8b97..3f4e0ca 100644
--- a/components/lottery/countDown/CountDownSemicolmn.tsx
+++ b/components/lottery/countDown/LotteryCountDownSemicolmn.tsx
@@ -1,4 +1,4 @@
-const CountDownSemicolmn = () => {
+const LotteryCountDownSemicolmn = () => {
   return (
     <div className="flex flex-col gap-3">
       <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
@@ -7,4 +7,4 @@ const CountDownSemicolmn = () => {
   );
 };
 
-export default CountDownSemicolmn;
+export default LotteryCountDownSemicolmn;
diff --git a/components/lottery/spinWheel/SpinWheel.tsx b/components/lottery/spinWheel/SpinWheel.tsx
index f24f4bf..cad6bd4 100644
--- a/components/lottery/spinWheel/SpinWheel.tsx
+++ b/components/lottery/spinWheel/SpinWheel.tsx
@@ -1,223 +1,85 @@
-'use client';
+"use client";
 
-import Image from 'next/image';
-// import React, { useRef, useState, useEffect } from "react";
-
-// const SpinWheel: React.FC = () => {
-//   const canvasRef = useRef<HTMLCanvasElement | null>(null);
-//   const [isSpinning, setIsSpinning] = useState<boolean>(false);
-//   const [countdown, setCountdown] = useState<number>(5);
-
-//   const totalSize = 554; // Total size including borders
-//   const outerBorderWidth = 12; // Outer border width
-//   const innerBorderWidth = 15; // Inner border width
-//   const wheelSize = totalSize - outerBorderWidth - innerBorderWidth; // Inner wheel size
-
-//   const drawWheel = (angleOffset: number = 0): void => {
-//     const canvas = canvasRef.current;
-//     if (!canvas) return;
-//     const ctx = canvas.getContext("2d");
-//     if (!ctx) return;
-
-//     const radius = wheelSize / 2;
-
-//     // Clear the canvas and set background color
-//     ctx.fillStyle = "#FFF";
-//     ctx.fillRect(0, 0, totalSize, totalSize);
-
-//     // Draw the outermost border
-//     ctx.beginPath();
-//     ctx.arc(totalSize / 2, totalSize / 2, totalSize / 2, 0, 2 * Math.PI);
-//     ctx.fillStyle = "#5D5D72"; // Outer border color
-//     ctx.fill();
-//     ctx.closePath();
-
-//     // Draw the inner border
-//     ctx.beginPath();
-//     ctx.arc(
-//       totalSize / 2,
-//       totalSize / 2,
-//       (totalSize - outerBorderWidth) / 2,
-//       0,
-//       2 * Math.PI
-//     );
-//     ctx.fillStyle = "#8589DE"; // Inner border color
-//     ctx.fill();
-//     ctx.closePath();
-
-//     // Draw the wheel
-//     const segmentAngle = (2 * Math.PI) / 24; // 24 segments
-//     for (let i = 0; i < 24; i++) {
-//       ctx.beginPath();
-//       ctx.moveTo(totalSize / 2, totalSize / 2);
-//       ctx.arc(
-//         totalSize / 2,
-//         totalSize / 2,
-//         radius,
-//         segmentAngle * i + angleOffset,
-//         segmentAngle * (i + 1) + angleOffset
-//       );
-//       ctx.fillStyle = i % 2 === 0 ? "#E1E0FF" : "#575992"; // Alternate colors
-//       ctx.fill();
-//       ctx.stroke();
-//       ctx.closePath();
-//     }
-
-//     // Draw central ellipse
-//     ctx.beginPath();
-//     ctx.ellipse(
-//       totalSize / 2,
-//       totalSize / 2,
-//       105 / 2,
-//       105 / 2,
-//       0,
-//       0,
-//       2 * Math.PI
-//     );
-//     ctx.fillStyle = "#FFF";
-//     ctx.fill();
-//     ctx.stroke();
-
-//     // Add countdown text in the ellipse
-//     ctx.fillStyle = "#79536A"; // Text color
-//     ctx.font = "60px Roboto";
-//     ctx.textAlign = "center";
-//     ctx.textBaseline = "middle";
-//     ctx.fillText(countdown.toString(), totalSize / 2, totalSize / 2);
-//   };
-
-//   const spinWheel = (): void => {
-//     if (isSpinning) return;
-
-//     setIsSpinning(true);
-//     setCountdown(5); // Reset countdown
-
-//     let currentAngle = 0;
-//     const spinDuration = 5000; // Spin for 5 seconds
-//     const spinStartTime = Date.now();
-
-//     // Countdown Timer Logic
-//     const countdownInterval = setInterval(() => {
-//       setCountdown((prev) => {
-//         if (prev === 0) {
-//           clearInterval(countdownInterval);
-//           return 0;
-//         }
-//         return prev - 1;
-//       });
-//     }, 1000);
-
-//     // Spinning Logic
-//     const spin = () => {
-//       const elapsedTime = Date.now() - spinStartTime;
-
-//       if (elapsedTime >= spinDuration) {
-//         setIsSpinning(false);
-//         return;
-//       }
-
-//       // Update angle
-//       const progress = elapsedTime / spinDuration;
-//       const easedProgress = easeOutCubic(progress); // Easing for smooth deceleration
-//       currentAngle = easedProgress * 10 * Math.PI; // Spin multiple times
-
-//       drawWheel(currentAngle);
-//       requestAnimationFrame(spin);
-//     };
-
-//     spin();
-//   };
-
-//   // Easing function for smooth deceleration
-//   const easeOutCubic = (t: number): number => 1 - Math.pow(1 - t, 3);
-
-//   // Initial draw
-//   useEffect(() => {
-//     drawWheel();
-//   }, [countdown]);
-
-//   return (
-//     <div className="flex flex-col items-center justify-center">
-//       <canvas
-//         ref={canvasRef}
-//         width={totalSize}
-//         height={totalSize}
-//         className="rounded-full shadow-lg"
-//       ></canvas>
-//       <button
-//         onClick={spinWheel}
-//         disabled={isSpinning}
-//         className={`mt-4 px-6 py-2 rounded-full text-white font-bold ${
-//           isSpinning
-//             ? "bg-gray-400 cursor-not-allowed"
-//             : "bg-blue-500 hover:bg-blue-700"
-//         }`}
-//       >
-//         {isSpinning ? "Spinning..." : "Spin the Wheel"}
-//       </button>
-//     </div>
-//   );
-// };
-
-// export default SpinWheel;
-
-import { useState } from 'react';
-import ConfettiExplosion, { ConfettiProps } from 'react-confetti-explosion';
-
-const largeProps: ConfettiProps = {
-  force: 0.8,
-  duration: 3000,
-  particleCount: 300,
-  width: 1600,
-  colors: ['#041E43', '#1471BF', '#5BB4DC', '#FC027B', '#66D805'],
-};
+import Image from "next/image";
+import { useState } from "react";
+import Confetti from "react-confetti";
+import { useWindowSize } from "react-use";
 
 const SpinWheel: React.FC = () => {
   const [isSpinning, setIsSpinning] = useState(false);
+  const [isCountingDown, setIsCountingDown] = useState(false);
   const [countdown, setCountdown] = useState(5);
   const [rotation, setRotation] = useState(0);
   const [showConfetti, setShowConfetti] = useState(false);
 
+  const { width, height } = useWindowSize();
+
   const triggerConfetti = () => {
     setShowConfetti(true);
-    setTimeout(() => setShowConfetti(false), 5000); // Hide confetti after 5 seconds
+    setTimeout(() => {
+      setShowConfetti(false);
+      setCountdown(5); // Reset countdown after confetti
+    }, 6000); // Hide confetti after 6 seconds
+  };
+
+  const startCountdown = () => {
+    setIsCountingDown(true); // Start countdown state
+    let currentCountdown = 5;
+    const countdownInterval = setInterval(() => {
+      setCountdown(currentCountdown--); // Update countdown
+      if (currentCountdown < 0) {
+        clearInterval(countdownInterval); // Clear countdown interval
+        setIsCountingDown(false); // End countdown
+        spinWheel(); // Trigger spin after countdown
+      }
+    }, 1000);
   };
 
   const spinWheel = () => {
     if (isSpinning) return;
 
-    setIsSpinning(true);
-    setCountdown(5); // Reset countdown
+    setIsSpinning(true); // Start spinning
     const totalSpin = rotation + 360 * 10 + Math.random() * 360; // 10 full rotations + random offset
     setRotation(totalSpin); // Update rotation to a new value
 
-    // Countdown logic
-    const countdownInterval = setInterval(() => {
-      setCountdown((prev) => {
-        if (prev === 0) {
-          clearInterval(countdownInterval);
-          return 0;
-        }
-        return prev - 1;
-      });
-    }, 1000);
-
-    // Reset everything after the spin duration
     setTimeout(() => {
       setIsSpinning(false);
       setRotation((prev) => prev % 360); // Normalize the rotation
-      setCountdown(5); // Reset countdown for the next spin
-      triggerConfetti();
-    }, 6000); // Spin duration
+      triggerConfetti(); // Show confetti after spinning
+    }, 5000); // Spin duration
+  };
+
+  const handleSpinClick = () => {
+    if (!isSpinning && !isCountingDown) {
+      startCountdown(); // Start the countdown first
+    }
   };
 
   return (
     <div className="flex flex-col items-center">
-      {/* {showConfetti && <ConfettiExplosion {...largeProps} />} */}
+      {showConfetti && (
+        <div className="fixed top-0 left-0 z-50">
+          <Confetti
+            width={width}
+            height={height}
+            recycle={false}
+            numberOfPieces={2000}
+            tweenDuration={10000}
+            run={true}
+            colors={[
+              "linear-gradient(45deg, #5D5D72, #8589DE)",
+              "linear-gradient(45deg, #E1E0FF, #575992)",
+              "#8589DE",
+              "#575992",
+              "#E1E0FF",
+            ]}
+          />
+        </div>
+      )}
       <div className="relative rounded-full w-[554px] h-[554px]">
         {/* Wheel triangle */}
         <Image
-          src={'/wheel-triangle.svg'}
+          src={"/wheel-triangle.svg"}
           alt="wheel"
           height={34}
           width={35}
@@ -228,12 +90,13 @@ const SpinWheel: React.FC = () => {
         <div
           style={{
             transform: `rotate(${rotation}deg)`,
-            transition: isSpinning ? 'transform 5s ease-out' : '',
+            transition: isSpinning ? "transform 5s ease-out" : "",
           }}
-          className="p-3 bg-[#5D5D72] rounded-full overflow-hidden">
+          className="p-3 bg-[#5D5D72] rounded-full overflow-hidden"
+        >
           <div className="p-[15px] bg-[#8589DE] rounded-full ">
             <Image
-              src={'/wheel-circle-inner.png'}
+              src={"/wheel-circle-inner.png"}
               alt="wheel"
               height={530}
               width={530}
@@ -252,12 +115,19 @@ const SpinWheel: React.FC = () => {
 
       {/* Spin Button */}
       <button
-        onClick={spinWheel}
-        disabled={isSpinning}
+        onClick={handleSpinClick}
+        disabled={isSpinning || isCountingDown}
         className={`mt-6 px-6 py-3 rounded-full text-white font-bold ${
-          isSpinning ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-700'
-        }`}>
-        {isSpinning ? 'Spinning...' : 'Spin the Wheel'}
+          isSpinning || isCountingDown
+            ? "bg-gray-400 cursor-not-allowed"
+            : "bg-blue-500 hover:bg-blue-700"
+        }`}
+      >
+        {isCountingDown
+          ? `Starting in ${countdown}...`
+          : isSpinning
+          ? "Spinning..."
+          : "Spin the Wheel"}
       </button>
     </div>
   );
diff --git a/components/vote/Countdown.tsx b/components/vote/Countdown.tsx
index 266a6e9..a3ac111 100644
--- a/components/vote/Countdown.tsx
+++ b/components/vote/Countdown.tsx
@@ -1,6 +1,6 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { differenceInSeconds, parseISO, addHours } from 'date-fns';
-import GradientTitle from './GradientTitle';
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { differenceInSeconds, parseISO, addHours } from "date-fns";
+import GradientTitle from "./GradientTitle";
 
 interface CountdownProps {
   startsAt: string;
@@ -17,12 +17,12 @@ const Countdown: React.FC<CountdownProps> = ({
   setEventStatus,
   eventStatus,
 }) => {
-  const [timeLeft, setTimeLeft] = useState<string>('');
+  const [timeLeft, setTimeLeft] = useState<string>("");
 
   useEffect(() => {
     // Parsing the start and end times to Date objects in the correct format
-    const startsAtDate = addHours(parseISO(startsAt.replace(' ', 'T')), 5); // Adjusting start time to UTC+5
-    const endsAtDate = addHours(parseISO(endsAt.replace(' ', 'T')), 5); // Adjusting end time to UTC+5
+    const startsAtDate = addHours(parseISO(startsAt.replace(" ", "T")), 5); // Adjusting start time to UTC+5
+    const endsAtDate = addHours(parseISO(endsAt.replace(" ", "T")), 5); // Adjusting end time to UTC+5
 
     // Function to calculate time left
     const calculateTimeLeft = () => {
@@ -31,14 +31,14 @@ const Countdown: React.FC<CountdownProps> = ({
 
       let difference;
       if (nowUTC5 < startsAtDate) {
-        setEventStatus('Not started');
+        setEventStatus("Not started");
         difference = differenceInSeconds(startsAtDate, nowUTC5);
       } else if (nowUTC5 < endsAtDate) {
-        setEventStatus('Started');
+        setEventStatus("Started");
         difference = differenceInSeconds(endsAtDate, nowUTC5);
       } else {
-        setEventStatus('Finished');
-        setVoteStatus('closed');
+        setEventStatus("Finished");
+        setVoteStatus("closed");
         return;
       }
 
@@ -47,9 +47,9 @@ const Countdown: React.FC<CountdownProps> = ({
       const seconds = difference % 60;
 
       setTimeLeft(
-        `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${
-          seconds < 10 ? '0' + seconds : seconds
-        }`,
+        `${hours < 10 ? "0" + hours : hours}:${
+          minutes < 10 ? "0" + minutes : minutes
+        }:${seconds < 10 ? "0" + seconds : seconds}`
       );
     };
 
@@ -60,23 +60,41 @@ const Countdown: React.FC<CountdownProps> = ({
 
   return (
     <div>
-      {eventStatus === 'Finished' ? (
-        <GradientTitle title={'Netijeler'} size="big" />
-      ) : eventStatus === 'Started' ? (
+      {eventStatus === "Finished" ? (
+        <GradientTitle title={"Netijeler"} size="big" />
+      ) : eventStatus === "Started" ? (
         <div className="flex flex-col justify-center items-center">
           <div className="text-[44px] sm:text-[100px] leading-[100%] flex items-end font-bold bg-fancyTitle bg-clip-text text-transparent text-center">
-            <h2 className="flex flex-col items-center justify-center">{timeLeft.split(':')[0]}</h2>:
-            <h2 className="flex flex-col items-center justify-center">{timeLeft.split(':')[1]}</h2>:
-            <h2 className="flex flex-col items-center justify-center">{timeLeft.split(':')[2]}</h2>
+            <h2 className="flex flex-col items-center justify-center">
+              {timeLeft.split(":")[0]}
+            </h2>
+            :
+            <h2 className="flex flex-col items-center justify-center">
+              {timeLeft.split(":")[1]}
+            </h2>
+            :
+            <h2 className="flex flex-col items-center justify-center">
+              {timeLeft.split(":")[2]}
+            </h2>
           </div>
         </div>
-      ) : eventStatus === 'Not started' ? (
+      ) : eventStatus === "Not started" ? (
         <div className="flex flex-col justify-center items-center">
-          <h1 className="font-semibold text-[24px] uppercase text-fillNavyBlue">Ses bermeklik</h1>
+          <h1 className="font-semibold text-[24px] uppercase text-fillNavyBlue">
+            Ses bermeklik
+          </h1>
           <div className="text-[44px] sm:text-[100px] leading-[100%] flex items-end font-bold bg-fancyTitle bg-clip-text text-transparent text-center">
-            <h2 className="flex flex-col items-center justify-center">{timeLeft.split(':')[0]}</h2>:
-            <h2 className="flex flex-col items-center justify-center">{timeLeft.split(':')[1]}</h2>:
-            <h2 className="flex flex-col items-center justify-center">{timeLeft.split(':')[2]}</h2>
+            <h2 className="flex flex-col items-center justify-center">
+              {timeLeft.split(":")[0]}
+            </h2>
+            :
+            <h2 className="flex flex-col items-center justify-center">
+              {timeLeft.split(":")[1]}
+            </h2>
+            :
+            <h2 className="flex flex-col items-center justify-center">
+              {timeLeft.split(":")[2]}
+            </h2>
           </div>
           <h1 className="font-semibold text-[24px] uppercase text-fillNavyBlue mt-[16px]">
             sagatdan başlaýar
diff --git a/package-lock.json b/package-lock.json
index 0c11f63..04d55ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,20 +34,22 @@
         "next-seo": "^6.0.0",
         "postcss": "8.4.23",
         "react": "^18.2.0",
-        "react-confetti-explosion": "^2.1.2",
+        "react-confetti": "^6.1.0",
         "react-day-picker": "^8.10.1",
         "react-dom": "^18.2.0",
         "react-fast-marquee": "^1.3.5",
         "react-hook-form": "^7.43.9",
         "react-icons": "^4.8.0",
         "react-player": "^2.12.0",
+        "react-use": "^17.5.1",
         "swiper": "^9.2.4",
         "tailwind-merge": "^2.4.0",
         "tailwindcss": "3.3.1",
         "tailwindcss-animate": "^1.0.7",
         "typescript": "^5.2.2",
         "usehooks-ts": "^2.9.1",
-        "uuid": "^9.0.0"
+        "uuid": "^9.0.0",
+        "zustand": "^5.0.1"
       },
       "devDependencies": {
         "@types/date-fns": "^2.6.0",
@@ -1728,6 +1730,12 @@
         "date-fns": "*"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==",
+      "license": "MIT"
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -1895,6 +1903,12 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@xobotyi/scrollbar-width": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==",
+      "license": "MIT"
+    },
     "node_modules/acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
@@ -2505,6 +2519,15 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "license": "MIT",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -2534,23 +2557,35 @@
         "node": ">= 8"
       }
     },
-    "node_modules/css-jss": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/css-jss/-/css-jss-10.10.0.tgz",
-      "integrity": "sha512-YyMIS/LsSKEGXEaVJdjonWe18p4vXLo8CMA4FrW/kcaEyqdIGKCFXao31gbJddXEdIxSXFFURWrenBJPlKTgAA==",
+    "node_modules/css-in-js-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "^10.10.0",
-        "jss-preset-default": "^10.10.0"
+        "hyphenate-style-name": "^1.0.3"
       }
     },
-    "node_modules/css-vendor": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
-      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.8.3",
-        "is-in-browser": "^1.0.2"
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-tree/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
     "node_modules/cssesc": {
@@ -2745,6 +2780,15 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.1.tgz",
@@ -3387,8 +3431,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
       "version": "3.3.1",
@@ -3428,6 +3471,17 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "node_modules/fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
+    "node_modules/fastest-stable-stringify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==",
+      "license": "MIT"
+    },
     "node_modules/fastq": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
@@ -3955,6 +4009,15 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/inline-style-prefixer": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz",
+      "integrity": "sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==",
+      "license": "MIT",
+      "dependencies": {
+        "css-in-js-utils": "^3.1.0"
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
@@ -4143,11 +4206,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-in-browser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
-      "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
-    },
     "node_modules/is-map": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
@@ -4378,6 +4436,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==",
+      "license": "MIT"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4430,158 +4494,6 @@
         "json5": "lib/cli.js"
       }
     },
-    "node_modules/jss": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz",
-      "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "csstype": "^3.0.2",
-        "is-in-browser": "^1.1.3",
-        "tiny-warning": "^1.0.2"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/jss"
-      }
-    },
-    "node_modules/jss-plugin-camel-case": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz",
-      "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "hyphenate-style-name": "^1.0.3",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-compose": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-compose/-/jss-plugin-compose-10.10.0.tgz",
-      "integrity": "sha512-F5kgtWpI2XfZ3Z8eP78tZEYFdgTIbpA/TMuX3a8vwrNolYtN1N4qJR/Ob0LAsqIwCMLojtxN7c7Oo/+Vz6THow==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-default-unit": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz",
-      "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-expand": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-expand/-/jss-plugin-expand-10.10.0.tgz",
-      "integrity": "sha512-ymT62W2OyDxBxr7A6JR87vVX9vTq2ep5jZLIdUSusfBIEENLdkkc0lL/Xaq8W9s3opUq7R0sZQpzRWELrfVYzA==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-extend": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-extend/-/jss-plugin-extend-10.10.0.tgz",
-      "integrity": "sha512-sKYrcMfr4xxigmIwqTjxNcHwXJIfvhvjTNxF+Tbc1NmNdyspGW47Ey6sGH8BcQ4FFQhLXctpWCQSpDwdNmXSwg==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-global": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz",
-      "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-nested": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz",
-      "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-props-sort": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz",
-      "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-rule-value-function": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz",
-      "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-rule-value-observable": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-observable/-/jss-plugin-rule-value-observable-10.10.0.tgz",
-      "integrity": "sha512-ZLMaYrR3QE+vD7nl3oNXuj79VZl9Kp8/u6A1IbTPDcuOu8b56cFdWRZNZ0vNr8jHewooEeq2doy8Oxtymr2ZPA==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "symbol-observable": "^1.2.0"
-      }
-    },
-    "node_modules/jss-plugin-template": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-template/-/jss-plugin-template-10.10.0.tgz",
-      "integrity": "sha512-ocXZBIOJOA+jISPdsgkTs8wwpK6UbsvtZK5JI7VUggTD6LWKbtoxUzadd2TpfF+lEtlhUmMsCkTRNkITdPKa6w==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-vendor-prefixer": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz",
-      "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "css-vendor": "^2.0.8",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-preset-default": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-10.10.0.tgz",
-      "integrity": "sha512-GL175Wt2FGhjE+f+Y3aWh+JioL06/QWFgZp53CbNNq6ZkVU0TDplD8Bxm9KnkotAYn3FlplNqoW5CjyLXcoJ7Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "jss-plugin-camel-case": "10.10.0",
-        "jss-plugin-compose": "10.10.0",
-        "jss-plugin-default-unit": "10.10.0",
-        "jss-plugin-expand": "10.10.0",
-        "jss-plugin-extend": "10.10.0",
-        "jss-plugin-global": "10.10.0",
-        "jss-plugin-nested": "10.10.0",
-        "jss-plugin-props-sort": "10.10.0",
-        "jss-plugin-rule-value-function": "10.10.0",
-        "jss-plugin-rule-value-observable": "10.10.0",
-        "jss-plugin-template": "10.10.0",
-        "jss-plugin-vendor-prefixer": "10.10.0"
-      }
-    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -4667,11 +4579,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4709,6 +4616,12 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "license": "CC0-1.0"
+    },
     "node_modules/memoize-one": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
@@ -4798,6 +4711,32 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nano-css": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.6.2.tgz",
+      "integrity": "sha512-+6bHaC8dSDGALM1HJjOHVXpuastdu2xFoZlC77Jh4cg+33Zcgm+Gxd+1xsnpZK14eyHObSp82+ll5y3SX75liw==",
+      "license": "Unlicense",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "css-tree": "^1.1.2",
+        "csstype": "^3.1.2",
+        "fastest-stable-stringify": "^2.0.2",
+        "inline-style-prefixer": "^7.0.1",
+        "rtl-css-js": "^1.16.1",
+        "stacktrace-js": "^2.0.2",
+        "stylis": "^4.3.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/nano-css/node_modules/stylis": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.4.tgz",
+      "integrity": "sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==",
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -5423,17 +5362,19 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-confetti-explosion": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/react-confetti-explosion/-/react-confetti-explosion-2.1.2.tgz",
-      "integrity": "sha512-4UzDFBajAGXmF9TSJoRMO2QOBCIXc66idTxH8l7Mkul48HLGtk+tMzK9HYDYsy7Zmw5sEGchi2fbn4AJUuLrZw==",
+    "node_modules/react-confetti": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.1.0.tgz",
+      "integrity": "sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==",
+      "license": "MIT",
       "dependencies": {
-        "lodash": "^4.17.21",
-        "react-jss": "^10.9.2"
+        "tween-functions": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=10.18"
       },
       "peerDependencies": {
-        "react": "^18.x",
-        "react-dom": "^18.x"
+        "react": "^16.3.0 || ^17.0.1 || ^18.0.0"
       }
     },
     "node_modules/react-day-picker": {
@@ -5449,11 +5390,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/react-display-name": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.5.tgz",
-      "integrity": "sha512-I+vcaK9t4+kypiSgaiVWAipqHRXYmZIuAiS8vzFvXHHXVigg/sMKwlRgLy6LH2i3rmP+0Vzfl5lFsFRwF1r3pg=="
-    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -5508,40 +5444,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
-    "node_modules/react-jss": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-10.10.0.tgz",
-      "integrity": "sha512-WLiq84UYWqNBF6579/uprcIUnM1TSywYq6AIjKTTTG5ziJl9Uy+pwuvpN3apuyVwflMbD60PraeTKT7uWH9XEQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "@emotion/is-prop-valid": "^0.7.3",
-        "css-jss": "10.10.0",
-        "hoist-non-react-statics": "^3.2.0",
-        "is-in-browser": "^1.1.3",
-        "jss": "10.10.0",
-        "jss-preset-default": "10.10.0",
-        "prop-types": "^15.6.0",
-        "shallow-equal": "^1.2.0",
-        "theming": "^3.3.0",
-        "tiny-warning": "^1.0.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.6"
-      }
-    },
-    "node_modules/react-jss/node_modules/@emotion/is-prop-valid": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz",
-      "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==",
-      "dependencies": {
-        "@emotion/memoize": "0.7.1"
-      }
-    },
-    "node_modules/react-jss/node_modules/@emotion/memoize": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz",
-      "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg=="
-    },
     "node_modules/react-player": {
       "version": "2.12.0",
       "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.12.0.tgz",
@@ -5639,6 +5541,41 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-universal-interface": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
+      "peerDependencies": {
+        "react": "*",
+        "tslib": "*"
+      }
+    },
+    "node_modules/react-use": {
+      "version": "17.5.1",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.5.1.tgz",
+      "integrity": "sha512-LG/uPEVRflLWMwi3j/sZqR00nF6JGqTTDblkXK2nzXsIvij06hXl1V/MZIlwj1OKIQUtlh1l9jK8gLsRyCQxMg==",
+      "license": "Unlicense",
+      "dependencies": {
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-shallow-equal": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "nano-css": "^5.6.2",
+        "react-universal-interface": "^0.6.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.1.0",
+        "set-harmonic-interval": "^1.0.1",
+        "throttle-debounce": "^3.0.1",
+        "ts-easing": "^0.2.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -5705,6 +5642,12 @@
       "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
       "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@@ -5762,6 +5705,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -5824,6 +5776,18 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -5839,10 +5803,14 @@
         "node": ">=10"
       }
     },
-    "node_modules/shallow-equal": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    "node_modules/set-harmonic-interval": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==",
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=6.9"
+      }
     },
     "node_modules/shebang-command": {
       "version": "2.0.0",
@@ -5921,6 +5889,51 @@
       "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
       "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
     },
+    "node_modules/stack-generator": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
+      "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==",
+      "license": "MIT"
+    },
+    "node_modules/stacktrace-gps": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
+      "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "source-map": "0.5.6",
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/stacktrace-gps/node_modules/source-map": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+      "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stacktrace-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+      "license": "MIT",
+      "dependencies": {
+        "error-stack-parser": "^2.0.6",
+        "stack-generator": "^2.0.5",
+        "stacktrace-gps": "^3.0.4"
+      }
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -6206,14 +6219,6 @@
         "node": ">= 4.7.0"
       }
     },
-    "node_modules/symbol-observable": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/tailwind-merge": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.4.0.tgz",
@@ -6300,23 +6305,6 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
-    "node_modules/theming": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/theming/-/theming-3.3.0.tgz",
-      "integrity": "sha512-u6l4qTJRDaWZsqa8JugaNt7Xd8PPl9+gonZaIe28vAhqgHMIG/DOyFPqiKN/gQLQYj05tHv+YQdNILL4zoiAVA==",
-      "dependencies": {
-        "hoist-non-react-statics": "^3.3.0",
-        "prop-types": "^15.5.8",
-        "react-display-name": "^0.2.4",
-        "tiny-warning": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "peerDependencies": {
-        "react": ">=16.3"
-      }
-    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -6336,10 +6324,14 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    "node_modules/throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
     },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
@@ -6360,6 +6352,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
+      "license": "MIT"
+    },
     "node_modules/ts-api-utils": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz",
@@ -6372,6 +6370,12 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/ts-easing": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==",
+      "license": "Unlicense"
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -6394,6 +6398,12 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
       "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig=="
     },
+    "node_modules/tween-functions": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
+      "integrity": "sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==",
+      "license": "BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -6871,6 +6881,35 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.1.tgz",
+      "integrity": "sha512-pRET7Lao2z+n5R/HduXMio35TncTlSW68WsYBq2Lg1ASspsNGjpwLAsij3RpouyV6+kHMwwwzP0bZPD70/Jx/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   },
   "dependencies": {
@@ -7817,6 +7856,11 @@
         "date-fns": "*"
       }
     },
+    "@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -7936,6 +7980,11 @@
         "eslint-visitor-keys": "^3.4.1"
       }
     },
+    "@xobotyi/scrollbar-width": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
+    },
     "acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
@@ -8367,6 +8416,14 @@
         "is-what": "^4.1.8"
       }
     },
+    "copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -8390,23 +8447,28 @@
         "which": "^2.0.1"
       }
     },
-    "css-jss": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/css-jss/-/css-jss-10.10.0.tgz",
-      "integrity": "sha512-YyMIS/LsSKEGXEaVJdjonWe18p4vXLo8CMA4FrW/kcaEyqdIGKCFXao31gbJddXEdIxSXFFURWrenBJPlKTgAA==",
+    "css-in-js-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
       "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "^10.10.0",
-        "jss-preset-default": "^10.10.0"
+        "hyphenate-style-name": "^1.0.3"
       }
     },
-    "css-vendor": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
-      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+    "css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
       "requires": {
-        "@babel/runtime": "^7.8.3",
-        "is-in-browser": "^1.0.2"
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
       }
     },
     "cssesc": {
@@ -8556,6 +8618,14 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "requires": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "es-abstract": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.1.tgz",
@@ -9049,8 +9119,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
       "version": "3.3.1",
@@ -9086,6 +9155,16 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
+    "fastest-stable-stringify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
+    },
     "fastq": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
@@ -9455,6 +9534,14 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "inline-style-prefixer": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz",
+      "integrity": "sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==",
+      "requires": {
+        "css-in-js-utils": "^3.1.0"
+      }
+    },
     "internal-slot": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
@@ -9586,11 +9673,6 @@
         "is-extglob": "^2.1.1"
       }
     },
-    "is-in-browser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
-      "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
-    },
     "is-map": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
@@ -9744,6 +9826,11 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz",
       "integrity": "sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg=="
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -9790,154 +9877,6 @@
         "minimist": "^1.2.0"
       }
     },
-    "jss": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz",
-      "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "csstype": "^3.0.2",
-        "is-in-browser": "^1.1.3",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-camel-case": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz",
-      "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "hyphenate-style-name": "^1.0.3",
-        "jss": "10.10.0"
-      }
-    },
-    "jss-plugin-compose": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-compose/-/jss-plugin-compose-10.10.0.tgz",
-      "integrity": "sha512-F5kgtWpI2XfZ3Z8eP78tZEYFdgTIbpA/TMuX3a8vwrNolYtN1N4qJR/Ob0LAsqIwCMLojtxN7c7Oo/+Vz6THow==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-default-unit": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz",
-      "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "jss-plugin-expand": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-expand/-/jss-plugin-expand-10.10.0.tgz",
-      "integrity": "sha512-ymT62W2OyDxBxr7A6JR87vVX9vTq2ep5jZLIdUSusfBIEENLdkkc0lL/Xaq8W9s3opUq7R0sZQpzRWELrfVYzA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "jss-plugin-extend": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-extend/-/jss-plugin-extend-10.10.0.tgz",
-      "integrity": "sha512-sKYrcMfr4xxigmIwqTjxNcHwXJIfvhvjTNxF+Tbc1NmNdyspGW47Ey6sGH8BcQ4FFQhLXctpWCQSpDwdNmXSwg==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-global": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz",
-      "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "jss-plugin-nested": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz",
-      "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-props-sort": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz",
-      "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "jss-plugin-rule-value-function": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz",
-      "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-rule-value-observable": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-observable/-/jss-plugin-rule-value-observable-10.10.0.tgz",
-      "integrity": "sha512-ZLMaYrR3QE+vD7nl3oNXuj79VZl9Kp8/u6A1IbTPDcuOu8b56cFdWRZNZ0vNr8jHewooEeq2doy8Oxtymr2ZPA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "symbol-observable": "^1.2.0"
-      }
-    },
-    "jss-plugin-template": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-template/-/jss-plugin-template-10.10.0.tgz",
-      "integrity": "sha512-ocXZBIOJOA+jISPdsgkTs8wwpK6UbsvtZK5JI7VUggTD6LWKbtoxUzadd2TpfF+lEtlhUmMsCkTRNkITdPKa6w==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-vendor-prefixer": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz",
-      "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "css-vendor": "^2.0.8",
-        "jss": "10.10.0"
-      }
-    },
-    "jss-preset-default": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-10.10.0.tgz",
-      "integrity": "sha512-GL175Wt2FGhjE+f+Y3aWh+JioL06/QWFgZp53CbNNq6ZkVU0TDplD8Bxm9KnkotAYn3FlplNqoW5CjyLXcoJ7Q==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "jss-plugin-camel-case": "10.10.0",
-        "jss-plugin-compose": "10.10.0",
-        "jss-plugin-default-unit": "10.10.0",
-        "jss-plugin-expand": "10.10.0",
-        "jss-plugin-extend": "10.10.0",
-        "jss-plugin-global": "10.10.0",
-        "jss-plugin-nested": "10.10.0",
-        "jss-plugin-props-sort": "10.10.0",
-        "jss-plugin-rule-value-function": "10.10.0",
-        "jss-plugin-rule-value-observable": "10.10.0",
-        "jss-plugin-template": "10.10.0",
-        "jss-plugin-vendor-prefixer": "10.10.0"
-      }
-    },
     "jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -10008,11 +9947,6 @@
         "p-locate": "^5.0.0"
       }
     },
-    "lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -10042,6 +9976,11 @@
       "integrity": "sha512-8kETAAeWmOvtGIr7HPHm51DXoxlfkNncQ5FZWXR+abX8saQwMYXANWIkUstaYtcKSo/imOe/q+tVFA8ANzdSVA==",
       "requires": {}
     },
+    "mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
     "memoize-one": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
@@ -10110,6 +10049,28 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "nano-css": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.6.2.tgz",
+      "integrity": "sha512-+6bHaC8dSDGALM1HJjOHVXpuastdu2xFoZlC77Jh4cg+33Zcgm+Gxd+1xsnpZK14eyHObSp82+ll5y3SX75liw==",
+      "requires": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "css-tree": "^1.1.2",
+        "csstype": "^3.1.2",
+        "fastest-stable-stringify": "^2.0.2",
+        "inline-style-prefixer": "^7.0.1",
+        "rtl-css-js": "^1.16.1",
+        "stacktrace-js": "^2.0.2",
+        "stylis": "^4.3.0"
+      },
+      "dependencies": {
+        "stylis": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.4.tgz",
+          "integrity": "sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now=="
+        }
+      }
+    },
     "nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -10496,13 +10457,12 @@
         "loose-envify": "^1.1.0"
       }
     },
-    "react-confetti-explosion": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/react-confetti-explosion/-/react-confetti-explosion-2.1.2.tgz",
-      "integrity": "sha512-4UzDFBajAGXmF9TSJoRMO2QOBCIXc66idTxH8l7Mkul48HLGtk+tMzK9HYDYsy7Zmw5sEGchi2fbn4AJUuLrZw==",
+    "react-confetti": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.1.0.tgz",
+      "integrity": "sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==",
       "requires": {
-        "lodash": "^4.17.21",
-        "react-jss": "^10.9.2"
+        "tween-functions": "^1.2.0"
       }
     },
     "react-day-picker": {
@@ -10511,11 +10471,6 @@
       "integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==",
       "requires": {}
     },
-    "react-display-name": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.5.tgz",
-      "integrity": "sha512-I+vcaK9t4+kypiSgaiVWAipqHRXYmZIuAiS8vzFvXHHXVigg/sMKwlRgLy6LH2i3rmP+0Vzfl5lFsFRwF1r3pg=="
-    },
     "react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -10553,39 +10508,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
-    "react-jss": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-10.10.0.tgz",
-      "integrity": "sha512-WLiq84UYWqNBF6579/uprcIUnM1TSywYq6AIjKTTTG5ziJl9Uy+pwuvpN3apuyVwflMbD60PraeTKT7uWH9XEQ==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "@emotion/is-prop-valid": "^0.7.3",
-        "css-jss": "10.10.0",
-        "hoist-non-react-statics": "^3.2.0",
-        "is-in-browser": "^1.1.3",
-        "jss": "10.10.0",
-        "jss-preset-default": "10.10.0",
-        "prop-types": "^15.6.0",
-        "shallow-equal": "^1.2.0",
-        "theming": "^3.3.0",
-        "tiny-warning": "^1.0.2"
-      },
-      "dependencies": {
-        "@emotion/is-prop-valid": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz",
-          "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==",
-          "requires": {
-            "@emotion/memoize": "0.7.1"
-          }
-        },
-        "@emotion/memoize": {
-          "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz",
-          "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg=="
-        }
-      }
-    },
     "react-player": {
       "version": "2.12.0",
       "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.12.0.tgz",
@@ -10640,6 +10562,33 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-universal-interface": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
+      "requires": {}
+    },
+    "react-use": {
+      "version": "17.5.1",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.5.1.tgz",
+      "integrity": "sha512-LG/uPEVRflLWMwi3j/sZqR00nF6JGqTTDblkXK2nzXsIvij06hXl1V/MZIlwj1OKIQUtlh1l9jK8gLsRyCQxMg==",
+      "requires": {
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-shallow-equal": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "nano-css": "^5.6.2",
+        "react-universal-interface": "^0.6.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.1.0",
+        "set-harmonic-interval": "^1.0.1",
+        "throttle-debounce": "^3.0.1",
+        "ts-easing": "^0.2.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -10691,6 +10640,11 @@
       "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
       "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@@ -10726,6 +10680,14 @@
         "glob": "^7.1.3"
       }
     },
+    "rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -10765,6 +10727,11 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="
+    },
     "semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -10774,10 +10741,10 @@
         "lru-cache": "^6.0.0"
       }
     },
-    "shallow-equal": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    "set-harmonic-interval": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g=="
     },
     "shebang-command": {
       "version": "2.0.0",
@@ -10832,6 +10799,45 @@
       "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
       "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
     },
+    "stack-generator": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
+      "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
+      "requires": {
+        "stackframe": "^1.3.4"
+      }
+    },
+    "stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
+    },
+    "stacktrace-gps": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
+      "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
+      "requires": {
+        "source-map": "0.5.6",
+        "stackframe": "^1.3.4"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+          "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA=="
+        }
+      }
+    },
+    "stacktrace-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+      "requires": {
+        "error-stack-parser": "^2.0.6",
+        "stack-generator": "^2.0.5",
+        "stacktrace-gps": "^3.0.4"
+      }
+    },
     "streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -11019,11 +11025,6 @@
         "ssr-window": "^4.0.2"
       }
     },
-    "symbol-observable": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
-    },
     "tailwind-merge": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.4.0.tgz",
@@ -11090,17 +11091,6 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
-    "theming": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/theming/-/theming-3.3.0.tgz",
-      "integrity": "sha512-u6l4qTJRDaWZsqa8JugaNt7Xd8PPl9+gonZaIe28vAhqgHMIG/DOyFPqiKN/gQLQYj05tHv+YQdNILL4zoiAVA==",
-      "requires": {
-        "hoist-non-react-statics": "^3.3.0",
-        "prop-types": "^15.5.8",
-        "react-display-name": "^0.2.4",
-        "tiny-warning": "^1.0.2"
-      }
-    },
     "thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -11117,10 +11107,10 @@
         "thenify": ">= 3.1.0 < 4"
       }
     },
-    "tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    "throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
     },
     "to-fast-properties": {
       "version": "2.0.0",
@@ -11135,6 +11125,11 @@
         "is-number": "^7.0.0"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
     "ts-api-utils": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz",
@@ -11142,6 +11137,11 @@
       "dev": true,
       "requires": {}
     },
+    "ts-easing": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
+    },
     "ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -11164,6 +11164,11 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
       "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig=="
     },
+    "tween-functions": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
+      "integrity": "sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA=="
+    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -11476,6 +11481,12 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "zustand": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.1.tgz",
+      "integrity": "sha512-pRET7Lao2z+n5R/HduXMio35TncTlSW68WsYBq2Lg1ASspsNGjpwLAsij3RpouyV6+kHMwwwzP0bZPD70/Jx/w==",
+      "requires": {}
     }
   }
 }
diff --git a/package.json b/package.json
index 13bc599..419d61c 100644
--- a/package.json
+++ b/package.json
@@ -35,20 +35,22 @@
     "next-seo": "^6.0.0",
     "postcss": "8.4.23",
     "react": "^18.2.0",
-    "react-confetti-explosion": "^2.1.2",
+    "react-confetti": "^6.1.0",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.3.5",
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.8.0",
     "react-player": "^2.12.0",
+    "react-use": "^17.5.1",
     "swiper": "^9.2.4",
     "tailwind-merge": "^2.4.0",
     "tailwindcss": "3.3.1",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.2.2",
     "usehooks-ts": "^2.9.1",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@types/date-fns": "^2.6.0",