{"size": 1771, "ext": "js", "max_stars_repo_path": "src/pages/index.js", "max_stars_repo_name": "AllenLiu7/Gatsby-ecommerce", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/index.js", "max_issues_repo_name": "AllenLiu7/Gatsby-ecommerce", "max_issues_repo_issues_event_min_datetime": "2020-07-15T02:57:14.000Z", "max_issues_repo_issues_event_max_datetime": "2020-07-15T02:57:14.000Z", "max_forks_repo_path": "src/pages/index.js", "max_forks_repo_name": "AllenLiu7/Gatsby-ecommerce", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 23.9324324324, "max_line_length": 97, "alphanum_fraction": 0.5640880858}
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import BackgroundSection from "../components/Globals/BackgroundSection"
import Info from "../components/Home/info"
import Menu from "../components/menu"
import Product from "../components/product"
import Contact from "../components/contact"
import VideoBack from "../components/Globals/videoBackground"

const IndexPage = ({ data }) => (
  <Layout>
    <SEO title="Home" />
    <VideoBack></VideoBack>
    {/* <BackgroundSection
      imagedata={data.img.childImageSharp.fluid}
      title={"Regular Joe's"}
      className={"default-background text-center"}
      // here it is trick to add text-center plus the align-item center to make the title center.
    /> */}
    <Info />
    <Menu item={data.menu} />
    <Product item={data.product} />
    <Contact />
  </Layout>
)

export const qurey = graphql`
  {
    img: file(relativePath: { eq: "default-background.jpeg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid_tracedSVG
        }
      }
    }
    menu: allContentfulCoffeeitem {
      edges {
        node {
          id
          title
          description
          price
          category
          image {
            fixed(width: 50, height: 50) {
              ...GatsbyContentfulFixed
            }
          }
        }
      }
    }
    product: allContentfulProductforsell {
      edges {
        node {
          id
          title
          description
          price
          image {
            fluid(maxHeight: 300, maxWidth: 500) {
              src
              ...GatsbyContentfulFluid
            }
          }
        }
      }
    }
  }
`

export default IndexPage
