<!--
@type: Quote
@industry: Business
@style: Modern
@category: Social Proof
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--slate-50: #f8fafc;
--slate-100: #f1f5f9;
--slate-200: #e2e8f0;
--slate-500: #64748b;
--slate-600: #475569;
--slate-700: #334155;
--slate-900: #0f172a;
--indigo-50: #eef2ff;
--indigo-100: #e0e7ff;
--indigo-200: #c7d2fe;
--indigo-600: #4f46e5;
--indigo-700: #4338ca;
--white: #ffffff;
}
/* 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 */
.quote-section {
background-color: var(--slate-50);
padding: 3rem 1rem;
position: relative;
}
.relative {
position: relative;
}
.quote-container {
max-width: 48rem; /* 3xl */
margin-left: auto;
margin-right: auto;
}
.quote-decoration {
position: absolute;
top: -1rem;
left: -2rem;
color: var(--indigo-200);
opacity: 0.2;
display: none;
}
.quote-decoration svg {
width: 5rem;
height: 5rem;
}
.quote-card {
background-color: var(--white);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
border: 1px solid var(--slate-200);
position: relative;
overflow: hidden;
}
.quote-decoration-circle {
position: absolute;
top: 0;
right: 0;
width: 6rem;
height: 6rem;
margin-top: -2rem;
margin-right: -2rem;
background-color: var(--indigo-50);
border-radius: 9999px;
opacity: 0.7;
}
.quote-content {
position: relative;
z-index: 10;
}
.quote-text {
color: var(--slate-900);
font-size: 1.125rem;
font-weight: 500;
line-height: 1.625;
margin-bottom: 1.5rem;
}
.quote-footer {
margin-top: 2rem;
}
.quote-author-container {
display: flex;
align-items: center;
}
.quote-author-container > * + * {
margin-left: 1rem;
}
.quote-author-image {
width: 3rem;
height: 3rem;
border-radius: 9999px;
border: 2px solid var(--indigo-100);
}
.quote-author-name {
color: var(--slate-900);
font-weight: 500;
}
.quote-author-title {
color: var(--slate-600);
font-size: 0.875rem;
}
.quote-source {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--slate-100);
display: flex;
justify-content: space-between;
align-items: center;
}
.quote-source-label {
font-size: 0.875rem;
color: var(--slate-500);
}
.quote-source-publication {
color: var(--slate-700);
font-weight: 500;
display: flex;
align-items: center;
}
.quote-source-icon {
width: 1.25rem;
height: 1.25rem;
margin-right: 0.5rem;
color: var(--indigo-600);
}
.quote-cta {
margin-top: 2rem;
text-align: center;
}
.quote-cta-link {
display: inline-flex;
align-items: center;
color: var(--indigo-600);
font-weight: 500;
text-decoration: none;
transition: color 0.2s;
}
.quote-cta-link:hover {
color: var(--indigo-700);
}
.quote-cta-icon {
width: 1rem;
height: 1rem;
margin-left: 0.5rem;
}
/* Responsive styles */
@media (min-width: 640px) {
.quote-section {
padding: 4rem 1.5rem;
}
.quote-card {
padding: 2rem;
}
.quote-text {
font-size: 1.25rem;
}
}
@media (min-width: 1024px) {
.quote-section {
padding: 5rem 2rem;
}
.quote-decoration {
display: block;
}
.quote-card {
padding: 2.5rem;
}
.quote-text {
font-size: 1.5rem;
}
}
</style>
<section class="quote-section" aria-labelledby="quote-heading">
<div>
<div class="relative">
<div class="quote-container">
<!-- Decorative elements -->
<div class="quote-decoration" aria-hidden="true">
<svg fill="currentColor" viewBox="0 0 24 24">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
</svg>
</div>
<!-- Quote card -->
<div class="quote-card">
<div class="quote-decoration-circle"></div>
<!-- Quote content -->
<blockquote class="quote-content">
<p class="quote-text">
"Strategic partnerships have been the cornerstone of our growth. By aligning with companies that share our vision, we've been able to expand our market reach and deliver exceptional value to our clients."
</p>
<footer class="quote-footer">
<div class="quote-author-container">
<!-- Business executive image -->
<img
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-4.webp"
alt="Michael Richardson"
class="quote-author-image"
loading="lazy"
width="48"
height="48">
<div>
<div class="quote-author-name">Michael Richardson</div>
<div class="quote-author-title">CEO, Nexus Partners</div>
</div>
</div>
</footer>
</blockquote>
<!-- Company logo -->
<div class="quote-source">
<div class="quote-source-label">Featured in</div>
<div class="quote-source-publication">
<svg class="quote-source-icon" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"></path>
</svg>
Business Insights Quarterly
</div>
</div>
</div>
<!-- Optional CTA -->
<div class="quote-cta">
<a href="#" class="quote-cta-link">
Read the full interview
<svg class="quote-cta-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Quote
@industry: Business
@style: Modern
@category: Social Proof
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-12 sm:py-16 lg:py-20" aria-labelledby="quote-heading">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="relative">
<div class="mx-auto max-w-3xl">
<!-- Decorative elements -->
<div class="absolute -top-4 -left-8 text-indigo-200 opacity-20 hidden lg:block" aria-hidden="true">
<svg class="w-20 h-20" fill="currentColor" viewBox="0 0 24 24">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
</svg>
</div>
<!-- Quote card -->
<div class="bg-white rounded-xl p-6 sm:p-8 lg:p-10 shadow-lg border border-slate-200 relative overflow-hidden">
<div class="absolute top-0 right-0 w-24 h-24 -mt-8 -mr-8 bg-indigo-50 rounded-full opacity-70"></div>
<!-- Quote content -->
<blockquote class="relative z-10">
<p class="text-slate-900 text-lg sm:text-xl lg:text-2xl font-medium leading-relaxed mb-6">
"Strategic partnerships have been the cornerstone of our growth. By aligning with companies that share our vision, we've been able to expand our market reach and deliver exceptional value to our clients."
</p>
<footer class="mt-8">
<div class="flex items-center space-x-4">
<!-- Business executive image -->
<img
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-4.webp"
alt="Michael Richardson"
class="w-12 h-12 rounded-full border-2 border-indigo-100"
loading="lazy"
width="48"
height="48">
<div>
<div class="text-slate-900 font-medium">Michael Richardson</div>
<div class="text-slate-600 text-sm">CEO, Nexus Partners</div>
</div>
</div>
</footer>
</blockquote>
<!-- Company logo -->
<div class="mt-8 pt-6 border-t border-slate-100 flex justify-between items-center">
<div class="text-sm text-slate-500">Featured in</div>
<div class="text-slate-700 font-medium flex items-center">
<svg class="w-5 h-5 mr-2 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"></path>
</svg>
Business Insights Quarterly
</div>
</div>
</div>
<!-- Optional CTA -->
<div class="mt-8 text-center">
<a href="#" class="inline-flex items-center text-indigo-600 font-medium hover:text-indigo-700 transition-colors">
Read the full interview
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
