Skip to content

Commit a81bf2e

Browse files
jemgillamjemgillam
authored
Homepage update (#353)
* New homepage and sponsors page to introduce Grafast 🤩
1 parent 25b7c34 commit a81bf2e

File tree

5 files changed

+128
-29
lines changed

5 files changed

+128
-29
lines changed

‎src/components/Layout/index.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -731,6 +731,10 @@ h6 code {
731731
}
732732
}
733733
}
734+
.container {
735+
padding-left: 0.5rem;
736+
padding-right: 0.5rem;
737+
}
734738
}
735739

736740
.plan-tag {

‎src/components/MarketingSponsor.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export class Sponsor extends React.Component {
6262
backgroundColor: plain ? null : "white",
6363
color: plain ? "white" : "#1b3955",
6464
margin: "0.5em",
65-
borderRadius: 0,
65+
borderRadius: "4px",
6666
minHeight: showAvatar ? "8em" : "3em",
6767
fontWeight: "normal",
6868
}}

‎src/pages/index.mdx

Lines changed: 70 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,75 @@ import COLOURS from "$components/colours";
2626
<MarketingSection bg="white">
2727

2828

29+
<Flex>
30+
<Col span="6">
31+
32+
<MarketingProduct
33+
big
34+
name={<span>Introducing Gra<em>fast</em>!</span>}
35+
headline="The next-generation planning and execution engine for GraphQL"
36+
>
37+
38+
Enables greater performance and efficiency via deeper integration into your existing Node.js or remote business logic, no matter the shape of your GraphQL schema.
39+
40+
Gra<em>fast</em> is currently only available to sponsors whilst it is still undergoing heavy iteration; sign up as a sponsor to get access.
41+
42+
Add yourself to our mailing list to be notified when Gra<em>fast</em> is made generally available under the MIT license.
43+
44+
<div class='df flex-row justify-center' style={{height: '3rem'}}>
45+
<div class='ph2 df flex-column justify-center'>
46+
<a class='button--outline' href='/sponsor/'><span class='fas fa-heart' /> Sponsor</a>{ ' '}
47+
</div>
48+
<div class='ph2 df flex-column justify-center'>
49+
<a class='button--solid' href='https://grafast.org' target="_new">grafast.org <span class='fas fa-external-link-square-alt' /></a>{ ' '}
50+
</div>
51+
</div>
52+
</MarketingProduct>
53+
54+
</Col>
55+
<Col span="6">
56+
<p>&nbsp;</p>
57+
<iframe
58+
width="560"
59+
height="315"
60+
src="https://www.youtube-nocookie.com/embed/x0FMjL5-kNI"
61+
title="YouTube video player"
62+
frameborder="1"
63+
style="border: 4px solid #1b1b3d; border-radius: 4px"
64+
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
65+
allowfullscreen>
66+
</iframe>
67+
68+
</Col>
69+
</Flex>
70+
71+
</MarketingSection>
72+
73+
<MarketingDivide from="white" to="medium" via="dark" />
74+
75+
<MarketingSection bg="medium">
76+
77+
## Crowd-funded open-source software
78+
79+
80+
<div style={{maxWidth: '48rem', margin: '0 auto'}}>
81+
82+
We're extremely grateful to our sponsors, for helping to fund ongoing
83+
development on PostGraphile, Graphile Engine, Graphile Worker and Graphile
84+
Migrate.
85+
**THANK YOU!**
86+
87+
</div>
88+
89+
<a class='button--solid' href='/sponsor/'><span class='fas fa-arrow-right' /> Learn more about sponsors and sponsorship</a>
90+
91+
92+
</MarketingSection>
93+
94+
<MarketingDivide from="medium" to="white" via="light" />
95+
96+
<MarketingSection bg="white">
97+
2998
<Flex>
3099
<Col className="center" span="8">
31100
<img src={postgresPostgraphileGraphql} style={{ maxWidth: "80%" }} alt="PostGraphile" />
@@ -121,29 +190,8 @@ Experimental, being developed in the open. Focusses on fast iteration speed.
121190

122191
</MarketingSection>
123192

124-
<MarketingDivide from="dark" to="light" down />
125-
126-
<MarketingSection bg="light">
127-
128-
## Crowd-funded open-source software
129-
130-
131-
<div style={{maxWidth: '48rem', margin: '0 auto'}}>
132-
133-
We're extremely grateful to our sponsors, for helping to fund ongoing
134-
development on PostGraphile, Graphile Engine, Graphile Worker and Graphile
135-
Migrate.
136-
**THANK YOU!**
137-
138-
</div>
139-
140-
<a class='button--solid-light' href='/sponsor/'><span class='fas fa-arrow-right' /> Learn more about sponsors and sponsorship</a>
141-
142-
143-
</MarketingSection>
144-
193+
<MarketingDivide from="dark" to="nodes" via="light" />
145194

