import { MusicTab } from "@/components/music";
import { NolaGlitch } from "@/components/nola-glitch";
import Link from "next/link";

export default function Home() {
  return (
    <main className="flex items-center h-screen">
      <div className="flex mx-12 xl:mx-32 gap-16">
        <div className="flex-1 relative hidden xl:block">
          <div className="w-[680px] absolute inset-0 mx-auto -top-1/2 translate-y-1/6">
            <div className="text-center leading-normal">
              <NolaGlitch />
            </div>
          </div>
        </div>
        <div className="space-y-3 flex-1">
          <h1 className="font-bold text-4xl leading-normal">Nonszy... <span className="bg-primary text-background">Build?</span></h1>
          <p className="text-xl leading-loose">
            What you see here that Nonszy might learning or testing a new build, on a server, a distributed server, even decentralized! So this web might be more powerful than you think! But... how do you know this address?
          </p>
          <div className="mt-8 flex items-center">
            <MusicTab />
          </div>
        </div>
      </div>
    </main>
  );
}
