Onboarding Steps

<!--
  Day 88: Onboarding Steps

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Onboarding Steps -->
<div
  class="relative mx-auto w-full max-w-3xl rounded-3xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
  <div class="rounded-2xl bg-white p-8">
    <div class="flex flex-col items-center">
      <!-- Progress Steps -->
      <div class="mb-8 flex w-full items-center justify-between">
        <div class="flex items-center gap-3">
          <div
            class="flex size-10 items-center justify-center rounded-full bg-indigo-600 text-sm font-medium text-white"
          >
            1
          </div>
          <span class="hidden text-sm font-medium text-zinc-900 sm:inline"
            >Account</span
          >
        </div>
        <div
          class="mx-0.5 h-0.5 grow bg-indigo-600 sm:mx-4"
          aria-hidden="true"
        ></div>
        <div class="flex items-center gap-3">
          <div
            class="flex size-10 items-center justify-center rounded-full bg-indigo-600 text-sm font-medium text-white"
          >
            2
          </div>
          <span class="hidden text-sm font-medium text-zinc-900 sm:inline"
            >Profile</span
          >
        </div>
        <div
          class="mx-0.5 h-0.5 grow bg-zinc-200 sm:mx-4"
          aria-hidden="true"
        ></div>
        <div class="flex items-center gap-3">
          <div
            class="flex size-10 items-center justify-center rounded-full border-2 border-zinc-200 bg-white text-sm font-medium text-zinc-400"
          >
            3
          </div>
          <span class="hidden text-sm font-medium text-zinc-400 sm:inline"
            >Billing</span
          >
        </div>
        <div
          class="mx-0.5 h-0.5 grow bg-zinc-200 sm:mx-4"
          aria-hidden="true"
        ></div>
        <div class="flex items-center gap-3">
          <div
            class="flex size-10 items-center justify-center rounded-full border-2 border-zinc-200 bg-white text-sm font-medium text-zinc-400"
          >
            4
          </div>
          <span class="hidden text-sm font-medium text-zinc-400 sm:inline"
            >Complete</span
          >
        </div>
      </div>
      <!-- END Progress Steps -->

      <!-- Form Content -->
      <div class="w-full max-w-md">
        <div class="mb-6 text-center">
          <h2 class="text-2xl font-bold text-zinc-900">Create your profile</h2>
          <p class="mt-2 text-sm text-zinc-600">
            Tell us a bit about yourself to personalize your experience.
          </p>
        </div>

        <form class="space-y-6" onsubmit="return false;">
          <div class="space-y-1">
            <label for="name" class="block text-sm font-medium text-zinc-700"
              >Full name</label
            >
            <input
              type="text"
              id="name"
              name="name"
              class="block w-full rounded-lg border border-zinc-200 bg-white px-4 py-2.5 text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50 focus:outline-hidden"
              placeholder="Enter your full name"
            />
          </div>

          <div class="space-y-1">
            <label for="bio" class="block text-sm font-medium text-zinc-700"
              >Bio</label
            >
            <textarea
              id="bio"
              name="bio"
              rows="3"
              class="block w-full rounded-lg border border-zinc-200 bg-white px-4 py-2.5 text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50 focus:outline-hidden"
              placeholder="Write a short bio about yourself..."
            ></textarea>
          </div>

          <div class="space-y-2">
            <label class="block text-sm font-medium text-zinc-700"
              >Profile picture</label
            >
            <div
              class="mt-1 flex flex-col items-start gap-4 sm:flex-row sm:items-center"
            >
              <div
                class="flex size-12 flex-none items-center justify-center rounded-full bg-zinc-100"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  aria-hidden="true"
                  class="lucide lucide-circle-user inline-block size-6 text-zinc-400"
                >
                  <circle cx="12" cy="12" r="10" />
                  <circle cx="12" cy="10" r="3" />
                  <path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662" />
                </svg>
              </div>
              <label class="block">
                <span class="sr-only">Choose profile photo</span>
                <input
                  type="file"
                  id="photo"
                  name="photo"
                  class="block w-full text-sm text-zinc-500 file:mr-4 file:rounded-sm file:border-0 file:bg-zinc-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-zinc-700 hover:file:bg-zinc-100"
                />
              </label>
            </div>
          </div>

          <div class="flex items-center gap-3">
            <button
              type="button"
              class="flex grow items-center justify-center rounded-lg border border-zinc-200 bg-white px-4 py-3 text-center text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:ring-2 focus:ring-zinc-500/50 focus:ring-offset-2 focus:outline-none active:bg-zinc-100"
            >
              Back
            </button>
            <button
              type="submit"
              class="flex grow items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-4 py-3 text-sm leading-5 font-medium text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:ring-2 focus:ring-zinc-500/50 focus:ring-offset-2 focus:outline-hidden active:border-zinc-700 active:bg-zinc-700"
            >
              Continue
            </button>
          </div>
        </form>
      </div>
      <!-- END Form Content -->
    </div>
  </div>
</div>
<!-- END Onboarding Steps -->