Website/conf/sponsor: Add TheGraph logo (#1465)

Author: TuvalSimha

src/assets/css/_css/brand.less

@@ -268,23 +268,41 @@
   }
   .zoom-platinum  {
     transition: transform .2s; /* Animation */
-    width: 299px;
+    width: 300px;
     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-gold {
+    transition: transform .2s; /* Animation */
+    width: 250px;
+    height: 128px;
+    cursor: pointer;
+  }
+  .zoom-gold: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) */
   }
+  .zoom-bronze {
+    transition: transform .2s; /* Animation */
+    width: 144px;
+    height: 103px;
+    cursor: pointer;
+  }
+  
+  .zoom-bronze: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;

src/components/Conf/Sponers/index.tsx

@@ -4,6 +4,7 @@ import { ReactComponent as Stellate } from "../../../../static/img/conf/Sponsors
 import { ReactComponent as Postman } from "../../../../static/img/conf/Sponsors/Postman.svg"
 import { ReactComponent as Solo } from "../../../../static/img/conf/Sponsors/Solo.svg"
 import { ReactComponent as Hasura } from "../../../../static/img/conf/Sponsors/Hasura.svg"
+import { ReactComponent as TheGraph } from "../../../../static/img/conf/Sponsors/TheGraph.svg"
 
 interface Image {
   iconPath: string
@@ -42,6 +43,14 @@ const sponsorPlatinum: Image[] = [
   },
 ]
 
+const sponsorGold: Image[] = [
+  {
+    iconPath: TheGraph,
+    name: "The Graph",
+    link: "https://thegraph.com/",
+  },
+]
+
 const sponsorSilver: Image[] = [
   {
     iconPath: Stellate,
@@ -90,6 +99,25 @@ const SponsersConf = () => {
             </a>
           ))}
       </div>
+
+      <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]">
+        {sponsorGold
+          .sort((a, b) => alphabetSort(a, b))
+          .map((sponsor, i) => (
+            <a
+              key={i}
+              className="zoom-gold 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>