function HomePage() {
    return (
      <main className='flex items-center justify-center h-screen w-full overflow-hidden bg-white text-black'>
        <section className='container mx-auto relative h-[90vh] mt-4 border border-black/10 w-full overflow-hidden rounded-2xl flex items-center justify-center'>
          <article className='grid gap-4 text-center relative z-10 pt-10'>
            <span className='inline-block xl:text-base text-sm border p-1 px-3 w-fit mx-auto rounded-full border-[#3273ff] bg-[#e0f2ff]'>
              Early Access
            </span>
            <h1 className='2xl:text-6xl xl:text-5xl text-5xl font-semibold bg-gradient-to-b from-[#1a237e] to-[#5c6bc0] bg-clip-text text-transparent leading-[100%] tracking-tighter'>
              Ship Web3 Products in Seconds
            </h1>
            <span>
              GEN0 AI helps you build, deploy, and scale Web3 applications instantly. 
              <br />
              From message chatting to dApps, ship faster with AI-powered assistance.
            </span>
            <Link 
              href='/chat'
              className='border border-blue-400 w-fit p-2 px-4 rounded-md bg-blue-100 hover:bg-blue-200 backdrop-blur-2xl mx-auto text-black'
            >
              Try Now
            </Link>
          </article>

          <div className='absolute bottom-0 z-[2] h-[400px] w-screen overflow-hidden [mask-image:radial-gradient(100%_50%,black,transparent)] before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_bottom_center,#3273ff,transparent_90%)] before:opacity-40 after:absolute'>
            <Sparkles
              density={1800}
              speed={1.2}
              color='#1e88e5'
              direction='top'
              className='absolute inset-x-0 bottom-0 h-full w-full'
            />
          </div>
        </section>
      </main>
    );
  }