import packageJson from "reacord/package.json"
import { Link } from "remix"
import LandingExample from "~/components/landing-example.mdx"
import { MainNavigation } from "~/components/main-navigation"
import { maxWidthContainer } from "~/styles"

export default function Landing() {
  return (
    <div className="flex flex-col min-w-0 min-h-screen text-center">
      <header className={maxWidthContainer}>
        <MainNavigation />
      </header>
      <div className="pt-0 px-4 pb-8 m-auto">
        <main className="max-w-screen-md px-4 py-6 m-auto space-y-5 rounded-lg shadow-md bg-slate-800">
          <h1 className="text-6xl font-light">reacord</h1>
          <div className="overflow-x-auto">
            <section className="mx-auto text-sm shadow w-fit sm:text-base">
              <LandingExample />
            </section>
          </div>
          <p className="px-8 text-2xl font-light">{packageJson.description}</p>
          <Link
            to="/docs/guides/getting-started"
            className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow-md"
          >
            Get Started
          </Link>
        </main>
      </div>
    </div>
  )
}