<!--π CONTACT SECTION π-->
<section class="mt-6">
<div class="mx-auto max-w-screen-xl px-4 py-12">
<div class="flex flex-col gap-y-8 sm:flex-row sm:gap-8 md:gap-10">
<div class="sm:mt-12 sm:w-1/2">
<div class="w-full lg:pr-12">
<div class="border-l-2 border-pink-200 pl-3 text-sm font-medium text-gray-900">GET IN TOUCH</div>
<h3 class="mt-2 text-2xl font-bold md:text-3xl lg:text-5xl">Tell us about your project</h3>
<p class="mt-4 text-sm text-gray-800 md:text-base">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi modi quo, laborum beatae voluptate saepe reprehenderit, itaque nostrum veniam quas, voluptatum sit perspiciatis repellendus quidem labore officia nesciunt hic dignissimos magni?</p>
</div>
</div>
<div class="sm:w-1/2">
<div class="rounded-lg border bg-white p-8 shadow lg:p-12">
<form>
<div>
<label>
<input type="text" class="mb-2 w-full border-0 border-b border-red-500 py-2 text-base outline-none ring-0 transition-all duration-200 focus:border-gray-900 focus:bg-blue-50 focus:outline-0 focus:ring-0" placeholder="Name *" />
<div class="text-sm text-red-500">The name field is required</div>
</label>
</div>
<div class="mt-3">
<label>
<input type="email" class="mb-2 w-full border-0 border-b py-2 text-base outline-none ring-0 transition-all duration-200 focus:border-gray-900 focus:bg-blue-50 focus:outline-0 focus:ring-0" placeholder="Email *" />
</label>
</div>
<div class="mt-3">
<label>
<input type="number" class="mb-2 w-full border-0 border-b py-2 text-base outline-none ring-0 transition-all duration-200 focus:border-gray-900 focus:bg-blue-50 focus:outline-0 focus:ring-0" placeholder="Phone Number *" />
</label>
</div>
<div class="mt-3">
<label>
<textarea class="mb-2 w-full border-0 border-b py-2 text-base outline-none ring-0 transition-all duration-200 focus:border-gray-900 focus:bg-blue-50 focus:outline-0 focus:ring-0" placeholder="Project Description *"></textarea>
</label>
</div>
<div>
<button>
<a class="mt-4 flex items-center gap-x-1 rounded-lg bg-purple-600 px-5 py-3 font-medium text-gray-50 transition-all duration-200 hover:bg-gray-900">
<span>Talk to Us</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-4 w-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
</svg>
</a>
</button>
</div>
<div class="mt-6">
<div class="text-sm text-gray-600">
By sending this form I confirm that I have read and accept
<a class="cursor-pointer font-medium text-purple-600 hover:underline">ankitcodes terms and conditions</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- ************************ -->
<!--π EXT. CONTACT SECTION π-->
<section class="bg-gradient-to-br from-purple-50 to-purple-100 md:-mt-32">
<div class="mx-auto max-w-screen-xl px-8 py-36">
<div class="grid grid-cols-12 gap-y-12 sm:gap-12">
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<div>
<div class="inline-block rounded-full bg-purple-600 p-3 text-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-8 w-8">
<path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
<path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
</svg>
</div>
<div>
<h4 class="mt-3 text-xl font-medium text-purple-900">EMAIL US</h4>
<p class="text-basis my-3 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut deleniti sequi alias dolores aut molestias sunt consectetur fugit amet perspiciatis?</p>
<a class="text-basis block font-medium text-purple-600 underline hover:text-purple-700">youremail@gmail.com</a>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<div>
<div class="inline-block rounded-full bg-purple-600 p-3 text-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-8 w-8">
<path fill-rule="evenodd" d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="mt-3 text-xl font-medium text-purple-900">CALL US</h4>
<p class="text-basis my-3 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div>
<a class="block cursor-pointer text-lg font-medium text-purple-900 hover:text-purple-800">+1 12345678910</a>
</div>
<div class="mt-3">
<a class="block cursor-pointer text-lg font-medium text-purple-900 hover:text-purple-800">+1 12345678910</a>
</div>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-12 md:col-span-4">
<div>
<div class="inline-block rounded-full bg-purple-600 p-3 text-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-8 w-8">
<path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="mt-3 text-xl font-medium text-purple-900">HEAD OFFICE</h4>
<p class="text-basis my-3 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, adipisci?</p>
<p class="text-basis text-gray-600">Monday β Friday: 9am β 5pm Saturday: 11am β 4pm</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- *********************** -->