feat(sponsors): Update statistics using data from last year

src/components/LanguagePicker.astro

@@ -39,7 +39,7 @@ const getPathForLang = (lang) => {
           href={getPathForLang(lang)}
           hreflang={lang}
           aria-current={lang === currentLang ? 'page' : undefined}
-          aria-label={t['labelariadesc']}
+          aria-label={t['labelariadesc'][lang]}
           lang={lang}
           class={lang === currentLang ? 'font-bold underline underline-offset-4' : ''}
         >

src/i18n/components/LanguagePicker.ts

@@ -2,16 +2,16 @@ export const texts = {
   es: {
     alttext: 'Selector de idioma',
     label: { es: 'es', en: 'en', ca: 'ca' },
-    labelariadesc: 'Idioma español',
+    labelariadesc: { es: 'Idioma español', en: 'English language', ca: 'Idioma català' },
   },
   en: {
     alttext: 'Language selector',
     label: { es: 'es', en: 'en', ca: 'ca' },
-    labelariadesc: 'English language',
+    labelariadesc: { es: 'Idioma español', en: 'English language', ca: 'Idioma català' },
   },
   ca: {
     alttext: "Selector d'idioma",
     label: { es: 'es', en: 'en', ca: 'ca' },
-    labelariadesc: 'Idioma català',
+    labelariadesc: { es: 'Idioma español', en: 'English language', ca: 'Idioma català' },
   },
 } as const

src/i18n/sponsors/ca.ts

@@ -52,22 +52,41 @@ export const ca = {
   interests: {
     title: 'Interessos',
     items: [
-      { label: 'DATA & AI 🤖', pc: '40%', width: '40%' },
-      { label: 'WEB & BACKEND 💻', pc: '30%', width: '30%' },
-      { label: 'DEVOPS & CLOUD ☁️', pc: '20%', width: '20%' },
-      { label: 'ALTRES 🔧', pc: '10%', width: '10%' },
+      { label: 'ML & IA', emoji: '🤖', pc: '29%' },
+      { label: 'DATA SCIENCE', emoji: '📊', pc: '17%' },
+      { label: 'ENG. SOFTWARE', emoji: '🏗️', pc: '14%' },
+      { label: 'DESENV. WEB', emoji: '💻', pc: '10%' },
+      { label: 'COMUNITAT', emoji: '🤝', pc: '7%' },
+      { label: 'DEVOPS & CLOUD', emoji: '☁️', pc: '7%' },
+      { label: 'ALTRES', emoji: '🔧', pc: '16%' },
     ],
   },
   audience: {
-    title: 'Perfil d’assistents',
+    title: 'Perfil del programa',
     seniority: 'Nivell de Seniority',
     items: [
-      { icon: '💼', value: '72%', label: 'Oberts a ofertes de feina' },
-      { icon: '🔑', value: '35%', label: 'Prenen decisions a la seva empresa' },
-      { icon: '💜', value: '25%', label: 'Dones i no-binaris' },
-      { icon: '🌍', value: '10%', label: 'Visitants internacionals' },
+      {
+        icon: '💼',
+        value: '81%',
+        label: 'Professionals en actiu',
+      },
+      {
+        icon: '💜',
+        value: '33%',
+        label: 'Dones i persones no binàries',
+      },
+      {
+        icon: '🔑',
+        value: '26%',
+        label: 'Direcció i Tech Leads',
+      },
+      {
+        icon: '🌍',
+        value: '13%',
+        label: 'Contingut en anglès',
+      },
     ],
-    quote: 'Una audiència madura: El 80% del contingut està enfocat a perfils intermedi-avançat.',
+    quote: 'Immersió tècnica: el 62% de les xerrades son de nivells intermedi i avançat.',
   },
   whatis: {
     title: 'Què és PyConES?',

src/i18n/sponsors/en.ts

@@ -52,22 +52,41 @@ export const en = {
   interests: {
     title: 'Interests',
     items: [
-      { label: 'DATA & AI 🤖', pc: '40%', width: '40%' },
-      { label: 'WEB & BACKEND 💻', pc: '30%', width: '30%' },
-      { label: 'DEVOPS & CLOUD ☁️', pc: '20%', width: '20%' },
-      { label: 'OTHERS 🔧', pc: '10%', width: '10%' },
+      { label: 'ML & AI', emoji: '🤖', pc: '29%' },
+      { label: 'DATA SCIENCE', emoji: '📊', pc: '17%' },
+      { label: 'SOFTWARE ENG', emoji: '🏗️', pc: '14%' },
+      { label: 'WEB DEV', emoji: '💻', pc: '10%' },
+      { label: 'COMMUNITY', emoji: '🤝', pc: '7%' },
+      { label: 'DEVOPS & CLOUD', emoji: '☁️', pc: '7%' },
+      { label: 'OTHERS', emoji: '🔧', pc: '16%' },
     ],
   },
   audience: {
-    title: 'Attendee Profile',
+    title: 'Program Profile',
     seniority: 'Seniority Level',
     items: [
-      { icon: '💼', value: '72%', label: 'Open to job offers' },
-      { icon: '🔑', value: '35%', label: 'Decision makers in their company' },
-      { icon: '💜', value: '25%', label: 'Women and non-binary' },
-      { icon: '🌍', value: '10%', label: 'International visitors' },
+      {
+        icon: '💼',
+        value: '81%',
+        label: 'Active Professionals',
+      },
+      {
+        icon: '💜',
+        value: '33%',
+        label: 'Women and Non-Binary',
+      },
+      {
+        icon: '🔑',
+        value: '26%',
+        label: 'Management & Tech Leads',
+      },
+      {
+        icon: '🌍',
+        value: '13%',
+        label: 'English Track Content',
+      },
     ],
-    quote: 'A mature audience: 80% of the content is focused on intermediate-advanced profiles.',
+    quote: 'A technical deep-dive: 62% of the talks are for Intermediate and Advanced levels.',
   },
   whatis: {
     title: 'What is PyConES?',

src/i18n/sponsors/es.ts

@@ -52,22 +52,41 @@ export const es = {
   interests: {
     title: 'Intereses',
     items: [
-      { label: 'DATA & AI 🤖', pc: '40%', width: '40%' },
-      { label: 'WEB & BACKEND 💻', pc: '30%', width: '30%' },
-      { label: 'DEVOPS & CLOUD ☁️', pc: '20%', width: '20%' },
-      { label: 'OTROS 🔧', pc: '10%', width: '10%' },
+      { label: 'ML & IA', emoji: '🤖', pc: '29%' },
+      { label: 'DATA SCIENCE', emoji: '📊', pc: '17%' },
+      { label: 'ING. SOFTWARE', emoji: '🏗️', pc: '14%' },
+      { label: 'DESARROLLO WEB', emoji: '💻', pc: '10%' },
+      { label: 'COMUNIDAD', emoji: '🤝', pc: '7%' },
+      { label: 'DEVOPS & CLOUD', emoji: '☁️', pc: '7%' },
+      { label: 'OTROS', emoji: '🔧', pc: '16%' },
     ],
   },
   audience: {
-    title: 'Perfil de asistentes',
+    title: 'Perfil del programa',
     seniority: 'Nivel de Seniority',
     items: [
-      { icon: '💼', value: '72%', label: 'Abiertos a ofertas de trabajo' },
-      { icon: '🔑', value: '35%', label: 'Toman decisiones en su empresa' },
-      { icon: '💜', value: '25%', label: 'Mujeres y no-binarios' },
-      { icon: '🌍', value: '10%', label: 'Visitantes internacionales' },
+      {
+        icon: '💼',
+        value: '81%',
+        label: 'Profesionales en activo',
+      },
+      {
+        icon: '💜',
+        value: '33%',
+        label: 'Mujeres y personas no binarias',
+      },
+      {
+        icon: '🔑',
+        value: '26%',
+        label: 'Dirección y Tech Leads',
+      },
+      {
+        icon: '🌍',
+        value: '13%',
+        label: 'Contenido en inglés',
+      },
     ],
-    quote: 'Una audiencia madura: El 80% del contenido está enfocado a perfiles intermedio-avanzado.',
+    quote: 'Inmersión técnica: el 62% de las charlas son de niveles intermedio y avanzado.',
   },
   whatis: {
     title: '¿Qué es PyConES?',

src/pages/[lang]/sponsors.astro

@@ -164,15 +164,43 @@ const {
         <div class="bg-[#111] p-8 rounded-lg border border-[#333] mb-6">
           <h3 class="mb-6 font-mono text-white">{audience.seniority}</h3>
 
-          <div class="grid grid-cols-1 w-full rounded-md mb-4 sm:grid-cols-3">
-            <div class="bg-gray-700 text-gray-300 text-xs font-bold rounded-tl rounded-bl flex items-center justify-center py-4">
-              🌱 JUNIOR 20%
+          <div
+            role="img"
+            aria-label=""
+            aria-hidden="true"
+            class="flex w-full h-12 rounded-lg overflow-hidden mb-3"
+          >
+            <div
+              style="width: 38%"
+              class="h-full min-w-[2rem] bg-gray-600 text-gray-200 text-xs font-bold flex items-center justify-center"
+            >
+              38%
             </div>
-            <div class="bg-green-400 text-black text-sm font-bold flex items-center justify-center py-4">
-              🚀 SENIOR / PRO 60%
+            <div
+              style="width: 57%"
+              class="h-full min-w-[2rem] bg-green-400 text-black text-xs font-bold flex items-center justify-center"
+            >
+              57%
             </div>
-            <div class="bg-gray-700 text-gray-300 text-xs font-bold rounded-tr rounded-br flex items-center justify-center py-4">
-              🧠 EXPERT 20%
+            <div
+              style="width: 5%"
+              class="h-full min-w-[2rem] bg-gray-500 text-gray-200 text-xs font-bold flex items-center justify-center"
+            >
+              5%
+            </div>
+          </div>
+          <div class="flex flex-wrap justify-center gap-x-4 gap-y-1 mb-4">
+            <div class="flex items-center gap-2 text-sm text-gray-300">
+              <div class="w-3 h-3 rounded-sm flex-shrink-0 bg-gray-600"></div>
+              <span><span aria-hidden="true">🌱</span> JUNIOR 38%</span>
+            </div>
+            <div class="flex items-center gap-2 text-sm text-gray-300">
+              <div class="w-3 h-3 rounded-sm flex-shrink-0 bg-green-400"></div>
+              <span><span aria-hidden="true">🚀</span> SENIOR / PRO 57%</span>
+            </div>
+            <div class="flex items-center gap-2 text-sm text-gray-300">
+              <div class="w-3 h-3 rounded-sm flex-shrink-0 bg-gray-500"></div>
+              <span><span aria-hidden="true">🧠</span> EXPERT 5%</span>
             </div>
           </div>
 
@@ -195,23 +223,45 @@ const {
 
         <div class="bg-[#111] p-8 rounded-lg border border-[#333]">
           <h3 class="mb-6 font-mono text-white">{interests.title}</h3>
-          <div class="space-y-3">
-            {
-              interests.items.map((interest) => (
-                <div class="flex items-center gap-4">
-                  <div class="w-32 text-sm text-gray-400">{interest.label}</div>
-                  <div class="flex-1 h-8 bg-[#222] rounded overflow-hidden">
-                    <div
-                      class="h-full bg-green-400 flex items-center justify-end pr-2 text-black text-sm font-bold"
-                      style={`width: ${interest.width}`}
-                    >
-                      {interest.pc}
-                    </div>
+          {
+            (() => {
+              const colors = ['#4ade80', '#60a5fa', '#c084fc', '#fbbf24', '#f472b6', '#22d3ee', '#fb923c']
+              return (
+                <>
+                  <div class="flex w-full h-12 rounded-lg overflow-hidden" aria-hidden="true">
+                    {interests.items.map((interest, i) => (
+                      <div
+                        class="h-full min-w-[2rem] flex items-center justify-center text-black font-bold text-xs"
+                        style={`width: ${interest.pc}; background-color: ${colors[i]};`}
+                      >
+                        {interest.pc}
+                      </div>
+                    ))}
                   </div>
-                </div>
-              ))
-            }
-          </div>
+                  <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-4 gap-y-2 mt-4">
+                    {interests.items.map((interest, i) => (
+                      <div class="flex items-center gap-2 text-sm text-gray-300">
+                        <div
+                          class="w-3 h-3 rounded-sm flex-shrink-0"
+                          style={`background-color: ${colors[i]};`}
+                          aria-hidden="true"
+                        />
+                        <span aria-hidden="true" class="truncate">
+                          {interest.label}
+                        </span>
+                        <span aria-hidden="true" class="mr-2">
+                          {interest.emoji}
+                        </span>
+                        <span class="sr-only">
+                          {interest.label} {interest.pc}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )
+            })()
+          }
         </div>
       </section>