feat: add event sponsors & supporters section

Author: danielsp45

public/docs/regulation.pdf

@@ -2,88 +2,22 @@
 import CompatibilityList from "~/components/compatibilityList.astro";
 import ContentSection from "~/components/contentSection.astro";
 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/",
-  },
-];
-
-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: "Render",
-    icon: "platforms/render",
-    url: "https://render.com/",
-  },
-  {
-    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/",
-  },
-];
+import companies from "~/data/companies.json";
 ---
 
-<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 some of the companies envolved in the event.
   </Fragment>
+  <br />
   <CompatibilityList
-    items={frameworks}
-    title="Frameworks"
+    items={companies.sponsors}
+    title="Sponsor"
     url="https://docs.astro.build/core-concepts/framework-components/"
   />
   <CompatibilityList
-    items={platforms}
-    title="Platforms"
+    items={companies.supporters}
+    title="Supporters"
     url="https://docs.astro.build/guides/deploy/"
   />
 </ContentSection>

src/assets/astronaut.png

@@ -11,27 +11,25 @@ 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">
+    <ul
+      class="flex flex-wrap mx-auto justify-center items-center gap-16 sm:gap-8 sm:h-32"
+    >
       {
         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 class="flex flex-col items-center mx-8" href={item.url}>
+              <Icon class="size-36 h-full" name={item.icon} />
             </a>
           </li>
         ))
       }
     </ul>
   </div>
-  <p class="text-right text-sm">
-    <a class="text-primary" href={url}> ...and more &rarr;</a>
-  </p>
 </div>

src/components/compatibility.astro

@@ -0,0 +1,26 @@
+{
+  "sponsors": [
+    {
+      "title": "Uphold",
+      "icon": "companies/uphold",
+      "url": "https://uphold.com/"
+    }
+  ],
+  "supporters": [
+    {
+      "title": "RedBull",
+      "icon": "companies/redbull",
+      "url": "https://www.redbull.com/pt-pt/"
+    },
+    {
+      "title": "DSPA",
+      "icon": "companies/dspa",
+      "url": "https://dspa.pt/"
+    },
+    {
+      "title": "Startup Braga",
+      "icon": "companies/startup",
+      "url": "https://www.startupbraga.com/"
+    }
+  ]
+}