Skip to content

Commit ac811a8

Browse files
jemgillamjemgillam
committed
Begin annual plan tier
1 parent 9ef9463 commit ac811a8

File tree

3 files changed

+86
-74
lines changed

3 files changed

+86
-74
lines changed

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

Lines changed: 55 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,56 @@ import React from "react";
55

66
const TierList = [
77
{
8-
title: "Private Advisor Offer",
9-
tagline: "Development support in your chat server & code repository",
8+
title: "Monthly Plan",
9+
tagline: "Pay month-to-month with full flexibility",
1010
pricing: "$999",
11-
annual: "$9,999",
1211
was: "$1,500",
1312
link: "https://github.com/sponsors/benjie/sponsorships?tier_id=42012",
1413
buttonText: "",
15-
contact: "mailto:[email protected]?subject=Private%20Advisor%20enquiry",
16-
contactText: "",
14+
frequency: "per month",
15+
comparison: "",
16+
description: (
17+
<>
18+
<ul>
19+
<li>All the benefits of a Featured Sponsor and...</li>
20+
<li>One-to-one access to the Graphile team throughout the year </li>
21+
<li>
22+
<strong>Priority support straight from the maintainer</strong>
23+
</li>
24+
<li>
25+
Add the Graphile team to your chat server for timely responses
26+
</li>
27+
<li>Add the Graphile team to your GitHub/GitLab organization</li>
28+
<li>Reference your code verbatim</li>
29+
<li>Calls arranged as required</li>
30+
<li>NDA available</li>
31+
<li>
32+
<strong>Access to discounted consultancy packages</strong>
33+
</li>
34+
<li>
35+
The warm feeling that comes from knowing{" "}
36+
<strong>
37+
you’re making a significant difference to Graphile Worker’s
38+
development and sustainability
39+
</strong>
40+
</li>
41+
</ul>
42+
</>
43+
),
44+
},
45+
{
46+
title: "Annual Plan",
47+
tagline: "Maximum savings with full year commitment",
48+
pricing: "$9,999",
49+
was: "$11,988",
50+
link: "mailto:[email protected]?subject=Private%20Advisor%20enquiry",
51+
buttonText: "",
52+
frequency: "per year",
53+
comparison: "That's just $833.25/month",
54+
badge: "Best Value - Save $1,999 ",
55+
featured: true,
1756
description: (
1857
<>
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 Graphile
23-
Worker, PostGraphile 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>
2858
<ul>
2959
<li>All the benefits of a Featured Sponsor and...</li>
3060
<li>One-to-one access to the Graphile team throughout the year </li>
@@ -61,27 +91,26 @@ function Tier({
6191
buttonText,
6292
description,
6393
pricing,
64-
annual,
6594
was,
66-
contact,
67-
contactText,
95+
frequency,
96+
comparison,
97+
badge,
98+
featured,
6899
}) {
69100
return (
70-
<div className={styles.tier}>
101+
<div className={clsx(styles.tier, featured ? styles.featured : null)}>
102+
{badge ? <div className={styles.badge}>{badge}</div> : null}
71103
<div className={styles.banner}>
72104
<div className={styles.info}>
73105
<h2 className={styles.title}>{title}</h2>
106+
<h3 className={styles.tagline}>{tagline}</h3>
74107
<h3 className={styles.tagline}>
75-
<span className={styles.was}>{was}</span>{" "}
108+
<span className={styles.was}>{was}</span>
109+
<br />
76110
<span className={styles.price}>{pricing}</span>&nbsp;
77-
<span className={styles.note}>/month</span>
111+
<span className={styles.note}>{frequency}</span>
112+
<span className={styles.note}>{comparison}</span>
78113
</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>
85114
</div>
86115
<div className={styles.info}>
87116
<Link
@@ -90,18 +119,8 @@ function Tier({
90119
>
91120
{buttonText}
92121
</Link>
93-
<Link
94-
className={clsx(
95-
"button button--outline button--lg",
96-
styles.borderbutton,
97-
)}
98-
to={contact}
99-
>
100-
{contactText}
101-
</Link>
102122
</div>
103123
</div>
104-
<h3 className={styles.tagline}>{tagline}</h3>
105124
<p>{description}</p>
106125
</div>
107126
);

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

Lines changed: 24 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
.tiers {
22
display: flex;
33
width: 100%;
4-
flex-direction: column;
4+
flex-direction: row;
55
}
66

77
.tierRow {
88
justify-content: center;
99
gap: 2rem;
1010
display: flex;
11-
flex-direction: column;
1211
}
1312

1413
.tier {
14+
position: relative;
1515
display: flex;
1616
flex-direction: column;
17-
flex: 0 0 75%;
17+
flex: 0 0 33%;
1818
justify-content: flex-start;
1919
align-items: flex-start;
2020
font-weight: normal;
@@ -23,6 +23,25 @@
2323
padding: 1rem;
2424
border: 2px solid var(--ifm-color-primary-darker);
2525
border-radius: 12px;
26+
&.featured {
27+
background-color: #fff4ec;
28+
border: 3px solid var(--ifm-color-primary);
29+
}
30+
}
31+
32+
.badge {
33+
position: absolute;
34+
left: 50%;
35+
top: 0%;
36+
transform: translate(-50%, -50%);
37+
background-color: white;
38+
border-radius: calc(infinity * 1px);
39+
padding: 0.4rem;
40+
.featured & {
41+
background-color: var(--ifm-color-primary);
42+
color: white;
43+
font-weight: bold;
44+
}
2645
}
2746

2847
[data-theme="dark"] .tier {
@@ -32,8 +51,8 @@
3251
.banner {
3352
display: flex;
3453
width: 100%;
35-
flex: 0 0 33%;
3654
justify-content: space-between;
55+
flex-direction: column;
3756
}
3857

3958
.info {
@@ -105,38 +124,8 @@
105124
background-color: var(--ifm-color-primary-lightest);
106125
}
107126

108-
.borderbutton {
109-
composes: button;
110-
}
111-
112-
.tier:nth-child(n) .borderbutton {
113-
background-color: transparent;
114-
border: 1px solid var(--ifm-color-primary-darker);
115-
color: var(--ifm-color-primary-darker);
116-
}
117-
118-
.tier:nth-child(n) .borderbutton:hover {
119-
border: 1px solid var(--ifm-color-primary-darkest);
120-
color: var(--ifm-color-primary-darkest);
121-
}
122-
123-
[data-theme="dark"] .tier:nth-child(n) .borderbutton {
124-
border: 1px solid var(--ifm-color-primary-lightest);
125-
color: var(--ifm-color-primary-lightest);
126-
}
127-
128-
[data-theme="dark"] .tier:nth-child(n) .borderbutton:hover {
129-
border: 1px solid var(--ifm-color-primary);
130-
color: var(--ifm-color-primary);
131-
background-color: transparent;
132-
}
133-
134127
.button:before {
135-
content: "Join on GitHub Sponsors";
136-
}
137-
138-
.borderbutton:before {
139-
content: "Contact for bespoke service";
128+
content: "Start Plan";
140129
}
141130

142131
@media screen and (max-width: 1200px) {
@@ -153,7 +142,4 @@
153142
.button:before {
154143
content: "GitHub Sponsors";
155144
}
156-
.borderbutton:before {
157-
content: "Contact";
158-
}
159145
}

‎website/src/pages/sponsors.mdx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,4 +112,11 @@ benefits.
112112

113113
## Development Support
114114

115+
Access development support for Graphile projects through the Private Advisor
116+
tier, giving your organization access to the knowledge and experience of the
117+
Graphile team for any issues you have with Graphile Worker, PostGraphile and the
118+
wider Graphile suite, and other tools in the ecosystem such as TypeScript, SQL,
119+
Node.js, GraphQL and more. If you’re running any of the Graphile tools, you
120+
won’t find anyone more qualified to help.
121+
115122
<TierPlusList />

0 commit comments

Comments
 (0)