import React from 'react';

import pencil from '../assets/images/pencil.gif';

export default function PartTwo() {
  return (
    <div
      className="w-full sm:h-screen flex flex-col items-center justify-center sm:py-16 sm:px-20 p-4 my-8"
      id="part-two"
    >
      <img src={pencil} alt="pencil" className="object-cover sm:h-32 h-20" />

      <div className="text-red-600 uppercase text-sm font-bold font-avenirblack sm:mb-8 mb-4 tracking-wide sm:w-auto w-1/2 sm:text-left text-center">
        Business Problems we've solved
      </div>

      <div className="w-full sm:h-1/3 flex sm:flex-row flex-col items-center sm:justify-between">
        <div className="bg-gray-144 flex flex-col justify-end items-start sm:w-two-row w-full p-8 sm:h-full h-60 sm:mb-0 mb-4">
          <div className="font-avenirbook text-lg sm:w-1/3 w-3/4 text-gray-200 sm:mb-4 mb-2">
            Can a love story double as a hearing test?
          </div>

          <a
            href="/"
            className="font-avenirbook text-sm w-1/2 underline text-gray-100 hover:no-underline focus:no-underline"
          >
            Find out here
          </a>
        </div>

        <div className="bg-gray-144 flex flex-col justify-end items-start sm:w-two-row w-full p-8 sm:h-full h-60 sm:mb-0 mb-4">
          <div className="font-avenirbook text-lg sm:w-1/3 w-3/4 text-gray-200 sm:mb-4 mb-2">
            How close to an AFL player can you get?
          </div>

          <a
            href="/"
            className="font-avenirbook text-sm w-1/2 underline text-gray-100 hover:no-underline focus:no-underline"
          >
            Find out here
          </a>
        </div>
      </div>

      <a
        href="/"
        className="font-avenirbook text-sm underline sm:mt-20 mt-4 text-gray-900 hover:no-underline focus:no-underline"
      >
        View our work
      </a>

      {/* <img
        src={part1banner}
        alt="part-1-banner"
        className="w-full object-cover sm:h-5/6"
      /> */}
    </div>
  );
}