Skip to content

Commit b4f8a98

Browse files
TuvalSimhaTuvalSimha
authored
Add Sponsors section to conf page (#1432)
1 parent 7d5374d commit b4f8a98

File tree

6 files changed

+190
-44
lines changed

6 files changed

+190
-44
lines changed

‎src/assets/css/_css/brand.less

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -257,4 +257,32 @@
257257

258258
.conf-style {
259259
font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
260+
.zoom-diamond {
261+
transition: transform .2s; /* Animation */
262+
width: 432px;
263+
height: 221px;
264+
cursor: pointer;
265+
}
266+
.zoom-diamond:hover {
267+
transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
268+
}
269+
.zoom-platinum {
270+
transition: transform .2s; /* Animation */
271+
width: 299px;
272+
height: 153px;
273+
cursor: pointer;
274+
}
275+
.zoom-platinum:hover {
276+
transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
277+
}
278+
.zoom-silver {
279+
transition: transform .2s; /* Animation */
280+
width: 208px;
281+
height: 106px;
282+
cursor: pointer;
283+
}
284+
285+
.zoom-silver:hover {
286+
transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
287+
}
260288
}

‎src/components/Conf/Footer/index.tsx

Lines changed: 51 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react"
22
import SocialIcons from "../SocialIcons"
3+
import SponsersConf from "../Sponers"
34

45
const links = [
56
[
@@ -24,52 +25,58 @@ const links = [
2425

2526
const FooterConf = () => {
2627
return (
27-
<footer className="text-gray-600 bg-[#171E26]">
28-
<div className="container px-5 md:py-24 mx-auto flex md:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
29-
<div className="w-64 shrink-0 md:mx-0 text-left">
30-
<a
31-
href="/conf/"
32-
className="flex font-medium md:items-center justify-start text-gray-900"
33-
>
34-
<img src="/img/conf/graphql-conf-logo.svg" className="w-[200px]" />
35-
</a>
36-
</div>
37-
<div className="grow flex flex-wrap justify-between lg:pl-20 -mb-10 md:mt-0 mt-10 text-left">
38-
{links.map((link, i) => (
39-
<div key={i} className="md:w-1/3 md:px-4">
40-
<div className="list-none mb-10 md:mb-20">
41-
{link.map((link, i) => (
42-
<li key={i}>
43-
<a
44-
href={link.href}
45-
className="text-white font-semibold text-base hover:text-white hover:font-semibold hover:underline"
46-
>
47-
{link.text}
48-
</a>
49-
</li>
50-
))}
28+
<>
29+
<SponsersConf />
30+
<footer className="text-gray-600 bg-[#171E26]">
31+
<div className="container px-5 md:py-24 mx-auto flex md:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
32+
<div className="w-64 shrink-0 md:mx-0 text-left">
33+
<a
34+
href="/conf/"
35+
className="flex font-medium md:items-center justify-start text-gray-900"
36+
>
37+
<img
38+
src="/img/conf/graphql-conf-logo.svg"
39+
className="w-[200px]"
40+
/>
41+
</a>
42+
</div>
43+
<div className="grow flex flex-wrap justify-between lg:pl-20 -mb-10 md:mt-0 mt-10 text-left">
44+
{links.map((link, i) => (
45+
<div key={i} className="md:w-1/3 md:px-4">
46+
<div className="list-none mb-10 md:mb-20">
47+
{link.map((link, i) => (
48+
<li key={i}>
49+
<a
50+
href={link.href}
51+
className="text-white font-semibold text-base hover:text-white hover:font-semibold hover:underline"
52+
>
53+
{link.text}
54+
</a>
55+
</li>
56+
))}
57+
</div>
5158
</div>
52-
</div>
53-
))}
59+
))}
60+
</div>
61+
</div>
62+
<div className="container px-5 mt-5 sm:mt-0 py-4 flex flex-wrap flex-col sm:flex-row">
63+
<p className="text-white text-sm text-center sm:text-left">
64+
Copyright © {`${new Date().getFullYear()}`} The GraphQL Foundation.
65+
All rights reserved.
66+
<br />
67+
For web site terms of use, trademark policy and general project
68+
policies please see&nbsp;
69+
<a href="https://lfprojects.org" target="_blank">
70+
https://lfprojects.org
71+
</a>
72+
.
73+
</p>
74+
<span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start items-start">
75+
<SocialIcons />
76+
</span>
5477
</div>
55-
</div>
56-
<div className="container px-5 mt-5 sm:mt-0 py-4 flex flex-wrap flex-col sm:flex-row">
57-
<p className="text-white text-sm text-center sm:text-left">
58-
Copyright © {`${new Date().getFullYear()}`} The GraphQL Foundation.
59-
All rights reserved.
60-
<br />
61-
For web site terms of use, trademark policy and general project
62-
policies please see&nbsp;
63-
<a href="https://lfprojects.org" target="_blank">
64-
https://lfprojects.org
65-
</a>
66-
.
67-
</p>
68-
<span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start items-start">
69-
<SocialIcons />
70-
</span>
71-
</div>
72-
</footer>
78+
</footer>
79+
</>
7380
)
7481
}
7582

‎src/components/Conf/Sponers/index.tsx

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/* eslint-disable tailwindcss/no-custom-classname */
2+
import React from "react"
3+
import { ReactComponent as Stellate } from "../../../../static/img/conf/Sponsors/Stellate.svg"
4+
import { ReactComponent as Postman } from "../../../../static/img/conf/Sponsors/Postman.svg"
5+
import { ReactComponent as Solo } from "../../../../static/img/conf/Sponsors/Solo.svg"
6+
7+
interface Image {
8+
iconPath: string
9+
name: string
10+
link: string
11+
}
12+
13+
function alphabetSort(a: Image, b: Image) {
14+
if (a.name < b.name) {
15+
return -1
16+
}
17+
if (a.name > b.name) {
18+
return 1
19+
}
20+
return 0
21+
}
22+
23+
const sponsorDiamond: Image[] = [
24+
{
25+
iconPath: Postman,
26+
name: "Postman",
27+
link: "https://www.postman.com/",
28+
},
29+
]
30+
31+
const sponsorPlatinum: Image[] = [
32+
{
33+
iconPath: Solo,
34+
name: "Solo.io",
35+
link: "https://www.solo.io/",
36+
},
37+
]
38+
39+
const sponsorSilver: Image[] = [
40+
{
41+
iconPath: Stellate,
42+
name: "Stellate",
43+
link: "https://stellate.co/",
44+
},
45+
]
46+
47+
const SponsersConf = () => {
48+
return (
49+
<div className="bg-white py-10 static">
50+
<h1 className="text-center text-4xl text-[#171E26] font-bold my-8">
51+
Sponsors
52+
</h1>
53+
<h3 className="text-center text-[--rhodamine] font-bold my-10 underline underline-offset-8">
54+
DIAMOND
55+
</h3>
56+
<div className="flex justify-center items-start flex-wrap gap-[20px]">
57+
{sponsorDiamond
58+
.sort((a, b) => alphabetSort(a, b))
59+
.map((sponsor, i) => (
60+
<a
61+
key={i}
62+
className="zoom-diamond flex flex-col items-center text-center w-full h-full"
63+
href={sponsor.link}
64+
target="_blank"
65+
>
66+
<sponsor.iconPath />
67+
</a>
68+
))}
69+
</div>
70+
<h3 className="text-center text-[--rhodamine] font-bold my-20 underline underline-offset-8">
71+
PLATINUM
72+
</h3>
73+
<div className="flex justify-center items-start flex-wrap gap-[20px]">
74+
{sponsorPlatinum
75+
.sort((a, b) => alphabetSort(a, b))
76+
.map((sponsor, i) => (
77+
<a
78+
key={i}
79+
className="zoom-platinum flex flex-col items-center text-center w-full h-full"
80+
href={sponsor.link}
81+
target="_blank"
82+
>
83+
<sponsor.iconPath />
84+
</a>
85+
))}
86+
</div>
87+
<h3 className="text-center text-[--rhodamine] font-bold my-20 underline underline-offset-8">
88+
SILVER
89+
</h3>
90+
<div className="flex justify-center items-start flex-wrap gap-[20px]">
91+
{sponsorSilver
92+
.sort((a, b) => alphabetSort(a, b))
93+
.map((sponsor, i) => (
94+
<a
95+
key={i}
96+
className="zoom-silver flex flex-col items-center text-center w-full h-full"
97+
href={sponsor.link}
98+
target="_blank"
99+
>
100+
<sponsor.iconPath />
101+
</a>
102+
))}
103+
</div>
104+
</div>
105+
)
106+
}
107+
108+
export default SponsersConf

‎static/img/conf/Sponsors/Postman.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)