<section class="py-20 bg-gray-50 dark:bg-gray-800" x-data="{ inView: false }" x-init="setTimeout(() => inView = true, 500)">
<div class="mx-auto px-4 sm:px-6 lg:px-8">
<div class="mb-16 text-center">
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out">
<h2 class="mb-4 text-4xl font-bold text-gray-900 sm:text-5xl dark:text-white">
What Our Clients Say
</h2>
<p class="mx-auto text-xl text-gray-600 dark:text-gray-300">
Discover how our solutions have transformed businesses worldwide, as told by our valued clients.
</p>
</div>
</div>
<div class="grid gap-8 mb-20 md:grid-cols-2 lg:grid-cols-3">
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-200">
<div class="transition-shadow duration-300 flex-col flex h-full p-8 rounded-2xl bg-white shadow-lg dark:bg-gray-900">
<div class="items-center flex mb-6">
<div class="overflow-hidden flex-shrink-0 w-[48px] h-[48px] mr-4 rtl:ml-4 rtl:mr-0 rounded-full">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Client 1" class="object-cover w-full h-full" />
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900 dark:text-white">
Sarah Johnson
</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">
CEO, TechTrend Innovations
</p>
</div>
</div>
<p class="flex-grow mb-4 text-gray-600 dark:text-gray-300">
"Brand's web development team transformed our outdated website into a modern, user-friendly platform that significantly boosted our online engagement."
</p>
</div>
</div>
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-400">
<div class="transition-shadow duration-300 flex-col flex h-full p-8 rounded-2xl bg-white shadow-lg dark:bg-gray-900">
<div class="items-center flex mb-6">
<div class="overflow-hidden flex-shrink-0 w-[48px] h-[48px] mr-4 rtl:ml-4 rtl:mr-0 rounded-full">
<img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Client 2" class="object-cover w-full h-full" />
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900 dark:text-white">
Michael Chen
</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">
Founder, CloudSync Solutions
</p>
</div>
</div>
<p class="flex-grow mb-4 text-gray-600 dark:text-gray-300">
"The cloud solutions provided by Brand scaled our infrastructure seamlessly, allowing us to handle rapid growth without any hiccups."
</p>
</div>
</div>
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-600">
<div class="transition-shadow duration-300 flex-col flex h-full p-8 rounded-2xl bg-white shadow-lg dark:bg-gray-900">
<div class="items-center flex mb-6">
<div class="overflow-hidden flex-shrink-0 w-[48px] h-[48px] mr-4 rtl:ml-4 rtl:mr-0 rounded-full">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Client 3" class="object-cover w-full h-full" />
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900 dark:text-white">
Alex Rodriguez
</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">
Marketing Director, GrowthPeak
</p>
</div>
</div>
<p class="flex-grow mb-4 text-gray-600 dark:text-gray-300">
"Brand's digital marketing strategies skyrocketed our online presence, doubling our leads in just three months."
</p>
</div>
</div>
</div>
</div>
</section>