{"size": 3313, "ext": "js", "max_stars_repo_path": "src/templates/index-page.js", "max_stars_repo_name": "aveirinha/CovHack2020", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/templates/index-page.js", "max_issues_repo_name": "aveirinha/CovHack2020", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/templates/index-page.js", "max_forks_repo_name": "aveirinha/CovHack2020", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.8403361345, "max_line_length": 97, "alphanum_fraction": 0.5125264111}
import React from 'react'
import { graphql } from 'gatsby'
import { Container, Card, CardBody, Row, Col } from 'reactstrap'
import { MdKeyboardArrowDown } from 'react-icons/md'

import { DiagonalSplit, Map, Sponsors, Layout, HowToFindUs, Button } from '../components'

export default function IndexPage({ data }) {
  const { markdownRemark, allMarkdownRemark } = data
  const { frontmatter, html } = markdownRemark

  const howToFindUs = allMarkdownRemark.edges.map(e => ({ ...e.node, ...e.node.frontmatter }))

  const findOutMore = () => document.getElementById('findoutmore').scrollIntoView(true)

  const Emoji = ({ value }) => (
    <span role="img" aria-label="emoji">
      {value}
    </span>
  )

  return (
    <Layout>
      <div className="jumbo-outer">
        <Container className="jumbotron-padding">
          <div className="jumbo-inner">
            <h1 className="tagline">{frontmatter.tagline}</h1>
          </div>
        </Container>

        <DiagonalSplit />
      </div>

      <div className="cta-container">
        <Card className="cta shadow bg-dark" style={{ textAlign: 'center' }}>
          <CardBody>
            {/* TODO: to /register */}
            <Button primary internal to="" className="button">
              Get Tickets
            </Button>

            <Button onClick={findOutMore} className="button">
              Find Out More <MdKeyboardArrowDown className="brand-color" />
            </Button>
          </CardBody>
        </Card>
      </div>

      <span id="findoutmore" style={{ position: 'absolute', marginTop: '-40px' }} />

      <Container style={{ marginTop: '3em', marginBottom: '3em' }}>
        <Row>
          <Col md="12" lg="8">
            <div className="markdown-content" dangerouslySetInnerHTML={{ __html: html }} />
          </Col>

          <Col md="12" lg="4">
            <div className="box card-shadow-effect">
              <div style={{ padding: '1.5em' }} className="key-points">
                <ul>
                  <li>
                    <Emoji value={'📅'} /> 15-16th February 2020
                  </li>
                  <li>
                    <Emoji value={'🎓'} /> Open to all students
                  </li>
                  <li>
                    <Emoji value={'💸'} /> Free!
                  </li>
                </ul>
              </div>
            </div>
          </Col>
        </Row>

        <h2 style={{ marginTop: '1.5rem' }}>
          <Emoji value={'📍'} /> How To Find Us
        </h2>

        <p>
          CovHack is being held at the Engineering, Environment, and Computing building (known as
          the EEC) the Coventry University Campus.
        </p>

        <HowToFindUs howToFindUs={howToFindUs} style={{ marginBottom: '2em' }} />

        <Map />
      </Container>

      <Sponsors className="mb-10" />
    </Layout>
  )
}

export const pageQuery = graphql`
  query IndexPageTemplate {
    markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
      html
      frontmatter {
        title
        tagline
      }
    }

    allMarkdownRemark(filter: { frontmatter: { type: { eq: "how-to-find-us" } } }) {
      edges {
        node {
          id
          html
          frontmatter {
            title
            listOrder
          }
        }
      }
    }
  }
`
