|
| 1 | +--- |
| 2 | +interface Sponsor { |
| 3 | + name: string; |
| 4 | + image: string; |
| 5 | + url?: string; |
| 6 | +} |
| 7 | +
|
| 8 | +export interface Props { |
| 9 | + id?: string; |
| 10 | + title?: string; |
| 11 | + subtitle?: string; |
| 12 | + sponsors: Sponsor[]; |
| 13 | + |
| 14 | +} |
| 15 | +
|
| 16 | +const { |
| 17 | + id = 'sponsors', |
| 18 | + title = 'Conoce a nuestros Sponsors', |
| 19 | + subtitle = 'Agradecimientos especiales a todos ellos', |
| 20 | + sponsors = [], |
| 21 | +} = Astro.props as Props; |
| 22 | +--- |
| 23 | +<section id={id} class="scroll-mt-28 py-16 sm:py-20 md:py-24" aria-labelledby={`${id}-title`}> |
| 24 | + <div class="mx-4 sm:mx-6 md:mx-10 rounded-2xl p-6 sm:p-8 md:p-10 lg:p-12"> |
| 25 | + <div class="max-w-7xl mx-auto text-center text-white"> |
| 26 | + <h2 id={`${id}-title`} class="text-2xl sm:text-3xl md:text-4xl font-extrabold"> |
| 27 | + {title} |
| 28 | + </h2> |
| 29 | + <p class="mt-3 md:mt-4 text-base sm:text-lg md:text-xl flex items-center gap-2 justify-center"> |
| 30 | + <svg aria-hidden="true" class="w-5 h-5 sm:w-6 sm:h-6" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"> |
| 31 | + <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6.5 3.5 5 5.5 5c1.54 0 3.04.99 3.57 2.36h1.86C11.46 5.99 12.96 5 14.5 5 16.5 5 18 6.5 18 8.5c0 3.28-3 6.06-7.55 10.54L12 21.35z"/> |
| 32 | + </svg> |
| 33 | + {subtitle} |
| 34 | + <svg aria-hidden="true" class="w-5 h-5 sm:w-6 sm:h-6" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"> |
| 35 | + <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6.5 3.5 5 5.5 5c1.54 0 3.04.99 3.57 2.36h1.86C11.46 5.99 12.96 5 14.5 5 16.5 5 18 6.5 18 8.5c0 3.28-3 6.06-7.55 10.54L12 21.35z"/> |
| 36 | + </svg> |
| 37 | + </p> |
| 38 | + |
| 39 | + <div class="mt-8 sm:mt-10 md:mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6 md:gap-8"> |
| 40 | + {sponsors.map((s) => ( |
| 41 | + <a |
| 42 | + href={s.url || '#'} |
| 43 | + class="group block rounded-2xl border border-white/70 bg-white/5 p-6 sm:p-7 md:p-8 backdrop-blur-[2px] shadow-[0_2px_20px_rgba(0,0,0,0.08)] hover:shadow-[0_6px_28px_rgba(0,0,0,0.14)] transition-all hover:-translate-y-1 hover:border-white ring-0 hover:ring-2 hover:ring-white/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/70" |
| 44 | + aria-label={`Visitar ${s.name}`} |
| 45 | + target={s.url?.startsWith('http') ? '_blank' : undefined} |
| 46 | + rel={s.url?.startsWith('http') ? 'noopener noreferrer' : undefined} |
| 47 | + > |
| 48 | + <div class="flex items-center justify-center"> |
| 49 | + <img |
| 50 | + src={s.image} |
| 51 | + alt={`Logo de ${s.name}`} |
| 52 | + class="mx-auto aspect-square w-36 sm:w-40 md:w-44 rounded-md object-contain bg-white/90 p-4" |
| 53 | + loading="lazy" |
| 54 | + /> |
| 55 | + </div> |
| 56 | + <h3 class="mt-4 sm:mt-5 text-white text-center font-extrabold text-base sm:text-lg"> |
| 57 | + {s.name} |
| 58 | + </h3> |
| 59 | + </a> |
| 60 | + ))} |
| 61 | + </div> |
| 62 | + |
| 63 | + <div class="mt-10 sm:mt-12 md:mt-14"> |
| 64 | + <a |
| 65 | + href=# |
| 66 | + class="bg-[#27884C] inline-block rounded-md border border-white/80 px-6 sm:px-8 md:px-10 py-3 text-white text-sm sm:text-base md:text-lg font-bold hover:border-white hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 transition" |
| 67 | + > |
| 68 | + Conviértete en Sponsor |
| 69 | + </a> |
| 70 | + </div> |
| 71 | + </div> |
| 72 | + </div> |
| 73 | +</section> |
0 commit comments