<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="relative py-20 overflow-hidden">
<div class="container px-4 mx-auto">
<div class="mb-20 md:max-w-3xl text-center mx-auto">
<span class="inline-block mb-2.5 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
<h2 class="font-heading text-7xl lg:text-8xl text-white tracking-tighter-xl">What people are saying</h2>
</div>
<div class="relative p-3 bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
<div class="relative z-10 flex flex-wrap lg:items-center -m-10">
<div class="w-auto mx-auto md:ml-0 p-10">
<img src="nightsable-assets/images/testimonials/man.png" alt="">
</div>
<div class="flex-1 p-10">
<div class="overflow-hidden">
<div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
<div x-ref="slide1" class="flex-shrink-0 w-full">
<h3 class="mb-20 text-3xl text-white tracking-tighter leading-snug md:max-w-2xl">“GTIS Partners is a leading real estate investment firm in the Americas, headquartered in New York with offices in São Paulo, San Francisco, Los Angeles, Atlanta, Charlotte, Phoenix”</h3>
<h4 class="text-white font-medium tracking-tighter">Wade Warren</h4>
<span class="mb-8 lg:mb-0 inline-block text-sm text-white">CEO, Since Industry</span>
</div>
<div x-ref="slide2" class="flex-shrink-0 w-full">
<h3 class="mb-20 font-heading text-3xl text-white tracking-tighter leading-snug md:max-w-2xl">“Capital Horizon Investments, a prominent finance powerhouse, is strategically based in Chicago, with a widespread network encompassing Miami, Dallas, Denver, Seattle, Boston, and Toronto”</h3>
<h4 class="text-white font-medium tracking-tighter">Wade Warren</h4>
<span class="mb-8 lg:mb-0 inline-block text-sm text-white">CEO, Since Industry</span>
</div>
<div x-ref="slide3" class="flex-shrink-0 w-full">
<h3 class="mb-20 font-heading text-3xl text-white tracking-tighter leading-snug md:max-w-2xl">“Metropolitan Capital Partners, a leading financial force, proudly operates from its central hub in Tokyo, extending its influence across major cities including London, Shanghai, Mumbai, Paris, New York, and Singapore”</h3>
<h4 class="text-white font-medium tracking-tighter">Wade Warren</h4>
<span class="mb-8 lg:mb-0 inline-block text-sm text-white">CEO, Since Industry</span>
</div>
</div>
</div>
<div class="flex flex-wrap justify-center lg:justify-end pr-10 -m-2">
<div class="w-auto p-2">
<a x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="group inline-block" href="#">
<div class="flex items-center justify-center w-20 h-20 hover:bg-opacity-30 border border-gray-900 hover:border-gray-800 rounded-full transition duration-200">
<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7041 7.12817L4.15635 13.6759L10.7041 20.2237" stroke="white" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M22.4941 13.6759H4.33949" stroke="white" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</a>
</div>
<div class="w-auto p-2">
<a x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="group inline-block" href="#">
<div class="flex items-center justify-center w-20 h-20 hover:bg-opacity-30 border border-gray-900 hover:border-gray-800 rounded-full transition duration-200">
<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.2959 7.12817L22.8437 13.6759L16.2959 20.2237" stroke="white" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.50586 13.6759H22.6605" stroke="white" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
<img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="nightsable-assets/images/testimonials/blur.png">
</div>
</div>
</section>
