Sección de patrocinadores en la home

[francescarpi]

Fixes #80

• Añade la sección de patros en la home
• Mejora el layout utilizando un componente "container" para que tenga un max width
• Crea varios componentes reutilizables, como SectionTitle o TextBox

Nota: El diseño es muy básico y los sponsors cargados son de demo. Este PR añade la funcionalidad básica. En siguientes iteraciones se puede ir mejorando.

Nota 2: Me falta documentar como añadir nuevos sponsors. Pero básicamente es añadir un nuevo markdown.

[ctrl-alt-d]

Request changes:

En móvil se superponen las letras:

En móvil hay mucho padding, queda el texto muy estrecho en una sola columna:

Los colores de fondo de los tiers se alejan del código de colores corporativos

Los colore que propone el diseñador son colores fuego, pero los títulos aparecen con unos colores frios:

Esta paleta de fuego, equilibrada con el rigor del negro, crea un sistema visual de alto impacto que es a la vez tecnológico

Control TextBox

2026.es.pycon.org/src/components/TextBox.astro

Lines 9 to 13 in ac342f4

	<div class="flex-1 flex items-center justify-center bg-black/15 p-8">
	<p class="text-center text-xl">
	{text}
	</p>
	</div>

Hay un nuevo control <TextBox, pero un cuadro de texto está pensado para editar texto, esto solo lo muestra. Si es un control genérico pensado para dar formato a un párrafo, quizá le podríamos encontrar otro nombre ( CenteredPanel ?) .

Alt text logos

Los logos tienen como alt-text el nombre del patrocinador que se repite luego bajo el logo:

<img src="data:image/svg+xml;base64,PH..." alt="Sponsor 1" width="150">

Quizá sería más explícito indicar que ese es el logo del patrocinador:

<img src="data:image/svg+xml;base64,PH..." alt="Logo de Sponsor 1" width="150">

Questions

Pregunto sobre decisiones para entenderlas mejor y aprender.

hexToRgba

La función hexToRgba, por que la usamos? Parece que lo único que se pretende es añadir el canal alpha al color y eso se puede hacer también en hex sin pasar a rgba. Lo pregunto para aprender.

hexToRgba

Las imagenes de los patros estan codificadas inline in base64 ( 'data:image/svg+xml;base64,PHN2ZyB4bWxuc ). Entiendo que esto es solo para la maqueta, estaría bien quizá crear ahora ya la carpeta donde irán las imagenes.

In my opinion

Disposición en dos columnas

No me acaba de gustar la disposición en dos columnas, 'iguala en visibilidad' a niveles de patrocinio diferente. Lo haría en una sola columna, pero esto es una opinión personal.

[itziarZG]

Funcionalitat perfect... disseny tambè canviaria el tema de les dues columnes que tot i que entenc que és per a que no quedin massa "buit", no es herarquic...

[francescarpi]

Hola @ctrl-alt-d !

Gracias por tus comentarios.

1. He mejorado el responsive. Ciertamente no se veía bien en mobile
2. Los colores son los mismos que había en la página de sponsors para definir los tiers. Les he quitado al alpha para que sean más vivos y sean exactamente los mismos que en sponsors.
3. Estuve pensando en el nombre y sé que se utiliza en campos de entrada de texto, pero es que precisamente quería ser semántico y una caja con un texto, que es lo que es, es un TextBox, jeje. Yo creo que quien lo hizo mal fue visual basic :P . Yo los hubiese llamado TextInputBox :P . Ya le he cambiado el nombre a CenteredPanel.
4. Corregidos los alts de los logos
5. Sobre hexToRgba, es verdad que simplemente podría haber jugado con el canal alpha del hex, añadiéndolo al final. Pero en ese momento no caí.
6. Sobre el base64 del logo del sponsors. A mi me gusta asi, para facilitar los pasos al subir un sponsors, ya que sólo tenemos que subir un MD, y no un MD y luego una imagen en una carpeta. Además, luego tendríamos que referenciar dicha imágen dentro del MD y es susceptible a errores. Y transformar a base64 hay muchas páginas que subes el logo y ya te lo dan. No te preocupes que lo dejaré todo documentado, paso a paso.
7. He quitado las dos columnas de los sponsors, es verdad que va a quedar raro. Además, si un tier tiene más importancia, tiene que estar arriba. Si los ponemos uno al lado del otro, es como si tuviesen la misma importancia, y no han pagado lo mismo.

Ya me dices qué te parece ahora :)

Muchas gracias

[ctrl-alt-d]

@francescarpi , gracias por tus nuevos commits y tener en cuenta mis comentarios.

He vuelto a revisar, ya se que soy muy pesado lo siento:

• El contraste de todos los títulos de los niveles (principal, platí, plata, oro, bronze) no es suficiente, las letras deberían ser de color negro. Lo he probado y no quedan mal de color negro. Con las letras en negro el único que no tendría contraste AAA sería el bronze, se puede obviar o se puede poner el color bronze un poco más claro.

• Lo que hay que arreglar es el contraste del texto 'No hi ha patrocinadors en aquest nivell'

• Esto que escribo ahora ya es un tema personal: yo redondearía las cajas de los niveles, border-radius: 5px o parecido.

Por mí, una vez solucionados los problemas de contraste, ya lo veo mergeable a develop. Hay más temas de contraste pero estan en #107, no estan relacionadas con sponsors.

[ctrl-alt-d]

LGFM