<div class="bg-gray-50">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Ready to dive in?</span>
<span class="block text-indigo-600">Start your free trial today.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700">
Get started
</a>
</div>
<div class="ml-3 inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50">
Learn more
</a>
</div>
</div>
</div>
</div><div class="bg-gray-50">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Ready to dive in?</span>
<span class="block text-indigo-600">Start your free trial today.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700">
lets play
</a>
</div>
<div class="ml-3 inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50">
Learn more
</a>
</div>
</div>
</div>
</div><div class="py-8 px-8 max-w-sm mx-auto mt-12 bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
<img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="https://thispersondoesnotexist.com/image" alt="Woman's Face">
<div class="text-center space-y-2 sm:text-left">
<div class="space-y-0.5">
<p class="text-lg text-black font-semibold">
Erin Lindford
</p>
<p class="text-slate-500 font-medium">
Product Engineer
</p>
</div>
<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
</div>
</div>