feat: Added Discord invitation link in the footer and header (as a button)

src/components/Footer.astro

@@ -2,8 +2,8 @@
 import IconFacebookBrand from "./icons/IconFacebookBrand.astro";
 import IconInstagramBrand from "./icons/IconInstagramBrand.astro";
 import IconGithubBrand from "./icons/IconGithubBrand.astro";
-import IconXBrand from "./icons/IconXBrand.astro";
 import IconLinkedInBrand from "./icons/IconLinkedInBrand.astro";
+import IconDiscordBrand from "./icons/IconDiscordBrand.astro";
 ---
 
 <footer class="bg-gray-900 text-white py-6">
@@ -32,5 +32,11 @@ import IconLinkedInBrand from "./icons/IconLinkedInBrand.astro";
        aria-label="GitHub">
       <IconGithubBrand class="size-6" />
     </a>
+    <a href="https://discord.gg/cyXd37NTbq"
+       class="text-gray-400 hover:text-white rounded-full p-2 bg-transparent"
+       target="_blank"
+       aria-label="Discord">
+      <IconDiscordBrand class="size-6" />
+    </a>
   </div>
 </footer>

src/components/icons/IconDiscordBrand.astro

@@ -0,0 +1,22 @@
+--- 
+interface Props {
+    class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class={`icon icon-tabler icons-tabler-outline icon-tabler-brand-discord ${className ?? "size-6"}`}
+    ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
+        d="M8 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path
+        d="M14 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path
+        d="M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-.972 1.923a11.913 11.913 0 0 0 -4.053 0l-.975 -1.923c-1.5 .16 -3.043 .485 -4.5 1.5c-2 5.667 -2.167 9.833 -1.5 11.5c.667 1.333 2 3 3.5 3c.5 0 2 -2 2 -3"
+    ></path><path d="M7 16.5c3.5 1 6.5 1 10 0"></path></svg
+>

src/pages/index.astro

@@ -40,6 +40,15 @@ const events = (await getCollection("events"))
           Club de Desarrollo de Software en UPIICSA: Aprendiendo y creciendo
           juntos en tecnología.
         </p>
+        <div class="pl-1">
+          <a
+            href="https://discord.gg/cyXd37NTbq"
+            target="_blank"
+            class="sparkling-btn"
+          >
+            Unete a nosotros
+          </a>
+        </div>
       </div>
     </section>
     <SectionContainer

src/styles/global.css

@@ -3,9 +3,9 @@
 @font-face {
   font-family: "JetBrains Mono";
   src:
-    url("/fonts/JetBrainsMono-Light.woff2") format("woff2"),
-    url("/fonts/JetBrainsMono-Regular.woff2") format("woff2"),
-    url("/fonts/JetBrainsMono-Thin.woff2") format("woff2");
+    url("fonts/JetBrainsMono-Light.woff2") format("woff2"),
+    url("fonts/JetBrainsMono-Regular.woff2") format("woff2"),
+    url("fonts/JetBrainsMono-Thin.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
 }
@@ -30,6 +30,145 @@ body {
   );
 }
 
+@keyframes topBubbles {
+  0% {
+    background-position:
+      5% 90%,
+      10% 90%,
+      10% 90%,
+      15% 90%,
+      25% 90%,
+      25% 90%,
+      40% 90%,
+      55% 90%,
+      70% 90%;
+  }
+
+  50% {
+    background-position:
+      0% 80%,
+      0% 20%,
+      10% 40%,
+      20% 0%,
+      30% 30%,
+      22% 50%,
+      50% 50%,
+      65% 20%,
+      90% 30%;
+  }
+
+  100% {
+    background-position:
+      0% 70%,
+      0% 10%,
+      10% 30%,
+      20% -10%,
+      30% 20%,
+      22% 40%,
+      50% 40%,
+      65% 10%,
+      90% 20%;
+    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
+  }
+}
+
+@keyframes bottomBubbles {
+  0% {
+    background-position:
+      10% -10%,
+      30% 10%,
+      55% -10%,
+      70% -10%,
+      85% -10%,
+      70% -10%,
+      70% 0%;
+  }
+
+  50% {
+    background-position:
+      0% 80%,
+      20% 80%,
+      45% 60%,
+      60% 100%,
+      75% 70%,
+      95% 60%,
+      105% 0%;
+  }
+
+  100% {
+    background-position:
+      0% 90%,
+      20% 90%,
+      45% 70%,
+      60% 110%,
+      75% 80%,
+      95% 70%,
+      110% 10%;
+    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
+  }
+}
+
+.sparkling-btn {
+  @apply relative inline-block px-6 py-3 rounded-lg border-none text-white
+    cursor-pointer bg-[#4ca4ca] transition-all duration-[0.2s];
+  transition-timing-function: ease;
+  &:active {
+    transform: scale(0.95);
+  }
+  &::before, &::after {
+    @apply absolute content-[""] w-[150%] left-[50%] h-full translate-x-[-50%]
+      z-[-1000] bg-no-repeat;
+  }
+  &:hover {
+    &::before {
+      top: -70%;
+      background-image:
+        radial-gradient(circle, #4ca4ca 20%, transparent 20%),
+        radial-gradient(circle, transparent 20%, #4ca4ca 20%, transparent 30%),
+        radial-gradient(circle, #4ca4ca 20%, transparent 20%),
+        radial-gradient(circle, #4ca4ca 20%, transparent 20%),
+        radial-gradient(circle, transparent 10%, #4ca4ca 15%, transparent 20%),
+        radial-gradient(circle, #4ca4ca 20%, transparent 20%),
+        radial-gradient(circle, #4ca4ca 20%, transparent 20%),
+        radial-gradient(circle, #4ca4ca 20%, transparent 20%),
+        radial-gradient(circle, #4ca4ca 20%, transparent 20%);
+      background-size:
+        10% 10%,
+        20% 20%,
+        15% 15%,
+        20% 20%,
+        18% 18%,
+        10% 10%,
+        15% 15%,
+        10% 10%,
+        18% 18%;
+      background-position: 50% 120%;
+      animation: topBubbles 0.6s ease;
+    }
+    &::after {
+      bottom: -70%;
+      background-image:
+        radial-gradient(circle, #4ca4ca 20%, transparent 20%),
+        radial-gradient(circle, #4ca4ca 20%, transparent 20%),
+        radial-gradient(circle, transparent 10%, #4ca4ca 15%, transparent 20%),
+        radial-gradient(circle, #4ca4ca 20%, transparent 20%),
+        radial-gradient(circle, #4ca4ca 20%, transparent 20%),
+        radial-gradient(circle, #4ca4ca 20%, transparent 20%),
+        radial-gradient(circle, #4ca4ca 20%, transparent 20%);
+      background-size:
+        15% 15%,
+        20% 20%,
+        18% 18%,
+        20% 20%,
+        15% 15%,
+        20% 20%,
+        18% 18%;
+      background-position: 50% 0%;
+      animation: bottomBubbles 0.6s ease;
+    }
+  }
+}
+
 .card {
   @apply border-solid border-[0.1px] transition-colors ease-in duration-[0.2s];
   border-color: rgba(129, 129, 129, 0.19);