<header class="bg-gradient-to-br from-purple-50 to-purple-100">
<div class="mx-auto max-w-screen-xl px-8">
<div class="grid grid-cols-12 items-center">
<div class="col-span-12 sm:col-span-6">
<div class="flex flex-col gap-y-4 py-8 sm:p-0">
<div class="border-l-4 border-purple-300 pl-4 text-xs font-medium text-gray-700 sm:text-sm md:text-lg">CONSULTING SERVICES</div>
<h1 class="text-xl font-bold text-gray-700 sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl">IT Consulting services</h1>
<p class="sm:text-md text-sm text-gray-700">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque earum cumque temporibus minus quisquam libero ad eius fuga id laborum?</p>
<a class="group flex cursor-pointer items-center gap-x-2">
<div class="inline-block rounded-full border bg-white p-2 shadow-lg shadow-purple-300 transition-all group-hover:bg-purple-200 sm:p-3">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-8 w-8 rounded-full bg-purple-700 p-2 text-gray-50 sm:h-10 sm:w-10 sm:p-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</div>
<div class="text-sm font-medium text-purple-600 group-hover:text-gray-700 sm:text-lg">Free consultation</div>
</a>
</div>
</div>
<div class="col-span-12 hidden sm:col-span-6 sm:block">
<img src="https://ld-wt73.template-help.com/tf/strategytech/images/person-01-805x900.png" alt="" />
</div>
</div>
</div>
</header>
