adds name of sponsor in the list

osmkerala · Nov 15, 2024 · 942eb43 · 942eb43
1 parent a678854
commit 942eb43
Showing 1 changed file with 56 additions and 40 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -333,13 +333,16 @@ const socials = [
         <h3 class="text-lg font-semibold mb-6 text-center text-gray-600">Platinum Sponsor</h3>
         <div class="flex justify-center">
           {sponsors.platinum.map(sponsor => (
-            <a 
-              href={sponsor.url}
-              class="bg-slate-100 p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow"
-              target="_blank"
-            >
-              <img src={sponsor.logo} alt={sponsor.name} class="h-12" />
-            </a>
+            <div class="flex flex-col items-center">
+              <a 
+                href={sponsor.url}
+                class="bg-slate-100 p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow flex items-center justify-center mb-2"
+                target="_blank"
+              >
+                <img src={sponsor.logo} alt={sponsor.name} class="h-8" />
+              </a>
+              <span class="text-center text-sm text-gray-600 text-lg">{sponsor.name}</span>
+            </div>
           ))}
         </div>
       </div>
@@ -349,13 +352,16 @@ const socials = [
         <h3 class="text-lg font-semibold mb-6 text-center text-gray-600">Silver Sponsor</h3>
         <div class="flex justify-center">
           {sponsors.silver.map(sponsor => (
-            <a 
-              href={sponsor.url}
-              class="bg-slate-100 p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow"
-              target="_blank"
-            >
-              <img src={sponsor.logo} alt={sponsor.name} class="h-10" />
-            </a>
+            <div class="flex flex-col items-center">
+              <a 
+                href={sponsor.url}
+                class="bg-slate-100 p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow flex items-center justify-center mb-2"
+                target="_blank"
+              >
+                <img src={sponsor.logo} alt={sponsor.name} class="h-8" />
+              </a>
+              <span class="text-center text-sm text-gray-600">{sponsor.name}</span>
+            </div>
           ))}
         </div>
       </div>
@@ -365,13 +371,16 @@ const socials = [
         <h3 class="text-lg font-semibold mb-6 text-center text-gray-600">Bronze Sponsors</h3>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
           {sponsors.bronze.map(sponsor => (
-            <a 
-              href={sponsor.url}
-              class="bg-slate-100 p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow flex items-center justify-center"
-              target="_blank"
-            >
-              <img src={sponsor.logo} alt={sponsor.name} class="h-8" />
-            </a>
+            <div class="flex flex-col items-center">
+              <a 
+                href={sponsor.url}
+                class="bg-slate-100 p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow flex items-center justify-center mb-2"
+                target="_blank"
+              >
+                <img src={sponsor.logo} alt={sponsor.name} class="h-8" />
+              </a>
+              <span class="text-center text-sm text-gray-600">{sponsor.name}</span>
+            </div>
           ))}
         </div>
       </div>
@@ -381,43 +390,50 @@ const socials = [
         <h3 class="text-lg font-semibold mb-6 text-center text-gray-600">Organizing Partner</h3>
         <div class="flex justify-center">
           {organizingPartners.map(partner => (
-            <a 
-              href={partner.url}
-              class="bg-slate-100 p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow flex items-center justify-center"
-              target="_blank"
-            >
-              <img src={partner.logo} alt={partner.name} class="h-8" />
-            </a>
+            <div class="flex flex-col items-center">
+              <a 
+                href={partner.url}
+                class="bg-slate-100 p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow flex items-center justify-center mb-2"
+                target="_blank"
+              >
+                <img src={partner.logo} alt={partner.name} class="h-8" />
+              </a>
+              <span class="text-center text-sm text-gray-600">{partner.name}</span>
+            </div>
           ))}
         </div>
 
         <div>
-        <h3 class="text-lg font-semibold mb-6 text-center text-gray-600">Organizing Partner</h3>
-        <div class="flex justify-center">
+        <h3 class="text-lg font-semibold mb-6 text-center text-gray-600">Organizers</h3>
+        <div class="flex justify-center gap-8">
           {facilitators.map(partner => (
-            <a 
-              href={partner.url}
-              class="bg-slate-100 p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow flex items-center justify-center"
-              target="_blank"
-            >
-              <img src={partner.logo} alt={partner.name} class="h-8" />
-            </a>
+            <div class="flex flex-col items-center">
+              <a 
+                href={partner.url}
+                class="bg-slate-100 p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow flex items-center justify-center mb-2"
+                target="_blank"
+              >
+                <img src={partner.logo} alt={partner.name} class="h-8" />
+              </a>
+              <span class="text-center text-sm text-gray-600">{partner.name}</span>
+            </div>
           ))}
         </div>
-
+      </div>
       <!-- Community Partners -->
       <div>
         <h3 class="text-lg font-semibold mb-6 text-center text-gray-600">Community Partners</h3>
         <div class="grid grid-cols-2 md:grid-cols-3 gap-6 max-w-3xl mx-auto">
           {communityPartners.map(partner => (
-            <div class="bg-slate-100 p-6 rounded-lg shadow-sm flex items-center justify-center">
+            <div class="flex flex-col items-center">
               <a 
                 href={partner.url}
-                class="bg-slate-100 p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow flex items-center justify-center"
+                class="bg-slate-100 p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow flex items-center justify-center mb-2"
                 target="_blank"
               >
                 <img src={partner.logo} alt={partner.name} class="h-8" />
               </a>
+              <span class="text-center text-sm text-gray-600">{partner.name}</span>
             </div>
           ))}
         </div>