// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`📸 of Home page 1`] = `
<div
  className="container mx-auto"
>
  <nav
    className="flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200"
  >
    <div
      className="flex items-center flex-shrink-0 text-gray-700 mr-6"
    >
      <img
        alt="portal logo"
        src="/images/logo.svg"
        width="40"
      />
    </div>
    <div
      className="block lg:hidden mx-4"
    >
      <button
        className="flex items-center px-3 py-2 border rounded text-gray-700 border-orange-400 hover:text-black hover:border-black"
        onClick={[Function]}
      >
        <svg
          className="fill-current h-3 w-3"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <title>
            Menu
          </title>
          <path
            d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"
          />
        </svg>
      </button>
    </div>
    <div
      className="hidden lg:block"
    >
      <a
        className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6"
        href="/search"
        onClick={[Function]}
        onMouseEnter={[Function]}
      >
        Search
      </a>
      <a
        className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6"
        href="http://tech.datopian.com/frontend/"
        onClick={[Function]}
        onMouseEnter={[Function]}
        target="_blank"
      >
        Docs
      </a>
      <a
        className="inline-block text-sm px-4 py-2 leading-none border rounded text-white bg-black border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0"
        href="https://github.com/datopian/portal"
        onClick={[Function]}
        onMouseEnter={[Function]}
      >
        GitHub
      </a>
    </div>
  </nav>
  <section
    className="flex justify-center items-center flex-col mt-8 mx-4 lg:flex-row"
  >
    <div>
      <h1
        className="text-4xl mb-3 font-thin"
      >
        Find, Share and Publish 
        <br />
         Quality Data with 
        <span
          className="text-orange-500"
        >
          Datahub
        </span>
      </h1>
      <p
        className="text-md font-light mb-3 w-4/5"
      >
        At Datahub, we have over thousands of datasets for free and a Premium Data Service for additional or customised data with guaranteed updates.
      </p>
      <form
        className="flex items-center"
        onSubmit={[Function]}
      >
        <input
          aria-label="Search"
          className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
          name="q"
          onChange={[Function]}
          placeholder="Search"
          type="text"
        />
        <button
          className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
          onClick={[Function]}
        >
          Search
        </button>
      </form>
    </div>
    <div
      className="mt-4"
    >
      <img
        className="w-4/5"
        src="/images/banner.svg"
      />
    </div>
  </section>
  <section
    className="my-10 mx-4 lg:my-20"
  >
    <h1
      className="text-2xl font-thin mb-4"
    >
      Recent Datasets
    </h1>
    <div
      className="flex flex-col lg:flex-row"
    >
      <div
        className="border px-4 mb-4 mr-3 border-gray-100 w-5/6 shadow-sm"
      >
        <h1
          className="text-2xl font-thin"
        >
          Our World in Data - COVID 19
        </h1>
        <p
          className="text-gray-500"
        >
          Dataset
        </p>
        <p>
          data collected and managed by Our World in Data - COVID 19 pulled from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus
        </p>
        <a
          className="pt-3 flex justify-end text-orange-500"
          href="/"
          onClick={[Function]}
          onMouseEnter={[Function]}
        >
           View Dataset 
        </a>
      </div>
      <div
        className="border px-4 mb-4 mr-3 border-gray-100 w-5/6  shadow-sm"
      >
        <h1
          className="text-2xl font-thin"
        >
          Our World in Data - COVID 19
        </h1>
        <p
          className="text-gray-500"
        >
          Dataset
        </p>
        <p>
          data collected and managed by Our World in Data - COVID 19 pulled from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus
        </p>
        <a
          className="pt-3 flex justify-end  text-orange-500"
          href="/"
          onClick={[Function]}
          onMouseEnter={[Function]}
        >
           View Dataset 
        </a>
      </div>
      <div
        className="border px-4 mb-4 border-gray-100 w-5/6 shadow-sm"
      >
        <h1
          className="text-2xl font-thin"
        >
          Our World in Data - COVID 19
        </h1>
        <p
          className="text-gray-500 mb-2"
        >
          Dataset
        </p>
        <p>
          data collected and managed by Our World in Data - COVID 19 pulled from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus
        </p>
        <a
          className="pt-3 flex justify-end  text-orange-500"
          href="/"
          onClick={[Function]}
          onMouseEnter={[Function]}
        >
           View Dataset 
        </a>
      </div>
    </div>
  </section>
</div>
`;