feat: Added footer with social media (#3)

* feat: Added footer with social medias

* style: Formatted code

Author: EGAMAGZ

README.md

@@ -12,6 +12,7 @@ Página web para el club de desarrollo de software Binary Brains.
 ## Comandos
 
 **Instlación de dependencias**
+
 ```bash
 deno install --allow-scripts
 ```

src/components/Footer.astro

@@ -0,0 +1,35 @@
+---
+import IconFacebookBrand from "./icons/IconFacebookBrand.astro";
+import IconInstagramBrand from "./icons/IconInstagramBrand.astro";
+import IconGithubBrand from "./icons/IconGithubBrand.astro";
+import IconXBrand from "./icons/IconXBrand.astro";
+---
+
+<footer class="bg-gray-900 text-white py-6">
+  <div class="container mx-auto flex justify-center">
+    <a href="https://www.facebook.com/profile.php?id=100091984830340&_rdc=1&_rdr"
+       class="text-gray-400 hover:text-white mr-4 rounded-full p-2 bg-transparent"
+       target="_blank"
+       aria-label="Facebook">
+      <IconFacebookBrand class="size-6" />
+    </a>
+    <a href="https://x.com/DevsUpiics48486"
+       class="text-gray-400 hover:text-white mr-4 rounded-full p-2 bg-transparent"
+       target="_blank"
+       aria-label="X (formerly Twitter)">
+      <IconXBrand class="size-6" />
+    </a>
+    <a href="https://www.instagram.com/bbupiicsa/"
+       class="text-gray-400 hover:text-white mr-4 rounded-full p-2 bg-transparent"
+       target="_blank"
+       aria-label="Instagram">
+      <IconInstagramBrand class="size-6" />
+    </a>
+    <a href="https://github.com/binarybrains-upiicsa"
+       class="text-gray-400 hover:text-white rounded-full p-2 bg-transparent"
+       target="_blank"
+       aria-label="GitHub">
+      <IconGithubBrand class="size-6" />
+    </a>
+  </div>
+</footer>

src/components/icons/IconFacebookBrand.astro

@@ -0,0 +1,20 @@
+---
+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-facebook ${className ?? "size-6"}`}
+    ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
+        d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"
+    ></path></svg
+>

src/components/icons/IconGithubBrand.astro

@@ -0,0 +1,21 @@
+---
+
+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-github ${className ?? "size-6"}`}
+    ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
+        d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
+    ></path></svg
+>

src/components/icons/IconInstagramBrand.astro

@@ -0,0 +1,23 @@
+---
+
+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-instagram ${className ?? "size-6"}`}
+    ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
+        d="M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z"
+    ></path><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path><path
+        d="M16.5 7.5v.01"></path></svg
+>

src/components/icons/IconXBrand.astro

@@ -0,0 +1,21 @@
+---
+
+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-x ${className ?? "size-6"}`}
+    ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
+        d="M4 4l11.733 16h4.267l-11.733 -16z"></path><path
+        d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path></svg
+>

src/layouts/Layout.astro

@@ -1,4 +1,5 @@
 ---
+import Footer from "../components/Footer.astro";
 import "../styles/global.css";
 
 interface Props {
@@ -19,6 +20,7 @@ const { title } = Astro.props;
   <body>
     <div id="cursor" class="custom-cursor" />
     <slot />
+    <Footer />
   </body>
 </html>