text: import React from 'react'
  import PropTypes from 'prop-types'
  import { graphql } from 'gatsby'
  import Layout from '../components/Layout'
  import Content, { HTMLContent } from '../components/Content'
  import ContentBar from '../components/ContentBar'
  
  export const AboutPageTemplate = ({ title, image, content, contentComponent }) => {
    const PageContent = contentComponent || Content
    console.log(image)
  
    return (
      <div>
        <section className="section section--gradient about-page">
        <ContentBar 
          text={title}
          color={'white'}
          background={image}
          textposition={'center'}
          backgroundposition={'center center'}
          textCenterOnBg={true}
        />
          <div className="container about-page-content">
            <div 
              className="columns"
            >
              <div className="column is-10 is-offset-1">
  
                <div className="section">
                  <h2 className="title is-size-3 has-text-weight-bold is-bold-light">
                    {/*title*/}
                  </h2>
                  <PageContent className="content" content={content} />
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    )
  }
  
  AboutPageTemplate.propTypes = {
    title: PropTypes.string.isRequired,
    content: PropTypes.string,
    contentComponent: PropTypes.func,
  }
  
  const AboutPage = ({ data }) => {
    const { markdownRemark: post } = data
  
    return (
      <Layout>
        <AboutPageTemplate
          contentComponent={HTMLContent}
          title={post.frontmatter.title}
          content={post.html}
          image={post.frontmatter}
        />
      </Layout>
    )
  }
  
  AboutPage.propTypes = {
    data: PropTypes.object.isRequired,
  }
  
  export default AboutPage
  
  export const aboutPageQuery = graphql`
    query AboutPage($id: String!) {
      markdownRemark(id: { eq: $id }) {
        html
        frontmatter {
          title
          image {
            childImageSharp {
              fluid(maxWidth: 2048, quality: 100) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `
  