<header class="bg-gradient-to-br from-blue-500 to-blue-400">
<div class="max-w-screen-xl mx-auto p-8 sm:p-12 md:p-16 lg:p-20">
<div class="grid grid-cols-12 gap-y-12 md:gap-12 items-center">
<div class="col-span-12 md:col-span-6">
<h1 class="text-3xl md:text-4xl lg:text-5xl font-black text-gray-50">
Advanced analytics to grow your business
</h1>
<span class="block text-sm font-medium text-gray-100 my-8">
Get a website to be found on the first page of Google avoid missing
out on potential visitors and sales.
</span>
<div>
<a
href="#"
class="inline-flex px-4 py-2 bg-yellow-500 ountline-none hover:bg-yellow-400 focus:bg-yellow-400 items-center gap-x-2 rounded"
>
<span class="text-sm font-medium text-gray-700"
>Start free trial</span
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
/>
</svg>
</a>
<a
href="#"
class="inline-block px-4 py-2 ountline-none hover:bg-blue-400 focus:bg-blue-400 items-center gap-x-2 rounded text-sm font-medium text-gray-50"
>
Learn More
</a>
</div>
<div class="flex gap-x-6 lg:gap-x-10 mt-8">
<div class="flex flex-col">
<strong class="text-lg text-gray-50">500+</strong>
<span class="text-sm text-gray-50">Happy Clients</span>
</div>
<div class="flex flex-col">
<strong class="text-lg text-gray-50">756+</strong>
<span class="text-sm text-gray-50">Project Done</span>
</div>
<div class="flex flex-col">
<strong class="text-lg text-gray-50">100%</strong>
<span class="text-sm text-gray-50">Client Satisfaction</span>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6">
<div>
<img
class="border-8 w-full md:h-[440px] rounded-tr-3xl rounded-bl-3xl border-blue-400 object-cover shadow-lg"
src="https://images.pexels.com/photos/417173/pexels-photo-417173.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
alt=""
/>
</div>
</div>
</div>
</div>
</header>
