feat: add event sponsors & supporters section

src/components/compatibility.astro

@@ -1,89 +1,79 @@
 ---
 import CompatibilityList from "~/components/compatibilityList.astro";
 import ContentSection from "~/components/contentSection.astro";
+import { Icon } from "astro-icon/components";
 import type { CompatibilityItem } from "~/types";
 
 const frameworks: Array<CompatibilityItem> = [
   {
-    title: "React",
-    icon: "frameworks/react",
-    url: "https://reactjs.org/",
-  },
-  {
-    title: "Preact",
-    icon: "frameworks/preact",
-    url: "https://preactjs.com/",
-  },
-  {
-    title: "Svelte",
-    icon: "frameworks/svelte",
-    url: "https://svelte.dev/",
-  },
-  {
-    title: "Vue",
-    icon: "frameworks/vue",
-    url: "https://vuejs.org/",
-  },
-  {
-    title: "Solid",
-    icon: "frameworks/solid",
-    url: "https://www.solidjs.com/",
-  },
-  {
-    title: "Lit",
-    icon: "frameworks/lit",
-    url: "https://lit.dev/",
+    title: "Uphold",
+    icon: "companies/uphold",
+    url: "https://uphold.com/en-eu",
   },
 ];
 
 const platforms: Array<CompatibilityItem> = [
   {
-    title: "Netlify",
-    icon: "platforms/netlify",
-    url: "https://www.netlify.com/",
-  },
-  {
-    title: "Vercel",
-    icon: "platforms/vercel",
-    url: "https://vercel.com/",
-  },
-  {
-    title: "Cloudflare",
-    icon: "fa-brands:cloudflare",
-    url: "https://pages.cloudflare.com/",
+    title: "RedBull",
+    icon: "companies/redbull",
+    url: "https://uphold.com/en-eu",
   },
   {
-    title: "Render",
-    icon: "platforms/render",
-    url: "https://render.com/",
+    title: "DSPA",
+    icon: "companies/dspa",
+    url: "https://uphold.com/en-eu",
   },
   {
-    title: "GitHub",
-    icon: "fa-brands:github",
-    url: "https://pages.github.com/",
-  },
-  {
-    title: "GitLab",
-    icon: "fa-brands:gitlab",
-    url: "https://docs.gitlab.com/ee/user/project/pages/",
+    title: "Startup Braga",
+    icon: "companies/startup",
+    url: "https://uphold.com/en-eu",
   },
 ];
 ---
 
-<ContentSection title="Compatibility" id="compatibility">
+<ContentSection title="Sponsors" id="companies">
   <Fragment slot="lead">
-    Astro <span class="text-primary">plays nice</span>. Bring your own UI{" "}
-    <span class="text-primary">framework</span>
-    and deploy to your favorite <span class="text-primary">platform</span>.
+    Check out the companies that support the event.
   </Fragment>
+  <br />
   <CompatibilityList
-    items={frameworks}
-    title="Frameworks"
-    url="https://docs.astro.build/core-concepts/framework-components/"
-  />
+    items={platforms}
+    title="Sponsor"
+    url="https://docs.astro.build/guides/deploy/"
+  >
+    <ul
+      class="flex flex-wrap mx-auto justify-center items-center gap-16 sm:gap-8 h-16"
+    >
+      <li>
+        <a class="flex flex-col items-center mx-8" href="">
+          <Icon class="size-36 h-full" name="companies/uphold" />
+        </a>
+      </li>
+    </ul>
+  </CompatibilityList>
   <CompatibilityList
     items={platforms}
-    title="Platforms"
+    title="Partners"
     url="https://docs.astro.build/guides/deploy/"
-  />
+  >
+    <ul
+      class="flex flex-wrap mx-auto justify-center items-center gap-16 sm:gap-8"
+    >
+      <li>
+        <a class="flex flex-col justify-center items-center mx-8" href="">
+          <Icon class="size-28 h-full" name="companies/redbull" />
+        </a>
+      </li>
+      <li>
+        <a class="flex flex-col items-center mx-8" href="">
+          <Icon class="size-36 h-full" name="companies/dspa" />
+        </a>
+      </li>
+      <li>
+        <a class="flex flex-col items-center mx-8" href="">
+          <Icon class="size-32" name="companies/startup" />
+        </a>
+      </li>
+    </ul>
+  </CompatibilityList>
 </ContentSection>

src/components/compatibilityList.astro

@@ -11,27 +11,13 @@ export interface Props {
 const { items, title, url } = Astro.props;
 ---
 
-<div class="w-full max-w-6xl space-y-2">
-  <div class="relative border border-default bg-offset px-6 pb-4 pt-8">
+<div class="w-full max-w-4xl space-y-2">
+  <div class="relative border border-white px-6 pb-8 pt-8">
     <h3
-      class="absolute right-4 top-0 -translate-y-1/2 rounded-full border border-current bg-default px-4 py-1 uppercase tracking-tight text-xs"
+      class="absolute left-4 top-0 -translate-y-1/2 rounded-full border border-current bg-default px-4 py-1 uppercase tracking-tight text-xs"
     >
       {title}
     </h3>
-    <ul class="grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-6">
-      {
-        items.map((item) => (
-          <li>
-            <a class="flex flex-col items-center gap-2" href={item.url}>
-              <Icon class="size-12" name={item.icon} />
-              <span>{item.title}</span>
-            </a>
-          </li>
-        ))
-      }
-    </ul>
+    <slot />
   </div>
-  <p class="text-right text-sm">
-    <a class="text-primary" href={url}> ...and more &rarr;</a>
-  </p>
 </div>