Feature/section location

src/components/Location.astro

@@ -0,0 +1,54 @@
+---
+export interface Props {
+  id?: string;
+  title?: string;
+  address?: string;
+  websiteUrl?: string;
+  mapsQuery?: string;
+}
+
+const {
+  id = 'ubicacion',
+  title = 'CENTRO BOLIVIANO AMERICANO - CBA',
+  address = 'Calle 25 de Mayo N° N-0365',
+  websiteUrl = 'https://cbacoch.org/',
+  mapsQuery = 'Centro Boliviano Americano Cochabamba',
+} = Astro.props as Props;
+
+const mapSrc = `https://www.google.com/maps?q=${encodeURIComponent(mapsQuery)}&output=embed`;
+---
+<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-xl sm:text-2xl md:text-3xl lg:text-4xl font-extrabold tracking-wide">
+        {title}
+      </h2>
+      <p class="mt-2 md:mt-3 text-base sm:text-lg md:text-xl opacity-95">
+        {address}
+      </p>
+      <div class="mt-4">
+        <a
+          href={websiteUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-block rounded-lg border border-white/80 px-6 sm:px-8 py-2.5 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"
+        >
+          Página Web
+        </a>
+      </div>
+
+      <div class="mt-8 sm:mt-10 mx-auto max-w-5xl overflow-hidden rounded-2xl shadow-xl ring-1 ring-white/50">
+        <div class="relative w-full" style="padding-bottom: 45%">
+          <iframe
+            src={mapSrc}
+            loading="lazy"
+            referrerpolicy="no-referrer-when-downgrade"
+            class="absolute inset-0 h-full w-full border-0"
+            title={`Mapa de ${title}`}
+            aria-label={`Mapa de ${title}`}
+          ></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

src/pages/index.astro

@@ -1,8 +1,10 @@
 ---
+
 import Layout from '../layouts/Layout.astro';
 import Hero from '../components/Hero.astro';
 import Sponsors from '../components/Sponsors.astro';
 import AboutUs from '../components/AboutUs.astro';
+import Location from "../components/Location.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.
@@ -17,6 +19,7 @@ const sponsors = [
 
 <Layout>
   <Hero />
+  <Location />
   <Sponsors id="sponsors" sponsors={sponsors} />
   <AboutUs />
-</Layout>
+</Layout>