diff --git a/gatsby-config.js b/gatsby-config.js index 153cebdc2..d4416043c 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -86,6 +86,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/blog/gitpod-launch.md b/src/blog/gitpod-launch.md index ca25c4fb1..db09c6b0d 100644 --- a/src/blog/gitpod-launch.md +++ b/src/blog/gitpod-launch.md @@ -46,7 +46,7 @@ Once you've installed the app for your GitHub repository, it will pre-build dev We call this feature prebuilt workspaces and you can read more about it in [Chris' post](/blog/prebuilds/). -![Prebuilt Workspaces](./gitpod-launch/prebuilt-workspaces.png) +![Prebuilt Workspaces](/prebuilt-workspaces.png) ## More Flow Your dev environment opens differently depending on the GitHub page you are coming from. You can, for instance, open branches or files by simply going to the respective GitHub page and pressing the button (or prefixing the URL) there. diff --git a/src/blog/gitpod-launch/prebuilt-workspaces.png b/src/blog/gitpod-launch/prebuilt-workspaces.png deleted file mode 100644 index 38a2b60c1..000000000 Binary files a/src/blog/gitpod-launch/prebuilt-workspaces.png and /dev/null differ diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx index e49474c98..302659d48 100644 --- a/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -10,7 +10,7 @@ const StyledBanner = styled.header` display: flex; justify-content: space-between; - align-items: center; + align-items: stretch; padding: 14rem 0 10rem; @media (max-width: 960px) { @@ -27,6 +27,10 @@ const StyledBanner = styled.header` text-align: center; } + .banner__text { + flex: 0 0 55%; + } + .para { margin-top: 3rem; @@ -47,44 +51,53 @@ const StyledBanner = styled.header` margin-top: 3rem; } - object, - img { - display: block; - height: 35rem; + .img-container { + display: block; + flex: 0 0 30%; + @media (min-width: 961px) { margin-left: 3rem; } @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/FeatureCard.tsx b/src/components/FeatureCard.tsx index ecef5a927..9e5a5d84a 100644 --- a/src/components/FeatureCard.tsx +++ b/src/components/FeatureCard.tsx @@ -279,6 +279,7 @@ export interface FeatureCardProps { Figure?: () => JSX.Element figFootnote?: string | JSX.Element footnote?: string | JSX.Element + gatsbyImage?: JSX.Element } const FeatureCard = ({ @@ -294,7 +295,8 @@ const FeatureCard = ({ Figure, opposite, figFootnote, - footnote + footnote, + gatsbyImage }: FeatureCardProps) => { const [renderedGraphic, setRenderedGraphic] = useState('') const hasFigFootnote = typeof figFootnote == 'string' || typeof figFootnote == 'object' @@ -309,6 +311,9 @@ const FeatureCard = ({
{Graphic ? : null} {src ? {alt} : null} + { + gatsbyImage ? gatsbyImage : null + } {featuresList && featuresList.length ? (
    {featuresList.map((feat, i) => ( diff --git a/src/components/ImageProvider.tsx b/src/components/ImageProvider.tsx new file mode 100644 index 000000000..cffa4d19f --- /dev/null +++ b/src/components/ImageProvider.tsx @@ -0,0 +1,61 @@ +import React, { CSSProperties } from 'react' +import { graphql, useStaticQuery } from 'gatsby' +import Img from 'gatsby-image' + +import styled from '@emotion/styled' + +const StyledImageProvider = styled.div` + height: 100%; + width: 100%; +` + +interface ImageProviderProps { + fileName: string + alt: string + wrapperStyles?: CSSProperties + imageStyles?: CSSProperties + isNotRelativeToGatsbyImgWrapper?: boolean + IsAPricingBoxIcon?: boolean +} + +const ImageProvider = ({ fileName, alt, wrapperStyles, imageStyles, isNotRelativeToGatsbyImgWrapper, IsAPricingBoxIcon }: ImageProviderProps) => { + const { allImageSharp } = useStaticQuery(graphql` + query { + allImageSharp { + nodes { + fluid(traceSVG: { color: "#0b2144" }) { + originalName + tracedSVG + src + } + } + } + } + `) + + const fluid = allImageSharp.nodes.find((n: any) => n.fluid.originalName === fileName) + .fluid + + const imageStylesIfIsNotRelativeToGatsbyImgWrapper = { + top: '50%', + transform: 'translateY(-50%) scale(.93)', + }; + + let position; + + if (isNotRelativeToGatsbyImgWrapper) { + position = 'none' + } else if (IsAPricingBoxIcon) { + position = 'static' + } else { + position = 'relative' + } + + return ( + + {alt} + + ) +} + +export default ImageProvider; diff --git a/src/components/Offers.tsx b/src/components/Offers.tsx index 445016384..de75a5d36 100644 --- a/src/components/Offers.tsx +++ b/src/components/Offers.tsx @@ -57,21 +57,7 @@ const Offers: React.SFC = ({ offers, title, para }) => ( (offer, i) => ( ) ) diff --git a/src/components/PricingBox.tsx b/src/components/PricingBox.tsx index e6ef87adb..c606d4ed2 100644 --- a/src/components/PricingBox.tsx +++ b/src/components/PricingBox.tsx @@ -81,7 +81,7 @@ const StyledPricingBox = styled.div` margin: ${({ isTitleOutside }) => (isTitleOutside ? '-7rem 0 6rem' : '')} } - img, object { + img, object, .g-image { display: inline-block; margin: 3rem 0 1rem; height: 8rem; @@ -94,6 +94,13 @@ const StyledPricingBox = styled.div` } } + .g-image { + position: relative; + width: 7rem; + height: 7rem; + margin: 0 0 5rem; + } + .price { font-size: 2.1rem; font-weight: 600; @@ -241,7 +248,8 @@ const StyledPricingBox = styled.div` export interface PricingBoxProps { title: string - img: JSX.Element + img?: JSX.Element + gatsbyImage?: JSX.Element price?: string | JSX.Element duration?: string feature?: string | JSX.Element @@ -286,7 +294,8 @@ const PricingBox: React.SFC = ({ info, areFeaturesBold, boldFeaturesCount = 0, - perUserMonth + perUserMonth, + gatsbyImage }) => ( = ({ >

    {title}

    {img ? img : null} + {gatsbyImage ?
    {gatsbyImage}
    : null} {price ?
    {price}
    : null} { perUserMonth ?
    per user/month
    : null } {duration ?
    {duration}
    : null} diff --git a/src/components/features/FullAutomationGraphics.tsx b/src/components/features/FullAutomationGraphics.tsx index 56bf8b8df..84cac3e64 100644 --- a/src/components/features/FullAutomationGraphics.tsx +++ b/src/components/features/FullAutomationGraphics.tsx @@ -1,24 +1,22 @@ import React from 'react' -import ReadyToCodeImg from '../../resources/automated-setup-default.png' -import AutomatedSetupGraphicGitpod from '../../resources/automated-setup-gitpod.png' -import AutomatedSetupGraphicOrdinary from '../../resources/automated-setup-ordinary.png' +import ImageProvider from '../ImageProvider' const FullAutomationGraphics = ({ renderedGraphic }: { renderedGraphic: string } ) => { const graphics = [ { - src: ReadyToCodeImg, + src: 'automated-setup-default.png', alt: 'Gitpod Ready to Code', name: '' }, { - src: AutomatedSetupGraphicGitpod, + src: 'automated-setup-gitpod.png', alt: 'Setup Automated with Gitpod', name: 'gitpod' }, { - src: AutomatedSetupGraphicOrdinary, + src: 'automated-setup-ordinary.png', alt: 'Setup Ordinary without Gitpod', name: 'usual' } @@ -26,12 +24,7 @@ const FullAutomationGraphics = ({ renderedGraphic }: { renderedGraphic: string } return ( graphics.map((g, i) => ( - {g.alt} + )) ) } diff --git a/src/components/features/Intro.tsx b/src/components/features/Intro.tsx index a1fe00a95..45f998f94 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 { @@ -16,6 +17,10 @@ const Styled = styled.div` margin: 0 auto; } + .gatsby-image-wrapper { + height: 20rem; + } + h1 { text-align: center; } @@ -60,19 +65,39 @@ 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 6f5c9bfc4..a6cf62760 100644 --- a/src/components/index/Banner.tsx +++ b/src/components/index/Banner.tsx @@ -1,12 +1,13 @@ 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 GitHubButton from 'react-github-btn' +import { StaticQuery, graphql } from 'gatsby' +import Img from 'gatsby-image' const Styled = styled.div` .pattern { @@ -28,11 +29,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 { @@ -66,36 +69,51 @@ 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 -

    -
    -
    - Star  - Fork -
    -
    - 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 +

    +
    +
    + Star  + Fork +
    +
    + Gitpod Screenshot +
    +
    -
    -
    -
    -     + + + )} + /> ) export default Banner diff --git a/src/components/index/GetStarted.tsx b/src/components/index/GetStarted.tsx index f1cbb7f97..d0e55af16 100644 --- a/src/components/index/GetStarted.tsx +++ b/src/components/index/GetStarted.tsx @@ -74,7 +74,7 @@ const GetStarted = () => ( {projects.map((project, i) => ( } + image={project.image} title={project.title} githubUrl={project.githubUrl} gitlabUrl={project.gitlabUrl} diff --git a/src/components/index/Project.tsx b/src/components/index/Project.tsx index 4afda0ae0..969b2d586 100644 --- a/src/components/index/Project.tsx +++ b/src/components/index/Project.tsx @@ -24,10 +24,11 @@ const StyledProject = styled.div` } } - object { - height: 8.5rem; + .img-container { + display: inline-block; + height: 8rem; + width: 8rem; width: 14rem; - object-fit: contain; } & > * { @@ -51,7 +52,7 @@ const Project: React.SFC = ({ image, title, githubUrl, gitlabUrl, return ( - {image} +
    {image}

    {!shown ? title : 'Choose your platform'}

     diff --git a/src/components/index/SaveHours.tsx b/src/components/index/SaveHours.tsx index 90fcb36d8..ad4902d0b 100644 --- a/src/components/index/SaveHours.tsx +++ b/src/components/index/SaveHours.tsx @@ -1,69 +1,95 @@ import React from 'react' import styled from '@emotion/styled' -import RocketLaunch from '../../resources/rocket-launch.png' import { sizes } from '../../styles/variables' +import { StaticQuery, graphql } from 'gatsby' +import Img from 'gatsby-image' 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-container { + display: inline-block; + width: 18rem; + // min-height: 25rem; + 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; } + } + + .gatsby-image-wrapper { + width: 100%; + height: 25rem; + + @media(max-width: 400px) { + height: 22rem; + } + } + + p { + max-width: 450px; + margin-left: auto; + margin-right: auto; + } ` 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. -

    + ( +
    + +
    + 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. +

    +
    +
    - -
    -) + )} +/>) export default SaveHours diff --git a/src/components/index/SecurityAndOSS.tsx b/src/components/index/SecurityAndOSS.tsx index 9260ab9c0..d9a8ad1f7 100644 --- a/src/components/index/SecurityAndOSS.tsx +++ b/src/components/index/SecurityAndOSS.tsx @@ -1,8 +1,7 @@ import React from 'react' import styled from '@emotion/styled' import TextFeature from './TextFeature' -import HighlySecureImg from '../../resources/highly-secure.png' -import OpenSourceImg from '../../resources/open-source.png' +import ImageProvider from '../ImageProvider' const Styled = styled.section` .text-container { @@ -33,8 +32,7 @@ const SecurityAndOSS = () => (
    } title="Secure and Flight-Proven" text={ <> @@ -47,8 +45,7 @@ const SecurityAndOSS = () => ( } /> } title="Free For Open-Source!" text={ <> diff --git a/src/components/index/TextFeature.tsx b/src/components/index/TextFeature.tsx index 73988e73b..133298eb0 100644 --- a/src/components/index/TextFeature.tsx +++ b/src/components/index/TextFeature.tsx @@ -23,7 +23,7 @@ const StyledTextFeature = styled.div` margin: 0; } - img { + .img-container { display: block; height: 8rem; margin-bottom: 4rem; @@ -38,17 +38,18 @@ const StyledTextFeature = styled.div` ` interface TextFeatureProps { - path: any - alt: string + img: JSX.Element title: string text: string | JSX.Element btnText?: string href?: string } -const TextFeature = ({ path, alt, title, text, btnText, href }: TextFeatureProps) => ( +const TextFeature = ({ img, title, text, btnText, href }: TextFeatureProps) => ( - {alt} +
    + {img} +

    {title}

    diff --git a/src/components/pricing/PricingBoxes.tsx b/src/components/pricing/PricingBoxes.tsx index dc1ffc670..b370fc638 100644 --- a/src/components/pricing/PricingBoxes.tsx +++ b/src/components/pricing/PricingBoxes.tsx @@ -2,17 +2,14 @@ import React from 'react' import styled from '@emotion/styled' import { sizes, colors } from '../../styles/variables' -import LightBulb from '../../resources/light-bulb.svg' -import Rocket from '../../resources/rocket.png' -import MagicCap from '../../resources/magic-cap.svg' -import IconOpenSource from '../../resources/icon-open-source.svg' import { PricingBoxProps } from '../PricingBox' import PopOver from '../PopOver' import PricingBox from '../PricingBox' import { isEurope } from '../../utils/helpers' -import Cloud from '../../resources/cloud.svg' +import Cloud from '../../resources/self-hosted-cloud.png' import Tabs from './Tabs' import { Link } from 'gatsby' +import ImageProvider from '../ImageProvider' const Styled = styled.div` h1 { @@ -52,7 +49,6 @@ const selfHostedPlans: PricingBoxProps[] = [ { title: 'Free', duration: 'Unlimited users', - img: , features: ['Unlimited Use', 'Private & Public Repos'], price: ( <> @@ -66,7 +62,6 @@ const selfHostedPlans: PricingBoxProps[] = [ }, { title: 'Professional', - img: Rocket, features: ['Unlimited Prebuilds', 'Shared Workspaces', 'Snapshots', 'Admin Dashboard', 'Unlimited Use', 'Private & Public Repos'], price: ( <> @@ -84,7 +79,7 @@ const selfHostedPlans: PricingBoxProps[] = [ const plans: PricingBoxProps[] = [ { title: 'Free', - img: , + gatsbyImage: , price: ( <> {isEurope() ? '€0' : '$0'} @@ -95,7 +90,7 @@ const plans: PricingBoxProps[] = [ }, { title: 'Personal', - img: , + gatsbyImage: , price: ( <> {isEurope() ? '€8' : '$9'} @@ -117,7 +112,7 @@ const plans: PricingBoxProps[] = [ }, { title: 'Professional', - img: Rocket, + gatsbyImage: , price: ( <> {isEurope() ? '€23' : '$25'} @@ -145,7 +140,7 @@ const plans: PricingBoxProps[] = [ }, { title: 'Unlimited', - img: , + gatsbyImage: , price: ( <> {isEurope() ? '€35' : '$39'} diff --git a/src/contents/features.tsx b/src/contents/features.tsx index 2eb0d911e..24adc35a7 100644 --- a/src/contents/features.tsx +++ b/src/contents/features.tsx @@ -1,17 +1,9 @@ import React from 'react' -import VSCodeExtensions from '../resources/vscode-extensions.png' -import LinuxTerminal from '../resources/linux-terminal.png' -import PrebuiltWorkspaces from '../resources/prebuilt-workspaces.png' -import ParallelWorkspaces from '../resources/parallel-workspaces.png' -import CodeReview from '../resources/code-review.png' import SupportedLanguages from '../resources/languages.svg' -import SharedWorkspaces from '../resources/shared-workspaces.png' -import CreateASnapshot from '../resources/workspace-snapshot.png' -import GitPlatforms from '../resources/stay-in-flow.svg' -import Ephemeral from '../resources/disposable.jpg' import { Link } from 'gatsby' import { FeatureCardProps } from '../components/FeatureCard' +import ImageProvider from '../components/ImageProvider' export const features: FeatureCardProps[] = [ { @@ -50,8 +42,7 @@ export const features: FeatureCardProps[] = [ > ), - src: PrebuiltWorkspaces, - alt: 'Prebuilt Workspaces' + gatsbyImage: }, { id: 'parallel', @@ -85,8 +76,7 @@ export const features: FeatureCardProps[] = [ Workspaces ), - src: ParallelWorkspaces, - alt: 'Parallel Workspaces' + gatsbyImage: , }, { id: 'disposable', @@ -97,8 +87,6 @@ export const features: FeatureCardProps[] = [ Workspaces ), - src: Ephemeral, - alt: 'Ephemeral Workspaces', title: ( <> Start Fresh with @@ -122,7 +110,8 @@ export const features: FeatureCardProps[] = [ transform="translate(-16 -.111)" > - ) + ), + gatsbyImage: }, { id: 'vs', @@ -164,8 +153,7 @@ export const features: FeatureCardProps[] = [ Extensions ), - src: VSCodeExtensions, - alt: 'VS Code Extensions' + gatsbyImage: }, { id: 'deep-integrations', @@ -216,13 +204,10 @@ export const features: FeatureCardProps[] = [ Integrations ), - src: GitPlatforms, - alt: 'Git Platforms' + gatsbyImage: }, { id: 'share', - src: SharedWorkspaces, - alt: 'Share Running Workspaces', title: ( <> Better Collaboration with Workspace Sharing @@ -255,12 +240,11 @@ export const features: FeatureCardProps[] = [
    Workspaces - ) + ), + gatsbyImage: }, { id: 'snapshot', - src: CreateASnapshot, - alt: 'Create A Snapshot', title: ( <> Take a Snapshot & Spread Your Work @@ -288,12 +272,11 @@ export const features: FeatureCardProps[] = [ ), - iconTitle: 'Snapshots' + iconTitle: 'Snapshots', + gatsbyImage: }, { id: 'code-review', - src: CodeReview, - alt: 'Code Review', title: ( <> Do Code Reviews @@ -336,12 +319,11 @@ export const features: FeatureCardProps[] = [
    Reviews - ) + ), + gatsbyImage: }, { id: 'linux', - src: LinuxTerminal, - alt: 'Linux Terminals', title: ( <> Get Access to a Full Linux Machine @@ -372,12 +354,11 @@ export const features: FeatureCardProps[] = [
    Terminals - ) + ), + gatsbyImage: }, { id: 'intelligence', - src: SupportedLanguages, - alt: 'Supported Programming Languages', title: ( <> Industry-Leading @@ -417,6 +398,8 @@ export const features: FeatureCardProps[] = [ 'Refactoring', 'Security Vulnerability Detection', 'Suggested Optimizations' - ] + ], + src: SupportedLanguages, + alt: 'Supported Programming Languages', } ] diff --git a/src/contents/gitpod-vs-codespaces.tsx b/src/contents/gitpod-vs-codespaces.tsx index 1484ff043..b3954c67d 100644 --- a/src/contents/gitpod-vs-codespaces.tsx +++ b/src/contents/gitpod-vs-codespaces.tsx @@ -1,9 +1,9 @@ import React from 'react' import { FeatureCardProps } from '../components/FeatureCard' -import GitPlatforms from '../resources/stay-in-flow.svg' import SpeedComparison from '../components/gitpod-vs-codespaces/SpeedComparison' import PowerComparison from '../components/gitpod-vs-codespaces/PowerComparison' import { Link } from 'gatsby' +import ImageProvider from '../components/ImageProvider' export const features: FeatureCardProps[] = [ { @@ -62,7 +62,6 @@ export const features: FeatureCardProps[] = [ ), - src: GitPlatforms, - alt: 'Git Platforms' + gatsbyImage: , } ] diff --git a/src/contents/index.tsx b/src/contents/index.tsx index 51181e42e..da79012ae 100644 --- a/src/contents/index.tsx +++ b/src/contents/index.tsx @@ -1,10 +1,6 @@ import React from 'react' import { FeatureCardProps } from '../components/FeatureCard' - -import Collaboration from '../resources/collaboration-placeholder.png' -import KubernetesGraphics from '../resources/cloud-native.png' -import IPad from '../resources/ipad.png' import FullAutomationGraphics from '../components/features/FullAutomationGraphics' import FullAutomationButtons from '../components/features/FullAutomationButtons' import BenHalpern from '../resources/ben-halpern.jpg' @@ -25,6 +21,7 @@ import Roku from '../resources/roku.jpg' import { TestimonialProps } from '../components/index/Testimonial' import { Link } from 'gatsby' +import ImageProvider from '../components/ImageProvider' export const features: FeatureCardProps[] = [ { @@ -52,8 +49,7 @@ export const features: FeatureCardProps[] = [ }, { id: 'teams-together', - src: Collaboration, - alt: 'A code review within Gitpod', + gatsbyImage: , title: ( Where Teams @@ -83,34 +79,33 @@ export const features: FeatureCardProps[] = [
    Share a reproducible workspace with your team. - - - ) - }, - { - src: IPad, - alt: 'Gitpod on an iPad', - title: Remote-first. Secure by Design., - text: ( - <> -

    - You no longer need an over-powered laptop to code, Gitpod works just as smoothly on a Chromebook or iPad. All you need is a - browser. + + + ) + }, + { + gatsbyImage: , + title: Remote-first. Secure by Design., + text: ( + <> +

    + You no longer need an over-powered laptop to code, Gitpod works just as smoothly on a Chromebook or iPad. All you need is a + browser.

    -

    Gitpod centralizes all source code and never stores it on insecure machines and networks.

    - - ) - }, - { - src: KubernetesGraphics, - alt: 'Kubernetes', - title: Cloud Native Development Done Right, - text: ( - <> -

    Gitpod is a multi-service Kubernetes application that we develop in Gitpod.

    -

    - Code, build, debug and run K8s applications entirely in the cloud. Get fully-baked workspaces for every branch and pull/merge - request, pre-configured and pre-connected to their own dedicated K8s deployment. +

    Gitpod centralizes all source code and never stores it on insecure machines and networks.

    + + ) + }, + { + gatsbyImage: , + alt: '', + title: Cloud Native Development Done Right, + text: ( + <> +

    Gitpod is a multi-service Kubernetes application that we develop in Gitpod.

    +

    + Code, build, debug and run K8s applications entirely in the cloud. Get fully-baked workspaces for every branch and pull/merge + request, pre-configured and pre-connected to their own dedicated K8s deployment.

    ) diff --git a/src/contents/projects.tsx b/src/contents/projects.tsx index cc4d1fbe7..5f3fe877c 100644 --- a/src/contents/projects.tsx +++ b/src/contents/projects.tsx @@ -1,34 +1,26 @@ -import JS from '../resources/js.svg' -import TS from '../resources/ts.svg' -import GO from '../resources/go.svg' -import JAVA from '../resources/java.svg' -import PY from '../resources/py.svg' -import CS from '../resources/csharp.png' -import RS from '../resources/rust.png' -import RB from '../resources/ruby.png' - +import ImageProvider from '../components/ImageProvider' export const projects = [ { - image: TS, + image: , title: 'TypeScript', githubUrl: "https://github.com/eclipse-theia/theia", alt: "TypeScript", }, { - image: GO, + image: , title: 'Go', githubUrl: "https://github.com/prometheus/prometheus", alt: "Go", }, { - image: RS, + image: , title: 'Rust', githubUrl: "https://github.com/nushell/nushell", alt: "Rust", }, { - image: JAVA, + image: , title: 'Java & Spring', githubUrl: "https://github.com/gitpod-io/spring-petclinic", gitlabUrl: "https://gitlab.com/gitpod/spring-petclinic", @@ -36,13 +28,13 @@ export const projects = [ alt: "Java", }, { - image: PY, + image: , title: 'Python & Flask', githubUrl: "https://github.com/breatheco-de/python-flask-api-tutorial", alt: "Python", }, { - image: CS, + image: , title: '.NET Core', githubUrl: "https://github.com/gitpod-io/dotnetcore", gitlabUrl: "https://gitlab.com/gitpod/dotnetcore", @@ -50,7 +42,7 @@ export const projects = [ alt: "C#", }, { - image: RB, + image: , title: 'Rails & Postgres', githubUrl: "https://github.com/gitpod-io/ruby-on-rails", gitlabUrl: "https://gitlab.com/gitpod/rails", diff --git a/src/pages/education.tsx b/src/pages/education.tsx index 1f166788e..7d344a7e0 100644 --- a/src/pages/education.tsx +++ b/src/pages/education.tsx @@ -2,7 +2,6 @@ import React from 'react' import IndexLayout from '../layouts' import Banner from '../components/Banner' -import Saturn from '../resources/saturn-icon.svg' import TextCards from '../components/TextCards' import TextCard from '../components/TextCard' import { textCardsData } from '../contents/education' @@ -15,11 +14,12 @@ 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 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 +170,17 @@ const EducationPage: React.SFC<{}> = () => ( ) +export const query = graphql` + query { + file(relativePath: { eq: "education.png" }) { + childImageSharp { + fluid(traceSVG: { color: "#0b2144" }) { + tracedSVG + src + } + } + } + } +` + export default EducationPage diff --git a/src/pages/enterprise.tsx b/src/pages/enterprise.tsx index ab5304455..fc094e308 100644 --- a/src/pages/enterprise.tsx +++ b/src/pages/enterprise.tsx @@ -2,7 +2,6 @@ import React from 'react' import IndexLayout from '../layouts' import Banner from '../components/Banner' -import Planet from '../resources/planet.svg' import TextCards from '../components/TextCards' import TextCard from '../components/TextCard' import Quote from '../components/Quote' @@ -14,10 +13,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} />
    @@ -56,7 +56,7 @@ const EnterprisePage: React.SFC<{}> = () => ( {/* ----- BG ----- */} - + = () => ( ) +export const query = graphql` + query { + file(relativePath: { eq: "enterprise.png" }) { + childImageSharp { + fluid(traceSVG: { color: "#0b2144" }) { + tracedSVG + src + } + } + } + } +` + export default EnterprisePage diff --git a/src/pages/github-student-developer-pack.tsx b/src/pages/github-student-developer-pack.tsx index c29e3fe13..7bdadb35a 100644 --- a/src/pages/github-student-developer-pack.tsx +++ b/src/pages/github-student-developer-pack.tsx @@ -2,23 +2,22 @@ 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' import Quote from '../components/Quote' import Bag from '../resources/icon-backpack.svg' -import Rocket from '../resources/icon-rocket.svg' 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' +import ImageProvider from '../components/ImageProvider' +import { graphql } from 'gatsby' const offers: PricingBoxProps[] = [ { title: 'Open-Source', - img: , + gatsbyImage: , price: 'Free', duration: '50 hours / month', hideButton: true, @@ -46,7 +45,7 @@ const offers: PricingBoxProps[] = [ }, { title: 'Student Unlimited', - img: , + gatsbyImage: , price: <>{(isEurope() ? '€35' : '$39')} {(isEurope() ? '€8' : '$9')}, duration: 'Unlimited hours / month', hideButton: true, @@ -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 + } + } + } + } +` diff --git a/src/pages/github-teacher-toolbox.tsx b/src/pages/github-teacher-toolbox.tsx index c0d0d6458..911a3a92c 100644 --- a/src/pages/github-teacher-toolbox.tsx +++ b/src/pages/github-teacher-toolbox.tsx @@ -2,25 +2,24 @@ 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' -import IconOpenSource from '../resources/icon-open-source.svg' import Owl from '../resources/owl-icon.svg' -import Saturn from '../resources/saturn-icon.svg' import { Link } from 'gatsby' import PopOver from '../components/PopOver' 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' +import { graphql } from 'gatsby' +import ImageProvider from '../components/ImageProvider' const offers: PricingBoxProps[] = [ { title: 'Open-Source', - img: , + gatsbyImage: , price: 'Free', duration: '50 hours / month', hideButton: true, @@ -48,7 +47,7 @@ const offers: PricingBoxProps[] = [ }, { title: 'Gitpod Education', - img: , + gatsbyImage: , price: <>From {(isEurope() ? '€0.8' : '$0.9')}, duration: 'Per user/month', feature: Learn More, @@ -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 aa4a56cef..8bba07bee 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..d268dd46c 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,93 @@ 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' }]} - /> + + } + 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 + } + } + } + } +` export default SelfHostedPage diff --git a/src/pages/vendor.tsx b/src/pages/vendor.tsx index fa7f8ef0b..d1a2f1d21 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/cloud.svg b/src/resources/cloud.svg deleted file mode 100644 index e4143d757..000000000 --- a/src/resources/cloud.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file 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/free-pricing.png b/src/resources/free-pricing.png new file mode 100644 index 000000000..d26a0f1dd Binary files /dev/null and b/src/resources/free-pricing.png differ diff --git a/src/resources/go.png b/src/resources/go.png index e5a9faf43..f23303c0d 100644 Binary files a/src/resources/go.png and b/src/resources/go.png differ diff --git a/src/resources/go.svg b/src/resources/go.svg deleted file mode 100644 index dcc325c41..000000000 --- a/src/resources/go.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file 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/icon-open-source.svg b/src/resources/icon-open-source.svg deleted file mode 100644 index f312d0a73..000000000 --- a/src/resources/icon-open-source.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/resources/icon-rocket.svg b/src/resources/icon-rocket.svg deleted file mode 100644 index 17d425e7f..000000000 --- a/src/resources/icon-rocket.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/resources/java.png b/src/resources/java.png index 3e3c89126..3efe580e2 100644 Binary files a/src/resources/java.png and b/src/resources/java.png differ diff --git a/src/resources/java.svg b/src/resources/java.svg deleted file mode 100644 index 1422abc8e..000000000 --- a/src/resources/java.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/resources/js.svg b/src/resources/js.svg deleted file mode 100644 index a932f940e..000000000 --- a/src/resources/js.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/resources/kubernetes-graphic.png b/src/resources/kubernetes-graphic.png new file mode 100644 index 000000000..179f1ac78 Binary files /dev/null and b/src/resources/kubernetes-graphic.png differ diff --git a/src/resources/kubernetes-graphic.svg b/src/resources/kubernetes-graphic.svg deleted file mode 100644 index 0da6a120c..000000000 --- a/src/resources/kubernetes-graphic.svg +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Run - - - Test - - - Build - - - - - - - - - Debug - - - - - - - - diff --git a/src/resources/personal-pricing.png b/src/resources/personal-pricing.png new file mode 100644 index 000000000..487b28c9f Binary files /dev/null and b/src/resources/personal-pricing.png differ diff --git a/src/resources/planet.svg b/src/resources/planet.svg deleted file mode 100644 index 637b185ea..000000000 --- a/src/resources/planet.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/resources/professional-pricing.png b/src/resources/professional-pricing.png new file mode 100644 index 000000000..a4349ea94 Binary files /dev/null and b/src/resources/professional-pricing.png differ diff --git a/src/resources/py.svg b/src/resources/py.svg deleted file mode 100644 index 1448693d8..000000000 --- a/src/resources/py.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/resources/python.png b/src/resources/python.png new file mode 100644 index 000000000..a354238d1 Binary files /dev/null and b/src/resources/python.png differ 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/saturn-icon.svg b/src/resources/saturn-icon.svg deleted file mode 100644 index 11edb5610..000000000 --- a/src/resources/saturn-icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/resources/screenshot.png b/src/resources/screenshot.png index d16cc8e4d..22ade0b18 100644 Binary files a/src/resources/screenshot.png and b/src/resources/screenshot.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/stay-in-flow.png b/src/resources/stay-in-flow.png new file mode 100644 index 000000000..5e49a9be6 Binary files /dev/null and b/src/resources/stay-in-flow.png differ diff --git a/src/resources/ts.svg b/src/resources/ts.svg deleted file mode 100644 index 6a3b9e8e3..000000000 --- a/src/resources/ts.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/resources/typescript.png b/src/resources/typescript.png new file mode 100644 index 000000000..26f8491b3 Binary files /dev/null and b/src/resources/typescript.png differ diff --git a/src/resources/unlimited-pricing.png b/src/resources/unlimited-pricing.png new file mode 100644 index 000000000..ff5ce25f5 Binary files /dev/null and b/src/resources/unlimited-pricing.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 diff --git a/src/styles/base.ts b/src/styles/base.ts index e0e938ad2..5485076df 100644 --- a/src/styles/base.ts +++ b/src/styles/base.ts @@ -373,6 +373,15 @@ export default ` object-fit: contain; } + .gatsby-image-wrapper { + width: 100%; + height: 100%; + + img { + object-fit: contain !important; + } + } + /* ------------------------------------------- */ /* ----- Tables ----- */ /* ------------------------------------------- */