diff --git a/src/assets/css/_css/brand.less b/src/assets/css/_css/brand.less index 0826c9c92a..315b618169 100644 --- a/src/assets/css/_css/brand.less +++ b/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) */ + } } \ No newline at end of file diff --git a/src/components/Conf/Footer/index.tsx b/src/components/Conf/Footer/index.tsx index f98c113bd0..b0a99204fe 100644 --- a/src/components/Conf/Footer/index.tsx +++ b/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 ( - + + ) } diff --git a/src/components/Conf/Sponers/index.tsx b/src/components/Conf/Sponers/index.tsx new file mode 100644 index 0000000000..55553d93c5 --- /dev/null +++ b/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 ( +
+

+ Sponsors +

+

+ DIAMOND +

+
+ {sponsorDiamond + .sort((a, b) => alphabetSort(a, b)) + .map((sponsor, i) => ( + + + + ))} +
+

+ PLATINUM +

+
+ {sponsorPlatinum + .sort((a, b) => alphabetSort(a, b)) + .map((sponsor, i) => ( + + + + ))} +
+

+ SILVER +

+
+ {sponsorSilver + .sort((a, b) => alphabetSort(a, b)) + .map((sponsor, i) => ( + + + + ))} +
+
+ ) +} + +export default SponsersConf diff --git a/static/img/conf/Sponsors/Postman.svg b/static/img/conf/Sponsors/Postman.svg new file mode 100644 index 0000000000..33f93878a1 --- /dev/null +++ b/static/img/conf/Sponsors/Postman.svg @@ -0,0 +1 @@ +pm-orange-logo-horiz.svg \ No newline at end of file diff --git a/static/img/conf/Sponsors/Solo.svg b/static/img/conf/Sponsors/Solo.svg new file mode 100644 index 0000000000..8eb78f63a9 --- /dev/null +++ b/static/img/conf/Sponsors/Solo.svg @@ -0,0 +1 @@ +solo.io-svg-1.svg \ No newline at end of file diff --git a/static/img/conf/Sponsors/Stellate.svg b/static/img/conf/Sponsors/Stellate.svg new file mode 100644 index 0000000000..a51a6de09e --- /dev/null +++ b/static/img/conf/Sponsors/Stellate.svg @@ -0,0 +1 @@ +Stellate Wordmark Blue.svg \ No newline at end of file