import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
import { ChevronRightIcon } from '@heroicons/react/20/solid'
import { Button } from './Button'


export default function BuildHero() {
  return (
    <div className="relative overflow-hidden">
      <main>
        <div className="bg-transparent pt-10 sm:pt-16 lg:overflow-hidden lg:pt-8 lg:pb-14">
          <div className="mx-auto max-w-7xl lg:px-4">
            <div className="lg:grid lg:grid-cols-2 lg:gap-16">
              <div className="mx-auto max-w-md px-6 sm:max-w-2xl sm:text-center lg:flex lg:items-center lg:px-0 lg:text-left">
                <div className="lg:py-24">
                  <div className="hidden sm:mb-5 sm:flex sm:justify-center lg:justify-start">
                  </div>
                  <h1 className="text-xl font-medium tracking-tight text-white lg:text-5xl">
                    <span className="block">Build on a Decentralized Internet Infrastructure</span>
                  </h1>
                  <p className="mt-3 text-base text-gray-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
                  Our unique technology enables anyone to become a provider of network, storage and compute capacity.
                  </p>
                  <div className="mt-10 sm:mt-12">
                    <Button color="gradient" href="https://docs.threefold.io/docs/introduction/">Dive Deeper</Button>
                  </div>
                </div>
              </div>
              <div className="mt-12 -mb-16 sm:-mb-48 lg:relative lg:m-0 flex items-center justify-center">
                <div className="mx-auto max-w-md px-6 sm:max-w-2xl lg:max-w-none lg:px-0">
                  {/* Illustration taken from Lucid Illustrations: https://lucid.pixsellz.io/ */}
                  <img
                    alt=""
                    src="/images/build.svg"
                    className="w-full lg:h-full lg:w-auto lg:max-w-none transform lg:scale-110"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}