Add Sponsors section to conf page

src/assets/css/_css/brand.less

@@ -257,4 +257,32 @@
 
 .conf-style {
   font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  .zoom-diamond {
+    transition: transform .2s; /* Animation */
+    width: 432px;
+    height: 221px;
+    cursor: pointer;
+  }
+  .zoom-diamond:hover {
+    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
+  }
+  .zoom-platinum  {
+    transition: transform .2s; /* Animation */
+    width: 299px;
+    height: 153px;
+    cursor: pointer;
+  }
+  .zoom-platinum:hover {
+    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
+  }
+  .zoom-silver {
+    transition: transform .2s; /* Animation */
+    width: 208px;
+    height: 106px;
+    cursor: pointer;
+  }
+
+  .zoom-silver:hover {
+    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
+  }
 }

src/components/Conf/Footer/index.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import SocialIcons from "../SocialIcons"
+import SponsersConf from "../Sponers"
 
 const links = [
   [
@@ -24,52 +25,58 @@ const links = [
 
 const FooterConf = () => {
   return (
-    <footer className="text-gray-600 bg-[#171E26]">
-      <div className="container px-5 md:py-24 mx-auto flex md:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
-        <div className="w-64 shrink-0 md:mx-0 text-left">
-          <a
-            href="/conf/"
-            className="flex font-medium md:items-center justify-start text-gray-900"
-          >
-            <img src="/img/conf/graphql-conf-logo.svg" className="w-[200px]" />
-          </a>
-        </div>
-        <div className="grow flex flex-wrap justify-between lg:pl-20 -mb-10 md:mt-0 mt-10 text-left">
-          {links.map((link, i) => (
-            <div key={i} className="md:w-1/3 md:px-4">
-              <div className="list-none mb-10 md:mb-20">
-                {link.map((link, i) => (
-                  <li key={i}>
-                    <a
-                      href={link.href}
-                      className="text-white font-semibold text-base hover:text-white hover:font-semibold hover:underline"
-                    >
-                      {link.text}
-                    </a>
-                  </li>
-                ))}
+    <>
+      <SponsersConf />
+      <footer className="text-gray-600 bg-[#171E26]">
+        <div className="container px-5 md:py-24 mx-auto flex md:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
+          <div className="w-64 shrink-0 md:mx-0 text-left">
+            <a
+              href="/conf/"
+              className="flex font-medium md:items-center justify-start text-gray-900"
+            >
+              <img
+                src="/img/conf/graphql-conf-logo.svg"
+                className="w-[200px]"
+              />
+            </a>
+          </div>
+          <div className="grow flex flex-wrap justify-between lg:pl-20 -mb-10 md:mt-0 mt-10 text-left">
+            {links.map((link, i) => (
+              <div key={i} className="md:w-1/3 md:px-4">
+                <div className="list-none mb-10 md:mb-20">
+                  {link.map((link, i) => (
+                    <li key={i}>
+                      <a
+                        href={link.href}
+                        className="text-white font-semibold text-base hover:text-white hover:font-semibold hover:underline"
+                      >
+                        {link.text}
+                      </a>
+                    </li>
+                  ))}
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
+        </div>
+        <div className="container px-5 mt-5 sm:mt-0 py-4 flex flex-wrap flex-col sm:flex-row">
+          <p className="text-white text-sm text-center sm:text-left">
+            Copyright © {`${new Date().getFullYear()}`} The GraphQL Foundation.
+            All rights reserved.
+            <br />
+            For web site terms of use, trademark policy and general project
+            policies please see&nbsp;
+            <a href="https://lfprojects.org" target="_blank">
+              https://lfprojects.org
+            </a>
+            .
+          </p>
+          <span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start items-start">
+            <SocialIcons />
+          </span>
         </div>
-      </div>
-      <div className="container px-5 mt-5 sm:mt-0 py-4 flex flex-wrap flex-col sm:flex-row">
-        <p className="text-white text-sm text-center sm:text-left">
-          Copyright © {`${new Date().getFullYear()}`} The GraphQL Foundation.
-          All rights reserved.
-          <br />
-          For web site terms of use, trademark policy and general project
-          policies please see&nbsp;
-          <a href="https://lfprojects.org" target="_blank">
-            https://lfprojects.org
-          </a>
-          .
-        </p>
-        <span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start items-start">
-          <SocialIcons />
-        </span>
-      </div>
-    </footer>
+      </footer>
+    </>
   )
 }
 

src/components/Conf/Sponers/index.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable tailwindcss/no-custom-classname */
+import React from "react"
+import { ReactComponent as Stellate } from "../../../../static/img/conf/Sponsors/Stellate.svg"
+import { ReactComponent as Postman } from "../../../../static/img/conf/Sponsors/Postman.svg"
+import { ReactComponent as Solo } from "../../../../static/img/conf/Sponsors/Solo.svg"
+
+interface Image {
+  iconPath: string
+  name: string
+  link: string
+}
+
+function alphabetSort(a: Image, b: Image) {
+  if (a.name < b.name) {
+    return -1
+  }
+  if (a.name > b.name) {
+    return 1
+  }
+  return 0
+}
+
+const sponsorDiamond: Image[] = [
+  {
+    iconPath: Postman,
+    name: "Postman",
+    link: "https://www.postman.com/",
+  },
+]
+
+const sponsorPlatinum: Image[] = [
+  {
+    iconPath: Solo,
+    name: "Solo.io",
+    link: "https://www.solo.io/",
+  },
+]
+
+const sponsorSilver: Image[] = [
+  {
+    iconPath: Stellate,
+    name: "Stellate",
+    link: "https://stellate.co/",
+  },
+]
+
+const SponsersConf = () => {
+  return (
+    <div className="bg-white py-10 static">
+      <h1 className="text-center text-4xl text-[#171E26] font-bold my-8">
+        Sponsors
+      </h1>
+      <h3 className="text-center text-[--rhodamine] font-bold my-10 underline underline-offset-8">
+        DIAMOND
+      </h3>
+      <div className="flex justify-center items-start flex-wrap gap-[20px]">
+        {sponsorDiamond
+          .sort((a, b) => alphabetSort(a, b))
+          .map((sponsor, i) => (
+            <a
+              key={i}
+              className="zoom-diamond flex flex-col items-center text-center w-full h-full"
+              href={sponsor.link}
+              target="_blank"
+            >
+              <sponsor.iconPath />
+            </a>
+          ))}
+      </div>
+      <h3 className="text-center text-[--rhodamine] font-bold my-20 underline underline-offset-8">
+        PLATINUM
+      </h3>
+      <div className="flex justify-center items-start 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"
+              href={sponsor.link}
+              target="_blank"
+            >
+              <sponsor.iconPath />
+            </a>
+          ))}
+      </div>
+      <h3 className="text-center text-[--rhodamine] font-bold my-20 underline underline-offset-8">
+        SILVER
+      </h3>
+      <div className="flex justify-center items-start flex-wrap gap-[20px]">
+        {sponsorSilver
+          .sort((a, b) => alphabetSort(a, b))
+          .map((sponsor, i) => (
+            <a
+              key={i}
+              className="zoom-silver flex flex-col items-center text-center w-full h-full"
+              href={sponsor.link}
+              target="_blank"
+            >
+              <sponsor.iconPath />
+            </a>
+          ))}
+      </div>
+    </div>
+  )
+}
+
+export default SponsersConf