<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-xl leading-tight tracking-tight sm: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 leading-normal 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 leading-normal 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 leading-normal 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-md leading-normal block text-sm text-base-500 font-medium"
>
You agree to our
<a
class="text-md leading-normal text-accent-500 font-medium hover:text-base-500"
href="#_"
>
Terms of service
</a>
and
<a
class="text-md leading-normal 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 transition-all duration-200 focus:ring-2 focus:outline-none text-white bg-accent-600 hover:bg-accent-700 focus:ring-accent-500/50 h-10 px-6 py-3 text-base font-medium rounded-lg w-full"
>
Sign up
</button>
</div>
<div class="flex items-center mt-4">
<p class="text-sm leading-normal text-base-500 font-medium">
Don't have an account? Already have an account?
<a
class="text-md leading-normal text-accent-500 font-medium hover:text-base-500"
href="#_"
>
Sign in
</a>
</p>
</div>
</form>
</div>
</div>
</section>
