feat: sponsorship

Author: rayriffy

src/packlets/assets/odds.svg

@@ -1,8 +1,40 @@
 ---
-import TBA from './tba.astro'
+import { Image } from 'astro:assets'
+
+import odds from '$assets/odds.svg'
+import tdpk from '$assets/tdpk.svg'
 ---
 
 <section class="bg-เหล็กไหล py-12 text-white">
-  <h1 class="pb-12 text-center text-4xl font-bold">Sponsors</h1>
-  <TBA />
+  <div class="pb-12 text-center">
+    <h1 class="pb-6 text-4xl font-bold">Sponsors</h1>
+    <p>
+      JavaScript Bangkok would like to tank our sponsors for their kind
+      contributions.
+    </p>
+    <p>
+      If you're interested in becoming a sponsor, email us at
+      <span class="text-red-500">sponsors@javascriptbangkok.com</span>
+    </p>
+  </div>
+  <ul class="mx-auto max-w-4xl space-y-6 px-4">
+    <li class="rounded-xl bg-ขาวผ่อง px-8 py-6 text-เหล็กไหล">
+      <h2 class="pb-4 text-2xl font-bold">Platinum</h2>
+      <div class="flex flex-wrap justify-center gap-6">
+        <Image src={odds} alt="ODDS" />
+      </div>
+    </li>
+    <li class="rounded-xl bg-ขาวผ่อง px-8 py-6 text-เหล็กไหล">
+      <h2 class="pb-4 text-2xl font-bold">Gold</h2>
+      <div class="flex flex-wrap justify-center gap-6">
+        <Image src={tdpk} alt="True Digital Park" />
+      </div>
+    </li>
+    <li class="rounded-xl bg-ขาวผ่อง px-8 py-6 text-เหล็กไหล">
+      <h2 class="pb-4 text-2xl font-bold">Silver</h2>
+      <div class="flex flex-wrap justify-center gap-6">
+        <p class="px-4 text-center">Sponsorship slot available!</p>
+      </div>
+    </li>
+  </ul>
 </section>