conf: add new sponors

src/assets/css/_css/brand.less

@@ -269,7 +269,7 @@
   .zoom-platinum  {
     transition: transform .2s; /* Animation */
     width: 300px;
-    height: 153px;
+    max-height: 153px;
     cursor: pointer;
   }
   .zoom-platinum:hover {

src/components/Conf/Sponsors/index.tsx

@@ -6,6 +6,8 @@ import { ReactComponent as Solo } from "../../../../static/img/conf/Sponsors/Sol
 import { ReactComponent as Hasura } from "../../../../static/img/conf/Sponsors/Hasura.svg"
 import { ReactComponent as TheGraph } from "../../../../static/img/conf/Sponsors/TheGraph.svg"
 import { ReactComponent as TheGuild } from "../../../../static/img/conf/Sponsors/TheGuild.svg"
+import { ReactComponent as Hygraph } from "../../../../static/img/conf/Sponsors/Hygraph.svg"
+import { ReactComponent as StepZen } from "../../../../static/img/conf/Sponsors/StepZen.svg"
 
 interface Image {
   iconPath: string
@@ -47,6 +49,11 @@ const sponsorPlatinum: Image[] = [
     name: "Solo.io",
     link: "https://www.solo.io/",
   },
+  {
+    iconPath: Hygraph,
+    name: "Hygraph",
+    link: "https://hygraph.com/",
+  },
 ]
 
 const sponsorGold: Image[] = [
@@ -55,6 +62,11 @@ const sponsorGold: Image[] = [
     name: "The Graph",
     link: "https://thegraph.com/",
   },
+  {
+    iconPath: StepZen,
+    name: "StepZen",
+    link: "https://stepzen.com/",
+  },
 ]
 
 const sponsorSilver: Image[] = [
@@ -70,7 +82,6 @@ const workshopDaySponsors: Image[] = [
     iconPath: TheGuild,
     name: "The Guild",
     link: "https://the-guild.dev/",
-    workshopSponsor: true,
   },
 ]
 
@@ -98,13 +109,13 @@ const SponsersConf = () => {
       <h3 className="text-center text-[--rhodamine] font-bold my-10 underline underline-offset-8">
         PLATINUM
       </h3>
-      <div className="flex justify-center items-start flex-wrap gap-[20px]">
+      <div className="flex justify-center items-center flex-wrap gap-[20px]">
         {sponsorPlatinum
           .sort((a, b) => alphabetSort(a, b))
           .map((sponsor, i) => (
             <a
               key={i}
-              className="zoom-platinum flex flex-col items-center text-center w-full h-full"
+              className="zoom-platinum self-center flex flex-col text-center w-full"
               href={sponsor.link}
               target="_blank"
             >
@@ -116,7 +127,7 @@ const SponsersConf = () => {
       <h3 className="text-center text-[--rhodamine] font-bold my-10 underline underline-offset-8">
         GOLD
       </h3>
-      <div className="flex justify-center items-start flex-wrap gap-[20px]">
+      <div className="flex justify-center items-start flex-wrap gap-[40px]">
         {sponsorGold
           .sort((a, b) => alphabetSort(a, b))
           .map((sponsor, i) => (
@@ -134,7 +145,7 @@ const SponsersConf = () => {
       <h3 className="text-center text-[--rhodamine] font-bold my-10 underline underline-offset-8">
         SILVER
       </h3>
-      <div className="flex justify-center items-start flex-wrap gap-[20px]">
+      <div className="flex justify-center items-start flex-wrap gap-[40px]">
         {sponsorSilver
           .sort((a, b) => alphabetSort(a, b))
           .map((sponsor, i) => (
@@ -148,14 +159,15 @@ const SponsersConf = () => {
             </a>
           ))}
       </div>
-      <h1 className="text-center text-4xl text-[#171E26] font-bold my-8 pt-10">
+
+      <h3 className="text-center text-[--rhodamine] font-bold my-10 underline underline-offset-8">
         Workshop Day Sponsor
-      </h1>
-      <div className="flex justify-center items-center flex-wrap gap-[40px]">
+      </h3>
+      <div className="flex justify-center items-center flex-wrap gap-[40px] h-[70%]">
         {workshopDaySponsors.map((sponsor, i) => (
           <a
             key={i}
-            className="zoom-diamond flex flex-col items-center text-center w-full h-full"
+            className="zoom-platinum flex flex-col items-center text-center"
             href={sponsor.link}
             target="_blank"
           >