Feature/section sponsors

src/components/Sponsors.astro

@@ -0,0 +1,73 @@
+---
+interface Sponsor {
+  name: string;
+  image: string;
+  url?: string;
+}
+
+export interface Props {
+  id?: string;
+  title?: string;
+  subtitle?: string;
+  sponsors: Sponsor[];
+
+}
+
+const {
+  id = 'sponsors',
+  title = 'Conoce a nuestros Sponsors',
+  subtitle = 'Agradecimientos especiales a todos ellos',
+  sponsors = [],
+} = Astro.props as Props;
+---
+<section id={id} class="scroll-mt-28 py-16 sm:py-20 md:py-24" aria-labelledby={`${id}-title`}>
+  <div class="mx-4 sm:mx-6 md:mx-10 rounded-2xl p-6 sm:p-8 md:p-10 lg:p-12">
+    <div class="max-w-7xl mx-auto text-center text-white">
+      <h2 id={`${id}-title`} class="text-2xl sm:text-3xl md:text-4xl font-extrabold">
+        {title}
+      </h2>
+      <p class="mt-3 md:mt-4 text-base sm:text-lg md:text-xl flex items-center gap-2 justify-center">
+        <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">
+          <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"/>
+        </svg>
+        {subtitle}
+        <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">
+          <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"/>
+        </svg>
+      </p>
+
+      <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">
+        {sponsors.map((s) => (
+          <a
+            href={s.url || '#'}
+            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"
+            aria-label={`Visitar ${s.name}`}
+            target={s.url?.startsWith('http') ? '_blank' : undefined}
+            rel={s.url?.startsWith('http') ? 'noopener noreferrer' : undefined}
+          >
+            <div class="flex items-center justify-center">
+              <img
+                src={s.image}
+                alt={`Logo de ${s.name}`}
+                class="mx-auto aspect-square w-36 sm:w-40 md:w-44 rounded-md object-contain bg-white/90 p-4"
+                loading="lazy"
+              />
+            </div>
+            <h3 class="mt-4 sm:mt-5 text-white text-center font-extrabold text-base sm:text-lg">
+              {s.name}
+            </h3>
+          </a>
+        ))}
+      </div>
+
+      <div class="mt-10 sm:mt-12 md:mt-14">
+        <a
+          href=#
+          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"
+        >
+        Conviértete en Sponsor
+        </a>
+      </div>
+    </div>
+  </div>
+</section>

src/pages/index.astro

@@ -1,9 +1,21 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import Sponsors from "../components/Sponsors.astro";
 
 // Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
 // Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
+const sponsors = [
+  { name: 'CBA', image: '/cba.png', url: 'https://cbacoch.org/' },
+  // { name: 'Sponsor2', image: '/', url: '#' },
+  // { name: 'Sponsor3', image: '/', url: '#' },
+  // { name: 'Sponsor4', image: '/', url: '#' },
+];
 ---
 
 <Layout>
+  <Sponsors
+    id="sponsors"
+    sponsors={sponsors}
+  />
 </Layout>
+