Alternating Experiences
App Screenshot Previews
Award Showcase Grid
Bonus Content Grid
Course Card Grid
Course Offer Cards
Custom Section Benefits
Dual Product Cards
Filterable Portfolio
Offer Image Grid
Partners & Clients
Portfolio Reveal Grid
Quality Asym Images
Service Icon Grid
Specialty Icon Grid
STEM Learning Previews
Template Showcase Grid
Webinar Grid
#Testimonial Slider
testimonialPresents customer testimonials in an interactive slider, allowing users to navigate through different quotes.
Testimonials
What Our Clients Say
Real feedback from real customers who have transformed their businesses with our solutions.
"The platform has completely transformed how we handle our business operations. The efficiency gains have been remarkable, and the support team has been exceptional throughout our journey."
Sarah Johnson
CEO at TechStart Inc.
"Implementation was smooth and the results were immediate. Our team's productivity has increased significantly, and we've seen a notable improvement in customer satisfaction."
Michael Chen
Operations Director at Global Solutions
"The analytics capabilities have given us insights we never had before. We're now making data-driven decisions that have significantly improved our bottom line."
Emily Rodriguez
Data Analytics Lead at InnovateCorp
<section
class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"
x-data="{ activeSlide: 1 }"
>
<div class="mb-8 text-center">
<div class="mx-auto mb-2 w-min rounded-lg bg-blue-600 px-2 py-1">
<p class="text-sm font-bold uppercase text-white">Testimonials</p>
</div>
<h2 class="mb-4 text-3xl font-bold lg:text-6xl">
What Our Clients Say
</h2>
<p class="mx-auto max-w-2xl text-lg lg:text-xl">
Real feedback from real customers who have transformed their
businesses with our solutions.
</p>
</div>
<div class="relative">
<!-- Testimonial Slides -->
<div
class="relative min-h-24 overflow-hidden rounded-2xl bg-neutral-100"
>
<!-- Slide 1 -->
<div
x-show="activeSlide === 1"
class="h-full w-full p-8 lg:p-16"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-4"
x-transition:enter-end="opacity-100 transform translate-x-0"
>
<div class="mb-8 text-4xl text-blue-600">
<i class="fas fa-quote-left"></i>
</div>
<blockquote class="mb-8 text-xl lg:text-2xl">
"The platform has completely transformed how we handle our
business operations. The efficiency gains have been remarkable,
and the support team has been exceptional throughout our journey."
</blockquote>
<div class="flex items-center gap-4">
<img
src="https://placehold.co/80x80"
class="h-16 w-16 rounded-full"
alt="Customer Photo"
/>
<div>
<p class="font-bold">Sarah Johnson</p>
<p class="text-sm">CEO at TechStart Inc.</p>
</div>
</div>
</div>
<!-- Slide 2 -->
<div
x-show="activeSlide === 2"
class="h-full w-full p-8 lg:p-16"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-4"
x-transition:enter-end="opacity-100 transform translate-x-0"
>
<div class="mb-8 text-4xl text-blue-600">
<i class="fas fa-quote-left"></i>
</div>
<blockquote class="mb-8 text-xl lg:text-2xl">
"Implementation was smooth and the results were immediate. Our
team's productivity has increased significantly, and we've seen a
notable improvement in customer satisfaction."
</blockquote>
<div class="flex items-center gap-4">
<img
src="https://placehold.co/80x80"
class="h-16 w-16 rounded-full"
alt="Customer Photo"
/>
<div>
<p class="font-bold">Michael Chen</p>
<p class="text-sm">Operations Director at Global Solutions</p>
</div>
</div>
</div>
<!-- Slide 3 -->
<div
x-show="activeSlide === 3"
class="h-full w-full p-8 lg:p-16"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-4"
x-transition:enter-end="opacity-100 transform translate-x-0"
>
<div class="mb-8 text-4xl text-blue-600">
<i class="fas fa-quote-left"></i>
</div>
<blockquote class="mb-8 text-xl lg:text-2xl">
"The analytics capabilities have given us insights we never had
before. We're now making data-driven decisions that have
significantly improved our bottom line."
</blockquote>
<div class="flex items-center gap-4">
<img
src="https://placehold.co/80x80"
class="h-16 w-16 rounded-full"
alt="Customer Photo"
/>
<div>
<p class="font-bold">Emily Rodriguez</p>
<p class="text-sm">Data Analytics Lead at InnovateCorp</p>
</div>
</div>
</div>
</div>
<!-- Navigation Controls -->
<div class="mt-8 flex justify-center gap-4">
<button
@click="activeSlide = 1"
class="h-3 w-3 rounded-full transition-colors"
:class="{ 'bg-blue-600': activeSlide === 1, 'bg-neutral-300': activeSlide !== 1 }"
></button>
<button
@click="activeSlide = 2"
class="h-3 w-3 rounded-full transition-colors"
:class="{ 'bg-blue-600': activeSlide === 2, 'bg-neutral-300': activeSlide !== 2 }"
></button>
<button
@click="activeSlide = 3"
class="h-3 w-3 rounded-full transition-colors"
:class="{ 'bg-blue-600': activeSlide === 3, 'bg-neutral-300': activeSlide !== 3 }"
></button>
</div>
</div>
</section>Testimonials
What Our Clients Say
Real feedback from real customers who have transformed their businesses with our solutions.
"The platform has completely transformed how we handle our business operations. The efficiency gains have been remarkable, and the support team has been exceptional throughout our journey."
Sarah Johnson
CEO at TechStart Inc.
"Implementation was smooth and the results were immediate. Our team's productivity has increased significantly, and we've seen a notable improvement in customer satisfaction."
Michael Chen
Operations Director at Global Solutions
"The analytics capabilities have given us insights we never had before. We're now making data-driven decisions that have significantly improved our bottom line."
Emily Rodriguez
Data Analytics Lead at InnovateCorp
<section
layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x"
x-data="{ activeSlide: 1 }"
>
<div space="m-b:large" visual="text:center">
<div space="m-x:auto m-b:small w:[min-content] p-x:small p-y:tiny" visual="rounded:medium bg:blue-600">
<p visual="text-size:small font:tw-bold uppercase text:white">Testimonials</p>
</div>
<h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mega">
What Our Clients Say
</h2>
<p space="m-x:auto max-w:[2xl]" visual="text-size:large tw-lg:text-size:big">
Real feedback from real customers who have transformed their
businesses with our solutions.
</p>
</div>
<div layout="relative">
<!-- Testimonial Slides -->
<div
layout="relative overflow:hidden" space="min-h:giant" visual="rounded:big bg:neutral-100"
>
<!-- Slide 1 -->
<div
x-show="activeSlide === 1"
space="h:[100%] w:[100%] p:large tw-lg:p:big-3x"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-4"
x-transition:enter-end="opacity-100 transform translate-x-0"
>
<div space="m-b:large" visual="text-size:giant text:blue-600">
<i class="fas fa-quote-left"></i>
</div>
<blockquote space="m-b:large" visual="text-size:big tw-lg:text-size:huge">
"The platform has completely transformed how we handle our
business operations. The efficiency gains have been remarkable,
and the support team has been exceptional throughout our journey."
</blockquote>
<div layout="flex items:center" space="g:medium">
<img
src="https://placehold.co/80x80"
space="h:big-3x w:big-3x" visual="rounded:round"
alt="Customer Photo"
/>
<div>
<p visual="font:tw-bold">Sarah Johnson</p>
<p visual="text-size:small">CEO at TechStart Inc.</p>
</div>
</div>
</div>
<!-- Slide 2 -->
<div
x-show="activeSlide === 2"
space="h:[100%] w:[100%] p:large tw-lg:p:big-3x"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-4"
x-transition:enter-end="opacity-100 transform translate-x-0"
>
<div space="m-b:large" visual="text-size:giant text:blue-600">
<i class="fas fa-quote-left"></i>
</div>
<blockquote space="m-b:large" visual="text-size:big tw-lg:text-size:huge">
"Implementation was smooth and the results were immediate. Our
team's productivity has increased significantly, and we've seen a
notable improvement in customer satisfaction."
</blockquote>
<div layout="flex items:center" space="g:medium">
<img
src="https://placehold.co/80x80"
space="h:big-3x w:big-3x" visual="rounded:round"
alt="Customer Photo"
/>
<div>
<p visual="font:tw-bold">Michael Chen</p>
<p visual="text-size:small">Operations Director at Global Solutions</p>
</div>
</div>
</div>
<!-- Slide 3 -->
<div
x-show="activeSlide === 3"
space="h:[100%] w:[100%] p:large tw-lg:p:big-3x"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-4"
x-transition:enter-end="opacity-100 transform translate-x-0"
>
<div space="m-b:large" visual="text-size:giant text:blue-600">
<i class="fas fa-quote-left"></i>
</div>
<blockquote space="m-b:large" visual="text-size:big tw-lg:text-size:huge">
"The analytics capabilities have given us insights we never had
before. We're now making data-driven decisions that have
significantly improved our bottom line."
</blockquote>
<div layout="flex items:center" space="g:medium">
<img
src="https://placehold.co/80x80"
space="h:big-3x w:big-3x" visual="rounded:round"
alt="Customer Photo"
/>
<div>
<p visual="font:tw-bold">Emily Rodriguez</p>
<p visual="text-size:small">Data Analytics Lead at InnovateCorp</p>
</div>
</div>
</div>
</div>
<!-- Navigation Controls -->
<div layout="flex justify:center" space="m-t:large g:medium">
<button
@click="activeSlide = 1"
space="h:small-3x w:small-3x" visual="rounded:round transition:colors"
:class="{ 'bg-blue-600': activeSlide === 1, 'bg-neutral-300': activeSlide !== 1 }"
></button>
<button
@click="activeSlide = 2"
space="h:small-3x w:small-3x" visual="rounded:round transition:colors"
:class="{ 'bg-blue-600': activeSlide === 2, 'bg-neutral-300': activeSlide !== 2 }"
></button>
<button
@click="activeSlide = 3"
space="h:small-3x w:small-3x" visual="rounded:round transition:colors"
:class="{ 'bg-blue-600': activeSlide === 3, 'bg-neutral-300': activeSlide !== 3 }"
></button>
</div>
</div>
</section>