index.js

import React from 'react'

const IndexPage = ({ data }) => (
  <div className="Catalogue">
    {
      data.site.siteMetadata.products.map(product => (
        <div className="Catalogue__item" key={product.slug}>
          <a href="#" className="Product">
            <div className="Product__image">
              <img src={product.image} />
            </div>
            <div className="Product__details">
              <div className="Product__name">
                {product.name}
                <span className="Product__price">
                  {product.price}€
                </span>
              </div>
              <div className="Product__buy">Buy now</div>
            </div>
          </a>
        </div>
      ))
    }
  </div>
)

export default IndexPage

export const query = graphql`
  query CatalogueQuery {
    site {
      siteMetadata {
        products {
          slug
          name
          image
          price
        }
      }
    }
  }
`