feat: add animated background

app/components/videoBackground.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+const VideoBackground = () => {
+  return (
+    <div style={containerStyle}>
+      <video autoPlay muted loop style={videoStyle}>
+        <source src="/background/output.webm" type="video/webm" />
+        Your browser does not support HTML5 video.
+      </video>
+      <div style={overlayStyle} />
+    </div>
+  );
+};
+
+const videoStyle: any = {
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+};
+
+const containerStyle: any = {
+  position: "fixed",
+  right: "0",
+  bottom: "0",
+  minWidth: "100%",
+  minHeight: "100%",
+  zIndex: "0",
+  overflow: "hidden",
+};
+
+const overlayStyle: any = {
+  position: "absolute",
+  top: "0",
+  left: "0",
+  width: "100%",
+  height: "100%",
+  background: "rgba(17, 24, 39, 0.80)",
+  boxShadow: "0px 2.488px 30.481px 0px rgba(0, 7, 72, 0.08)",
+  backdropFilter: "blur(7.77584171295166px)",
+  zIndex: "1",
+};
+
+export default VideoBackground;

app/page.tsx

@@ -61,6 +61,7 @@ import WrongNetworkModal from "./components/wrongNetwork";
 import { Skeleton, useMediaQuery } from "@mui/material";
 import { StarknetIdNavigator } from "starknetid.js";
 import LeaderboardWrapper from "./components/leaderboard/leaderboardWrapper";
+import VideoBackground from "./components/videoBackground";
 
 export default function Home() {
   const [isLoaded, setIsLoaded] = useState(false);
@@ -516,6 +517,7 @@ export default function Home() {
       ) : (
         <>
           <main className={styles.main}>
+            <VideoBackground />
             <div className={styles.leftContainer}>
               {isFinished && isLoaded ? (
                 <>
@@ -672,7 +674,7 @@ export default function Home() {
           >
             <>
               Counter successfully reset, if it reaches zero before someone
-              resets it again, you will win 5 eth
+              resets it again, you will win 5 eth.
             </>
           </Notification>
         </>

app/styles/components/stats.module.css

@@ -5,6 +5,7 @@
   justify-content: center;
   padding: 0 20px;
   gap: 24px;
+  z-index: 1;
 }
 
 .statsSection {

app/styles/home.module.css

@@ -15,6 +15,7 @@
   align-items: center;
   gap: 16px;
   justify-content: center;
+  z-index: 1;
 }
 
 .centralSection {
@@ -26,6 +27,7 @@
   position: relative;
   height: 598px;
   margin: auto;
+  z-index: 1;
 }
 
 .backgroundWrapper {