Conversation
I make an update of the index.astro file from my remote repository on manual instead of using the IDE I've.
…orito/Hacktion into Create_aboutus_section
|
No olvides seguir conventional commits para nombrar las PRs |
|
Junto a eso, no olvides hacer formateo de tu codigo con el uso de |
|
Favor de respetar la template al crear una PR. Esto resuelve issue #49 |
|
Generaste un |
|
Ok, los checo lo más rápido posible. -Kai |
|
Según yo ya quedo, ya hice el dmt y volví a hacer push. -Kai |
EGAMAGZ
left a comment
There was a problem hiding this comment.
Al desarrollar las secciones asignadas, procura que se parezcan a la maqueta original
Considera el uso de los componentes de neobrutalism, los cuales ya se encuentran en src/components/ui/
| <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> |
There was a problem hiding this comment.
| <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> |
La etiqueta header en este contexto no se debería usar. Seria solo nav. En este caso @AaronVanScoit estaria trabajando en la barra de navegacion en el issue #44. No esta mal el querer aprovechar y solventarlo pero junto a eso, no se parece conforme a la maqueta
| <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> |
There was a problem hiding this comment.
| <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> | |
| <section class="text-center py-16 px-4"> | |
| <span class="text-sm text-gray-600">Notion Campus Leaders</span> | |
| <h2 class="text-5xl font-bold mt-2">Hacktion</h2> | |
| <span class="mt-2 text-lg text-gray-700">Construyamos el futuro juntos 🚀</span> | |
| <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> |
En si el contenido no esta mal, pero esta lejano al contenido original en esperado:
El html semantico no esta mal, pero no son las etiquetas adecuadas. Hice anotaciones de unas etiquetas que podrian ser mas ad hoc
| <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> |
There was a problem hiding this comment.
Igual, no esta mal el aprovechar y solventar más issues, en este caso el #47. Ya @mendodevv se encuentra solucionando.
Por esta parte igual, no se parece a la referencia
| <!-- 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> |
There was a problem hiding this comment.
| <!-- 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> |
Esta seccion no existe en la maqueta
| <!-- 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> |
There was a problem hiding this comment.
| <!-- 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> |
Esta seccion no existe en la maqueta
EGAMAGZ
left a comment
There was a problem hiding this comment.
Al llamar las imagenes no lo hagas con / al inicio debido a que cargara la imagen desde raiz en vez de manera relativa
Junto a eso, aunque no tengas las imagenes, puedes usar algunos temporales 😅
| <!-- 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" /> |
There was a problem hiding this comment.
| <img src="/notion-logo.svg" alt="Notion logo" class="w-6 inline-block mr-2" /> | |
| <img src="notion-logo.svg" alt="Notion logo" class="w-6 inline-block mr-2" /> |
| </p> | ||
| </div> | ||
| <img | ||
| src="/tu-imagen.jpg" |
There was a problem hiding this comment.
| src="/tu-imagen.jpg" | |
| src="tu-imagen.jpg" |



Se hace la generación de header de bienvenida.