Merge pull request #10 from GDGCochabamba/cris/feature/sponsors

Cris/feature/sponsors

Author: DentVega

src/assets/delve.png

@@ -1 +1,47 @@
-<div></div>
+---
+import '../styles/footer.css';
+interface Props {
+  instagramLogoSrc?: any;
+  logoAlt?: string;
+  youtubeLogoSrc?: any;
+}
+
+const { instagramLogoSrc, logoAlt = "Logo", youtubeLogoSrc } = Astro.props;
+
+const resolveImg = (img: any) =>
+  typeof img === "string" ? img : (img?.src ?? undefined);
+
+const instagramLogo = resolveImg(instagramLogoSrc);
+const youtubeLogo = resolveImg(youtubeLogoSrc);
+---
+
+<div>
+  <footer class="footer" style="margin-top: auto;">
+    <h2 class="footer-title">Síguenos en nuestras redes sociales</h2>
+    <p class="footer-text">
+      No te pierdas las últimas noticias y actualizaciones.
+    </p>
+
+    <div class="social-links">
+      <a href="https://www.instagram.com/gdgcochabamba" class="social-icon">
+        {
+          instagramLogo ? (
+            <img class="icon" src={instagramLogo} alt={logoAlt} />
+          ) : (
+            <span class="logo-text">Instagram</span>
+          )
+        }
+      </a>
+
+      <a href="https://www.youtube.com/@GDGCochabamba" class="social-icon">
+        {
+          youtubeLogo ? (
+            <img class="icon" src={youtubeLogo} alt="YouTube" />
+          ) : (
+            <span class="logo-text">YouTube</span>
+          )
+        }
+      </a>
+    </div>
+  </footer>
+</div>

src/assets/favorcito.png

@@ -1,7 +1,50 @@
-<section>
-    <div>
-        <a>
-            Sponsors
+---
+import Delve from "../assets/delve.png";
+import Ucatec from "../assets/ucatec.png";
+import Favorcito from "../assets/favorcito.png";
+import Meru from "../assets/meru.png";
+import '../styles/sponsors.css';
+---
+
+<section class="sponsors-section">
+  <div class="sponsors-header">
+    <h2 class="sponsors-title">Nuestros Sponsors</h2>
+    <span class="sponsors-description"
+      >Gracias a nuestros increíbles patrocinadores que hacen <br />posible el
+      DevFest Cochabamba 2025</span
+    >
+  </div>
+
+  <div class="sponsors-tier">
+    <h3 class="tier-title gold">Gold Sponsors</h3>
+    <div class="sponsors-grid">
+      <div class="sponsor-logo">
+        <a href="https://ucatec.edu.bo/">
+          <img src={Ucatec.src} alt="logo ucatec" />
         </a>
+      </div>
+      <div class="sponsor-logo">
+        <a href="https://delveedu.com/">
+          <img src={Delve.src} alt="logo delve" />
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div class="sponsors-tier">
+    <h3 class="tier-title silver">Silver Sponsors</h3>
+    <div class="sponsors-grid">
+      <div class="sponsor-logo">
+        <a href="https://meru.com/">
+          <img src={Meru.src} alt="logo meru" />
+        </a>
+      </div>
+      <div class="sponsor-logo">
+        <a href="https://tufavorcito.com/bo">
+          <img src={Favorcito.src} alt="logo favorcito" />
+        </a>
+      </div>
     </div>
+  </div>
 </section>
+

src/assets/instagramLogo.png

@@ -4,13 +4,15 @@ import Header from "../components/Header.astro";
 
 // importa la imagen desde src/assets
 import logoDevfest from "../assets/Logo-Devfest2025.png";
-
+import logoInstagram from "../assets/instagramLogo.png";
+import logoYouTube from '../assets/youtubeLogo.png';
 import Welcome from "../components/Welcome.astro";
 import Register from "../components/Register.astro";
 import PhotoGallery from "../components/PhotoGallery.astro";
 import Info from "../components/Info.astro";
 import Speakers from "../components/Speakers.astro";
 import Sponsors from "../components/Sponsors.astro";
+import Footer from "../components/Footer.astro";
 ---
 
 <Layout>
@@ -24,4 +26,10 @@ import Sponsors from "../components/Sponsors.astro";
   <Info />
   <Speakers />
   <Sponsors />
+  <Footer
+    instagramLogoSrc={logoInstagram}
+    youtubeLogoSrc={logoYouTube}
+    logoAlt="icono"
+
+  />
 </Layout>

src/assets/meru.png

@@ -0,0 +1,67 @@
+  .footer {
+    background-color: rgba(255, 255, 255, 1);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    border-top: 1px solid #e5e7eb;
+  }
+
+  .footer-title {
+    font-size: 48px;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: rgba(16, 24, 40, 1);
+  }
+
+  .footer-text {
+    font-size: 24px;
+    color: rgba(30, 30, 30, 1);
+  }
+
+  .social-links {
+    margin-top: 1rem;
+    display: flex;
+    gap: 1.5rem;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .icon {
+    width: 44px;
+    height: auto;
+  }
+
+  @media (max-width: 768px) {
+    .footer {
+      padding: 1.5rem 1rem;
+    }
+
+    .footer-title {
+      font-size: 32px;
+    }
+
+    .footer-text {
+      font-size: 18px;
+    }
+
+    .icon {
+      width: 55px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .footer-title {
+      font-size: 26px;
+    }
+
+    .footer-text {
+      font-size: 16px;
+    }
+
+    .icon {
+      width: 42px;
+    }
+
+    .social-links {
+      gap: 1rem;
+    }
+  }