Merge pull request #10 from OSMLatam/fix-sponsor-logos

More sponsor fixes

_config.yml

@@ -52,6 +52,8 @@ program:
   stage: program-is-ready
   url: "https://talks.osgeo.org/sotm2024-latam/schedule"
 
+sponsorship_campaign_is_open: true
+
 # Build settings
 markdown: kramdown
 
@@ -102,9 +104,11 @@ t:
       program_is_finalized: "Our program is finalized! Check out the complete schedule on Pretalx to plan your conference experience."
       view_program: "View Program on Pretalx"
     sponsor_section:
-      sponsors_title: "Sponsors"
-      sponsors_description: "Become a sponsor and gain direct access to a vibrant community of IT professionals, geographers, students, and other industry experts. This is an excellent opportunity to increase your company's visibility and create valuable connections."
-      brochure_button: "Download the sponsorship brochure"
+      title: "Sponsors"
+      thank_you_sponsors: "We thank all our sponsors for supporting the event!"
+      campaign:
+        invite: "Our sponsorship campaign is open! Become a sponsor and gain direct access to a vibrant community of IT professionals, geographers, students, and other industry experts."
+        brochure_button: "Download the sponsorship brochure"
     contact_section:
       title: "Contact"
       description: "If you have any questions or need more information, please contact us."
@@ -149,9 +153,11 @@ t:
       program_is_finalized: "¡Nuestro programa está finalizado! Consulta el cronograma completo en Pretalx para planificar tu experiencia en la conferencia."
       view_program: "Ver Programa en Pretalx"
     sponsor_section:
-      sponsors_title: "Patrocinios"
-      sponsors_description: "Conviértase en patrocinador y obtenga acceso directo a una comunidad vibrante de profesionales de TI, geógrafos, estudiantes y otros expertos del sector. Esta es una excelente oportunidad para aumentar la visibilidad de su empresa y crear conexiones valiosas."
-      brochure_button: "Descargue el folleto de patrocinio"
+      title: "Patrocinios"
+      thank_you_sponsors: "¡Agradecemos a todos nuestros patrocinadores por apoyar el evento!"
+      campaign:
+        invite: "¡Nuestra campaña de patrocinio está abierta! Conviértete en patrocinador y accede directamente a una comunidad vibrante de profesionales de TI, geógrafos, estudiantes y otros expertos del sector."
+        brochure_button: "Descargue el folleto de patrocinio"
     contact_section:
       title: "Contacto"
       description: "Si tienes alguna pregunta o necesitas más información, por favor contáctanos."
@@ -196,9 +202,11 @@ t:
       program_is_finalized: "Nosso programa está finalizado! Veja o cronograma completo no Pretalx para planejar sua experiência na conferência."
       view_program: "Visualizar Programa no Pretalx"
     sponsor_section:
-      sponsors_title: "Patrocínios"
-      sponsors_description: "Torne-se um patrocinador e obtenha acesso direto a uma comunidade vibrante de profissionais de TI, geógrafos, estudantes e outros especialistas do setor. Esta é uma excelente oportunidade para aumentar a visibilidade da sua empresa e criar conexões valiosas."
-      brochure_button: "Baixe o folder de patrocínio"
+      title: "Patrocínios"
+      thank_you_sponsors: "Agradecemos a todos os nossos patrocinadores por apoiar o evento!"
+      campaign:
+        invite: "Nossa campanha de patrocínio está aberta! Torne-se um patrocinador e tenha acesso direto a uma comunidade vibrante de profissionais de TI, geógrafos, estudantes e outros especialistas do setor."
+        brochure_button: "Baixe o folder de patrocínio"
     contact_section:
       title: "Contato"
       description: "Se você tiver alguma dúvida ou precisar de mais informações, entre em contato conosco."

_includes/home/sponsors.html

@@ -1,53 +1,47 @@
 {% assign t = site.t[page.lang].sponsor_section %}
-{% assign contact_url = site.contact_form_url[page.lang] %}
+{% assign sponsorship_campaign_is_open = site.sponsorship_campaign_is_open %}
 
 <section id="sponsors" class="container content-section text-center">
 
   <h2>
     <a href="#sponsors">
