From 092384582eb9f6e881fc877c5d15ffe85cc9c070 Mon Sep 17 00:00:00 2001
From: versecafe <147033096+versecafe@users.noreply.github.com>
Date: Tue, 9 Jul 2024 16:03:57 -0400
Subject: [PATCH] Port to tailwind & make dynamic

---
 src/components/landing/sponsors.astro | 144 ++++++++++++++------------
 src/styles/global.css                 |  92 ----------------
 2 files changed, 76 insertions(+), 160 deletions(-)

diff --git a/src/components/landing/sponsors.astro b/src/components/landing/sponsors.astro
index 489a23b..dcef25b 100644
--- a/src/components/landing/sponsors.astro
+++ b/src/components/landing/sponsors.astro
@@ -1,74 +1,82 @@
-<section class="sponsors" id="sponsors">
+---
+const sponsors = [
+  {
+    name: "Platinum",
+    sponsors: [
+      {
+        name: "Shopify",
+        href: "https://www.shopify.com/",
+        logo: "/assets/img/sponsor-shopify.svg",
+      },
+    ],
+  },
+  {
+    name: "Silver",
+    sponsors: [
+      {
+        name: "Packet Clearing House",
+        href: "https://www.pch.net/",
+        logo: "/assets/img/sponsor-pch.svg",
+      },
+      {
+        name: "Null Games",
+        href: "https://www.null.com/",
+        logo: "/assets/img/sponsor-null.svg",
+      },
+      {
+        name: "Playbit",
+        href: "https://www.playb.it/",
+        logo: "/assets/img/sponsor-playbit.svg",
+      },
+      {
+        name: "ohne-makler.net",
+        href: "https://www.ohne-makler.net/",
+        logo: "/assets/img/sponsor-ohne-makler.svg",
+      },
+    ],
+  },
+  {
+    name: "Bronze",
+    sponsors: [
+      {
+        name: "Tuple",
+        href: "https://www.tuple.app/",
+        logo: "/assets/img/sponsor-tuple.svg",
+      },
+    ],
+  },
+];
+---
+
+<section class="relative mb-24 px-5 lg:mb-28" id="sponsors">
   <div class="sponsors__eclipse-big"></div>
   <div class="sponsors__eclipse-medium"></div>
   <div class="container">
-    <h2 class="text-center">Sponsors</h2>
-    <div class="sponsors__wrapper">
-      <div class="sponsors__block">
-        <div class="sponsors__title">
-          <span class="sponsors__title-line"></span>
-          <span class="sponsors__title-text">Platinum</span>
-          <span class="sponsors__title-line"></span>
-        </div>
-        <div class="sponsors__grid">
-          <div class="sponsors__grid-item">
-            <a href="https://www.shopify.com/"
-              ><img src="/assets/img/sponsor-shopify.svg" alt="Shopify" /></a
-            >
-          </div>
-        </div>
-      </div>
-
-      <div class="sponsors__block">
-        <div class="sponsors__title">
-          <span class="sponsors__title-line"></span>
-          <span class="sponsors__title-text">Silver</span>
-          <span class="sponsors__title-line"></span>
-        </div>
-        <div class="sponsors__grid">
-          <div class="sponsors__grid-item">
-            <a href="https://www.pch.net/"
-              ><img
-                src="/assets/img/sponsor-pch.svg"
-                alt="Packet Clearing House"
-              /></a
-            >
-          </div>
-          <div class="sponsors__grid-item">
-            <a href="https://www.null.com/"
-              ><img src="/assets/img/sponsor-null.svg" alt="Null Games" /></a
-            >
-          </div>
-          <div class="sponsors__grid-item">
-            <a href="https://www.playb.it/"
-              ><img src="/assets/img/sponsor-playbit.svg" alt="Playbit" /></a
-            >
-          </div>
-          <div class="sponsors__grid-item">
-            <a href="https://www.ohne-makler.net/"
-              ><img
-                src="/assets/img/sponsor-ohne-makler.svg"
-                alt="ohne-makler.net"
-              /></a
-            >
-          </div>
-        </div>
-      </div>
-
-      <div class="sponsors__block">
-        <div class="sponsors__title">
-          <span class="sponsors__title-line"></span>
-          <span class="sponsors__title-text">Bronze</span>
-          <span class="sponsors__title-line"></span>
-        </div>
-        <div class="sponsors__grid">
-          <div class="sponsors__grid-item">
-            <a href="https://www.tuple.app/"
-              ><img src="/assets/img/sponsor-tuple.svg" alt="Tuple" /></a
-            >
+    <h2 class="text-center mb-12">Sponsors</h2>
+    {
+      sponsors.map((tier) => {
+        return (
+          <div class="mb-[64px] relative">
+            <div class="flex items-center mb-6">
+              <span class="block w-full h-[1px] bg-[#d3d2d6]" />
+              <span class="text-2xl font-semibold px-5">{tier.name}</span>
+              <span class="block w-full h-[1px] bg-[#d3d2d6]" />
+            </div>
+            <div class="flex flex-wrap items-center justify-center gap-4">
+              {tier.sponsors.map((sponsor) => {
+                return (
+                  <div class="relative flex items-center justify-center min-h-[102px] border-[6px] border-[#fff] rounded-[30px] shadow-[0_0_8px_0_rgba(202,205,226,0.38)] p-4">
+                    <a href={sponsor.href}>
+                      {" "}
+                      <img src={sponsor.logo} alt={sponsor.name} />{" "}
+                    </a>
+                  </div>
+                );
+              })}
+            </div>
           </div>
-        </div>
-      </div>
-    </div>
+        );
+      })
+    }
   </div>
 </section>
diff --git a/src/styles/global.css b/src/styles/global.css
index 2af3d16..a460088 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -694,18 +694,6 @@ a {
   }
 }
 
-.sponsors {
-  position: relative;
-  margin-bottom: 100px;
-  padding: 0 20px;
-}
-
-@media (min-width: 768px) {
-  .sponsors {
-    margin-bottom: 114px;
-  }
-}
-
 .sponsors__eclipse-big {
   position: absolute;
   top: -200px;
@@ -733,86 +721,6 @@ a {
   display: block;
 }
 
-.sponsors h2 {
-  color: #000;
-  margin-bottom: 50px;
-}
-
-.sponsors__block {
-  margin-bottom: 64px;
-  position: relative;
-}
-
-.sponsors__title {
-  display: flex;
-  align-items: center;
-  margin-bottom: 24px;
-}
-
-.sponsors__title-text {
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 150%;
-  letter-spacing: 0.2px;
-  padding: 0 20px;
-}
-
-.sponsors__title-line {
-  width: 100%;
-  height: 1px;
-  background: #d3d2d6;
-  display: block;
-}
-
-.sponsors__grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: center;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  justify-content: center;
-}
-
-.sponsors__grid-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 102px;
-  border: 6px solid #fff;
-  border-radius: 30px;
-  box-shadow: 0 0 8px 0 rgba(202, 205, 226, 0.3803921569);
-  padding: 16px;
-}
-
-.sponsors__grid-small {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 16px;
-}
-
-.sponsors__grid-small-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 70px;
-  max-height: 70px;
-  border: 6px solid #fff;
-  border-radius: 30px;
-  padding: 16px;
-  box-shadow: 0 0 8px 0 rgba(202, 205, 226, 0.3803921569);
-}
-
-.sponsors__grid-small-item > span {
-  font-weight: 600;
-  background-image: linear-gradient(#6d98cc, #8a64e5);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-
 .faq {
   position: relative;
   padding: 0 20px 140px 20px;