src/components/social-proof/TestimonialsCoverPhoto.astro
<!-- blurr-lint-disable A2 -->
---
// TestimonialsCoverPhoto, recovered from blurr-components.pages.dev
---
<section class="tcp" data-component="testimonials-cover-photo"> <div class="tcp__inner"> <div class="tcp__card"> <div class="tcp__photo"> <img data-allow-img src="/img/ext/photo-1497366216548-37526070297c-w1200-2902ec.jpg" alt="" class="tcp__photo-img" loading="lazy" decoding="async" > <div class="tcp__photo-overlay"></div> </div> <div class="tcp__content"> <div class="tcp__stars"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg> </div> <blockquote class="tcp__quote"> <svg class="tcp__quote-icon" width="32" height="32" viewBox="0 0 24 24" fill="currentColor"> <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"></path> </svg> <p class="tcp__quote-text">BLURR transformeerde onze online marketing. Binnen 3 maanden zagen we een verdubbeling van kwalitatieve leads tegen lagere kosten per acquisitie.</p> </blockquote> <div class="tcp__author"> <div> <div class="tcp__author-name">Sarah van den Berg</div> <div class="tcp__author-meta"> Marketing Director · TechCorp BV </div> </div> </div> </div> </div> </div> </section>
<style>
.tcp{background:var(--color-bg, #fff);padding:5rem 1.5rem}
.tcp__inner{max-width:1100px;margin:0 auto}
.tcp__card{position:relative;border-radius:calc(var(--radius, .5rem) * 3);overflow:hidden;min-height:480px;display:flex;align-items:stretch}
.tcp__photo{position:absolute;inset:0}
.tcp__photo-img{width:100%;height:100%;object-fit:cover}
.tcp__photo-overlay{position:absolute;inset:0;background:linear-gradient(105deg,#000000bf 40%,#0003)}
.tcp__content{position:relative;z-index:1;padding:3.5rem 4rem;max-width:600px;display:flex;flex-direction:column;justify-content:center;gap:1.5rem}
.tcp__logo{height:28px;object-fit:contain;object-position:left;filter:brightness(0) invert(1);opacity:.9}
.tcp__stars{display:flex;gap:3px;color:#f59e0b}
.tcp__quote-icon{color:var(--color-accent, #6366f1);margin-bottom:.625rem}
.tcp__quote-text{font-size:clamp(1.125rem,2vw,1.5rem);font-weight:500;line-height:1.55;color:#fff}
.tcp__author{display:flex;align-items:center;gap:.875rem}
.tcp__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.3)}
.tcp__author-name{font-weight:700;font-size:.9375rem;color:#fff}
.tcp__author-meta{font-size:.8125rem;color:#fff9}
.tcp__content{padding:2.5rem 1.75rem}
.tcp__card{min-height:400px}
</style>