146-
<MarketingDivide from="light" to="nodes" />
147195
<MarketingSection bg="nodes">
148196
<MarketingProduct big name="Development Support" headline="Priority text support straight from the maintainer" more="/support/">
149197
Give your company access to the knowledge and experience of the Graphile team through your chat server and GitHub/GitLab organisation. Reference your code verbatim and arrange calls for any trickier topics.

‎src/pages/sponsor.mdx

Lines changed: 53 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import MarketingSection from "$components/MarketingSection";
1212
import MarketingDivide from "$components/MarketingDivide";
1313
import MarketingCodebox from "$components/MarketingCodebox";
1414
import MarketingBullets from "$components/MarketingBullets";
15+
import MarketingProduct from "$components/MarketingProduct";
1516
import postgresPostgraphileGraphql from "$images/postgres_postgraphile_graphql.png";
1617
import Testimonial from "$components/MarketingTestimonial";
1718
import Sponsors, { Sponsor } from "$components/MarketingSponsor";
@@ -40,10 +41,56 @@ import Sponsors, { Sponsor } from "$components/MarketingSponsor";
4041
</div>
4142

4243
</MarketingSection>
43-
<MarketingDivide from="white" to="medium" />
44+
45+
<MarketingDivide from="white" to="medium" via="light" />
46+
47+
<MarketingSection bg="medium">
48+
49+
</MarketingSection>
4450

4551
<MarketingSection bg="medium">
4652

53+
54+
<Flex>
55+
<Col span="6">
56+
57+
<img
58+
src="/images/grafast-hero.png"
59+
alt="A Grafast superhero reveals the Grafast heart logo on their chest"
60+
class='br2'
61+
/>
62+
63+
</Col>
64+
<Col span="6">
65+
<MarketingProduct
66+
big
67+
name={<span>Sponsor Gra<em>fast</em></span>}
68+
headline="The next-generation planning and execution engine for GraphQL"
69+
>
70+
71+
72+
73+
Grafast is currently only available to Graphile sponsors as it is still undergoing heavy iteration; sign up as a sponsor to get access to the binaries and documentation (sponsor at the Featured Tier for access to the repository, issues and support!)
74+
75+
<div class='df flex-row justify-center' style={{height: '3rem'}}>
76+
<div class='ph2 df flex-column justify-center'>
77+
<a class='button--solid' href='https://github.com/users/benjie/sponsorship'><span class='fas fa-heart' /> Sponsor on GitHub <span class='fas fa-external-link-square-alt' /></a>{ ' '}
78+
</div>
79+
<div class='ph2 df flex-column justify-center'>
80+
<a class='button--solid' href='https://grafast.org' target="_new">grafast.org <span class='fas fa-external-link-square-alt' /></a>{ ' '}
81+
</div>
82+
</div>
83+
84+
</MarketingProduct>
85+
</Col>
86+
</Flex>
87+
88+
</MarketingSection>
89+
90+
<MarketingDivide from="medium" to="dark" via="light"/>
91+
92+
<MarketingSection bg="dark">
93+
4794
### Who sponsors Graphile?
4895

4996
<div style={{maxWidth: '48rem', margin: '0 auto'}}>
@@ -195,9 +242,9 @@ YOU!**
195242
<!-- SPONSORS_END -->
196243

197244
</MarketingSection>
198-
<MarketingDivide from="medium" to="dark" via="light" down />
245+
<MarketingDivide from="dark" to="medium" via="light" down />
199246

200-
<MarketingSection bg="dark" left maxWidth>
247+
<MarketingSection bg="medium" left maxWidth>
201248

202249
### Why "crowd-funded open-source project"?
203250

@@ -218,8 +265,8 @@ improving the software, which you and other users then benefit from.
218265
</div>
219266

220267
</MarketingSection>
221-
<MarketingDivide from="dark" to="light" />
222-
<MarketingSection bg="light" left maxWidth>
268+
<MarketingDivide from="medium" to="dark" />
269+
<MarketingSection bg="dark" left maxWidth>
223270

224271
### How is sponsorship money spent?
225272

@@ -228,7 +275,7 @@ and releases of the PostGraphile and Graphile suite. A small amount is also used
228275
to send rewards such as stickers and learning materials to our backers.
229276

230277
</MarketingSection>
231-
<MarketingDivide from="light" to="medium" down />
278+
<MarketingDivide from="dark" to="medium" down />
232279
<MarketingSection bg="medium" left maxWidth>
233280

234281
### Is sponsorship required to use Graphile's OSS?

‎static/images/grafast-hero.png

165 KB
Loading

0 commit comments

Comments
 (0)