Merge pull request #92 from JudahSan/main

Fix sponsor logo alignment (mobile)

app/helpers/chapters_helper.rb

@@ -17,16 +17,17 @@ module ChaptersHelper
   ].freeze
 
   FEATURED_SPONSORS = [
-    { image: 'sponsors/current/nairobits.png', link: 'https://www.nairobits.com/', alt: 'Nairobits' },
+    { image: 'sponsors/current/solutech_official.svg', link: 'https://solutech.co.ke', alt: 'Solutech' },
     { image: 'sponsors/current/finplus.png', link: 'https://finplusgroup.com', alt: 'Finplus Group' },
     { image: 'sponsors/current/app_signal.png', link: 'https://www.appsignal.com', alt: 'App Signal' },
-    { image: 'sponsors/current/friendly_rb.jpg', link: 'https://friendlyrb.com/', alt: 'FriendlyRB' },
+    { image: 'sponsors/current/ruby_central.png', link: 'https://rubycentral.org/', alt: 'Ruby Central' },
+
     { image: 'sponsors/current/kopo_kopo.png', link: 'https://kopokopo.co.ke', alt: 'Kopo Kopo' },
-    { image: 'sponsors/current/microverse.png', link: 'https://www.microverse.org/', alt: 'Microverse' },
     { image: 'sponsors/current/planet_argon.png', link: 'https://www.planetargon.com', alt: 'Planet Argon' },
-    { image: 'sponsors/current/ruby_central.png', link: 'https://rubycentral.org/', alt: 'Ruby Central' },
-    { image: 'sponsors/current/solutech_official.svg', link: 'https://solutech.co.ke', alt: 'Solutech' },
-    { image: 'sponsors/current/kca.png', link: 'https://www.kcau.ac.ke', alt: 'KCA University' }
+    { image: 'sponsors/current/friendly_rb.jpg', link: 'https://friendlyrb.com/', alt: 'FriendlyRB' },
+    { image: 'sponsors/current/microverse.png', link: 'https://www.microverse.org/', alt: 'Microverse' },
+    { image: 'sponsors/current/kca.png', link: 'https://www.kcau.ac.ke', alt: 'KCA University' },
+    { image: 'sponsors/current/nairobits.png', link: 'https://www.nairobits.com/', alt: 'Nairobits' }
   ].freeze
 
   PREVIOUS_SPONSORS = [

app/views/landing/home/_featured_sponsors.html.erb

@@ -1,15 +1,34 @@
+<!--<div class="container mx-auto px-20 bg-zinc-50">-->
+<!--  <h1 class="pt-16 text-4xl text-red-600 font-bold text-center">-->
+<!--    Featured Sponsors-->
+<!--  </h1>-->
+
+<!--  <div class="grid md:grid-cols-2 grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-2 px-20 place-content-center">-->
+<%# featured_sponsors.each do |sponsor| %>
+<%#= link_to sponsor[:link], target: '_blank' do %>
+<!--        <div class="items-center justify-center w-36 h-40 card place-items-center">-->
+<%#= image_tag sponsor[:image], alt: sponsor[:alt] %>
+<!--        </div>-->
+<%# end %>
+<%# end %>
+<!--  </div>-->
+<!--</div>-->
+
 <div class="container mx-auto px-20 bg-zinc-50">
-  <h1 class="pt-16 text-4xl text-red-600 font-bold text-center">
+  <h1 class="pt-16 pb-12 text-4xl text-red-600 font-bold text-center">
     Featured Sponsors
   </h1>
 
-  <div class="grid md:grid-cols-2 grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-2 px-20 place-content-center">
+  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-2 lg:ml-28">
     <% featured_sponsors.each do |sponsor| %>
       <%= link_to sponsor[:link], target: '_blank' do %>
-        <div class="items-center justify-center w-36 h-40 card place-items-center">
-          <%= image_tag sponsor[:image], alt: sponsor[:alt] %>
+        <div class="flex items-center justify-center w-full">
+          <div class="w-36 h-40 card">
+            <%= image_tag sponsor[:image], alt: sponsor[:alt] %>
+          </div>
         </div>
       <% end %>
     <% end %>
   </div>
-</div>
+
+</div>

app/views/landing/home/_previous_sponsors.html.erb

@@ -3,12 +3,14 @@
     Previous Sponsors
   </h1>
 
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-2 lg:ml-28">
+  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-2 lg:ml-28">
 
     <% previous_sponsors.each do |sponsor| %>
       <%= link_to sponsor[:link], target: '_blank' do %>
-        <div class="items-center justify-center w-36 h-40 card place-items-center">
-          <%= image_tag sponsor[:image], alt: sponsor[:alt] %>
+        <div class="flex items-center justify-center w-full">
+          <div class="w-36 h-40 card">
+            <%= image_tag sponsor[:image], alt: sponsor[:alt] %>
+          </div>
         </div>
       <% end %>
     <% end %>