import { PiArrowDownThin } from "react-icons/pi";
import AuctionProcess from "./components/AuctionProcess";

export default function Home() {
  return (
  <main>
    <section className="bg-hero-image bg-center max-w-1920 max-h-1080 h-800px mx-auto rounded justify-center items-center text-center flex flex-col gap-y-16 border-solid border-b-black ">
      <div className="grid w-full h-full bg-[rgba(0,0,0,0.5)] place-items-center">
        <div>
          <h1 className="text-6xl font-bold text-white">Skal du af med din bil?</h1>
          <p className="mt-4 text-lg text-white">Her hos scrap specialisere vi os i at hjælpe dig med at finde et nyt hjem til din brugte bil</p>
        </div>
      </div>
    </section>
    <div className="text-center text-3xl mt-14 border-b border-b-black max-w-1920 max-h-1080 mx-auto pb-16">
      <p className="text-bold">Hvordan fungere det?</p>
      <p>klik her!</p>
      <PiArrowDownThin className="text-7xl mx-auto mt-10" />
    </div>
    <section>
      <AuctionProcess />
    </section>
  </main>
  );
}