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 Cards Stats
testimonialFeatures customer testimonials in cards alongside key performance metrics to build trust and show impact.
SUCCESS STORIES
What Our Customers Are Saying
Discover how our solutions have helped businesses like yours achieve their goals and drive success.
"The implementation process was smooth and the results were beyond our expectations. Our team's productivity has increased by 50% since we started using the platform."
David Kim
Product Manager
"The analytics capabilities have transformed how we make decisions. We're now able to spot trends and opportunities we would have missed before."
Lisa Chen
Operations Director
"Customer support has been exceptional. Any questions we had were answered quickly, and the team went above and beyond to ensure our success."
Mark Thompson
Technical Lead
98%
Customer Satisfaction
500+
Active Users
50+
Countries Served
<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div class="mb-8 grid grid-cols-1 lg:grid-cols-2">
<div>
<div
class="mb-2 max-w-max rounded-lg bg-blue-100 px-3 py-1 text-blue-600"
>
<p class="text-sm font-bold">SUCCESS STORIES</p>
</div>
<h2 class="mb-4 text-3xl font-bold lg:text-5xl">
What Our Customers Are Saying
</h2>
</div>
<div class="flex items-center">
<p class="text-lg lg:text-xl">
Discover how our solutions have helped businesses like yours achieve
their goals and drive success.
</p>
</div>
</div>
<div class="grid gap-6 lg:grid-cols-3">
<!-- Testimonial Card 1 -->
<div
class="group relative rounded-2xl bg-neutral-100 p-6 transition-all hover:-translate-y-2 hover:bg-blue-600 hover:text-white"
>
<div class="mb-6 text-3xl text-blue-600 group-hover:text-white">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<blockquote class="mb-6 text-lg">
"The implementation process was smooth and the results were beyond
our expectations. Our team's productivity has increased by 50% since
we started using the platform."
</blockquote>
<div class="flex items-center gap-4">
<img
src="https://placehold.co/60x60"
class="h-12 w-12 rounded-full"
alt="Customer Photo"
/>
<div>
<p class="font-bold">David Kim</p>
<p class="text-sm">Product Manager</p>
</div>
</div>
<div
class="absolute bottom-6 right-6 text-4xl text-blue-200 opacity-30 group-hover:text-white/30"
>
<i class="fas fa-quote-right"></i>
</div>
</div>
<!-- Testimonial Card 2 -->
<div
class="group relative rounded-2xl bg-neutral-100 p-6 transition-all hover:-translate-y-2 hover:bg-blue-600 hover:text-white"
>
<div class="mb-6 text-3xl text-blue-600 group-hover:text-white">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<blockquote class="mb-6 text-lg">
"The analytics capabilities have transformed how we make decisions.
We're now able to spot trends and opportunities we would have missed
before."
</blockquote>
<div class="flex items-center gap-4">
<img
src="https://placehold.co/60x60"
class="h-12 w-12 rounded-full"
alt="Customer Photo"
/>
<div>
<p class="font-bold">Lisa Chen</p>
<p class="text-sm">Operations Director</p>
</div>
</div>
<div
class="absolute bottom-6 right-6 text-4xl text-blue-200 opacity-30 group-hover:text-white/30"
>
<i class="fas fa-quote-right"></i>
</div>
</div>
<!-- Testimonial Card 3 -->
<div
class="group relative rounded-2xl bg-neutral-100 p-6 transition-all hover:-translate-y-2 hover:bg-blue-600 hover:text-white"
>
<div class="mb-6 text-3xl text-blue-600 group-hover:text-white">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<blockquote class="mb-6 text-lg">
"Customer support has been exceptional. Any questions we had were
answered quickly, and the team went above and beyond to ensure our
success."
</blockquote>
<div class="flex items-center gap-4">
<img
src="https://placehold.co/60x60"
class="h-12 w-12 rounded-full"
alt="Customer Photo"
/>
<div>
<p class="font-bold">Mark Thompson</p>
<p class="text-sm">Technical Lead</p>
</div>
</div>
<div
class="absolute bottom-6 right-6 text-4xl text-blue-200 opacity-30 group-hover:text-white/30"
>
<i class="fas fa-quote-right"></i>
</div>
</div>
</div>
<!-- Metrics -->
<div
class="mt-12 grid gap-6 rounded-2xl bg-neutral-100 p-8 lg:grid-cols-3"
>
<div class="text-center">
<p class="text-4xl font-bold text-blue-600 lg:text-6xl">98%</p>
<p class="mt-2 text-lg font-semibold">Customer Satisfaction</p>
</div>
<div class="text-center">
<p class="text-4xl font-bold text-blue-600 lg:text-6xl">500+</p>
<p class="mt-2 text-lg font-semibold">Active Users</p>
</div>
<div class="text-center">
<p class="text-4xl font-bold text-blue-600 lg:text-6xl">50+</p>
<p class="mt-2 text-lg font-semibold">Countries Served</p>
</div>
</div>
</section>SUCCESS STORIES
What Our Customers Are Saying
Discover how our solutions have helped businesses like yours achieve their goals and drive success.
"The implementation process was smooth and the results were beyond our expectations. Our team's productivity has increased by 50% since we started using the platform."
David Kim
Product Manager
"The analytics capabilities have transformed how we make decisions. We're now able to spot trends and opportunities we would have missed before."
Lisa Chen
Operations Director
"Customer support has been exceptional. Any questions we had were answered quickly, and the team went above and beyond to ensure our success."
Mark Thompson
Technical Lead
98%
Customer Satisfaction
500+
Active Users
50+
Countries Served
<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">
<div layout="grid grid-cols:1 tw-lg:grid-cols:2" space="m-b:large">
<div>
<div
space="m-b:small max-w:[max-content] p-x:small-3x p-y:tiny" visual="rounded:medium bg:blue-100 text:blue-600"
>
<p visual="text-size:small font:tw-bold">SUCCESS STORIES</p>
</div>
<h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mount">
What Our Customers Are Saying
</h2>
</div>
<div layout="flex items:center">
<p visual="text-size:large tw-lg:text-size:big">
Discover how our solutions have helped businesses like yours achieve
their goals and drive success.
</p>
</div>
</div>
<div layout="grid tw-lg:grid-cols:3" space="g:medium-3x">
<!-- Testimonial Card 1 -->
<div
layout="relative" space="p:medium-3x" visual="rounded:big bg:neutral-100 transition:all hover:bg:blue-600 hover:text:white" class="group hover:-translate-y-2"
>
<div space="m-b:medium-3x" visual="text-size:grand text:blue-600" class="group-hover:text-white">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<blockquote space="m-b:medium-3x" visual="text-size:large">
"The implementation process was smooth and the results were beyond
our expectations. Our team's productivity has increased by 50% since
we started using the platform."
</blockquote>
<div layout="flex items:center" space="g:medium">
<img
src="https://placehold.co/60x60"
space="h:big w:big" visual="rounded:round"
alt="Customer Photo"
/>
<div>
<p visual="font:tw-bold">David Kim</p>
<p visual="text-size:small">Product Manager</p>
</div>
</div>
<div
layout="absolute bottom:medium-3x right:medium-3x" visual="text-size:giant text:blue-200 opacity:30" class="group-hover:text-white/30"
>
<i class="fas fa-quote-right"></i>
</div>
</div>
<!-- Testimonial Card 2 -->
<div
layout="relative" space="p:medium-3x" visual="rounded:big bg:neutral-100 transition:all hover:bg:blue-600 hover:text:white" class="group hover:-translate-y-2"
>
<div space="m-b:medium-3x" visual="text-size:grand text:blue-600" class="group-hover:text-white">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<blockquote space="m-b:medium-3x" visual="text-size:large">
"The analytics capabilities have transformed how we make decisions.
We're now able to spot trends and opportunities we would have missed
before."
</blockquote>
<div layout="flex items:center" space="g:medium">
<img
src="https://placehold.co/60x60"
space="h:big w:big" visual="rounded:round"
alt="Customer Photo"
/>
<div>
<p visual="font:tw-bold">Lisa Chen</p>
<p visual="text-size:small">Operations Director</p>
</div>
</div>
<div
layout="absolute bottom:medium-3x right:medium-3x" visual="text-size:giant text:blue-200 opacity:30" class="group-hover:text-white/30"
>
<i class="fas fa-quote-right"></i>
</div>
</div>
<!-- Testimonial Card 3 -->
<div
layout="relative" space="p:medium-3x" visual="rounded:big bg:neutral-100 transition:all hover:bg:blue-600 hover:text:white" class="group hover:-translate-y-2"
>
<div space="m-b:medium-3x" visual="text-size:grand text:blue-600" class="group-hover:text-white">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<blockquote space="m-b:medium-3x" visual="text-size:large">
"Customer support has been exceptional. Any questions we had were
answered quickly, and the team went above and beyond to ensure our
success."
</blockquote>
<div layout="flex items:center" space="g:medium">
<img
src="https://placehold.co/60x60"
space="h:big w:big" visual="rounded:round"
alt="Customer Photo"
/>
<div>
<p visual="font:tw-bold">Mark Thompson</p>
<p visual="text-size:small">Technical Lead</p>
</div>
</div>
<div
layout="absolute bottom:medium-3x right:medium-3x" visual="text-size:giant text:blue-200 opacity:30" class="group-hover:text-white/30"
>
<i class="fas fa-quote-right"></i>
</div>
</div>
</div>
<!-- Metrics -->
<div
layout="grid tw-lg:grid-cols:3" space="m-t:big g:medium-3x p:large" visual="rounded:big bg:neutral-100"
>
<div visual="text:center">
<p visual="text-size:giant font:tw-bold text:blue-600 tw-lg:text-size:mega">98%</p>
<p space="m-t:small" visual="text-size:large font:tw-semibold">Customer Satisfaction</p>
</div>
<div visual="text:center">
<p visual="text-size:giant font:tw-bold text:blue-600 tw-lg:text-size:mega">500+</p>
<p space="m-t:small" visual="text-size:large font:tw-semibold">Active Users</p>
</div>
<div visual="text:center">
<p visual="text-size:giant font:tw-bold text:blue-600 tw-lg:text-size:mega">50+</p>
<p space="m-t:small" visual="text-size:large font:tw-semibold">Countries Served</p>
</div>
</div>
</section>