Skip to content
This repository was archived by the owner on Aug 15, 2025. It is now read-only.

Comments

feat: Create header#61

Closed
Kai-Yazumorito wants to merge 7 commits intobinarybrains-club:mainfrom
Kai-Yazumorito:Create_aboutus_section
Closed

feat: Create header#61
Kai-Yazumorito wants to merge 7 commits intobinarybrains-club:mainfrom
Kai-Yazumorito:Create_aboutus_section

Conversation

@Kai-Yazumorito
Copy link
Contributor

Se hace la generación de header de bienvenida.

Kai-Yazumorito and others added 5 commits June 3, 2025 18:14
I make an update of the index.astro file from my remote repository on manual instead of using the IDE I've.
@EGAMAGZ
Copy link
Member

EGAMAGZ commented Jun 5, 2025

No olvides seguir conventional commits para nombrar las PRs

@EGAMAGZ EGAMAGZ changed the title Create header feat: Create header Jun 5, 2025
@EGAMAGZ
Copy link
Member

EGAMAGZ commented Jun 5, 2025

Junto a eso, no olvides hacer formateo de tu codigo con el uso de deno fmt

@EGAMAGZ
Copy link
Member

EGAMAGZ commented Jun 5, 2025

Favor de respetar la template al crear una PR. Esto resuelve issue #49

@EGAMAGZ
Copy link
Member

EGAMAGZ commented Jun 5, 2025

Generaste un package-lock.json. Esto indica que hiciste uno de Nodejs cuando hacemos uso de Deno

@Kai-Yazumorito
Copy link
Contributor Author

Ok, los checo lo más rápido posible.

-Kai

@Kai-Yazumorito
Copy link
Contributor Author

Según yo ya quedo, ya hice el dmt y volví a hacer push.

-Kai

@EGAMAGZ EGAMAGZ requested a review from untalbry June 11, 2025 02:00
Copy link
Member

@EGAMAGZ EGAMAGZ left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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/

Comment on lines +7 to +24
<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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<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

imagen

Comment on lines +27 to +42
<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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<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:

imagen

El html semantico no esta mal, pero no son las etiquetas adecuadas. Hice anotaciones de unas etiquetas que podrian ser mas ad hoc

Comment on lines +45 to +75
<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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

imagen

Comment on lines +102 to +108
<!-- 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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<!-- 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

Comment on lines +77 to +92
<!-- 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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<!-- 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

Copy link
Member

@EGAMAGZ EGAMAGZ left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<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"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
src="/tu-imagen.jpg"
src="tu-imagen.jpg"

@Kai-Yazumorito Kai-Yazumorito deleted the Create_aboutus_section branch June 11, 2025 03:00
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants