export async function NewsLetterSignUp() {
  'use server'

  const waitingList = async (input_value) => {
    "use server"
    console.log(input_value)
  }

  return (
    (<div className="flex flex-col min-h-[100dvh]">
      <main className="flex-1">
        <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
          <div
            className="container flex flex-col items-center justify-center gap-4 px-4 text-center md:px-6">
            <div className="space-y-3">
              <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                Embrace the Future of Creativity
              </h1>
              <p
                className="max-w-[700px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
                We are currently in Dark Mode and have no set date when we will begin rolling out features publicly, but if you are
                eager to be one of the very first to experience the Future of Creative Competition, Collaboration, and Community,
                you can sign up here on our Waiting List. We will reach out as features are rolled out to be tested.
              </p>
            </div>
            <form action={waitingList} className="flex flex-col gap-4 max-w-sm w-full">
              <Input placeholder="Enter your email" type="email" />
              <Button type="submit" size="lg">Join our Waiting List</Button>
            </form>
          </div>
        </section>
      </main>
    </div>)
  );
}

FormData { [Symbol(state)]: [] }