feat: Create header

src/pages/index.astro

@@ -2,7 +2,109 @@
 import BaseLayout from "../layouts/BaseLayout.astro";
 ---
 <BaseLayout title="Hacktion">
-  <main class="">
-    asd
+  <main>
+    <!-- Header -->
+    <header class="w-full px-6 py-4 flex justify-between items-center border-b border-gray-300">
+      <div class="text-lg font-semibold">
+        <img src="/notion-logo.svg" alt="Notion logo" class="w-6 inline-block mr-2" />
+        Notion Campus Leaders
+      </div>
+      <nav class="flex space-x-6 text-sm font-medium">
+        <a href="#acerca" class="hover:underline">Acerca de nosotros</a>
+        <a href="#retos" class="hover:underline">Retos</a>
+        <a href="#sede" class="hover:underline">Sede</a>
+        <a href="#highlights" class="hover:underline">Highlights</a>
+        <a
+          href="#sponsor"
+          class="bg-transparent border border-green-600 px-3 py-1 rounded hover:bg-green-100"
+        >Se sponsor</a>
+        <a href="#registro" class="bg-green-600 text-white px-3 py-1 rounded hover:bg-green-700"
+        >Regístrate</a>
+      </nav>
+    </header>
+
+    <!-- Hero principal -->
+    <section class="text-center py-16 px-4">
+      <h2 class="text-sm text-gray-600">Notion Campus Leaders</h2>
+      <h1 class="text-5xl font-bold mt-2">Hacktion</h1>
+      <p class="mt-2 text-lg text-gray-700">Construyamos el futuro juntos 🚀</p>
+      <div class="mt-6 space-x-4">
+        <a
+          href="#acerca"
+          class="bg-white border border-green-600 text-green-600 px-4 py-2 rounded hover:bg-green-50"
+        >
+          Conócenos
+        </a>
+        <a href="#registro" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
+          Regístrate
+        </a>
+      </div>
+    </section>
+
+    <!-- Acerca de nosotros -->
+    <section
+      id="acerca"
+      class="max-w-4xl mx-auto py-16 px-4 flex flex-col md:flex-row items-center gap-8"
+    >
+      <div class="flex-1">
+        <h2 class="text-3xl font-bold mb-4">Acerca de nosotros</h2>
+        <p class="mb-2">
+          Hacktion es un hackathon hecho por la comunidad de Notion Campus Leaders en colaboración
+          con muchas otras comunidades de desarrollo.
+        </p>
+        <p>
+          Busca crear un espacio donde personas que van adentrándose a la informática puedan
+          experimentar su primer hackathon, aprender y conectar con otros entusiastas de la
+          tecnología.
+        </p>
+      </div>
+      <img
+        src="/tu-imagen.jpg"
+        alt="Foto de la comunidad"
+        class="rounded-lg shadow-lg w-full md:w-96"
+      />
+    </section>
+
+    <!-- Retos -->
+    <section id="retos" class="max-w-4xl mx-auto py-16 px-4">
+      <h2 class="text-3xl font-bold mb-4">Retos</h2>
+      <p>
+        Aquí puedes describir los retos principales del hackathon, categorías, tecnologías
+        sugeridas, etc.
+      </p>
+    </section>
+
+    <!-- Sede -->
+    <section id="sede" class="max-w-4xl mx-auto py-16 px-4">
+      <h2 class="text-3xl font-bold mb-4">Sede</h2>
+      <p>
+        Información sobre el lugar donde se realizará el evento, dirección, cómo llegar, etc.
+      </p>
+    </section>
+
+    <!-- Highlights -->
+    <section id="highlights" class="max-w-4xl mx-auto py-16 px-4">
+      <h2 class="text-3xl font-bold mb-4">Highlights</h2>
+      <p>
+        Resalta los puntos más importantes del evento, premios, invitados especiales, actividades,
+        etc.
+      </p>
+    </section>
+
+    <!-- Sponsor -->
+    <section id="sponsor" class="max-w-4xl mx-auto py-16 px-4">
+      <h2 class="text-3xl font-bold mb-4">Se sponsor</h2>
+      <p>
+        Información para empresas o personas interesadas en patrocinar el evento.
+      </p>
+    </section>
+
+    <!-- Registro -->
+    <section id="registro" class="max-w-4xl mx-auto py-16 px-4">
+      <h2 class="text-3xl font-bold mb-4">Regístrate</h2>
+      <p>
+        Aquí puedes poner el formulario de registro o un enlace a un formulario externo.
+      </p>
+    </section>
   </main>
 </BaseLayout>