Add top-level sponsors to index

Author: ryanmr

src/globals/sponsors.json

@@ -1,5 +1,6 @@
 [
   {
+    "key": "host",
     "section": "Host 🌎",
     "sponsors": [
       {
@@ -10,6 +11,7 @@
     ]
   },
   {
+    "key": "diamond",
     "section": "Diamond 💎",
     "sponsors": [
       {
@@ -34,6 +36,6 @@
       }
     ]
   },
-  { "section": "Gold 🥇", "sponsors": [] },
-  { "section": "Silver 🥈", "sponsors": [] }
+  { "key": "gold", "section": "Gold 🥇", "sponsors": [] },
+  { "key": "silver", "section": "Silver 🥈", "sponsors": [] }
 ]

src/index.njk

@@ -116,7 +116,10 @@ links:
           </div>
         </div>
       </div>
-      <div>
+
+      
+      {# speaking #}
+      <div class="mb-8">
         <div class="flex justify-start items-center mb-2">
           <h2
             class="inline-block bg-black text-white text-2xl font-bold px-4 transform -rotate-1"
@@ -143,6 +146,78 @@ links:
           </div>
         </div>
       </div>
+
+
+      {# promoted sponsors #}
+      <div class="mb-8">
+        <div class="flex justify-between items-center mb-2">
+          <h2
+            class="inline-block bg-black text-white text-2xl font-bold px-4 transform -rotate-1"
+          >
+            Sponsors
+          </h2>
+          <p><a class="hover:underline" href="{{ site.baseUrl }}sponsors/">More Sponsors →</a></p>
+        </div>
+        <div
+          class="border-jsmn-yellow border-4 p-4"
+        >
+          {# host  #}
+          <div class="w-2/3 mx-auto mb-4">
+          <h3 class="font-bold text-2xl">Host 🌎</h3>
+          <div class="grid sm:grid-cols-4 sm:gap-2 grid-cols-none space-y-4 sm:space-y-0">
+          {% for section in sponsors %}
+            {% if section.key === "host" %}
+              {% for sponsor in section.sponsors %}
+              <div class="flex justify-center items-center">
+                <a
+                    href="{{ sponsor.href }}"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="flex justify-center items-center shadow transition-all border border-gray-200 hover:border-gray-400 w-full p-4"
+                  >
+                    <img
+                      src="{{ site.baseUrl }}sponsors/{{ sponsor.imgSrc }}"
+                      alt="{{ sponsor.title }}"
+                      title="{{ sponsor.title }}"
+                      class="h-32"
+                    />
+                  </a>
+                  </div>
+              {% endfor %}
+            {% endif %}
+          {% endfor %}
+          </div>
+          </div>
+          {# diamond #}
+          <div class="w-2/3 mx-auto mb-4">
+          <h3 class="font-bold text-2xl">Diamond 💎</h3>
+          <div class="grid sm:grid-cols-4 sm:gap-2 grid-cols-none space-y-4 sm:space-y-0">
+          {% for section in sponsors %}
+            {% if section.key === "diamond" %}
+              {% for sponsor in section.sponsors %}
+                <div class="flex justify-center items-center">
+                <a
+                    href="{{ sponsor.href }}"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="flex justify-center items-center shadow transition-all border border-gray-200 hover:border-gray-400 w-full p-4"
+                  >
+                    <img
+                      src="{{ site.baseUrl }}sponsors/{{ sponsor.imgSrc }}"
+                      alt="{{ sponsor.title }}"
+                      title="{{ sponsor.title }}"
+                      class="h-32"
+                    />
+                  </a>
+                </div>
+              {% endfor %}
+            {% endif %}
+          {% endfor %}
+          </div>
+          </div>
+        </div>
+      </div>
+
     </div>
   </div>
 </div>