<!--
@type: Review
@industry: Business
@style: Modern
@category: Social Proof, Support, Feedback
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-slate-50: #f8fafc;
--color-slate-200: #e2e8f0;
--color-slate-300: #cbd5e1;
--color-slate-400: #94a3b8;
--color-slate-600: #475569;
--color-slate-900: #0f172a;
--color-indigo-600: #4f46e5;
--color-white: #ffffff;
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--font-sans);
}
/* Component styles */
.reviews-section {
background-color: var(--color-slate-50);
padding: 2.5rem 1rem;
font-family: var(--font-sans);
}
.reviews-container {
max-width: 48rem; /* 3xl = 48rem */
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 2.5rem;
}
.reviews-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: 1rem;
}
.reviews-description {
font-size: 1rem;
color: var(--color-slate-600);
margin-bottom: 1.5rem;
}
.reviews-grid {
display: grid;
gap: 2rem;
max-width: 72rem; /* 6xl = 72rem */
margin-left: auto;
margin-right: auto;
}
.review-card {
background-color: var(--color-white);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-slate-200);
display: flex;
flex-direction: column;
height: 100%;
}
.reviewer {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.reviewer-image {
width: 3rem;
height: 3rem;
border-radius: 9999px;
object-fit: cover;
border: 1px solid var(--color-slate-200);
}
.reviewer-name {
display: block;
color: var(--color-slate-900);
font-weight: 600;
}
.reviewer-position {
display: block;
color: var(--color-slate-600);
font-size: 0.875rem;
}
.stars {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
.star {
width: 1.25rem;
height: 1.25rem;
}
.star-filled {
color: var(--color-indigo-600);
}
.star-empty {
color: var(--color-slate-300);
}
.review-text {
color: var(--color-slate-600);
font-size: 1rem;
margin-bottom: 1rem;
flex-grow: 1;
}
.review-date {
color: var(--color-slate-400);
font-size: 0.875rem;
}
/* Responsive breakpoints */
@media (min-width: 640px) {
.reviews-section {
padding-left: 2rem;
padding-right: 2rem;
}
.reviews-title {
font-size: 1.875rem;
}
.reviews-description {
font-size: 1.125rem;
}
}
@media (min-width: 768px) {
.reviews-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.reviews-section {
padding-left: 0;
padding-right: 0;
}
.reviews-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="reviews-section" aria-labelledby="reviews-title">
<div>
<h2 id="reviews-title" class="reviews-title">Latest Reviews</h2>
<p class="reviews-description">Real feedback from business leaders who trust our solutions to drive their success.</p>
</div>
<div class="reviews-grid">
<!-- Business image by Pexels -->
<div class="review-card">
<div class="reviewer">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp" alt="Sarah Lee, CEO at FinCorp" class="reviewer-image" width="40" height="40" loading="lazy">
<div>
<span class="reviewer-name">Sarah Lee</span>
<span class="reviewer-position">CEO, FinCorp</span>
</div>
</div>
<div class="stars" aria-label="5 out of 5 stars">
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><title>5 stars</title><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
</div>
<blockquote class="review-text">"LandingGo transformed our workflow. The intuitive interface and robust features helped us scale faster than we imagined."</blockquote>
<span class="review-date">March 2024</span>
</div>
<!-- Business image by Pexels -->
<div class="review-card">
<div class="reviewer">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp" alt="James Carter, COO at MarketWise" class="reviewer-image" width="40" height="40" loading="lazy">
<div>
<span class="reviewer-name">James Carter</span>
<span class="reviewer-position">COO, MarketWise</span>
</div>
</div>
<div class="stars" aria-label="4.5 out of 5 stars">
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><title>5 stars</title><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-empty" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
</div>
<blockquote class="review-text">"The support team is outstanding. We saw a 30% increase in productivity after switching to LandingGo."</blockquote>
<span class="review-date">February 2024</span>
</div>
<!-- Business image by Pexels -->
<div class="review-card">
<div class="reviewer">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp" alt="Priya Patel, Head of Operations at BizGrowth" class="reviewer-image" width="40" height="40" loading="lazy">
<div>
<span class="reviewer-name">Priya Patel</span>
<span class="reviewer-position">Head of Operations, BizGrowth</span>
</div>
</div>
<div class="stars" aria-label="5 out of 5 stars">
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><title>5 stars</title><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
</div>
<blockquote class="review-text">"Exceptional value and reliability. Our team collaboration has never been smoother."</blockquote>
<span class="review-date">January 2024</span>
</div>
</div>
</section>
<!--
@type: Review
@industry: Business
@style: Modern
@category: Social Proof, Support, Feedback
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-10 px-4 sm:px-8 lg:px-0 font-sans" aria-labelledby="reviews-title">
<div class="max-w-3xl mx-auto text-center mb-10">
<h2 id="reviews-title" class="text-2xl sm:text-3xl font-bold text-slate-900 mb-4">Latest Reviews</h2>
<p class="text-base sm:text-lg text-slate-600 mb-6">Real feedback from business leaders who trust our solutions to drive their success.</p>
</div>
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto">
<!-- Business image by Pexels -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 flex flex-col h-full">
<div class="flex items-center gap-4 mb-4">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp" alt="Sarah Lee, CEO at FinCorp" class="w-12 h-12 rounded-full object-cover border border-slate-200" width="40" height="40" loading="lazy">
<div>
<span class="block text-slate-900 font-semibold">Sarah Lee</span>
<span class="block text-slate-600 text-sm">CEO, FinCorp</span>
</div>
</div>
<div class="flex items-center mb-2" aria-label="5 out of 5 stars">
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><title>5 stars</title><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
</div>
<blockquote class="text-slate-600 text-base mb-4 flex-1">“LandingGo transformed our workflow. The intuitive interface and robust features helped us scale faster than we imagined.”</blockquote>
<span class="text-slate-400 text-sm">March 2024</span>
</div>
<!-- Business image by Pexels -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 flex flex-col h-full">
<div class="flex items-center gap-4 mb-4">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp" alt="James Carter, COO at MarketWise" class="w-12 h-12 rounded-full object-cover border border-slate-200" width="40" height="40" loading="lazy">
<div>
<span class="block text-slate-900 font-semibold">James Carter</span>
<span class="block text-slate-600 text-sm">COO, MarketWise</span>
</div>
</div>
<div class="flex items-center mb-2" aria-label="4.5 out of 5 stars">
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><title>5 stars</title><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-slate-300" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
</div>
<blockquote class="text-slate-600 text-base mb-4 flex-1">“The support team is outstanding. We saw a 30% increase in productivity after switching to LandingGo.”</blockquote>
<span class="text-slate-400 text-sm">February 2024</span>
</div>
<!-- Business image by Pexels -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 flex flex-col h-full">
<div class="flex items-center gap-4 mb-4">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp" alt="Priya Patel, Head of Operations at BizGrowth" class="w-12 h-12 rounded-full object-cover border border-slate-200" width="40" height="40" loading="lazy">
<div>
<span class="block text-slate-900 font-semibold">Priya Patel</span>
<span class="block text-slate-600 text-sm">Head of Operations, BizGrowth</span>
</div>
</div>
<div class="flex items-center mb-2" aria-label="5 out of 5 stars">
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><title>5 stars</title><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
</div>
<blockquote class="text-slate-600 text-base mb-4 flex-1">“Exceptional value and reliability. Our team collaboration has never been smoother.”</blockquote>
<span class="text-slate-400 text-sm">January 2024</span>
</div>
</div>
</section>
