Skip to content

Commit a076762

Browse files
jemgillamjemgillam
committed
Migrate over tier components
1 parent 757e1ec commit a076762

File tree

5 files changed

+583
-0
lines changed

5 files changed

+583
-0
lines changed

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

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
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>
23+
Your name among those randomly featured in the PostGraphile CLI
24+
</li>
25+
<li>Post job opportunities to our Discord community</li>
26+
<li>PostGraphile stickers</li>
27+
<li>Access to the #supporter-lounge on Discord</li>
28+
<li>
29+
The warm feeling from knowing you’re supporting Open Source Software
30+
</li>
31+
</ul>
32+
</>
33+
),
34+
},
35+
{
36+
title: "Production Sponsor",
37+
tagline: "Support sustainability",
38+
pricing: "$100",
39+
link: "https://github.com/sponsors/benjie/sponsorships?tier_id=368",
40+
buttonText: "",
41+
description: (
42+
<>
43+
<ul>
44+
<li>The Supporter tier benefits and...</li>
45+
<li>
46+
Access to <strong>private security announcements</strong>
47+
</li>
48+
<li>
49+
Free access to <strong>PostGraphile V4 Pro</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+
Your name <strong>more frequently featured</strong> in the
63+
PostGraphile CLI
64+
</li>
65+
<li>
66+
The warm feeling that comes from knowing you’re making a difference
67+
to PostGraphile’s development and sustainability
68+
</li>
69+
</ul>
70+
</>
71+
),
72+
},
73+
{
74+
title: "Featured Sponsor",
75+
tagline: "Get featured in the project",
76+
pricing: "$500",
77+
link: "https://github.com/sponsors/benjie/sponsorships?tier_id=367",
78+
buttonText: "",
79+
description: (
80+
<>
81+
<ul>
82+
<li>The Production tier benefits and...</li>
83+
<li>
84+
Your name and avatar/logo{" "}
85+
<strong>
86+
featured in the READMEs of Graphile’s main OSS projects
87+
</strong>{" "}
88+
(shown on GitHub and npm)
89+
</li>
90+
<li>
91+
Your name and <strong>avatar/logo prominently featured </strong>on
92+
our websites
93+
</li>
94+
<li>
95+
Your name <strong>even more frequently featured</strong> in the
96+
PostGraphile CLI
97+
</li>
98+
<li>
99+
Access to <strong>#vip-lounge</strong> on Discord
100+
</li>
101+
<li>
102+
Free access to{" "}
103+
<strong>
104+
<Link to="https://pgrita.com">pgRITA</Link>
105+
</strong>
106+
</li>
107+
<li>
108+
The warm feeling that comes from knowing{" "}
109+
<strong>
110+
you’re making a significant difference to PostGraphile’s
111+
development and sustainability
112+
</strong>
113+
</li>
114+
</ul>
115+
</>
116+
),
117+
},
118+
];
119+
120+
function Tier({ title, tagline, link, buttonText, description, pricing }) {
121+
return (
122+
<div className={styles.tier}>
123+
<h2 className={styles.title}>{title}</h2>
124+
<h3 className={styles.tagline}>
125+
<span className={styles.price}>{pricing}</span>&nbsp;
126+
<span className={styles.note}>/month</span>
127+
</h3>
128+
<Link
129+
className={clsx("button button--primary button--lg", styles.button)}
130+
to={link}
131+
>
132+
{buttonText}
133+
</Link>
134+
<h3 className={styles.tagline}>{tagline}</h3>
135+
<p>{description}</p>
136+
</div>
137+
);
138+
}
139+
140+
export default function List() {
141+
return (
142+
<section className={clsx("padding-vert--md")}>
143+
<div className={clsx("", styles.tiers)}>
144+
<div className={clsx(styles.tierRow)}>
145+
{TierList.map((props, idx) => (
146+
<Tier key={idx} {...props} />
147+
))}
148+
</div>
149+
</div>
150+
</section>
151+
);
152+
}

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

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
.tiers {
2+
display: flex;
3+
width: 100%;
4+
flex-direction: row;
5+
}
6+
7+
.tierRow {
8+
justify-content: center;
9+
gap: 2rem;
10+
display: flex;
11+
}
12+
13+
.tier {
14+
display: flex;
15+
flex-direction: column;
16+
flex: 0 0 30%;
17+
justify-content: flex-start;
18+
align-items: flex-start;
19+
font-weight: normal;
20+
font-size: 0.9rem;
21+
margin: 0.5rem;
22+
padding: 1rem;
23+
border: 2px solid var(--ifm-color-primary-darker);
24+
border-radius: 12px;
25+
}
26+
27+
.tier:nth-child(2) {
28+
border: 3px solid var(--ifm-color-primary);
29+
}
30+
31+
[data-theme="dark"] .tier {
32+
border: 3px solid var(--ifm-color-primary-light);
33+
}
34+
35+
[data-theme="dark"] .tier:nth-child(2) {
36+
border: 3px solid var(--ifm-color-primary);
37+
}
38+
39+
.title,
40+
.note {
41+
color: var(--ifm-color-primary-darker);
42+
}
43+
44+
[data-theme="dark"] .title,
45+
[data-theme="dark"] .note {
46+
color: var(--ifm-color-primary-lighter);
47+
}
48+
49+
.tagline {
50+
font-weight: var(--ifm-heading-font-weight);
51+
}
52+
53+
.price {
54+
font-weight: bold;
55+
}
56+
57+
.note {
58+
font-size: 0.8rem;
59+
font-weight: var(--ifm-font-weight-base);
60+
}
61+
62+
.tier:nth-child(2) .title,
63+
.tier:nth-child(2) .note {
64+
color: var(--ifm-color-primary);
65+
}
66+
67+
[data-theme="dark"] .tier:nth-child(2) .title,
68+
[data-theme="dark"] .tier:nth-child(2) .note {
69+
color: var(--ifm-color-primary);
70+
}
71+
72+
.button {
73+
width: 100%;
74+
margin: 1rem 0 1rem 0;
75+
background-color: var(--ifm-color-primary-darker);
76+
border-color: var(--ifm-color-primary-darker);
77+
}
78+
79+
.button:before {
80+
content: "Join on GitHub Sponsors";
81+
}
82+
83+
.tier:nth-child(2) .button {
84+
background-color: var(--ifm-color-primary);
85+
border-color: var(--ifm-color-primary);
86+
}
87+
88+
.tier .button:hover {
89+
background-color: var(--ifm-color-primary-darkest);
90+
border-color: var(--ifm-color-primary-darkest);
91+
}
92+
93+
[data-theme="dark"] .button {
94+
background-color: var(--ifm-color-primary-light);
95+
border-color: var(--ifm-color-primary-light);
96+
}
97+
98+
[data-theme="dark"] .tier:nth-child(2) .button {
99+
background-color: var(--ifm-color-primary);
100+
border-color: var(--ifm-color-primary);
101+
}
102+
103+
[data-theme="dark"] .tier .button:hover {
104+
background-color: var(--ifm-color-primary-lightest);
105+
border-color: var(--ifm-color-primary-lightest);
106+
}
107+
108+
@media screen and (max-width: 1200px) {
109+
.tierRow {
110+
flex-direction: column;
111+
gap: 0.5rem;
112+
}
113+
.tier {
114+
flex: 0 0 auto;
115+
font-size: 1rem;
116+
margin: 0;
117+
}
118+
.button:before {
119+
content: "GitHub Sponsors";
120+
}
121+
}

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

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import Link from "@docusaurus/Link";
2+
import styles from "@site/src/components/TiersPlus/styles.module.css";
3+
import clsx from "clsx";
4+
import React from "react";
5+
6+
const TierList = [
7+
{
8+
title: "Private Advisor Offer",
9+
tagline: "Development support in your chat server & code repository",
10+
pricing: "$999",
11+
annual: "$9,999",
12+
was: "$1,500",
13+
link: "https://github.com/sponsors/benjie/sponsorships?tier_id=42012",
14+
buttonText: "",
15+
contact: "mailto:[email protected]?subject=Private%20Advisor%20enquiry",
16+
contactText: "",
17+
description: (
18+
<>
19+
<div className={styles.description}>
20+
Access development support for Graphile projects through the Private
21+
Advisor tier, giving your organization access to the knowledge and
22+
experience of the Graphile team for any issues you have with{" "}
23+
PostGraphile, Grafast and the wider Graphile suite, and other tools in
24+
the ecosystem such as TypeScript, SQL, Node.js, GraphQL and more. If
25+
you’re running any of the Graphile tools, you won’t find anyone more
26+
qualified to help.
27+
</div>
28+
<ul>
29+
<li>All the benefits of a Featured Sponsor and...</li>
30+
<li>One-to-one access to the Graphile team throughout the year </li>
31+
<li>
32+
<strong>Priority support straight from the maintainer</strong>
33+
</li>
34+
<li>
35+
Add the Graphile team to your chat server for timely responses
36+
</li>
37+
<li>Add the Graphile team to your GitHub/GitLab organization</li>
38+
<li>Reference your code verbatim</li>
39+
<li>Calls arranged as required</li>
40+
<li>NDA available</li>
41+
<li>
42+
<strong>Access to discounted consultancy packages</strong>
43+
</li>
44+
<li>
45+
The warm feeling that comes from knowing{" "}
46+
<strong>
47+
you’re making a significant difference to PostGraphile’s
48+
development and sustainability
49+
</strong>
50+
</li>
51+
</ul>
52+
</>
53+
),
54+
},
55+
];
56+
57+
function Tier({
58+
title,
59+
tagline,
60+
link,
61+
buttonText,
62+
description,
63+
pricing,
64+
annual,
65+
was,
66+
contact,
67+
contactText,
68+
}) {
69+
return (
70+
<div className={styles.tier}>
71+
<div className={styles.banner}>
72+
<div className={styles.info}>
73+
<h2 className={styles.title}>{title}</h2>
74+
<h3 className={styles.tagline}>
75+
<span className={styles.was}>{was}</span>{" "}
76+
<span className={styles.price}>{pricing}</span>&nbsp;
77+
<span className={styles.note}>/month</span>
78+
</h3>
79+
<h4 className={styles.tagline}>
80+
<span className={styles.note}>
81+
or <span className={styles.tagline}>{annual}</span>&nbsp;/year -
82+
annual discount applied
83+
</span>
84+
</h4>
85+
</div>
86+
<div className={styles.info}>
87+
<Link
88+
className={clsx("button button--primary button--lg", styles.button)}
89+
to={link}
90+
>
91+
{buttonText}
92+
</Link>
93+
<Link
94+
className={clsx(
95+
"button button--outline button--lg",
96+
styles.borderbutton,
97+
)}
98+
to={contact}
99+
>
100+
{contactText}
101+
</Link>
102+
</div>
103+
</div>
104+
<h3 className={styles.tagline}>{tagline}</h3>
105+
<p>{description}</p>
106+
</div>
107+
);
108+
}
109+
110+
export default function List() {
111+
return (
112+
<section className="padding-vert--sm">
113+
<div className={styles.tiers}>
114+
<div className={clsx(styles.tierRow)}>
115+
{TierList.map((props, idx) => (
116+
<Tier key={idx} {...props} />
117+
))}
118+
</div>
119+
</div>
120+
</section>
121+
);
122+
}

0 commit comments

Comments
 (0)