<!--
@type: Quote
@industry: Marketing
@style: Dark
@category: Social Proof
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--gray-900: #111827;
--gray-400: #9ca3af;
--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(--gray-900);
padding: 3rem 1rem;
}
.quote-wrapper {
position: relative;
}
.quote-content {
position: relative;
max-width: 48rem; /* max-w-3xl */
margin: 0 auto;
text-align: center;
}
.quote-text {
margin-top: 2.5rem;
color: var(--white);
font-size: 1.25rem;
font-weight: 500;
}
.quote-author {
margin-top: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.author-image {
height: 2.5rem;
width: 2.5rem;
border-radius: 9999px;
margin-right: 0.75rem;
}
.author-info {
text-align: left;
}
.author-name {
font-size: 1rem;
font-weight: 500;
color: var(--white);
}
.author-title {
font-size: 0.875rem;
color: var(--gray-400);
}
/* Responsive styles */
@media (min-width: 640px) {
.quote-section {
padding: 4rem 1.5rem;
}
.quote-text {
font-size: 1.5rem;
}
}
@media (min-width: 1024px) {
.quote-section {
padding: 5rem 2rem;
}
.quote-text {
font-size: 1.875rem;
}
}
</style>
<section class="quote-section">
<div class="quote-wrapper">
<div class="quote-content">
<blockquote>
<p class="quote-text">"Digital marketing isn't just about data and metrics – it's about creating meaningful connections that drive real business growth. The insights we've gained have transformed how we approach customer engagement."</p>
<div class="quote-author">
<img class="author-image" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" alt="Sarah Mitchell profile picture">
<div class="author-info">
<div class="author-name">Sarah Mitchell</div>
<div class="author-title">Marketing Director at TechForward</div>
</div>
</div>
</blockquote>
</div>
</div>
</section>
<!--
@type: Quote
@industry: Marketing
@style: Dark
@category: Social Proof
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900 py-12 sm:py-16 lg:py-20">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="relative">
<div class="relative mx-auto max-w-3xl text-center">
<blockquote class="mt-10">
<p class="text-xl font-medium text-white sm:text-2xl lg:text-3xl">"Digital marketing isn't just about data and metrics – it's about creating meaningful connections that drive real business growth. The insights we've gained have transformed how we approach customer engagement."</p>
<div class="mt-8">
<div class="flex items-center justify-center space-x-3">
<!-- Marketing expert profile image -->
<img class="h-10 w-10 rounded-full" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" alt="Sarah Mitchell profile picture">
<div class="text-left">
<div class="text-base font-medium text-white">Sarah Mitchell</div>
<div class="text-sm text-gray-400">Marketing Director at TechForward</div>
</div>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</section>