text: import React from "react"
  
  import Layout from "../components/layout"
  import SEO from "../components/seo"
  import featureImage from "../../static/images/hero.png";
  import thumbnailEvent from "../../static/images/feature-event.png"
  import thumbnailBoard from "../../static/images/feature-board.png"
  import thumbnailNews from "../../static/images/feature-news.png"
  import thumbnailTeams from "../../static/images/feature-team.png"
  import thumbnailStaff from "../../static/images/feature-user.png"
  
  const IndexPage = () => (
      <Layout>
          <SEO title="Make your Staff and Workspace Happy"/>
  
          <div className={"page-header home"}>
              <h1>Agenda tus servicios en una plataforma</h1>
              <p>Saas te permite crear, gestionar, y agendar tus servicios<br/>en minutos.</p>
              <img alt={"Dashboard"} src={featureImage}/>
          </div>
  
          <div className={"container"}>
              <div className={"features"}>
                  <div className={"feature__item"}>
                      <div className={"row"}>
                          <div className={"col-6 first"}>
                              <div className={"thumbnail"}>
                                  <img alt={"Event"} src={thumbnailEvent}/>
                              </div>
                          </div>
  
                          <div className={"col-6"}>
                              <div className={"feature__content"}>
                                  <h2>Agenda servicios de una forma fácil</h2>
                                  <p>Save your time and energy by letting HiStaff to manage your events (handle the colleague’s birthday, gathering, etc.)</p>
                              </div>
                          </div>
                      </div>
                  </div>
  
                  <div className={"feature__item"}>
                      <div className={"row"}>
                          <div className={"col-6"}>
                              <div className={"feature__content"}>
                                  <h2>Gestiona tus servicios</h2>
                                  <p>Mira actualizaciones , estados de pago, información adicional,<br/>detalles de usuario en un único lugar. </p>
                              </div>
                          </div>
  
                          <div className={"col-6 first"}>
                              <div className={"thumbnail"}>
                                  <img alt={"Board"} src={thumbnailBoard}/>
                              </div>
                          </div>
                      </div>
                  </div>
  
                  <div className={"feature__item"}>
                      <div className={"row"}>
                          <div className={"col-6 first"}>
                              <div className={"thumbnail"}>
                                  <img alt={"News"} src={thumbnailNews}/>
                              </div>
                          </div>
  
                          <div className={"col-6"}>
                              <div className={"feature__content"}>
                                  <h2>Crea productos</h2>
                                  <p>¿Comida a domicilio?, ¿Regalos a domicilio?, ¿Masajes a domicilio? . Lo que quieras puedes crearlo en nuestra plataforma.</p>
                              </div>
                          </div>
                      </div>
                  </div>
  
                  <div className={"feature__item"}>
                      <div className={"row"}>
                          <div className={"col-6"}>
                              <div className={"feature__content"}>
                                  <h2>Mide Satisfacción</h2>
                                  <p>Puedes medir la satisfacción de tus usuarios, luego de cada servicio.</p>
                              </div>
                          </div>
  
                          <div className={"col-6 first"}>
                              <div className={"thumbnail"}>
                                  <img alt={"Team"} src={thumbnailTeams}/>
                              </div>
                          </div>
                      </div>
                  </div>
  
                  <div className={"feature__item"}>
                      <div className={"row"}>
                          <div className={"col-6 first"}>
                              <div className={"thumbnail"}>
                                  <img alt={"Users"} src={thumbnailStaff}/>
                              </div>
                          </div>
  
                          <div className={"col-6"}>
                              <div className={"feature__content"}>
                                  <h2>Facturación y pagos</h2>
                                  <p>Crea diferentes formas de pago y factura a tus clientes.</p>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
  
          <div className={"call-to-action"}>
              <div className={"container"}>
                  <div className={"call-to-action__content"}>
                      <h2>Sign up for free</h2>
                      <p>Sign up and start increasing the productivity of your business with HiStaff.</p>
                  </div>
  
                  <div className={"button"}>
                      <a href="https://app.histaff.io" target={"_blank"}>Get Started</a>
                  </div>
              </div>
          </div>
      </Layout>
  )
  
  export default IndexPage
  