text: /**
   * Copyright (c) 2013-present, Facebook, Inc.
   *
   * @emails react-core
   */
  
  import ButtonLink from 'components/ButtonLink';
  import Container from 'components/Container';
  import Flex from 'components/Flex';
  import CodeExample from 'components/CodeExample';
  import PropTypes from 'prop-types';
  import React, {Component} from 'react';
  import {graphql} from 'gatsby';
  import TitleAndMetaTags from 'components/TitleAndMetaTags';
  import Layout from 'components/Layout';
  import {colors, media, sharedStyles} from 'theme';
  import loadScript from 'utils/loadScript';
  import createCanonicalUrl from 'utils/createCanonicalUrl';
  import {babelURL} from 'site-constants';
  import logoWhiteSvg from 'icons/logo-white.svg';
  
  class Home extends Component {
    state = {
      babelLoaded: false,
    };
  
    componentDidMount() {
      loadScript(babelURL).then(
        () => {
          this.setState({
            babelLoaded: true,
          });
        },
        error => {
          console.error('Babel failed to load.');
        },
      );
    }
  
    render() {
      const {babelLoaded} = this.state;
      const {data, location} = this.props;
      const {codeExamples, examples, marketing} = data;
  
      const code = codeExamples.edges.reduce((lookup, {node}) => {
        lookup[node.mdAbsolutePath] = node;
        return lookup;
      }, {});
  
      return (
        <Layout location={location}>
          <TitleAndMetaTags
            title="React &ndash; A JavaScript library for building user interfaces"
            canonicalUrl={createCanonicalUrl('/')}
          />
          <div css={{width: '100%'}}>
            <header
              css={{
                backgroundColor: colors.dark,
                color: colors.white,
              }}>
              <div
                css={{
                  paddingTop: 45,
                  paddingBottom: 10,
  
                  [media.greaterThan('small')]: {
                    paddingTop: 60,
                    paddingBottom: 70,
                  },
  
                  [media.greaterThan('xlarge')]: {
                    paddingTop: 95,
                    paddingBottom: 85,
                    maxWidth: 1500, // Positioning of background logo
                    marginLeft: 'auto',
                    marginRight: 'auto',
                    position: 'relative',
                    '::before': {
                      content: ' ',
                      position: 'absolute',
                      top: 0,
                      left: 0,
                      bottom: 0,
                      right: 0,
                      backgroundImage: `url(${logoWhiteSvg})`,
                      backgroundRepeat: 'no-repeat',
                      backgroundPosition: '100% 100px',
                      backgroundSize: '50% auto',
                      opacity: 0.05,
                    },
                  },
                }}>
                <div
                  css={{
                    // Content should be above absolutely-positioned hero image
                    position: 'relative',
                  }}>
                  <Container>
                    <h1
                      css={{
                        color: colors.brand,
                        textAlign: 'center',
                        margin: 0,
                        fontSize: 45,
                        letterSpacing: '0.01em',
                        [media.size('xsmall')]: {
                          fontSize: 30,
                        },
                        [media.greaterThan('xlarge')]: {
                          fontSize: 60,
                        },
                      }}>
                      Lambda
                    </h1>
                    <p
                      css={{
                        paddingTop: 15,
                        textAlign: 'center',
                        fontSize: 24,
                        letterSpacing: '0.01em',
                        fontWeight: 200,
  
                        [media.size('xsmall')]: {
                          fontSize: 16,
                          maxWidth: '12em',
                          marginLeft: 'auto',
                          marginRight: 'auto',
                        },
  
                        [media.greaterThan('xlarge')]: {
                          paddingTop: 20,
                          fontSize: 30,
                        },
                      }}>
                      Benchmark GPUs for Deep Learning
                    </p>
                    <Flex
                      valign="center"
                      halign="center"
                      css={{
                        paddingTop: 40,
                        flexWrap: 'wrap',
                        justifyContent: 'center',
  
                        [media.greaterThan('xlarge')]: {
                          paddingTop: 65,
                        },
                      }}>
                      <CtaItem>
                        <ButtonLink
                          to="/docs/getting-started.html"
                          type="primary">
                          Get Started
                        </ButtonLink>
                      </CtaItem>
                    </Flex>
                  </Container>
                </div>
              </div>
            </header>
  
          </div>
        </Layout>
      );
    }
  }
  
  Home.propTypes = {
    data: PropTypes.shape({
      examples: PropTypes.object.isRequired,
      marketing: PropTypes.object.isRequired,
    }).isRequired,
  };
  
  const CtaItem = ({children, primary = false}) => (
    <div
      css={{
        [media.between('small', 'large')]: {
          paddingLeft: 20,
        },
  
        [media.greaterThan('xlarge')]: {
          paddingLeft: 40,
        },
  
        '&:first-child': {
          textAlign: 'right',
          paddingRight: 7,
          paddingLeft: 7,
          [media.lessThan('small')]: {
            marginBottom: 10,
          },
        },
  
        '&:nth-child(2)': {
          paddingRight: 7,
          paddingLeft: 7,
          [media.greaterThan('small')]: {
            paddingLeft: 15,
          },
          [media.lessThan('small')]: {
            marginBottom: 10,
          },
        },
      }}>
      {children}
    </div>
  );
  
  export const pageQuery = graphql`
    query IndexMarkdown {
      codeExamples: allExampleCode {
        edges {
          node {
            id
            code
            mdAbsolutePath
          }
        }
      }
  
    }
  `;
  
  export default Home;
  
  const sectionStyles = {
    marginTop: 20,
    marginBottom: 15,
  
    [media.greaterThan('medium')]: {
      marginTop: 60,
      marginBottom: 65,
    },
  };
  
  const headingStyles = {
    '&&': {
      marginBottom: 20,
    },
  };
  