Header & Footer

src/components/Footer.astro

@@ -0,0 +1,35 @@
+---
+const { class: className = '' } = Astro.props;
+---
+
+<footer
+  class={`relative w-full bg-[#214030] text-white pt-8 pb-12 px-4 sm:px-6 lg:px-8 ${className}`}
+>
+  <div class="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-8">
+    <div class="flex flex-col items-center sm:items-start gap-4">
+      <p class="text-sm font-semibold tracking-wide">Organizado por:</p>
+      <div class="flex items-center gap-6">
+        <a href="https://www.scesi.org/" target="_blank" rel="noopener noreferrer">
+          <img src="/scesi.svg" alt="Logo SCESI" class="h-10 w-auto" />
+        </a>
+        <img src="/hacklab-brick-heads.svg" alt="Logo HackLab" class="h-10 w-auto" />
+      </div>
+    </div>
+
+    <a
+      href="#"
+      class="inline-flex items-center bg-white/10 hover:bg-white/20 text-white text-sm font-semibold py-2 px-4 rounded-md transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#FFC727] focus-visible:ring-offset-2 focus-visible:ring-offset-[#214030] h-10"
+    >
+      Reglamento
+    </a>
+  </div>
+  <p class="absolute bottom-4 left-1/2 -translate-x-1/2 text-sm font-medium text-center">
+    Creado con <span class="text-red-500" aria-hidden="true">❤</span> por SCESI
+  </p>
+</footer>
+
+<style>u
+  footer {
+    font-family: 'Roboto', sans-serif;
+  }
+</style>