<section>
<div class="px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12 items-center">
<div>
<span
class="text-blue-600 uppercase font-mono font-medium tracking-tight text-xs"
>
Tagline
</span>
<h1
class="text-5xl mt-8 tracking-tight font-semibold text-gray-900 lg:text-balance"
>
Make every visitor count
</h1>
<p class="mt-6 text-base font-medium text-gray-500">
The fastest method for working together on staging and temporary
environments.
</p>
<div class="flex flex-wrap items-center gap-2 mx-auto mt-12">
<button
class="flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-all duration-200 rounded-lg bg-gradient-to-b from-blue-500 to-indigo-600 hover:to-indigo-800 shadow focus:ring-2 focus:ring-blue-950 focus:ring-offset-2 ring-offset-gray-200 hover:shadow-none"
aria-label="Action"
>
Get started
</button>
<button
class="flex items-center justify-center gap-2 h-10 px-4 py-2 text-sm font-medium text-gray-500 transition-all bg-gray-50 border border-gray-300 rounded-lg hover:text-gray-700 focus:ring-2 shadow shadow-gray-500/5 focus:ring-gray-900 focus:ring-offset-2 ring-offset-gray-200 duration-300 hover:border-gray-200 hover:shadow-none"
aria-label="Action"
>
Learn more
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</button>
</div>
</div>
<div class="lg:col-span-2">
<img
class="object-cover h-full border shadow rounded-2xl"
src="/images/dashboardLight.svg"
alt="#_"
/>
</div>
</div>
<div
class="mx-auto grid mt-10 grid-cols-4 items-center gap-x-8 gap-y-10 sm:grid-cols-6 sm:gap-x-10 lg:-mx-6 lg:grid-cols-5"
>
<img
class="col-span-2 lg:col-span-1 max-h-12 w-full object-contain"
src="/brands/1.svg"
alt="#_"
width="158"
height="48"
/><img
class="col-span-2 lg:col-span-1 max-h-12 w-full object-contain"
src="/brands/2.svg"
alt="#_"
width="158"
height="48"
/><img
class="col-span-2 lg:col-span-1 max-h-12 w-full object-contain"
src="/brands/3.svg"
alt="#_"
width="158"
height="48"
/><img
class="col-span-2 sm:col-start-2 lg:col-span-1 max-h-12 w-full object-contain"
src="/brands/4.svg"
alt="#_"
width="158"
height="48"
/><img
class="col-span-2 col-start-2 sm:col-start-auto lg:col-span-1 max-h-12 w-full object-contain"
src="/brands/5.svg"
alt="#_"
width="158"
height="48"
/><img
class="col-span-2 lg:col-span-1 max-h-12 w-full object-contain"
src="/brands/6.svg"
alt="#_"
width="158"
height="48"
/><img
class="col-span-2 lg:col-span-1 max-h-12 w-full object-contain"
src="/brands/7.svg"
alt="#_"
width="158"
height="48"
/><img
class="col-span-2 lg:col-span-1 max-h-12 w-full object-contain"
src="/brands/9.svg"
alt="#_"
width="158"
height="48"
/><img
class="col-span-2 sm:col-start-2 lg:col-span-1 max-h-12 w-full object-contain"
src="/brands/8.svg"
alt="#_"
width="158"
height="48"
/><img
class="col-span-2 col-start-2 sm:col-start-auto lg:col-span-1 max-h-12 w-full object-contain"
src="/brands/10.svg"
alt="#_"
width="158"
height="48"
/>
</div>
</div>
</section>