product.js

import React, { useState } from "react"
import { graphql } from 'gatsby'
import Layout from "../components/layout"
import SEO from "../components/seo"
import styled, { css } from "styled-components"  }


export default ({ data }) => {


const images = data.datoCmsProduct.gallery

return (
  <Layout>
    <SEO title={data.datoCmsProduct.name}/>
    <SectionHero>
      <StyledHeroSlogan>
        <h1>{data.datoCmsProduct.name}</h1>
      </StyledHeroSlogan>
        <StyledHeroImg
          fluid={data.datoCmsProduct.imagePage.fluid}
        />
    </SectionHero>
    <SectionDescription>
      <Container>
        <SectionHeader>Produkt: <strong>{data.datoCmsProduct.name}</strong></SectionHeader>
          <Paragraph>{data.datoCmsProduct.descriptionPage}</Paragraph>
       </Container>
    </Layout>
  )
}

export const query = graphql`
    query WorkQuery($slug: String!) {
          datoCmsProduct(slug: { eq: $slug }) {
              name
              imagePage {
                  fluid(maxWidth: 1000, imgixParams: {fm: "png", auto: "compress"}) {
                      ...GatsbyDatoCmsFluid
                  }
              }
              descriptionPage
          }
    }
`