diff --git a/gatsby-config.js b/gatsby-config.js index 5982208a4..8d5feb4d5 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -81,6 +81,13 @@ module.exports = { 'gatsby-plugin-typescript', 'gatsby-plugin-sharp', 'gatsby-transformer-sharp', + { + resolve: `gatsby-source-filesystem`, + options: { + path: `./src/resources/`, + name: `resources` + } + }, 'gatsby-plugin-react-helmet', 'gatsby-plugin-catch-links', { diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx index e49474c98..3af6690a4 100644 --- a/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -27,6 +27,10 @@ const StyledBanner = styled.header` text-align: center; } + .banner__text { + flex: 0 0 55%; + } + .para { margin-top: 3rem; @@ -47,10 +51,14 @@ const StyledBanner = styled.header` margin-top: 3rem; } - object, - img { + .img-container { display: block; - height: 35rem; + flex: 0 0 28%; + + .gatsby-image-wrapper { + height: 300px; + width: 100%; + } @media (min-width: 961px) { margin-left: 3rem; @@ -58,33 +66,42 @@ const StyledBanner = styled.header` @media (max-width: 960px) { height: 20rem; + width: 100%; + height: 100%; + max-width: 30rem; margin: 5rem 0; } + + @media (max-width: 500px) { + max-width: 22rem; + } } ` interface BannerProps { - subtitle: string - title: JSX.Element - paragraph?: string | JSX.Element - linkPath: string - linkText: string - img: JSX.Element + subtitle: string + title: JSX.Element + paragraph?: string | JSX.Element + linkPath: string + linkText: string + img: JSX.Element } const Banner: React.SFC = ({ subtitle, title, paragraph, linkPath, linkText, img, children }) => ( -
- -
-

{subtitle}

- {title} - {paragraph ?

{paragraph}

: null} - {link(linkPath, linkText, '', true, false)} - {children} -
- {img} - -
+
+ +
+

{subtitle}

+ {title} + {paragraph ?

{paragraph}

: null} + {link(linkPath, linkText, '', true, false)} + {children} +
+
+ {img} +
+ +
) export default Banner diff --git a/src/components/features/Intro.tsx b/src/components/features/Intro.tsx index a1fe00a95..25b8fae9c 100644 --- a/src/components/features/Intro.tsx +++ b/src/components/features/Intro.tsx @@ -4,7 +4,8 @@ import styled from '@emotion/styled' import FeatureBox from './FeatureBox' import { features } from '../../contents/features' import { sizes } from '../../styles/variables' -import IceStick from '../../resources/ice-stick.svg' +import { StaticQuery, graphql } from 'gatsby' +import Img from 'gatsby-image' const Styled = styled.div` .intro { @@ -60,19 +61,38 @@ const Styled = styled.div` ` const Intro = () => ( -
- -
- -

Features

-
- {features.map((f, i) => ( - - ))} -
- - - + ( +
+ +
+ Ice Stick +

Features

+
+ {features.map((f, i) => ( + + ))} +
+
+ +
+ )} + /> ) export default Intro diff --git a/src/components/index/Banner.tsx b/src/components/index/Banner.tsx index 8dd6087a9..4101b3348 100644 --- a/src/components/index/Banner.tsx +++ b/src/components/index/Banner.tsx @@ -1,11 +1,12 @@ import React from 'react' -import Screenshot from '../../resources/screenshot.png' import styled from '@emotion/styled' import GitLab from '../../resources/gitlab.svg' import GitHub from '../../resources/octicons-mark-github.svg' import Bitbucket from '../../resources/bitbucket.svg' import { sizes, colors } from '../../styles/variables' +import { StaticQuery, graphql } from 'gatsby' +import Img from 'gatsby-image' const Styled = styled.div` .pattern { @@ -27,11 +28,13 @@ const Styled = styled.div` padding: 10rem 0 10rem; &__screenshot { - display: block; - margin-top: 3rem; - width: 100%; - max-width: 1000px; - box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.2); + &-container { + display: block; + margin-top: 3rem; + width: 100%; + max-width: 1000px; + box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.2); + } } h1 { @@ -65,32 +68,47 @@ const Styled = styled.div` ` const Banner = () => ( - -
-
-
-
-

- Dev Environments Built for the Cloud. -

-

Describe your dev environments as code and automate the last missing piece in your DevOps pipeline.

- - Try Now - -

- Works with - GitLab - GitHub - Bitbucket -

-
-
- Gitpod Screenshot + ( + +
+
+
+
+

+ Dev Environments Built for the Cloud. +

+

Describe your dev environments as code and automate the last missing piece in your DevOps pipeline.

+ + Try Now + +

+ Works with + GitLab + GitHub + Bitbucket +

+
+
+ Gitpod Screenshot +
+
-
-
-
- + + + )} + /> ) export default Banner diff --git a/src/components/index/SaveHours.tsx b/src/components/index/SaveHours.tsx index 90fcb36d8..44b12f24f 100644 --- a/src/components/index/SaveHours.tsx +++ b/src/components/index/SaveHours.tsx @@ -1,69 +1,68 @@ import React from 'react' import styled from '@emotion/styled' -import RocketLaunch from '../../resources/rocket-launch.png' import { sizes } from '../../styles/variables' +import Rocket from '../../resources/rocket-launch.png' const StyledSaveHours = styled.section` - max-width: 750px; - margin: 0 auto; - text-align: center; + max-width: 750px; + margin: 0 auto; + text-align: center; - @media(min-width: calc(${sizes.breakpoints.md} + 1px)) { - padding-bottom: 2rem; - } - - @media(max-width: ${sizes.breakpoints.md}) { - max-width: 600px; - } + @media (min-width: calc(${sizes.breakpoints.md} + 1px)) { + padding-bottom: 2rem; + } - @media(max-width: 640px) { - max-width: 400px; - } + @media (max-width: ${sizes.breakpoints.md}) { + max-width: 600px; + } - h2 { - margin-bottom: 5rem; - } + @media (max-width: 640px) { + max-width: 400px; + } - img { - display: inline-block; - width: 18rem; - margin-bottom: 5rem; + h2 { + margin-bottom: 5rem; + } - @media(max-width: ${sizes.breakpoints.md}) { - margin-bottom: 3rem; - } + img { + display: inline-block; + width: 18rem; + margin-bottom: 5rem; - @media(max-width: 640px) { - width: 16rem; - margin-bottom: 4rem; - } + @media (max-width: ${sizes.breakpoints.md}) { + margin-bottom: 3rem; } - p { - max-width: 450px; - margin-left: auto; - margin-right: auto; + @media (max-width: 640px) { + width: 16rem; + margin-bottom: 4rem; } + } + + p { + max-width: 450px; + margin-left: auto; + margin-right: auto; + } ` -const SaveHours = () => ( -
- -
- Rocket Launch +const SaveHours = () => ( +
+ +
+ Rocket Launch +
+
+

+ Fast & Powerful. Streamline Your Development Workflow. +

+

+ Get fresh, task-based dev environments for any issue, branch and merge/pull request. Enter true GitOps and experience a new + level of productivity. +

+
+
-
-

- Fast & Powerful. Streamline Your Development Workflow. -

-

- Get fresh, task-based dev environments for any issue, branch and merge/pull request. Enter true GitOps and experience a new level - of productivity. -

-
- -
-) - + ) export default SaveHours diff --git a/src/pages/education.tsx b/src/pages/education.tsx index 08575aa2d..e9f2f242e 100644 --- a/src/pages/education.tsx +++ b/src/pages/education.tsx @@ -18,8 +18,9 @@ import Gitlab from '../resources/gitlab.svg' import { Link } from 'gatsby' import PopOver from '../components/PopOver' import { isEurope } from '../utils/helpers' +import Img from 'gatsby-image' -const EducationPage: React.SFC<{}> = () => ( +const EducationPage: React.SFC<{}> = ({data}: any) => ( = () => ( paragraph="Gitpod simplifies the onboarding process, makes coding accessible from any device, and provides a productive learning environment." linkPath="/education/#education" linkText="Choose your Solution" - img={} + img={Education} />
@@ -170,4 +171,16 @@ const EducationPage: React.SFC<{}> = () => ( ) +export const query = graphql` + query { + file(relativePath: { eq: "education.png" }) { + childImageSharp { + fluid(quality: 100, maxWidth: 1980) { + ...GatsbyImageSharpFluid + } + } + } + } +` + export default EducationPage diff --git a/src/pages/enterprise.tsx b/src/pages/enterprise.tsx index ab5304455..c3b52d78f 100644 --- a/src/pages/enterprise.tsx +++ b/src/pages/enterprise.tsx @@ -14,10 +14,11 @@ import Circle from '../components/Circle' import Bitbucket from '../resources/bitbucket.svg' import Github from '../resources/octicons-mark-github.svg' import Gitlab from '../resources/gitlab.svg' -import { Link } from 'gatsby' +import { Link, graphql } from 'gatsby' import { textCardsData } from '../contents/enterprise' +import Img from 'gatsby-image' -const EnterprisePage: React.SFC<{}> = () => ( +const EnterprisePage: React.SFC<{}> = ({data}: any) => ( = () => ( paragraph="Adding Gitpod to your development tools means less waiting, faster onboarding, faster development cycles, higher code quality, and a smooth consistent workflow." linkPath="/enterprise/#enterprise" linkText="Choose your Solution" - img={} + img={Data Planet} />
@@ -158,4 +159,16 @@ const EnterprisePage: React.SFC<{}> = () => ( ) +export const query = graphql` + query { + file(relativePath: { eq: "enterprise.png" }) { + childImageSharp { + fluid(quality: 100, maxWidth: 1980) { + ...GatsbyImageSharpFluid + } + } + } + } +` + export default EnterprisePage diff --git a/src/pages/github-student-developer-pack.tsx b/src/pages/github-student-developer-pack.tsx index c29e3fe13..7a4e625a1 100644 --- a/src/pages/github-student-developer-pack.tsx +++ b/src/pages/github-student-developer-pack.tsx @@ -2,7 +2,6 @@ import React from 'react' import IndexLayout from '../layouts' import Banner from '../components/Banner' -import BackPack from '../resources/backpack.svg' import { PricingBoxProps } from '../components/PricingBox' import { isEurope } from '../utils/helpers' import IconOpenSource from '../resources/icon-open-source.svg' @@ -13,7 +12,7 @@ import PopOver from '../components/PopOver' import { colors } from '../styles/variables' import InfoCard from '../components/InfoCard' import Offers from '../components/Offers' - +import Img from 'gatsby-image' const offers: PricingBoxProps[] = [ { @@ -54,7 +53,7 @@ const offers: PricingBoxProps[] = [ } ] -const GithubStudentPackPage: React.SFC<{}> = () => ( +const GithubStudentPackPage: React.SFC<{}> = ({data}: any) => ( = () => ( paragraph={With Gitpod you have no more tedious setups, you save hours of compiling code, and you can start coding from any device, immediately.} linkPath="https://gitpod.io/subscription/" linkText="Claim Offer" - img={GitHub Backpack} + img={GitHub Backpack} />
@@ -88,3 +87,15 @@ const GithubStudentPackPage: React.SFC<{}> = () => ( ) export default GithubStudentPackPage + +export const query = graphql` + query { + file(relativePath: { eq: "backpack.png" }) { + childImageSharp { + fluid(quality: 100, maxWidth: 1980) { + ...GatsbyImageSharpFluid + } + } + } + } +` \ No newline at end of file diff --git a/src/pages/github-teacher-toolbox.tsx b/src/pages/github-teacher-toolbox.tsx index c0d0d6458..2cdf30eec 100644 --- a/src/pages/github-teacher-toolbox.tsx +++ b/src/pages/github-teacher-toolbox.tsx @@ -2,7 +2,6 @@ import React from 'react' import IndexLayout from '../layouts' import Banner from '../components/Banner' -import TeacherBox from '../resources/teacher-box.png' import { isEurope } from '../utils/helpers' import Quote from '../components/Quote' import { PricingBoxProps } from '../components/PricingBox' @@ -15,7 +14,7 @@ import { colors } from '../styles/variables' import OnBoarding from '../components/OnBoarding' import InfoCard from '../components/InfoCard' import Offers from '../components/Offers' - +import Img from 'gatsby-image' const offers: PricingBoxProps[] = [ { @@ -57,7 +56,7 @@ const offers: PricingBoxProps[] = [ } ] -const GithubTeacherToolBoxPage: React.SFC<{}> = () => ( +const GithubTeacherToolBoxPage: React.SFC<{}> = ({data}: any) => ( = () => ( paragraph={With Gitpod you can create coding exams and exercises easily, help out your students via live tutoring, and benefit from a simple onboarding with any device. Learn more} linkPath="https://gitpod.io/subscription/" linkText="Claim Offer" - img={GitHub Teacher Toolbox} + img={GitHub Teacher Toolbox} />
@@ -95,4 +94,16 @@ const GithubTeacherToolBoxPage: React.SFC<{}> = () => ( ) +export const query = graphql` + query { + file(relativePath: { eq: "teacher-box.png" }) { + childImageSharp { + fluid(quality: 100, maxWidth: 1980) { + ...GatsbyImageSharpFluid + } + } + } + } +` + export default GithubTeacherToolBoxPage diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9a81fedca..12e2e05fe 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -149,4 +149,5 @@ const IndexPage: React.SFC<{}> = () => ( ) + export default IndexPage diff --git a/src/pages/recruiting.tsx b/src/pages/recruiting.tsx index 4de6739e8..3e8fb8ca1 100644 --- a/src/pages/recruiting.tsx +++ b/src/pages/recruiting.tsx @@ -16,20 +16,21 @@ import Circle from '../components/Circle' import Bitbucket from '../resources/bitbucket.svg' import Github from '../resources/octicons-mark-github.svg' import Gitlab from '../resources/gitlab.svg' -import { Link } from 'gatsby' +import { Link, graphql } from 'gatsby' +import Img from 'gatsby-image' -const RecrutingPage: React.SFC<{}> = () => ( +const RecrutingPage: React.SFC<{}> = ({data}: any) => ( - Make Sure You’re Discovering Your
Best Applicants} - linkPath="/recruiting/#recruiting" - linkText="Choose your Solution" - img={} - /> + Make Sure You’re Discovering Your
Best Applicants} + linkPath="/recruiting/#recruiting" + linkText="Choose your Solution" + img={Recruiting} + /> -
+
{ textCardsData.map((f, i) => ( @@ -56,7 +57,7 @@ const RecrutingPage: React.SFC<{}> = () => ( > -   +   Gitpod.io FREE Trial @@ -94,7 +95,7 @@ const RecrutingPage: React.SFC<{}> = () => ( On-prem or private cloud - SLA + SLA Optional Optional @@ -112,31 +113,31 @@ const RecrutingPage: React.SFC<{}> = () => ( - GitHub Logo github.com + GitHub Logo github.com - GitHub Logo GitHub Enterprise + GitHub Logo GitHub Enterprise Public only - GitLab Logo gitlab.com + GitLab Logo gitlab.com - GitLab Logo Gitlab Self-Managed + GitLab Logo Gitlab Self-Managed Public only - Bitbucket Logo Bitbucket + Bitbucket Logo Bitbucket Soon Soon Soon @@ -156,7 +157,7 @@ const RecrutingPage: React.SFC<{}> = () => ( Start for Free - Contact Sales + Contact Sales Host Yourself @@ -165,10 +166,22 @@ const RecrutingPage: React.SFC<{}> = () => ( ) +export const query = graphql` + query { + file(relativePath: { eq: "recruiting.png" }) { + childImageSharp { + fluid(quality: 100, maxWidth: 1980) { + ...GatsbyImageSharpFluid + } + } + } + } +` + export default RecrutingPage diff --git a/src/pages/self-hosted.tsx b/src/pages/self-hosted.tsx index 9c0a4668c..b6bb3e3a2 100644 --- a/src/pages/self-hosted.tsx +++ b/src/pages/self-hosted.tsx @@ -1,7 +1,6 @@ import React from 'react' import IndexLayout from '../layouts' -import Cloud from '../resources/cloud.svg' import MoreInfo from '../components/MoreInfo' import Banner from '../components/Banner' import ActionCard from '../components/ActionCard' @@ -13,75 +12,94 @@ import GithubGitlab from '../resources/github-gitlab.svg' import Adminstration from '../resources/administration.svg' import Install from '../components/self-hosted/Install' import { MoreInfoContents } from '../contents/moreInfoContents' +import { graphql } from 'gatsby' +import Img from 'gatsby-image' const features: FeatureItemProps[] = [ - { - title: 'Full Data Control', - text: 'All data remains on your infrastructure, as Gitpod can run behind corporate firewalls and on air-gapped networks.', - img: Control - }, - { - title: 'GitLab & GitHub Integration', - text: - 'Integrates seamlessly with your Git hosting solution like GitHub Enterprise, GitLab Community Edition, or Enterprise Edition. Bitbucket support is coming soon.', - img: GithubGitlab - }, - { - title: 'Professional Support', - text: 'Schedule a call with our engineers whenever you need help.', - img: Support - }, - { - title: 'Easy Administration', - text: - 'No need for complicated user management. Simply use OAuth from your Git hosting and enjoy simplicity while retaining full control.', - img: Adminstration - } + { + title: 'Full Data Control', + text: 'All data remains on your infrastructure, as Gitpod can run behind corporate firewalls and on air-gapped networks.', + img: Control + }, + { + title: 'GitLab & GitHub Integration', + text: + 'Integrates seamlessly with your Git hosting solution like GitHub Enterprise, GitLab Community Edition, or Enterprise Edition. Bitbucket support is coming soon.', + img: GithubGitlab + }, + { + title: 'Professional Support', + text: 'Schedule a call with our engineers whenever you need help.', + img: Support + }, + { + title: 'Easy Administration', + text: + 'No need for complicated user management. Simply use OAuth from your Git hosting and enjoy simplicity while retaining full control.', + img: Adminstration + } ] -const SelfHostedPage: React.SFC<{}> = () => ( - - <> - {/* ----- Banner ----- */} - - Self-Host Gitpod
on Your Own Infrastructure. - - } - linkPath="/self-hosted/#install" - linkText="Install Now" - paragraph="Free for unlimited Users." - img={} - /> +const SelfHostedPage: React.SFC<{}> = ({ data }: any) => { + console.log(data); + return ( + + <> + {/* ----- Banner ----- */} + + Self-Host Gitpod
on Your Own Infrastructure. + + } + linkPath="/self-hosted/#install" + linkText="Install Now" + paragraph="Free for unlimited Users." + img={Self Hosted} + /> - {/* ----- Section Features ----- */} + {/* ----- Section Features ----- */} - + - {/* ----- Section Install ----- */} + {/* ----- Section Install ----- */} - + - {/* ----- Section Customizations ----- */} + {/* ----- Section Customizations ----- */} - -

- Please reach out. We’re happy to help get
+ +

+ Please reach out. We’re happy to help get
your team the perfect Gitpod setup.

- + + } + anchors={[{ href: '/contact/', subject: 'I have a question regarding Gitpod Self-Hosted', text: 'Contact' }]} + /> + + + + + ) +} + +export const query = graphql` + query { + file(relativePath: { eq: "self-hosted-cloud.png" }) { + childImageSharp { + fluid(traceSVG: { color: "#0b2144" }) { + tracedSVG + src } - anchors={[{ href: '/contact/', subject: 'I have a question regarding Gitpod Self-Hosted', text: 'Contact' }]} - /> + } + } +} - - - -) +` export default SelfHostedPage diff --git a/src/pages/vendor.tsx b/src/pages/vendor.tsx index 821e60670..99a15ccb7 100644 --- a/src/pages/vendor.tsx +++ b/src/pages/vendor.tsx @@ -17,8 +17,9 @@ import Bitbucket from '../resources/bitbucket.svg' import Github from '../resources/octicons-mark-github.svg' import Gitlab from '../resources/gitlab.svg' import { Link } from 'gatsby' +import Img from 'gatsby-image' -const VendorPage: React.SFC<{}> = () => ( +const VendorPage: React.SFC<{}> = ({data}: any) => ( = () => ( title={

Use Gitpod as a Showroom for
Your Developer Products

} linkPath="/vendor/#vendor" linkText="Choose your Solution" - img={} + img={Vendor} />
@@ -165,4 +166,16 @@ const VendorPage: React.SFC<{}> = () => ( ) +export const query = graphql` + query { + file(relativePath: { eq: "vendor.png" }) { + childImageSharp { + fluid(quality: 100, maxWidth: 1980) { + ...GatsbyImageSharpFluid + } + } + } + } +` + export default VendorPage diff --git a/src/resources/backpack.png b/src/resources/backpack.png new file mode 100644 index 000000000..f655fa780 Binary files /dev/null and b/src/resources/backpack.png differ diff --git a/src/resources/education.png b/src/resources/education.png new file mode 100644 index 000000000..dbc34ca3b Binary files /dev/null and b/src/resources/education.png differ diff --git a/src/resources/enterprise.png b/src/resources/enterprise.png new file mode 100644 index 000000000..e204c87c9 Binary files /dev/null and b/src/resources/enterprise.png differ diff --git a/src/resources/ice-cream.png b/src/resources/ice-cream.png new file mode 100644 index 000000000..55f41e2ec Binary files /dev/null and b/src/resources/ice-cream.png differ diff --git a/src/resources/ice-stick.svg b/src/resources/ice-stick.svg deleted file mode 100644 index 7329ceae9..000000000 --- a/src/resources/ice-stick.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/resources/recruiting.png b/src/resources/recruiting.png new file mode 100644 index 000000000..8b372350d Binary files /dev/null and b/src/resources/recruiting.png differ diff --git a/src/resources/self-hosted-cloud.png b/src/resources/self-hosted-cloud.png new file mode 100644 index 000000000..a1fd3a4e7 Binary files /dev/null and b/src/resources/self-hosted-cloud.png differ diff --git a/src/resources/vendor.png b/src/resources/vendor.png index 80b16507e..f0cf8f584 100644 Binary files a/src/resources/vendor.png and b/src/resources/vendor.png differ