-      {{ t.sponsors_title }}
+      {{ t.title }}
     </a>
   </h2>
-  <p>{{ t.sponsors_description }}</p>
   <div class="sponsors-list">
-    <!-- First Row: Capibara -->
-    <div class="sponsor-row">
-      <h2>Capibara Pack</h2>
+    <div class="sponsor-row delfin">
+      <h3>Delfin</h3>
+      <a href="https://www.hotosm.org/" target="_blank">
+        <img src="/assets/images/sponsors/HOT.png" alt="HOTOSM" width="480">
+      </a>
+    </div>
+
+    <div class="sponsor-row capibara">
+      <h3>Capibara</h3>
       <a href="https://about.meta.com" target="_blank">
-        <img src="/assets/images/sponsor_meta.png" alt="Meta" width="480">
+        <img src="/assets/images/sponsors/meta.png" alt="Meta" width="480">
       </a>
     </div>
 
-    <!-- Second Row: Guacamaya -->
-    <div class="sponsor-row">
-      <h2 style="font-size: medium;margin-bottom: 20px;">Guacamaya Pack</h2>
+    <div class="sponsor-row guacamaya">
+      <h3>Guacamaya</h3>
       <a href="https://developmentseed.org/" target="_blank">
-        <img src="/assets/images/sponsor_development_seed.png" alt="Development Seed" width="256">
+        <img src="/assets/images/sponsors/development_seed.png" alt="Development Seed" width="256">
       </a>
       <a href="https://overturemaps.org/" target="_blank">
-        <img src="/assets/images/sponsor_overture.svg" alt="Overture Maps" width="256">
+        <img src="/assets/images/sponsors/overture.svg" alt="Overture Maps" width="256">
       </a>
       <a href="https://www.tomtom.com/" target="_blank">
-        <img src="/assets/images/sponsor_tomtom.png" alt="TomTom" width="256">
+        <img src="/assets/images/sponsors/tomtom.png" alt="TomTom" width="256">
       </a>
     </div>
   </div>
+  <p>{{ t.thank_you_sponsors }}</p>
+  {% if sponsorship_campaign_is_open %}
+  <p>{{ t.campaign.invite }}</p>
+  <a target="_blank" href="{{ site.baseurl }}/assets/documents/sotm-latam-2024-sponsor-brochure-{{ page.lang }}.pdf"
+    class="btn btn-default">{{ t.campaign.brochure_button }}</a>
+  {% endif %}
 
-  <style>
-    .sponsors-list {
-      padding: 10px;
-      background-color: #ffffff99;
-    }
-
-    .sponsor-row {
-      margin-top: 40px;
-      font-size: medium;
-      margin-bottom: 20px;
-    }
 
-    .sponsor-row img {
-      margin: 1px;
-      margin-right: 20px;
-    }
-  </style>
 </section>

assets/css/styles.scss

@@ -112,3 +112,60 @@ body {
   text-shadow: 2px 2px 4px $color-text-shadow; // Text shadow for legibility
 }
 
+#sponsors {
+  .sponsors-list {
+    padding: 40px 20px 20px 0px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+    margin-bottom: 35px;
+  }
+
+  .sponsor-row {
+    padding-bottom: 80px;
+    font-size: medium;
+  }
+
+  .sponsor-row:last-child {
+    padding-bottom: 40px;
+  }
+
+  .sponsor-row h3 {
+    color: #333333;
+    margin-bottom: 40px;
+    font-size: large;
+  }
+
+  .sponsor-row img {
+    width: auto;
+    max-height: 100%;
+    padding: 0 10px;
+  }
+
+  /* Sponsor tier-specific image sizes */
+  .delfin img {
+    max-width: 600px;
+  }
+
+  .capibara img {
+    max-width: 450px;
+  }
+
+  .guacamaya img {
+    max-width: 150px;
+  }
+
+  @media (max-width: 768px) {
+    .delfin img {
+      max-width: 300px;
+    }
+
+    .capibara img {
+      max-width: 225px;
+    }
+
+    .guacamaya img {
+      max-width: 100px;
+    }
+  }
+}