Add expandable footnotes

Author: escherlies

src/routes/sponsorship.jsx

@@ -1,6 +1,22 @@
 import { BiSolidHeartCircle } from 'solid-icons/bi';
 import PageLayout from '~/components/PageLayout';
 
+// Expandable footnote component
+function ExpandableFootnote({ number, content }) {
+  return (
+    <span class="inline-block">
+      <details class="inline">
+        <summary class="inline-block cursor-pointer">
+          <sup class="text-white hover:text-gray-100">[{number}]</sup>
+        </summary>
+        <div class="absolute mt-1 max-w-sm rounded-lg border border-white/10 p-2 text-sm shadow-lg bg-/90 backdrop-blur-md z-50">
+          {content}
+        </div>
+      </details>
+    </span>
+  );
+}
+
 function sponsorLink(tier, amount) {
   let body = `Please provide at least the following information:
   - Company Name and Website:
@@ -50,7 +66,7 @@ export default function Sponsorship() {
               <li>Linked logo on the website</li>
               <li>Linked shout-out or repost from official social media accounts</li>
               <li>Possibility to distribute your own stickers/swag/merch at the venue</li>
-              <li>Tickets: 1+ corporate tickets<a href="#corporate-tickets"><sup>[1]</sup></a></li>
+              <li>Tickets: 1+ corporate tickets <ExpandableFootnote number="1" content="One corporate ticket per 1024 EUR. Only corporate tickets come with company name/logo recognition on the badge. Corporate tickets can also be bought individually when ticket sales open." /></li>
             </ul>
             <a href={sponsorLink("Bronze", 1024)} class="inline-block px-4 py-2 bg-white/20 hover:bg-white/30 transition-colors rounded-lg text-white font-medium">
               Contact Us
@@ -66,7 +82,7 @@ export default function Sponsorship() {
               <li>Shout-out in the opening</li>
               <li>Slot on break slideshow (provide a slide in advance)</li>
               <li>Possibility to distribute flyers (provide them in advance) to all attendees in bag</li>
-              <li>Tickets: 2+ corporate tickets<a href="#corporate-tickets"><sup>[1]</sup></a></li>
+              <li>Tickets: 2+ corporate tickets <ExpandableFootnote number="1" content="One corporate ticket per 1024 EUR. Only corporate tickets come with company name/logo recognition on the badge. Corporate tickets can also be bought individually when ticket sales open." /></li>
             </ul>
             <a href={sponsorLink("Silver", 2048)} class="inline-block px-4 py-2 bg-white/20 hover:bg-white/30 transition-colors rounded-lg text-white font-medium">
               Contact Us
@@ -80,8 +96,8 @@ export default function Sponsorship() {
             <ul class="list-disc list-inside space-y-2 mb-4">
               <li>Everything from Silver</li>
               <li>5 minute lightning talk slot</li>
-              <li>Dedicated space for a booth<a href="#limited"><sup>[2]</sup></a></li>
-              <li>Tickets: 4+ corporate tickets<a href="#corporate-tickets"><sup>[1]</sup></a></li>
+              <li>Dedicated space for a booth <ExpandableFootnote number="2" content="These perks may be limited in availability." /></li>
+              <li>Tickets: 4+ corporate tickets <ExpandableFootnote number="1" content="One corporate ticket per 1024 EUR. Only corporate tickets come with company name/logo recognition on the badge. Corporate tickets can also be bought individually when ticket sales open." /></li>
             </ul>
             <a href={sponsorLink("Gold", 4096)} class="inline-block px-4 py-2 bg-white/20 hover:bg-white/30 transition-colors rounded-lg text-white font-medium">
               Contact Us
@@ -94,11 +110,11 @@ export default function Sponsorship() {
             <p class="text-xl mb-4">8192+ EUR</p>
             <ul class="list-disc list-inside space-y-2 mb-4">
               <li>Everything from Gold</li>
-              <li>Logo on some official conference swag<a href="#limited"><sup>[2]</sup></a><a href="#production"><sup>[3]</sup></a></li>
+              <li>Logo on some official conference swag <ExpandableFootnote number="2" content="These perks may be limited in availability." /> <ExpandableFootnote number="3" content="These perks require production and cannot be guaranteed if too late." /></li>
               <li>1 minute presentation slot (provide the slides in advance) in the conference opening</li>
               <li>Intro of all recordings show your name/logo</li>
               <li>Possibility to distribute items (provide them in advance) to all attendees in bag</li>
-              <li>Tickets: 8+ corporate tickets<a href="#corporate-tickets"><sup>[1]</sup></a></li>
+              <li>Tickets: 8+ corporate tickets <ExpandableFootnote number="1" content="One corporate ticket per 1024 EUR. Only corporate tickets come with company name/logo recognition on the badge. Corporate tickets can also be bought individually when ticket sales open." /></li>
             </ul>
             <a href={sponsorLink("Diamond", 8192)} class="inline-block px-4 py-2 bg-white/20 hover:bg-white/30 transition-colors rounded-lg text-white font-medium">
               Contact Us