<filename>src/pages/about.js
import React from 'react';
import { useStaticQuery, graphql, Link } from 'gatsby';
import Img from 'gatsby-image';
import styled from 'styled-components';

import Layout from '../components/layout';
import SEO from '../components/seo';

const Logos = styled.div`
  display: flex;
  div.logo {
    flex: 0 1 200px;
    img {
      width: 100%;
    }
  }
`;

const AboutPage = ({ data }) => {

  const logoQuery = useStaticQuery(graphql`
    query {
      gatsbyLogo: file(relativePath: { eq: "gatsby-logo.png" }) {
        childImageSharp {
          id
          fixed(width: 70) {
            base64
            tracedSVG
            aspectRatio
            width
            height
            src
            srcSet
            srcWebp
            srcSetWebp
            originalName
          }
        }
      }
      contentfulLogo: file(relativePath: { eq: "contentful-logo.png" }) {
        childImageSharp {
          id
          fixed(width: 70) {
            base64
            tracedSVG
            aspectRatio
            width
            height
            src
            srcSet
            srcWebp
            srcSetWebp
            originalName
          }
        }
      }
      netlifyLogo: file(relativePath: { eq: "netlify-logo.png" }) {
        childImageSharp {
          id
          fixed(width: 70) {
            base64
            tracedSVG
            aspectRatio
            width
            height
            src
            srcSet
            srcWebp
            srcSetWebp
            originalName
          }
        }
      }
    }
  `);
  return (
    <Layout>
      <SEO title='About' />
      <h1>About this site</h1>
      <p>This is a simple blog powered by <a href="https://www.contentful.com/">Contentful</a>, built on <a href="https://www.gatsbyjs.org/">GatsbyJS</a>, and hosted on <a href="https://www.netlify.com/">Netlify</a>.</p>
      <Logos>
        <div className="logo">
          <a href="https://www.contentful.com/">
            <Img fixed={logoQuery.contentfulLogo.childImageSharp.fixed} alt="" />
          </a>
        </div>
        <div className="logo">
          <a href="https://www.gatsbyjs.org/">
            <Img fixed={logoQuery.gatsbyLogo.childImageSharp.fixed} alt="" />
          </a>
        </div>
        <div className="logo">
          <a href="https://www.netlify.com/">
            <Img fixed={logoQuery.netlifyLogo.childImageSharp.fixed} alt="" />
          </a>
        </div>
      </Logos>
      <h2>Contact</h2>
      <p>Like what you see? Hate it? Feel free to get in touch!</p>
      <ul>
        <li><a href="https://www.facebook.com">Facebook</a></li>
        <li><a href="https://www.twitter.com">Twitter</a></li>
        <li><a href="https://www.instagram.com">Instagram</a></li>
        <li><a href="mailto:<EMAIL>">Email</a></li>
      </ul>
      <Link to="/">Go back to the homepage</Link>
    </Layout>
  )
};

export default AboutPage;
