const path = require(`path`)

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import * as S from "../components/styled"
import Img from "gatsby-image"

const Image = () => {
  const data = useStaticQuery(graphql`
    query {
      hera_traced_webp: file(relativePath: { eq: "hera.jpg" }) {
        childImageSharp {
          fluid(
            maxWidth: 1200
            duotone: { highlight: "#f00e2e", shadow: "#192555" }
          ) {
            ...GatsbyImageSharpFluid_withWebp_tracedSVG
          }
        }
      }
    }
  `)

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import * as S from "../components/styled"
import Img from "gatsby-image"

const Image = () => {
  const data = useStaticQuery(graphql`
    query {
      hera_traced_webp: file(relativePath: { eq: "hera.jpg" }) {
        childImageSharp {
          fluid(
            maxWidth: 1200
            duotone: { highlight: "#f00e2e", shadow: "#192555" }
          ) {
            ...GatsbyImageSharpFluid_withWebp_tracedSVG
          }
        }
      }
    }
  `)