text: import React from 'react';
  import PropTypes from 'prop-types';
  import { graphql } from 'gatsby';
  import Content, { HTMLContent } from '../components/Content';
  import { Fade } from '../animations/';
  import Head from '../components/Head';
  
  export const AboutPageTemplate = ({ title, content, contentComponent }) => {
    const PageContent = contentComponent || Content;
  
    return (
      <Fade>
        {style => (
          <div style={style} className="circle-text flex-container__column">
            <h1 className="heading">{title}</h1>
            <div>
              <PageContent className="content" content={content} />
            </div>
          </div>
        )}
      </Fade>
    );
  };
  
  AboutPageTemplate.propTypes = {
    title: PropTypes.string.isRequired,
    content: PropTypes.string,
    contentComponent: PropTypes.func,
  };
  
  const AboutPage = ({ data }) => {
    const { markdownRemark: post } = data;
  
    return (
      <>
        <Head
          title={post.frontmatter.title}
        />
        <AboutPageTemplate
          contentComponent={HTMLContent}
          title={post.frontmatter.title}
          content={post.html}
        />
      </>
    );
  };
  
  AboutPage.propTypes = {
    data: PropTypes.object.isRequired,
  };
  
  export default AboutPage;
  
  export const aboutPageQuery = graphql`
    query AboutPage($id: String!) {
      markdownRemark(id: { eq: $id }) {
        html
        frontmatter {
          path
          title
        }
      }
    }
  `;
  