text: import React from 'react';
  import PropTypes from 'prop-types';
  import { graphql } from 'gatsby';
  
  import Layout from '../components/Layouts/Main';
  import { Jumbotron } from '../components/Home';
  
  export const IndexPageTemplate = props => {
    const { main } = props;
  
    return (
      <div className="container">
        <Jumbotron {...main} />
      </div>
    );
  };
  
  IndexPageTemplate.propTypes = {
    image: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
    heading: PropTypes.string,
    subheading: PropTypes.string,
    description: PropTypes.string,
  };
  
  const IndexPage = ({ data }) => {
    const { frontmatter } = data.markdownRemark;
  
    return (
      <Layout circles>
        <IndexPageTemplate {...frontmatter} />
      </Layout>
    );
  };
  
  IndexPage.propTypes = {
    data: PropTypes.shape({
      markdownRemark: PropTypes.shape({
        frontmatter: PropTypes.object
      })
    })
  };
  
  export default IndexPage;
  
  export const pageQuery = graphql`
    query IndexPageTemplate {
      markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
        frontmatter {
          title
          heading
          subheading
          main {
            heading
            subheading
            description
            button
            image1 {
              alt
              image {
                childImageSharp {
                  fluid(maxWidth: 2048, quality: 100) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }
      }
    }
  `;
  