feat: feat donwload programe button

Author: itziarZG

src/components/ProgramaPage.astro

@@ -20,23 +20,49 @@ const schedule = await getSchedule()
   <h1 id="schedule-title" class="text-3xl md:text-5xl font-bold text-center mb-6">{t.title}</h1>
   <p class="text-center text-base md:text-lg mb-10 max-w-2xl mx-auto opacity-80">{t.intro}</p>
 
-  <fieldset
-    class="schedule-view-toggle max-w-3xl mx-auto mb-8 border border-white/10 rounded-xl p-3 flex flex-wrap items-center gap-2 bg-pycon-black/40"
-  >
-    <legend class="sr-only">{t.list.viewModeLegend}</legend>
-    <label
-      class="cursor-pointer px-4 py-2 rounded-lg text-sm has-[:checked]:bg-pycon-orange has-[:checked]:text-pycon-black has-[:checked]:font-semibold text-pycon-gray-25 transition-colors"
+  <div class="max-w-3xl mx-auto mb-8 flex flex-col sm:flex-row justify-between items-center gap-4">
+    <fieldset
+      class="schedule-view-toggle border border-white/10 rounded-xl p-3 flex items-center gap-2 bg-pycon-black/40 w-full sm:w-auto justify-center sm:justify-start"
     >
-      <input type="radio" name="schedule-view" value="list" class="sr-only" />
-      {t.list.viewModeList}
-    </label>
-    <label
-      class="cursor-pointer px-4 py-2 rounded-lg text-sm has-[:checked]:bg-pycon-orange has-[:checked]:text-pycon-black has-[:checked]:font-semibold text-pycon-gray-25 transition-colors"
+      <legend class="sr-only">{t.list.viewModeLegend}</legend>
+      <label
+        class="cursor-pointer px-4 py-2 rounded-lg text-sm has-[:checked]:bg-pycon-orange has-[:checked]:text-pycon-black has-[:checked]:font-semibold text-pycon-gray-25 transition-colors"
+      >
+        <input type="radio" name="schedule-view" value="list" class="sr-only" />
+        {t.list.viewModeList}
+      </label>
+      <label
+        class="cursor-pointer px-4 py-2 rounded-lg text-sm has-[:checked]:bg-pycon-orange has-[:checked]:text-pycon-black has-[:checked]:font-semibold text-pycon-gray-25 transition-colors"
+      >
+        <input type="radio" name="schedule-view" value="grid" class="sr-only" />
+        {t.list.viewModeGrid}
+      </label>
+    </fieldset>
+
+    <a
+      href="https://drive.google.com/file/d/166Vn_s9v0vHaNlX4wxFfbnh9_2chzt-O/view?usp=drive_link"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={`${t.downloadPdf} ${menuT.new_tab}`}
+      class="inline-flex items-center gap-2 px-4 py-2.5 bg-pycon-orange text-pycon-black font-semibold rounded-xl hover:opacity-90 transition-opacity focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pycon-yellow text-sm w-full sm:w-auto justify-center"
     >
-      <input type="radio" name="schedule-view" value="grid" class="sr-only" />
-      {t.list.viewModeGrid}
-    </label>
-  </fieldset>
+      <svg
+        class="w-4 h-4"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+        <polyline points="7 10 12 15 17 10" />
+        <line x1="12" y1="15" x2="12" y2="3" />
+      </svg>
+      <span>{t.downloadPdf}</span>
+    </a>
+  </div>
 
   <div id="schedule-list-view" class="schedule-view hidden" data-view="list">
     {

src/i18n/programa/ca.ts

@@ -2,6 +2,7 @@ export const ca = {
   title: 'Programa',
   seoDescription: 'Consulta el cronograma complet de xerrades, tallers i activitats de la PyConES 2026.',
   intro: 'Explora totes les xerrades, tallers i activitats de la PyConES 2026.',
+  downloadPdf: 'Descarregar programa en PDF',
   locale: 'ca',
   noscript: 'JavaScript està desactivat al teu navegador. Per veure el programa sense JavaScript,',
   noscriptLink: 'fes clic aquí',

src/i18n/programa/en.ts

@@ -2,6 +2,7 @@ export const en = {
   title: 'Programme',
   seoDescription: 'Check out the full schedule of talks, workshops and activities at PyConES 2026.',
   intro: 'Explore all the talks, workshops and activities at PyConES 2026.',
+  downloadPdf: 'Download programme (PDF)',
   locale: 'en',
   noscript: 'JavaScript is disabled in your browser. To view the schedule without JavaScript,',
   noscriptLink: 'click here',

src/i18n/programa/es.ts

@@ -2,6 +2,7 @@ export const es = {
   title: 'Programa',
   seoDescription: 'Consulta el cronograma completo de charlas, talleres y actividades de la PyConES 2026.',
   intro: 'Explora todas las charlas, talleres y actividades de la PyConES 2026.',
+  downloadPdf: 'Descargar programa en PDF',
   locale: 'es',
   noscript: 'JavaScript está deshabilitado en tu navegador. Para ver el programa sin JavaScript,',
   noscriptLink: 'haz click aquí',