Skip to content

Commit bc3d4c7

Browse files
benjiebenjie
authored
website: 2026 revamp Sponsor page (#549)
2 parents 324e169 + 683d9c7 commit bc3d4c7

16 files changed

Lines changed: 1063 additions & 67 deletions

File tree

‎website/docusaurus.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,11 @@ const config = {
171171
label: "Sponsor",
172172
position: "right",
173173
},
174+
{
175+
to: "support",
176+
label: "Support",
177+
position: "right",
178+
},
174179
{
175180
to: "pricing",
176181
label: "Go Pro",

‎website/src/components/Sponsor/index.js‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,29 @@
11
import Link from "@docusaurus/Link";
22
import styles from "@site/src/components/Sponsor/styles.module.css";
3+
import FallbackAvatar from "@site/static/img/avatar.svg";
34
import clsx from "clsx";
45
import React, { useContext } from "react";
56

67
import { SponsorContext } from "../../contexts/sponsor";
78

9+
function Avatar({ src }) {
10+
return src ? (
11+
<img className={styles.avatar} src={src} />
12+
) : (
13+
<FallbackAvatar className={styles.avatar} />
14+
);
15+
}
16+
17+
function LinkTo({ href, name }) {
18+
return href ? (
19+
<Link className={styles.name} to={href}>
20+
{name}
21+
</Link>
22+
) : (
23+
<div className={styles.name}>{name}</div>
24+
);
25+
}
26+
827
export default function Sponsor({
928
name,
1029
avatar,
@@ -15,6 +34,7 @@ export default function Sponsor({
1534
}) {
1635
const level = useContext(SponsorContext);
1736
const showAvatar = level === "featured" || level === "leaders";
37+
1838
return (
1939
<div
2040
className={clsx(
@@ -27,18 +47,10 @@ export default function Sponsor({
2747
)}
2848
>
2949
{showAvatar ? (
30-
<img
31-
className={styles.avatar}
32-
src={"https://www.graphile.org" + avatar}
33-
/>
50+
<Avatar src={avatar ? "https://www.graphile.org" + avatar : null} />
3451
) : null}
3552

36-
<Link
37-
className={styles.name}
38-
to={href ?? "https://www.graphile.org/sponsor"}
39-
>
40-
{name}
41-
</Link>
53+
<LinkTo href={href} name={name} />
4254
</div>
4355
);
4456
}

‎website/src/components/Sponsor/styles.module.css‎

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,29 @@
77
margin: 0.5rem;
88
padding: 1rem;
99
flex: 0 0 18rem;
10-
font-size: 1.5rem;
10+
font-size: 1.2rem;
1111
}
12-
.featured .name {
13-
font-size: 2rem;
14-
padding-top: 1rem;
12+
13+
.leaders {
14+
flex: 0 0 12rem;
1515
}
1616

17-
.featured {
17+
.featured,
18+
.leaders {
1819
border: 3px solid var(--ifm-color-primary-dark);
1920
background: white;
2021
border-radius: 12px;
2122
}
2223

24+
.featured .name {
25+
font-size: 2rem;
26+
padding-top: 1rem;
27+
}
28+
29+
.leaders .name {
30+
font-size: 1.2rem;
31+
padding-top: 0.8rem;
32+
}
2333
.name {
2434
color: var(--ifm-color-primary-darker);
2535
text-align: center;
@@ -41,12 +51,18 @@
4151
color: var(--ifm-color-primary);
4252
}
4353

44-
img.avatar {
54+
.featured .avatar {
4555
border-radius: 10rem;
4656
width: 10rem;
4757
height: 10rem;
4858
}
4959

60+
.leaders .avatar {
61+
border-radius: 5rem;
62+
width: 5rem;
63+
height: 5rem;
64+
}
65+
5066
.business {
5167
}
5268

@@ -58,3 +74,23 @@ img.avatar {
5874
border-radius: inherit;
5975
border: inherit;
6076
}
77+
78+
.backers:last-child {
79+
display: none;
80+
}
81+
82+
.backers:first-child {
83+
display: flex;
84+
}
85+
86+
@media screen and (max-width: 995px) {
87+
.leaders {
88+
display: none;
89+
}
90+
.backers:first-child {
91+
display: none;
92+
}
93+
.backers:last-child {
94+
display: flex;
95+
}
96+
}

‎website/src/components/Sponsors/styles.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.sponsorContainer {
2+
composes: wide from global;
23
display: flex;
34
flex-wrap: wrap;
45
align-items: space-around;

‎website/src/components/TierPlusButtons/index.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Link from "@docusaurus/Link";
2+
import styles from "@site/src/components/TierPlusButtons/styles.module.css";
3+
import clsx from "clsx";
4+
import React from "react";
5+
6+
export default function TierPlusButtons() {
7+
return (
8+
<div className={clsx(styles.sponsorbuttons)}>
9+
<Link
10+
className={clsx(
11+
"button button--primary button--lg",
12+
styles.sponsorbutton,
13+
)}
14+
to="https://github.com/users/benjie/sponsorship"
15+
></Link>
16+
<Link
17+
className={clsx(
18+
"button button--primary button--lg",
19+
styles.borderbutton,
20+
)}
21+
to="mailto:team@graphile.com?subject=Private%20Advisor%20enquiry"
22+
></Link>
23+
</div>
24+
);
25+
}

‎website/src/components/TierPlusButtons/styles.module.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.sponsorbuttons {
2+
display: flex;
3+
justify-content: center;
4+
margin-top: 2rem;
5+
margin-bottom: 1.5rem;
6+
}
7+
8+
.borderbutton {
9+
color: white;
10+
text-transform: uppercase;
11+
max-width: 100%;
12+
margin-left: 1rem;
13+
border: 1px solid var(--ifm-color-primary);
14+
}
15+
16+
.borderbutton:hover {
17+
border-radius: 7px;
18+
border: 1px solid var(--ifm-color-primary-darkest);
19+
background-color: var(--ifm-color-primary-darkest);
20+
}
21+
22+
.sponsorbutton {
23+
text-transform: uppercase;
24+
max-width: 100%;
25+
border: 1px solid var(--ifm-color-primary-darker);
26+
background-color: var(--ifm-color-primary-darker);
27+
}
28+
29+
.sponsorbutton:before {
30+
content: "Start Monthly Plan";
31+
}
32+
33+
.borderbutton:before {
34+
content: "Contact Graphile";
35+
}
36+
37+
.sponsorbutton:hover {
38+
background-color: var(--ifm-color-primary-darkest);
39+
border: 1px solid var(--ifm-color-primary-darkest);
40+
}
41+
42+
[data-theme="dark"] .sponsorbutton {
43+
border: 1px solid var(--ifm-color-primary-light);
44+
background-color: var(--ifm-color-primary-light);
45+
}
46+
47+
[data-theme="dark"] .borderbutton {
48+
color: black;
49+
}
50+
51+
[data-theme="dark"] .sponsorbutton:hover {
52+
border: 1px solid var(--ifm-color-primary-lightest);
53+
background-color: var(--ifm-color-primary-lightest);
54+
}
55+
56+
[data-theme="dark"] .borderbutton:hover {
57+
border: 1px solid var(--ifm-color-primary-lightest);
58+
background-color: var(--ifm-color-primary-lightest);
59+
}
60+
61+
@media screen and (max-width: 995px) {
62+
.sponsorbuttons {
63+
display: flex;
64+
flex-direction: column;
65+
}
66+
.borderbutton {
67+
margin-top: 1rem;
68+
margin-left: 0rem;
69+
}
70+
.borderbutton:before {
71+
content: "Contact";
72+
}
73+
}

‎website/src/components/Tiers/index.js‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import Link from "@docusaurus/Link";
2+
import styles from "@site/src/components/Tiers/styles.module.css";
3+
import clsx from "clsx";
4+
import React from "react";
5+
6+
const TierList = [
7+
{
8+
title: "Supporter",
9+
tagline: "Thank you!",
10+
pricing: "$25",
11+
link: "https://github.com/sponsors/benjie/sponsorships?tier_id=369",
12+
buttonText: "",
13+
description: (
14+
<>
15+
<ul>
16+
<li>
17+
Your name on the{" "}
18+
<Link to="https://graphile.org/sponsor">
19+
Graphile Sponsors page
20+
</Link>{" "}
21+
</li>
22+
<li>Post job opportunities to our Discord community</li>
23+
<li>Graphile Worker stickers</li>
24+
<li>Access to the #supporter-lounge on Discord</li>
25+
<li>
26+
The warm feeling from knowing you’re supporting Open Source Software
27+
</li>
28+
</ul>
29+
</>
30+
),
31+
},
32+
{
33+
title: "Production Sponsor",
34+
tagline: "Support sustainability",
35+
pricing: "$100",
36+
link: "https://github.com/sponsors/benjie/sponsorships?tier_id=368",
37+
buttonText: "",
38+
description: (
39+
<>
40+
<ul>
41+
<li>The Supporter tier benefits and...</li>
42+
<li>
43+
Access to <strong>private security announcements</strong>
44+
</li>
45+
<li>
46+
Free access to{" "}
47+
<strong>
48+
<Link to="/pricing">Worker Pro</Link>
49+
</strong>
50+
</li>
51+
<li>
52+
Access to{" "}
53+
<Link to="https://github.com/graphile-pro">
54+
<strong>graphile-pro</strong>
55+
</Link>
56+
</li>
57+
<li>
58+
Your name and <strong>avatar/logo</strong> featured on our websites,
59+
including this one
60+
</li>
61+
<li>
62+
The warm feeling that comes from knowing you’re making a difference
63+
to Graphile Worker’s development and sustainability
64+
</li>
65+
</ul>
66+
</>
67+
),
68+
},
69+
{
70+
title: "Featured Sponsor",
71+
tagline: "Get featured in the project",
72+
pricing: "$500",
73+
link: "https://github.com/sponsors/benjie/sponsorships?tier_id=367",
74+
buttonText: "",
75+
description: (
76+
<>
77+
<ul>
78+
<li>The Production tier benefits and...</li>
79+
<li>
80+
Your name and avatar/logo{" "}
81+
<strong>
82+
featured in the READMEs of Graphile’s main OSS projects
83+
</strong>{" "}
84+
(shown on GitHub and npm)
85+
</li>
86+
<li>
87+
Your name and <strong>avatar/logo prominently featured </strong>on
88+
our websites
89+
</li>
90+
<li>
91+
Access to <strong>#vip-lounge</strong> on Discord
92+
</li>
93+
<li>
94+
Free access to{" "}
95+
<strong>
96+
<Link to="https://pgrita.com">pgRITA</Link>
97+
</strong>
98+
</li>
99+
<li>
100+
The warm feeling that comes from knowing{" "}
101+
<strong>
102+
you’re making a significant difference to Graphile Worker’s
103+
development and sustainability
104+
</strong>
105+
</li>
106+
</ul>
107+
</>
108+
),
109+
},
110+
];
111+
112+
function Tier({ title, tagline, link, buttonText, description, pricing }) {
113+
return (
114+
<div className={styles.tier}>
115+
<h2 className={styles.title}>{title}</h2>
116+
<h3 className={styles.tagline}>
117+
<span className={styles.price}>{pricing}</span>&nbsp;
118+
<span className={styles.note}>/month</span>
119+
</h3>
120+
<Link
121+
className={clsx("button button--primary button--lg", styles.button)}
122+
to={link}
123+
>
124+
{buttonText}
125+
</Link>
126+
<h3 className={styles.tagline}>{tagline}</h3>
127+
<p>{description}</p>
128+
</div>
129+
);
130+
}
131+
132+
export default function List() {
133+
return (
134+
<div className={clsx("", styles.tiers)}>
135+
<div className={clsx(styles.tierRow)}>
136+
{TierList.map((props, idx) => (
137+
<Tier key={idx} {...props} />
138+
))}
139+
</div>
140+
</div>
141+
);
142+
}

0 commit comments

Comments
 (0)