Function Home

app/page.tsx:135–314

()

}

export default function Home() {
  return (
    <div className="min-h-screen bg-[var(--color-bg)]">
      <Header />

      {/* Hero */}
      <section className="border-b border-[var(--color-border-weak)] px-[var(--padding)] py-[var(--vertical-padding)]">
        <div className="mx-auto max-w-[67.5rem]">
          <div className="grid items-center gap-12 py-8 md:grid-cols-2 md:py-12">
            <div className="flex flex-col gap-6">
              <div className="flex items-center gap-2 text-sm text-[var(--color-text-weak)]">
                <span className="inline-block h-2 w-2 rounded-full bg-[var(--color-bg-interactive)]"></span>
                Community-driven marketplace
              </div>
              <h1 className="text-4xl font-semibold leading-tight tracking-tight text-[var(--color-text-strong)] md:text-5xl">
                Grab a seat, browse some extensions
              </h1>
              <p className="text-lg leading-relaxed text-[var(--color-text)]">
                A cozy corner of the internet where developers share extensions, plugins, 
                and tools for OpenCode. Pull up a chair and explore what the community has brewed.
              </p>
              <div className="flex flex-col gap-4 pt-4 sm:flex-row">
                <a
                  href="#extensions"
                  className="inline-flex items-center justify-center rounded-lg bg-[var(--color-bg-strong)] px-6 py-3 text-sm font-medium text-[var(--color-text-inverted)] transition-all hover:bg-[var(--color-bg-strong-hover)] active:scale-[0.98]"
                >
                  Browse the Menu
                </a>
                <Link
                  href="/submit"
                  className="inline-flex items-center justify-center rounded-lg border border-[var(--color-border)] px-6 py-3 text-sm font-medium text-[var(--color-text-strong)] transition-all hover:bg-[var(--color-bg-weak)] active:scale-[0.98]"
                >
                  Share Your Creation
                </Link>
              </div>
            </div>
            <div className="relative mx-auto aspect-square w-full max-w-md">
              <div className="absolute inset-0 rounded-2xl bg-[var(--color-bg-interactive)] opacity-20 blur-3xl"></div>
              <Image
                src="/opencode_cafe_image.jpg"
                alt="OpenCode Cafe"
                fill
                className="relative rounded-2xl object-contain"
                priority
              />
            </div>
          </div>
        </div>
      </section>

      {/* Categories */}
      <section className="border-b border-[var(--color-border-weak)] px-[var(--padding)] py-[var(--vertical-padding)]">
        <div className="mx-auto max-w-[67.5rem]">
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-[var(--color-text-strong)]">
              On the Menu
            </h2>
            <p className="mt-1 text-sm text-[var(--color-text-weak)]">