Website/conf: Add Partners section to display media, community partner logos (#1452)

Author: meenakshi-dhanani

src/assets/css/_css/brand.less

@@ -285,4 +285,14 @@
   .zoom-silver:hover {
     transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
   }
+  .zoom-partner {
+    transition: transform .2s; /* Animation */
+    width: 158px;
+    height: 62px;
+    cursor: pointer;
+  }
+  
+  .zoom-partner: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,6 +1,7 @@
 import React from "react"
 import SocialIcons from "../SocialIcons"
 import SponsersConf from "../Sponers"
+import PartnersConf from "../Partners"
 
 const links = [
   [
@@ -28,6 +29,7 @@ const FooterConf = () => {
   return (
     <>
       <SponsersConf />
+      <PartnersConf />
       <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">

src/components/Conf/Partners/index.tsx

@@ -0,0 +1,88 @@
+/* eslint-disable tailwindcss/no-custom-classname */
+import React from "react"
+import { ReactComponent as GraphQLWeekly } from "../../../../static/img/conf/Partners/GraphQLWeekly.svg"
+import { ReactComponent as GraphQLWTF } from "../../../../static/img/conf/Partners/GraphQLwtf.svg"
+import { ReactComponent as EscapeTechnologies } from "../../../../static/img/conf/Partners/EscapeTechnologies.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 mediaPartners: Image[] = [
+  {
+    iconPath: GraphQLWeekly,
+    name: "GraphQLWeekly",
+    link: "https://www.graphqlweekly.com/",
+  },
+  {
+    iconPath: GraphQLWTF,
+    name: "GraphQLWTF",
+    link: "https://graphql.wtf/",
+  },
+]
+
+const communityPartners: Image[] = [
+  {
+    iconPath: EscapeTechnologies,
+    name: "EscapeTechnologies",
+    link: "https://escape.tech/",
+  },
+]
+
+const PartnersConf = () => {
+  return (
+    <div id="partners" className="bg-white py-10 static">
+      <h1 className="text-center text-4xl text-[#171E26] font-bold my-8">
+        Partners
+      </h1>
+      <h3 className="text-center text-[--rhodamine] font-bold my-10 underline underline-offset-8">
+        MEDIA PARTNERS
+      </h3>
+      <div className="flex justify-center items-start flex-wrap gap-[20px]">
+        {mediaPartners
+          .sort((a, b) => alphabetSort(a, b))
+          .map((partner, i) => (
+            <a
+              key={i}
+              className="zoom-partner flex flex-col items-center text-center w-full h-full"
+              href={partner.link}
+              target="_blank"
+            >
+              <partner.iconPath />
+            </a>
+          ))}
+      </div>
+      <h3 className="text-center text-[--rhodamine] font-bold my-20 underline underline-offset-8">
+        COMMUNITY PARTNERS
+      </h3>
+      <div className="flex justify-center items-start flex-wrap gap-[20px]">
+        {communityPartners
+          .sort((a, b) => alphabetSort(a, b))
+          .map((partner, i) => (
+            <a
+              key={i}
+              className="zoom-partner flex flex-col items-center text-center w-full h-full"
+              href={partner.link}
+              target="_blank"
+            >
+              <partner.iconPath />
+            </a>
+          ))}
+      </div>
+    </div>
+  )
+}
+
+export default PartnersConf