Skip to content

Commit 513857c

Browse files
jemgillamjemgillam
committed
initial tiers added
1 parent e5687f9 commit 513857c

File tree

2 files changed

+142
-7
lines changed

2 files changed

+142
-7
lines changed

‎src/components/MarketingTier.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from "react";
2+
3+
export default function MarketingTiers({ children }) {
4+
return (
5+
<div
6+
style={{
7+
display: "flex",
8+
flexDirection: "row",
9+
gap: "1rem",
10+
alignItems: "stretch",
11+
}}
12+
>
13+
{children}
14+
</div>
15+
);
16+
}
17+
18+
export class Tier extends React.Component {
19+
render() {
20+
const { name, price, tagline, href, description } = this.props;
21+
22+
return (
23+
<div
24+
style={{
25+
display: "flex",
26+
flexDirection: "column",
27+
justifyItems: "space-between",
28+
alignContent: "flex-start",
29+
backgroundColor: "white",
30+
margin: "0.5em",
31+
padding: "1rem",
32+
borderRadius: "12px",
33+
border: "4px solid #1b1b3d",
34+
color: "#1b3955",
35+
flex: "0 0 33%",
36+
}}
37+
>
38+
<h3>{name}</h3>
39+
<span>
40+
<span style={{ fontSize: "1.5rem" }}>{price}</span>{" "}
41+
<span style={{ fontSize: "0.8rem" }}>/month</span>
42+
</span>
43+
<div class="tc">
44+
<a class="button--solid" href={href}>
45+
Join on GitHub Sponsors{" "}
46+
<span class="fas fa-fw fa-external-link-square-alt" />
47+
</a>
48+
</div>
49+
<h4>{tagline}</h4>
50+
<div>
51+
<span>{description}</span>
52+
</div>
53+
</div>
54+
);
55+
}
56+
}

‎src/pages/sponsor.mdx‎

Lines changed: 86 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import MarketingProduct from "$components/MarketingProduct";
1616
import postgresPostgraphileGraphql from "$images/postgres_postgraphile_graphql.png";
1717
import Testimonial from "$components/MarketingTestimonial";
1818
import Sponsors, { Sponsor } from "$components/MarketingSponsor";
19+
import Tiers, { Tier } from "$components/MarketingTier";
1920

2021
<MarketingLayout blue>
2122
<Hero bg="medium">
@@ -215,20 +216,98 @@ directed and financially sustainable.
215216
to come is through monthly sponsorship.** Crowd-sourced funding enables us to spend the
216217
most time directly working on improving the software, which you and other users then benefit from.
217218

218-
<div class="flex">
219-
<a class="button--solid" href="https://github.com/users/benjie/sponsorship">
220-
Become a Sponsor <span class="fas fa-fw fa-external-link-square-alt" />
221-
</a>
222-
</div>
223-
224219
</MarketingSection>
225220
<MarketingDivide from="dark" to="medium" via="light" down/>
226221
<MarketingSection bg="medium" left maxWidth>
227222

228-
229223
### Sponsor tiers and benefits
230224

225+
As well as ensuring the sustainability and longevity of PostGraphile and the wider Graphile
226+
suite of developer tooling, sponsorship also gives you or your company some additional benefits
227+
such as access to security announcements and being featured in the README files of Graphile’s
228+
main open source projects. Choose the tier which matches your funding goal, higher tiers come
229+
with more benefits.
231230

231+
</MarketingSection>
232+
233+
<MarketingSection bg="medium" left>
234+
235+
<Tiers>
236+
<Tier
237+
name="Supporter"
238+
price="$25"
239+
tagline="Thank you!"
240+
href="https://github.com/sponsors/benjie/sponsorships?tier_id=369"
241+
description={<ul>
242+
<li>Your name on the Graphile Sponsors page</li>
243+
<li>Graphile stickers</li>
244+
<li>Your name among those randomly featured in the PostGraphile CLI</li>
245+
<li>Post job opportunities to our Discord community</li>
246+
<li>Access to the #supporter-lounge on Discord</li>
247+
<li>The warm feeling from knowing you’re supporting Open Source Software</li>
248+
</ul>}
249+
/>
250+
<Tier
251+
name="Production Sponsor"
252+
price="$100"
253+
tagline="Support sustainability"
254+
href="https://github.com/sponsors/benjie/sponsorships?tier_id=368"
255+
description={<ul>
256+
<li>The Supporter tier benefits and...</li>
257+
<li>
258+
Access to <strong>private security announcements</strong>
259+
</li>
260+
<li>
261+
Free access to <a href="https://postgraphile.org/pricing"><strong>PostGraphile V4 Pro</strong></a> and <a href="https://worker.graphile.org/pricing"><strong>Worker Pro</strong></a>
262+
</li>
263+
<li>Access to <a href="https://github.com/graphile-pro"><strong>graphile-pro</strong></a></li>
264+
<li>
265+
Your name and <strong>avatar/logo</strong> featured on our websites
266+
</li>
267+
<li>
268+
Your name <strong>more frequently featured</strong> in the
269+
PostGraphile CLI
270+
</li>
271+
<li>
272+
The warm feeling that comes from knowing you’re making a difference
273+
to the sustainability of the Graphile suite of tooling
274+
</li>
275+
</ul>}
276+
/>
277+
<Tier
278+
name="Featured Sponsor"
279+
price="$500"
280+
tagline="Get featured in the project"
281+
href="https://github.com/sponsors/benjie/sponsorships?tier_id=367"
282+
description={<ul>
283+
<li>The Production tier benefits and...</li>
284+
<li>
285+
Your name and avatar/logo <strong>
286+
featured in the READMEs of Graphile’s main OSS projects</strong> (shown on GitHub and npm)
287+
</li>
288+
<li>
289+
Your name and <strong>avatar/logo prominently featured </strong>on our websites
290+
</li>
291+
<li>
292+
Your name <strong>even more frequently featured</strong> in the PostGraphile CLI
293+
</li>
294+
<li>
295+
Access to <strong>#vip-lounge</strong> on Discord
296+
</li>
297+
<li>
298+
Free access to <strong>
299+
<a href="https://pgrita.com">pgRITA</a>
300+
</strong>
301+
</li>
302+
<li>
303+
The warm feeling that comes from knowing{" "}
304+
<strong>
305+
you’re making a significant difference to the development and sustainability of
306+
PostGraphile, Gra<em>fast</em>, and the wider suite of Graphile developer tooling</strong>
307+
</li>
308+
</ul>}
309+
/>
310+
</Tiers>
232311

233312

234313

0 commit comments

Comments
 (0)