text: import React from "react"
  import Layout from "../components/Layout"
  import { StaticImage } from "gatsby-plugin-image"
  import { Link, graphql } from "gatsby"
  import RecipesList from "../components/RecipesList"
  import SEO from "../components/SEO"
  
  const About = ({
    data: {
      allContentfulRecipe: { nodes: recipes },
    },
  }) => {
    return (
      <Layout>
        <SEO title="About" />
        <main className="page">
          <section className="about-page">
            <article>
              <h2>Want To Get In Touch?</h2>
              <p>
                Four dollar toast biodiesel plaid salvia actually pickled banjo
                bespoke mlkshk intelligentsia edison bulb synth.
              </p>
              <p>
                Hashtag swag health goth air plant, raclette listicle fingerstache
                cold-pressed fanny pack bicycle rights cardigan poke.
              </p>
              <Link to="/contact" className="btn">
                contact us
              </Link>
            </article>
            <StaticImage
              src="../assets/images/about.jpeg"
              alt="Person Pouring Salt in Bowl"
              className="about-img"
              placeholder="blurred"
            />
          </section>
          <section className="featured-recipes">
            <h5>look at this awsome recipes!</h5>
            <RecipesList recipes={recipes} />
          </section>
        </main>
      </Layout>
    )
  }
  
  export const query = graphql`
    {
      allContentfulRecipe(
        sort: { fields: title, order: ASC }
        filter: { featured: { eq: true } }
      ) {
        nodes {
          id
          title
          cookTime
          prepTime
          image {
            gatsbyImageData(layout: CONSTRAINED, placeholder: BLURRED)
          }
        }
      }
    }
  `
  
  export default About
  