diff --git a/www/src/assets/fabric.svg b/www/src/assets/fabric.svg new file mode 100644 index 0000000000000..550976d95b330 --- /dev/null +++ b/www/src/assets/fabric.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/www/src/assets/formidable.svg b/www/src/assets/formidable.svg new file mode 100644 index 0000000000000..1e11e242f9295 --- /dev/null +++ b/www/src/assets/formidable.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/www/src/assets/logos.js b/www/src/assets/logos.js index de43cee3ae050..3f81471e4b167 100644 --- a/www/src/assets/logos.js +++ b/www/src/assets/logos.js @@ -2,3 +2,6 @@ export JSIcon from "./js.svg" export GraphQLIcon from "./graphql.svg" export WebpackIcon from "./webpack.svg" export ReactJSIcon from "./react.svg" +export SegmentIcon from "./segment.svg" +export FormidableIcon from "./formidable.svg" +export FabricIcon from "./fabric.svg" diff --git a/www/src/assets/segment.svg b/www/src/assets/segment.svg new file mode 100644 index 0000000000000..0a84f10f885a7 --- /dev/null +++ b/www/src/assets/segment.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/www/src/components/cta-button.js b/www/src/components/cta-button.js index a2696faa10782..364b4c52fcc61 100644 --- a/www/src/components/cta-button.js +++ b/www/src/components/cta-button.js @@ -18,11 +18,14 @@ const CtaButton = ({ to, overrideCSS, children }) => fontFamily: options.headerFontFamily.join(`,`), padding: `${rhythm(1 / 3)} ${rhythm(1 / 2)}`, borderRadius: presets.radius, - // Increase specificity - [presets.Phablet]: { + [presets.Tablet]: { ...scale(2 / 5), + padding: `${rhythm(1 / 3)} ${rhythm(3 / 5)}`, + }, + [presets.VHd]: { padding: `${rhythm(1 / 2)} ${rhythm(1)}`, }, + // Increase specificity "&&": { border: `1px solid ${presets.brand}`, boxShadow: `none`, @@ -34,7 +37,7 @@ const CtaButton = ({ to, overrideCSS, children }) => backgroundSize: `30px 30px`, backgroundColor: presets.brand, backgroundImage: `linear-gradient(45deg, rgba(0,0,0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.1) 75%, transparent 75%, transparent)`, - color: `white`, + color: `#fff`, animation: `${stripeAnimation} 2.8s linear infinite`, }, ":after": { diff --git a/www/src/components/discord.js b/www/src/components/discord.js index 0a24dccfcc231..906fc79429ea0 100644 --- a/www/src/components/discord.js +++ b/www/src/components/discord.js @@ -1,4 +1,4 @@ -const DiscordIcon = () => +const DiscordIcon = ({ overrideCSS }) => height="1em" width="1em" preserveAspectRatio="xMidYMid meet" - style={{ verticalAlign: `middle` }} + css={{ verticalAlign: `middle`, ...overrideCSS }} > - -const MastheadBgRightGroup = ({ - brightOff, - darkOff, - cssClassName, - brightBg, -}) => { - const bg = brightBg ? brightBg : presets.brandLight - - return ( - - - - - - - - - ) -} - const MastheadBg = () =>
}, }} /> + - + - - - - - + - + + + {/**/} +
diff --git a/www/src/components/masthead.js b/www/src/components/masthead.js index 9c05e07dcc5a3..2803d37a6e06e 100644 --- a/www/src/components/masthead.js +++ b/www/src/components/masthead.js @@ -10,73 +10,93 @@ import { vP, vPHd, vPVHd, vPVVHd } from "../components/gutters" const MastheadContent = () =>
-

- Blazing-fast static site generator for React -

- - Get Started - {` `} - - +
+

+ Blazing-fast static site generator for React +

