Home and leaderboard card

.gitignore

@@ -26,6 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel

app/(home)/page.module.scss

@@ -0,0 +1,362 @@
+// Import external fonts
+@import url("https://fonts.googleapis.com/css?family=Lato:100,300,400");
+@import url("https://fonts.googleapis.com/css?family=Roboto:100");
+@import url("https://db.onlinewebfonts.com/c/1d45a7e720d9ec9abd6743cc20fa7c98?family=BreakTheCode");
+@import url("https://db.onlinewebfonts.com/c/9059f4e41fb7c92170641fe975087f08?family=Scifi+Adventure");
+@import url("https://db.onlinewebfonts.com/c/7b625b4facc3b08ddc36375715334f0d?family=prostf");
+@import url("https://db.onlinewebfonts.com/c/e7322a6673613ab13604fadda3d20e56?family=VALORANT");
+@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");
+// Define custom font
+@font-face {
+  font-family: "BreakTheCode"; // Unique name for the font
+  src: url("../../components/assets/fonts/Breakthecode.ttf") format("truetype"); // Path to font file
+  font-weight: normal;
+  font-style: normal;
+}
+
+// Mixin for buttons (if used)
+@mixin button($bcolor, $url, $x1, $y1, $bor, $col) {
+  background: $bcolor;
+  -webkit-mask: url($url);
+  mask: url($url);
+  -webkit-mask-size: $x1 $y1;
+  mask-size: $x1 $y1;
+  border: $bor;
+  color: $col;
+}
+
+// Main styles
+.main {
+  height: 100vh;
+  width: 100vw;
+  background-image: url("/DF4.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+
+  .main2 {
+    height: 100vh;
+    width: 100vw;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .head {
+      margin-top: 7%;
+      height: 7px;
+      width: 70%;
+      font-size: 6rem;
+      color: rgb(204, 248, 179);
+      text-shadow: 0 0 5px rgba(212, 255, 0, 0.3),
+        /* Light yellow-green glow */ 0 0 8px rgba(212, 255, 0, 0.3),
+        /* Larger glow */ 0 0 11px rgba(170, 255, 0, 0.4),
+        /* Even larger glow */ 0 0 15px rgba(170, 255, 0, 0.4),
+        /* Even larger glow */ 0 0 19px rgba(153, 255, 0, 0.5),
+        /* Largest glow */ 0 0 30px rgba(153, 255, 0, 0.5); /* Largest glow */
+
+      margin-bottom: 10%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: "Audiowide", sans-serif; // Apply the custom font here
+      white-space: nowrap;
+      margin-left: 5%;
+
+      .animatedText {
+        display: flex;
+        .digitalText,
+        .fortressText {
+          display: inline-block;
+          animation: flickerText 1.5s linear;
+          animation-iteration-count: 2; // Flicker only twice
+        }
+
+        .space {
+          display: inline-block;
+          width: 11rem;
+        }
+      }
+    }
+
+    .Footer {
+      height: 120px;
+      width: 56%;
+      font-size: 25px;
+      color: white;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-family: "Inter", sans-serif;
+      font-weight: 800;
+      margin-top: 17%;
+    }
+
+    .backbutton {
+      position: relative;
+      height: 75px;
+      width: 75px;
+      background-color: rgb(238, 255, 0);
+      z-index: 1; // Ensure it's below buttonContainer1
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      // border: 6px rgb(21, 255, 0) solid;
+
+      .buttonContainer1 {
+        position: absolute;
+        width: 75px;
+        height: 75px;
+        overflow: hidden;
+        border: 1px solid;
+        font-family: "Lato", sans-serif;
+        font-weight: 300;
+        transition: 0.5s;
+        letter-spacing: 1px;
+        border-radius: 50%;
+        z-index: 2; // Ensure it's above the backbutton
+
+        button {
+          width: 75px;
+          height: 75px;
+          font-family: "Lato", sans-serif;
+          font-weight: 300;
+          font-size: 11px;
+          letter-spacing: 1px;
+          font-weight: bold;
+          background: transparent;
+          border: none;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: transparent;
+
+          svg {
+            width: 24px; // Adjust size as needed
+            height: 24px; // Adjust size as needed
+            color: #fff; // Color of the icon
+            -webkit-animation: flickerIcon 1.5s linear infinite;
+            animation: flickerIcon 1.5s linear infinite;
+          }
+
+          @include button(
+            #000,
+            "https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png",
+            2300%,
+            100%,
+            none,
+            #fff
+          );
+
+          -webkit-animation: ani2 0.7s steps(22) forwards;
+          animation: ani2 0.7s steps(22) forwards;
+
+          &:hover {
+            -webkit-animation: ani 0.7s steps(22) forwards;
+            animation: ani 0.7s steps(22) forwards;
+
+            svg {
+              -webkit-animation: none; // Stop flickering on hover
+              animation: none; // Stop flickering on hover
+            }
+          }
+        }
+      }
+    }
+
+    @-webkit-keyframes ani {
+      from {
+        -webkit-mask-position: 0 0;
+        mask-position: 0 0;
+      }
+      to {
+        -webkit-mask-position: 100% 0;
+        mask-position: 100% 0;
+      }
+    }
+
+    @keyframes ani {
+      from {
+        -webkit-mask-position: 0 0;
+        mask-position: 0 0;
+      }
+      to {
+        -webkit-mask-position: 100% 0;
+        mask-position: 100% 0;
+      }
+    }
+
+    @-webkit-keyframes ani2 {
+      from {
+        -webkit-mask-position: 100% 0;
+        mask-position: 100% 0;
+      }
+      to {
+        -webkit-mask-position: 0 0;
+        mask-position: 0 0;
+      }
+    }
+
+    @keyframes ani2 {
+      from {
+        -webkit-mask-position: 100% 0;
+        mask-position: 100% 0;
+      }
+      to {
+        -webkit-mask-position: 0 0;
+        mask-position: 0 0;
+      }
+    }
+
+    @-webkit-keyframes flickerIcon {
+      0% {
+        opacity: 0.1;
+      }
+      33% {
+        opacity: 1;
+      }
+      67% {
+        opacity: 0.1;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+
+    @keyframes flickerIcon {
+      0% {
+        opacity: 0.1;
+      }
+      33% {
+        opacity: 1;
+      }
+      67% {
+        opacity: 0.1;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+
+    @-webkit-keyframes flickerText {
+      0% {
+        color: transparent;
+      }
+      40% {
+        color: rgb(255, 255, 255);
+      }
+      80% {
+        color: transparent;
+      }
+      100% {
+        color: rgb(255, 255, 255);
+      }
+    }
+
+    @keyframes flickerText {
+      0% {
+        color: transparent;
+      }
+      40% {
+        color: rgb(255, 255, 255);
+      }
+      80% {
+        color: transparent;
+      }
+      100% {
+        color: rgb(255, 255, 255);
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .main {
+    .main2 {
+      .head {
+        font-size: 2rem; // Smaller font size for small devices
+        margin-top: 10%;
+        margin-left: 1%;
+        width: 90%; // Adjust width
+        .animatedText {
+          .space {
+            width: 4rem; // Smaller space
+          }
+        }
+      }
+
+      .Footer {
+        font-size: 14px; // Smaller font size for small devices
+        width: 80%; // Adjust width
+        margin-top: 50%;
+      }
+
+      .backbutton {
+        height: 45px; // Smaller button size
+        width: 45px;
+
+        .buttonContainer1 {
+          width: 45px;
+          height: 45px;
+
+          button {
+            width: 45px;
+            height: 45px;
+
+            svg {
+              width: 14px; // Smaller icon size
+              height: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 380px) {
+  .main {
+    .main2 {
+      .head {
+        font-size: 1.5rem; 
+        margin-top: 10%;
+        margin-left: 0;
+        width: 90%; 
+        margin-bottom: 66%;
+        .animatedText {
+          .space {
+            width: 3.2rem; // Adjusted for smaller screens
+          }
+        }
+      }
+
+      .Footer {
+        font-size: 13px; // Reduce font size
+        width: 80%; // Adjust width
+        margin-top: 62%;
+      }
+
+      .backbutton {
+        height: 50px; // Smaller button size
+        width: 50px;
+
+        .buttonContainer1 {
+          width: 50px;
+          height: 50px;
+
+          button {
+            width: 50px;
+            height: 50px;
+
+            svg {
+              width: 16px; // Smaller icon
+              height: 16px;
+            }
+          }
+        }
+      }
+    }
+  }
+}