text: import * as React from "react"
  import { Link } from "gatsby"
  import { graphql } from "gatsby"
  import BackgroundImage from "gatsby-background-image"
  import FordSvg from "../images/gpo-ford-pimp.svg"
  
  
  
  
  
  import Layout from "../components/layout"
  import Seo from "../components/seo"
  
  
  
  const IndexPage = (props) => (
    <Layout>
      <Seo title="Home" />
      <section className="gpo-hero-tabs">
        <div className="wrapper" >
          <BackgroundImage
            className="gpo-heroImage"
            fluid={props.data.indexImage.childImageSharp.fluid}
            fadeIn
          >
            <div className="gpo-black-overlay">
              <div className="gpo-content-box">
                <h3>
                  CALL TO ACTION
                </h3>
              </div>
  
            </div>
          </BackgroundImage>
          <div className="gpo-hero-tabs-container" >
            <a className="gpo-hero-tab" href="#tab-oktatas">#Oktatás</a>
            <a className="gpo-hero-tab" href="#tab-rolunk">#Rólunk</a>
            <a className="gpo-hero-tab" href="#tab-tanuloink">#Tanulóink</a>
            <a className="gpo-hero-tab" href="#tab-kapcsolat">#Kapcsolat</a>
  
  
            <span className="gpo-hero-tab-slider" style={{
              maxWidth: '40px',
              width: '40px',
              display: "inline-block",
            }}>
              <FordSvg />
            </span>
          </div>
        </div>
      </section >
      <main id="primary" className="site-main">
        <section className="gpo-slide" id="tab-oktatas">
          <h1>Oktatas</h1>
          <h3>something about Oktatas</h3>
          <h5>
            <a href="https://codepen.io/ettrics/pen/Wpbxgw"> Follow this.</a>
          </h5>
  
        </section>
        <section className="gpo-slide" id="tab-rolunk">
          <h1>Rolunk</h1>
          <h2>[CARDS]</h2>
          <h3>something about Rolunk</h3>
        </section>
        <section className="gpo-slide" id="tab-tanuloink">
          <h1>Tanuloink</h1>
          <h2>[SLIDER]</h2>
  
          <h3>Incredibly Basic Slider</h3>
          <div id="gpo-slider" style={{width: '300px', height: '190px'}}>
            <a href="javascript:;" className="gpo-control_next"> &gt; </a>
            <a href="javascript:;" className="gpo-control_prev"> &lt; </a>
            <ul>
              <li style={{background: ''#aaa''}}>SLIDE 4</li>
              <li>SLIDE 1</li>
              <li style="background: #aaa">SLIDE 2</li>
              <li>SLIDE 3</li>
            </ul>
          </div>
  
          <div className="gpo-slider_option">
            <input type="checkbox" id="checkbox" />
            <label for="checkbox">Autoplay Slider</label>
          </div>
          <h3>something about Tanuloink</h3>
        </section>
  
        <section className="gpo-slide" id="tab-kapcsolat">
          <h1>Kapcsolat</h1>
          <h2>[FORM]</h2>
  
  
  
          <h2>[LEAFLET_MAP]</h2>
          <h3>something about Kapcsolat</h3>
        </section>
      </main>
  
  
  
    </Layout>
  )
  
  export default IndexPage
  
  export const pageQuery = graphql`
  query{
      indexImage:file(relativePath:{
          eq:"gpo-hero-webp.webp"
      }){
          childImageSharp{
              fluid(maxWidth:1800){
                  ...GatsbyImageSharpFluid
              }
          }
      }
  }
  `;