+ + Get Started + {` `} + + +
-const Masthead = () => -
- - -
+const Masthead = () => export default Masthead diff --git a/www/src/components/used-by.js b/www/src/components/used-by.js new file mode 100644 index 0000000000000..08af9900c8e31 --- /dev/null +++ b/www/src/components/used-by.js @@ -0,0 +1,122 @@ +import typography, { rhythm, scale, options } from "../utils/typography" +import presets from "../utils/presets" +import { vP, vPHd, vPVHd, vPVVHd } from "../components/gutters" +import { FormidableIcon, FabricIcon, SegmentIcon } from "../assets/logos" + +const Icon = ({ icon }) => +
  • + +
    • + +const UsedBy = () => +
    +
    +

    + Used by +

    +
      + + + +
    +
    +
    + +export default UsedBy diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js index 47fe71309aab1..eade0c19fe8e2 100644 --- a/www/src/layouts/index.js +++ b/www/src/layouts/index.js @@ -124,8 +124,8 @@ module.exports = React.createClass({ const socialIconsStyles = { color: presets.brandLight, - [presets.Tablet]: { - color: isHomepage ? `white` : false, + [presets.Phablet]: { + color: isHomepage ? presets.brandLighter : false, }, [presets.Desktop]: { fontSize: scale(0).fontSize, @@ -164,10 +164,10 @@ module.exports = React.createClass({ position: isHomepage ? `absolute` : false, height: headerHeight, zIndex: `1`, + left: 0, + right: 0, [presets.Tablet]: { position: isHomepage ? `absolute` : `fixed`, - left: 0, - right: 0, }, }} > @@ -236,38 +236,41 @@ module.exports = React.createClass({
    - - {` `} + - + - +
    diff --git a/www/src/pages/index.js b/www/src/pages/index.js index d7e7a20262da3..06876a86d3eee 100644 --- a/www/src/pages/index.js +++ b/www/src/pages/index.js @@ -7,7 +7,9 @@ import { rhythm, scale, options } from "../utils/typography" import { JSIcon, WebpackIcon, ReactJSIcon, GraphQLIcon } from "../assets/logos" import { vP, vPHd, vPVHd, vPVVHd } from "../components/gutters" import Container from "../components/container" -import Masthead from "../components/masthead" +import MastheadContent from "../components/masthead" +import MastheadBg from "../components/masthead-bg" +import UsedBy from "../components/used-by" import Cards from "../components/cards" import Card from "../components/card" import CardHeadline from "../components/card-headline" @@ -22,144 +24,173 @@ const IndexRoute = React.createClass({ console.log(this.props) const blogPosts = this.props.data.allMarkdownRemark return ( -
    - +
    + +
    - - - Modern web tech without the headache - - Enjoy the power of the latest web technologies –{` `} - React.js,{` `} - Webpack,{` `} - modern JavaScript and CSS and more — all setup and waiting for - you to start building. - - - - Bring your own data - - Gatsby’s rich data plugin ecosystem lets you build sites with - the data you want — from one or many sources: Pull data from - headless CMSs, SaaS services, APIs, databases, your file system - & more directly into your pages using{` `} - GraphQL. - - - - Scale to the entire internet - - Gatsby.js is Internet Scale. Forget complicated deploys with - databases and servers and their expensive, time-consuming setup - costs, maintenance, and scaling fears. Gatsby.js builds your - site as “static” files which can be deployed easily on dozens of - services. - - - - - Future-proof your website - - - Don't build a website with last decade's tech. The future of the - web is mobile, JavaScript and APIs—the {` `} - JAMstack. Every website is a - web app and every web app is a website. Gatsby.js is the - universal JavaScript framework you’ve been waiting for. - - - - - - Static - - {` `} - Progressive Web Apps - - - Gatsby.js is a static PWA (Progressive Web App) generator. You - get code and data splitting out-of-the-box. Gatsby loads only - the critical HTML, CSS, data, and JavaScript so your site loads - as fast as possible. Once loaded, Gatsby prefetches resources - for other pages so clicking around the site feels incredibly - fast. - - - - Speed past the competition - - Gatsby.js builds the fastest possible website. Instead of - waiting to generate pages when requested, pre-build pages and - lift them into a global cloud of servers — ready to be delivered - instantly to your users wherever they are. - - + + +
    + + + + Modern web tech without the headache + + + Enjoy the power of the latest web technologies –{` `} + React.js,{` `} + Webpack,{` `} + modern JavaScript and CSS and more — all setup and waiting for + you to start building. + + + + Bring your own data + + Gatsby’s rich data plugin ecosystem lets you build sites with + the data you want — from one or many sources: Pull data from + headless CMSs, SaaS services, APIs, databases, your file + system & more directly into your pages using{` `} + GraphQL. + + + + Scale to the entire internet + + Gatsby.js is Internet Scale. Forget complicated deploys with + databases and servers and their expensive, time-consuming + setup costs, maintenance, and scaling fears. Gatsby.js builds + your site as “static” files which can be deployed easily on + dozens of services. + + + + + Future-proof your website + + + Don't build a website with last decade's tech. The future of + the web is mobile, JavaScript and APIs—the {` `} + JAMstack. Every website is + a web app and every web app is a website. Gatsby.js is the + universal JavaScript framework you’ve been waiting for. + + + + + + Static + + {` `} + Progressive Web Apps + + + Gatsby.js is a static PWA (Progressive Web App) generator. You + get code and data splitting out-of-the-box. Gatsby loads only + the critical HTML, CSS, data, and JavaScript so your site + loads as fast as possible. Once loaded, Gatsby prefetches + resources for other pages so clicking around the site feels + incredibly fast. + + + + Speed past the competition + + Gatsby.js builds the fastest possible website. Instead of + waiting to generate pages when requested, pre-build pages and + lift them into a global cloud of servers — ready to be + delivered instantly to your users wherever they are. + + - + -
    - -
    -

    Curious yet?

    - - It only takes a few minutes to get up and running! - - - Get Started - -
    -     -
    +
    + +
    +

    Curious yet?

    + + It only takes a few minutes to get up and running! + + + Get Started + +
    +     +
    -
    - - {` `} -

    + - Latest from the Gatsby blog -

    - {blogPosts.edges.map(({ node }) => - - )} -     -
    -     + {` `} +

    + Latest from the Gatsby blog +

    + {blogPosts.edges.map(({ node }) => + + )} + +
    +     +
    ) diff --git a/www/src/utils/presets.js b/www/src/utils/presets.js index 3784a8ef53167..11f89c7a66971 100644 --- a/www/src/utils/presets.js +++ b/www/src/utils/presets.js @@ -15,7 +15,6 @@ module.exports = { VVHd: `@media (min-width: 1650px)`, maxWidth: 36, maxWidthWithSidebar: 26, - purple: colors.a[13], lightPurple: colors.b[2], veryLightPurple: colors.b[0], sidebar: `#fcfaff`, @@ -24,7 +23,6 @@ module.exports = { brand: `#744C9E`, brandLight: `#9D7CBF`, brandLighter: `#F5F3F7`, - brandDark: `#744C9E`, // bolder palette by @ArchieHicklin // @see https://github.com/gatsbyjs/gatsby/issues/1173#issuecomment-309415650 accent: `#ffb238`, // "Mustard" @@ -36,5 +34,10 @@ module.exports = { VHdR: 3.5, VVHdR: 4.5, }, + animation: { + curveDefault: `cubic-bezier(0.4, 0, 0.2, 1)`, + speedDefault: `250ms`, + speedFast: `100ms`, + }, logoOffset: 1.7, }