{{ define "timeline/fragments/hero" }}
    <div class="mx-auto max-w-[100rem] grid grid-cols-1 md:grid-cols-2 text-black dark:text-white px-6 py-4 gap-6 items-center md:flex-row">
      <h1 class="font-bold text-5xl md:text-6xl lg:text-8xl">tightly-knit<br>social coding.</h1>
      <div id="hero-right" class="space-y-6">
        <p class="text-xl">
            The next-generation social coding platform.
        </p>
        <p class="text-xl">
          We envision a place where developers have ownership of their code,
          communities can freely self-govern and most importantly, coding can
          be social and fun again.
        </p>
        <form class="flex gap-2 items-stretch" method="get" action="/signup">
          <input
              type="email"
              id="email"
              name="id"
              tabindex="4"
              required
              placeholder="Enter your email"
              class="py-2 w-full md:w-fit"
          />
          <button class="btn-create flex items-center gap-2 text-base whitespace-nowrap" type="submit">
            join now
            {{ i "arrow-right" "size-4" }}
          </button>
        </form>
      </div>
    </div>
{{ end }}