<!--
@type: Quote
@industry: Product
@style: Light
@category: Social Proof
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-200: #e5e7eb;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
--color-blue-50: #eff6ff;
--color-blue-100: #dbeafe;
--color-blue-300: #93c5fd;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
/* Container */
--container-max-width: 64rem; /* max-w-5xl */
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
}
/* Component Styles */
.quote-section {
background-color: var(--color-gray-50);
padding: var(--spacing-16) var(--spacing-4);
}
.quote-container {
max-width: var(--container-max-width);
margin: 0 auto;
}
.quote-card {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 1rem;
padding: var(--spacing-8);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
.decorative-circle-1 {
position: absolute;
top: 0;
left: 0;
width: 6rem;
height: 6rem;
background-color: var(--color-blue-50);
border-bottom-right-radius: 100%;
opacity: 0.7;
}
.decorative-circle-2 {
position: absolute;
bottom: 0;
right: 0;
width: 8rem;
height: 8rem;
background-color: var(--color-blue-50);
border-top-left-radius: 100%;
opacity: 0.7;
}
.quote-content {
position: relative;
z-index: 10;
}
.quote-mark {
width: 3rem;
height: 3rem;
color: var(--color-blue-100);
margin-bottom: var(--spacing-6);
}
.quote-text {
color: var(--color-gray-800);
font-size: 1.25rem;
font-weight: 300;
line-height: 1.75;
margin-bottom: var(--spacing-8);
line-height: 1.5;
}
.author-container {
display: flex;
align-items: center;
}
.author-image {
flex-shrink: 0;
margin-right: var(--spacing-4);
width: 3rem;
height: 3rem;
border-radius: 9999px;
object-fit: cover;
}
.author-name {
color: var(--color-gray-800);
font-weight: 500;
}
.author-title {
color: var(--color-gray-600);
font-size: 0.875rem;
}
.cta-container {
margin-top: var(--spacing-10);
text-align: center;
}
.cta-button {
display: inline-flex;
align-items: center;
background-color: var(--color-white);
border: 1px solid var(--color-blue-300);
color: var(--color-gray-800);
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
text-decoration: none;
transition: background-color 0.15s ease-in-out;
}
.cta-button:hover {
background-color: var(--color-gray-50);
}
.cta-icon {
margin-left: var(--spacing-2);
width: 1.25rem;
height: 1.25rem;
}
/* Responsive Breakpoints */
@media (min-width: 768px) {
.quote-section {
padding: var(--spacing-24) var(--spacing-4);
}
.quote-card {
padding: var(--spacing-12);
}
.quote-text {
font-size: 1.5rem;
line-height: 1.2;
}
}
</style>
<section class="quote-section">
<div class="quote-container">
<div class="quote-card">
<!-- Decorative elements -->
<div class="decorative-circle-1"></div>
<div class="decorative-circle-2"></div>
<div class="quote-content">
<!-- Quote mark -->
<svg class="quote-mark" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true">
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
</svg>
<!-- Quote text -->
<blockquote class="quote-text">
Our team was able to cut product development time by 50% after implementing this solution. It's transformed how we approach our design and development workflow.
</blockquote>
<!-- Author info -->
<div class="author-container">
<div>
<img class="author-image" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="Customer portrait" width="48" height="48" loading="lazy">
</div>
<div>
<p class="author-name">Sarah Johnson</p>
<p class="author-title">Product Director, Acme Design</p>
</div>
</div>
</div>
</div>
<!-- Optional CTA -->
<div class="cta-container">
<a href="#" class="cta-button">
<span>Read more customer stories</span>
<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 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</section>
<!--
@type: Quote
@industry: Product
@style: Light
@category: Social Proof
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 py-16 px-4 sm:py-24">
<div class="max-w-5xl mx-auto">
<div class="bg-white border border-gray-200 rounded-2xl p-8 md:p-12 shadow-sm relative overflow-hidden">
<!-- Decorative elements -->
<div class="absolute top-0 left-0 w-24 h-24 bg-blue-50 rounded-br-full opacity-70"></div>
<div class="absolute bottom-0 right-0 w-32 h-32 bg-blue-50 rounded-tl-full opacity-70"></div>
<div class="relative z-10">
<!-- Quote mark -->
<svg class="w-12 h-12 text-blue-100 mb-6" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true">
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
</svg>
<!-- Quote text -->
<blockquote class="text-gray-800 text-xl md:text-2xl font-light leading-relaxed mb-8">
Our team was able to cut product development time by 50% after implementing this solution. It's transformed how we approach our design and development workflow.
</blockquote>
<!-- Author info -->
<div class="flex items-center">
<div class="flex-shrink-0 mr-4">
<img class="h-12 w-12 rounded-full object-cover" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="Customer portrait" width="48" height="48" loading="lazy">
<!-- Customer portrait image -->
</div>
<div>
<p class="text-gray-800 font-medium">Sarah Johnson</p>
<p class="text-gray-600 text-sm">Product Director, Acme Design</p>
</div>
</div>
</div>
</div>
<!-- Optional CTA -->
<div class="mt-10 text-center">
<a href="#" class="inline-flex items-center bg-white border border-blue-300 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition duration-150 ease-in-out">
<span>Read more customer stories</span>
<svg class="ml-2 w-5 h-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 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</section>
