<!--
@type: Testimonial
@industry: SaaS
@style: Minimal
@category: Social Proof, Feedback
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component Styles */
.testimonials-section {
padding: 3rem 0;
background-color: var(--color-white);
}
.container {
max-width: 80rem;
margin: 0 auto;
padding: 0 1rem;
}
.section-header {
max-width: 42rem;
margin: 0 auto 3rem;
text-align: center;
}
.section-title {
font-size: 1.875rem;
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: 1rem;
}
.section-description {
margin-top: 1rem;
font-size: 1.125rem;
line-height: 2rem;
color: var(--color-gray-600);
}
/* Featured Testimonial */
.featured-testimonial {
max-width: 56rem;
margin: 0 auto 4rem;
}
.testimonial-card {
position: relative;
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.customer-info {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.customer-image {
width: 3rem;
height: 3rem;
border-radius: 9999px;
}
.customer-name {
font-weight: 600;
color: var(--color-gray-900);
}
.customer-title {
font-size: 0.875rem;
color: var(--color-gray-600);
}
.testimonial-quote {
font-size: 1.25rem;
color: var(--color-gray-900);
line-height: 2rem;
margin-bottom: 1.5rem;
}
.rating {
display: flex;
align-items: center;
gap: 1rem;
}
.stars {
display: flex;
color: var(--color-blue-600);
}
.star-icon {
width: 1.25rem;
height: 1.25rem;
}
.verified-badge {
font-size: 0.875rem;
color: var(--color-gray-600);
}
/* Grid Testimonials */
.testimonials-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.grid-testimonial {
border-radius: 0.5rem;
border: 1px solid var(--color-gray-200);
padding: 1.5rem;
background-color: var(--color-white);
}
.grid-quote {
margin-bottom: 1rem;
font-size: 1rem;
color: var(--color-gray-900);
}
.grid-customer-image {
width: 2.5rem;
height: 2.5rem;
border-radius: 9999px;
}
.grid-customer-name {
font-weight: 500;
color: var(--color-gray-900);
}
/* CTA Section */
.cta-section {
margin-top: 4rem;
text-align: center;
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-white);
background-color: var(--color-blue-600);
border: 1px solid transparent;
border-radius: 0.375rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
text-decoration: none;
transition: background-color 0.2s;
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.cta-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-blue-500);
}
.cta-icon {
margin-left: 0.5rem;
margin-right: -0.25rem;
width: 1.25rem;
height: 1.25rem;
}
.cta-note {
margin-top: 1rem;
font-size: 0.875rem;
color: var(--color-gray-600);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.testimonials-section {
padding: 4rem 0;
}
.container {
padding: 0 1.5rem;
}
.section-title {
font-size: 2.25rem;
}
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.testimonials-section {
padding: 5rem 0;
}
.container {
padding: 0 2rem;
}
.testimonials-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="testimonials-section" aria-labelledby="testimonials-title">
<div class="container">
<!-- Section Header -->
<div class="section-header">
<h2 id="testimonials-title" class="section-title">
Trusted by Industry Leaders
</h2>
<p class="section-description">
See what our customers are saying about their experience with our platform
</p>
</div>
<!-- Featured Testimonial -->
<div class="featured-testimonial">
<figure class="testimonial-card">
<blockquote>
<div class="customer-info">
<img class="customer-image" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="Sarah Thompson" width="48" height="48" loading="lazy">
<div>
<div class="customer-name">Sarah Thompson</div>
<div class="customer-title">CTO at TechFlow Solutions</div>
</div>
</div>
<p class="testimonial-quote">
"This platform has completely transformed how we handle our workflow automation. The ROI has been incredible - we've seen a 40% increase in team productivity within just three months of implementation."
</p>
<div class="rating">
<div class="stars" aria-hidden="true">
<svg class="star-icon" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="star-icon" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="star-icon" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="star-icon" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="star-icon" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
</div>
<p class="verified-badge">Verified Customer</p>
</div>
</blockquote>
</figure>
</div>
<!-- Grid of Testimonials -->
<div class="testimonials-grid">
<!-- Testimonial 1 -->
<figure class="grid-testimonial">
<blockquote class="grid-quote">
<p>"The analytics dashboard is incredibly intuitive. It's helped us make data-driven decisions faster than ever before."</p>
</blockquote>
<figcaption class="customer-info">
<img class="grid-customer-image" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp" alt="Michael Chen" width="40" height="40" loading="lazy">
<div>
<div class="grid-customer-name">Michael Chen</div>
<div class="customer-title">Product Manager</div>
</div>
</figcaption>
</figure>
<!-- Testimonial 2 -->
<figure class="grid-testimonial">
<blockquote class="grid-quote">
<p>"Setup was a breeze, and the customer support team has been exceptional whenever we needed help."</p>
</blockquote>
<figcaption class="customer-info">
<img class="grid-customer-image" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" alt="Emily Rodriguez" width="40" height="40" loading="lazy">
<div>
<div class="grid-customer-name">Emily Rodriguez</div>
<div class="customer-title">Operations Director</div>
</div>
</figcaption>
</figure>
<!-- Testimonial 3 -->
<figure class="grid-testimonial">
<blockquote class="grid-quote">
<p>"The automation features have eliminated hours of manual work. It's been a game-changer for our team."</p>
</blockquote>
<figcaption class="customer-info">
<img class="grid-customer-image" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-4.webp" alt="David Kim" width="40" height="40" loading="lazy">
<div>
<div class="grid-customer-name">David Kim</div>
<div class="customer-title">Tech Lead</div>
</div>
</figcaption>
</figure>
</div>
<!-- CTA Section -->
<div class="cta-section">
<a href="#" class="cta-button" aria-label="Start free trial">
Start Free Trial
<svg class="cta-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
<p class="cta-note">14-day free trial • No credit card required</p>
</div>
</div>
</section>
<!--
@type: Testimonial
@industry: SaaS
@style: Minimal
@category: Social Proof, Feedback
@framework: Tailwind
@license: Free
-->
<section class="py-12 sm:py-16 lg:py-20 bg-white" aria-labelledby="testimonials-title">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-2xl text-center mb-12">
<h2 id="testimonials-title" class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">
Trusted by Industry Leaders
</h2>
<p class="mt-4 text-lg leading-8 text-gray-600">
See what our customers are saying about their experience with our platform
</p>
</div>
<!-- Featured Testimonial -->
<div class="mx-auto max-w-4xl mb-16">
<figure class="relative bg-white border border-gray-200 rounded-2xl p-8 shadow-sm">
<blockquote class="relative">
<div class="flex items-center gap-4 mb-6">
<!-- Customer image by Pexels (CC0) -->
<img class="h-12 w-12 rounded-full" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="Sarah Thompson" width="48" height="48" loading="lazy">
<div>
<div class="font-semibold text-gray-900">Sarah Thompson</div>
<div class="text-sm text-gray-600">CTO at TechFlow Solutions</div>
</div>
</div>
<p class="text-xl text-gray-900 leading-8 mb-6">
"This platform has completely transformed how we handle our workflow automation. The ROI has been incredible - we've seen a 40% increase in team productivity within just three months of implementation."
</p>
<div class="flex items-center gap-4">
<div class="flex text-blue-600" aria-hidden="true">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
</div>
<p class="text-sm text-gray-600">Verified Customer</p>
</div>
</blockquote>
</figure>
</div>
<!-- Grid of Testimonials -->
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Testimonial 1 -->
<figure class="rounded-lg border border-gray-200 p-6 bg-white">
<blockquote class="mb-4">
<p class="text-base text-gray-900">"The analytics dashboard is incredibly intuitive. It's helped us make data-driven decisions faster than ever before."</p>
</blockquote>
<figcaption class="flex items-center gap-4">
<!-- Customer image by Pexels (CC0) -->
<img class="h-10 w-10 rounded-full" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp" alt="Michael Chen" width="40" height="40" loading="lazy">
<div>
<div class="font-medium text-gray-900">Michael Chen</div>
<div class="text-sm text-gray-600">Product Manager</div>
</div>
</figcaption>
</figure>
<!-- Testimonial 2 -->
<figure class="rounded-lg border border-gray-200 p-6 bg-white">
<blockquote class="mb-4">
<p class="text-base text-gray-900">"Setup was a breeze, and the customer support team has been exceptional whenever we needed help."</p>
</blockquote>
<figcaption class="flex items-center gap-4">
<!-- Customer image by Pexels (CC0) -->
<img class="h-10 w-10 rounded-full" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" alt="Emily Rodriguez" width="40" height="40" loading="lazy">
<div>
<div class="font-medium text-gray-900">Emily Rodriguez</div>
<div class="text-sm text-gray-600">Operations Director</div>
</div>
</figcaption>
</figure>
<!-- Testimonial 3 -->
<figure class="rounded-lg border border-gray-200 p-6 bg-white">
<blockquote class="mb-4">
<p class="text-base text-gray-900">"The automation features have eliminated hours of manual work. It's been a game-changer for our team."</p>
</blockquote>
<figcaption class="flex items-center gap-4">
<!-- Customer image by Pexels (CC0) -->
<img class="h-10 w-10 rounded-full" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-4.webp" alt="David Kim" width="40" height="40" loading="lazy">
<div>
<div class="font-medium text-gray-900">David Kim</div>
<div class="text-sm text-gray-600">Tech Lead</div>
</div>
</figcaption>
</figure>
</div>
<!-- CTA Section -->
<div class="mt-16 text-center">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 text-base font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" aria-label="Start free trial">
Start Free Trial
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
<p class="mt-4 text-sm text-gray-600">14-day free trial • No credit card required</p>
</div>
</div>
</section>
