import Link from "next/link";

export default function Home() {
  return (
    <div className="h-screen">
      <nav className="p-4 mx-10 flex flex-row justify-between">
        <div id="logo" className="flex flex-row gap-2 items-end">
          <div className="text-action font-bold text-4xl font-mono">peroxy</div>
          <span className="text-secondary font-mono font-bold">dev</span>
        </div>
        <div className="flex flex-row gap-10 items-center font-medium font-mono">
          <Link href="/pidhsome">
            <button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
              link 1
            </button>
          </Link>
          <Link href="/pidhsome">
            <button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
              link 2
            </button>
          </Link>
          <Link href="/pidhsome">
            <button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
              link 3
            </button>
          </Link>
        </div>
      </nav>
      <main className="mx-10">
        <div className="grid grid-cols-2 xs:grid-cols-1 mt-20">
          <div className="bg-primary-dark p-10 rounded-lg flex flex-col justify-between h-96 w-2/3 xs:w-full text-lg text-primary-text/90">
            <div>
              <span className="font-bold text-xl text-primary-text">
                Lorem ipsum dolor{" "}
              </span>{" "}
              sit amet consectetur adipisicing elit. Laboriosam ab quia quae
              reiciendis. Nostrum corrupti laboriosam quae vero repudiandae
              dolorem quos dolores laborum recusandae atque itaque illo autem
              neque odit, in soluta sit alias necessitatibus fugit veniam sunt
              at.
            </div>
            <button className="px-4 py-2 rounded-lg bg-primary hover:bg-primary/50 transition-all ease-out duration-150 font-bold w-fit">
              Action
            </button>
          </div>
          <div id="showcase" className="w-full h-96 bg-primary-text">
            <div className="text-primary-dark m-auto w-fit">showcase</div>
          </div>
        </div>
      </main>
    </div>
  );
}