sign up #01

<section>
  <div class="px-8 py-32 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
    <div class="max-w-lg mx-auto">
      <div class="text-center lg:text-balance">
        <img
          class="h-20 mb-12 mx-auto"
          src="/images/oxbow/blueLineLogo.png"
          alt="#_"
        />
        <h2
          class="text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-base-900 lg:text-balance"
        >
          Join our community
        </h2>
        <p class="text-base mt-4 text-base-500 font-medium">
          Sign up to join our community and start building your brand.
        </p>
      </div>
      <form action="#" method="POST" class="mx-auto mt-12 max-w-lg">
        <div class="flex flex-col gap-y-6">
          <div>
            <label class="text-base text-base-500 font-medium">
              First name
            </label>
            <div class="mt-2.5">
              <input
                type="text"
                name="first-name"
                id="first-name"
                autocomplete="given-name"
                required
                aria-required="true"
                aria-describedby="first-name-error"
                placeholder="Your first name"
                class="block w-full h-10 px-4 py-2 text-sm text-accent-700 duration-300 bg-white border border-transparent rounded-lg appearance-none ring-1 ring-base-200 placeholder-base-400 focus:border-base-300 focus:bg-transparent focus:outline-none focus:ring-accent-500 focus:ring-offset-2 focus:ring-2 sm:text-sm"
              />
              <span id="first-name-error" class="text-red-600 text-sm hidden">
                Please enter your first name.
              </span>
            </div>
          </div>
          <div>
            <label class="text-base text-base-500 font-medium"> Email </label>
            <div class="mt-2.5">
              <input
                type="email"
                name="email"
                id="email"
                autocomplete="email"
                required
                aria-required="true"
                aria-describedby="email-error"
                placeholder="Your email"
                class="block w-full h-10 px-4 py-2 text-sm text-accent-700 duration-300 bg-white border border-transparent rounded-lg appearance-none ring-1 ring-base-200 placeholder-base-400 focus:border-base-300 focus:bg-transparent focus:outline-none focus:ring-accent-500 focus:ring-offset-2 focus:ring-2 sm:text-sm"
              />
              <span id="email-error" class="text-red-600 text-sm hidden">
                Please enter a valid email address.
              </span>
            </div>
          </div>
        </div>
        <div class="flex items-center mt-4 gap-3">
          <input
            id="agreement"
            name="agreement"
            type="checkbox"
            class="size-4 rounded border-base-300 text-accent-600 focus:ring-accent-600 shadow"
          />
          <label class="text-base block text-sm text-base-500 font-medium">
            You agree to our
            <a
              class="text-sm text-accent-500 font-medium hover:text-base-500"
              href="#_"
            >
              Terms of service
            </a>
            and
            <a
              class="text-sm text-accent-500 font-medium hover:text-base-500"
              href="#_"
            >
              Privacy Policy
            </a>
          </label>
        </div>
        <div class="mt-10">
          <button
            class="flex items-center justify-center text-center text-shadow-2xs font-semibold shadow-md ring inset-shadow-2xs hover:shadow-none items-center duration-300 ease-in-out transition-all focus:outline-2 outline-offset-2 focus:ring-offset-white text-white shadow-accent-600/20 inset-shadow-white/20 text-shadow-accent-500 ring-accent-600 bg-linear-to-b from-accent-500 to-accent-600 to-70% focus:outline-accent-600 h-10 px-6 py-3 text-base rounded-lg w-full"
          >
            Sign up
          </button>
        </div>
        <p class="text-xs text-base-500 font-medium text-center mt-4">
          Already have an account?
          <a href="#_" class="text-accent-500 font-medium hover:text-base-500">
            Sign in
          </a>
        </p>
      </form>
    </div>
  </div>
</section>