src/components/social-proof/TestimonialsSlider.astro
---
// TestimonialsSlider, recovered from blurr-components.pages.dev
---
<section class="ts" data-component="testimonials-slider"> <div class="ts__inner"> <div class="ts__header"> <p class="ts__pre">Klantverhalen</p> <h2 class="ts__headline">Wat onze klanten <em>zeggen</em></h2> </div> <div class="ts__stage"> <!-- Quotes --> <div data-slide="0" class="ts__slide ts__slide--active"> <!-- Stars --> <div class="ts__stars" aria-label="5 van 5 sterren"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"> <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="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"> <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="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"> <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="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"> <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="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"> <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="ts__quote"> <span class="ts__quote-mark">"</span> Binnen 3 maanden was ons aantal leads verdubbeld. BLURR begrijpt ons bedrijf echt en levert resultaten die ertoe doen. </blockquote> <div class="ts__author"> <div class="ts__avatar-fallback"> J </div> <div class="ts__author-info"> <span class="ts__name">Jan Bakker</span> <span class="ts__role"> Eigenaar · Bakker Loodgieters </span> </div> </div> </div><div data-slide="1" class="ts__slide"> <!-- Stars --> <div class="ts__stars" aria-label="5 van 5 sterren"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"> <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="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"> <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="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"> <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="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"> <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="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"> <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="ts__quote"> <span class="ts__quote-mark">"</span> Eindelijk een bureau dat doet wat het belooft. Onze ROAS ging van 1.8 naar 4.2 in 2 maanden. Indrukwekkend resultaat. </blockquote> <div class="ts__author"> <div class="ts__avatar-fallback"> S </div> <div class="ts__author-info"> <span class="ts__name">Sofie de Vries</span> <span class="ts__role"> Marketing Manager · TechCorp BV </span> </div> </div> </div><div data-slide="2" class="ts__slide"> <!-- Stars --> <div class="ts__stars" aria-label="5 van 5 sterren"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"> <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="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"> <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="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"> <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="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"> <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="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"> <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="ts__quote"> <span class="ts__quote-mark">"</span> Super snelle onboarding en direct resultaten. Ze begrijpen ons bedrijf en denken écht mee. Aanrader voor iedereen. </blockquote> <div class="ts__author"> <div class="ts__avatar-fallback"> P </div> <div class="ts__author-info"> <span class="ts__name">Pieter Janssen</span> <span class="ts__role"> Directeur · Janssen Installatie </span> </div> </div> </div> </div> <!-- Navigation dots + progress --> <div class="ts__nav"> <button class="ts__dot" data-target="0" aria-label="Testimonial van Jan Bakker"> <span class="ts__dot-fill"></span> </button><button class="ts__dot" data-target="1" aria-label="Testimonial van Sofie de Vries"> <span class="ts__dot-fill"></span> </button><button class="ts__dot" data-target="2" aria-label="Testimonial van Pieter Janssen"> <span class="ts__dot-fill"></span> </button> </div> <!-- Prev/Next --> <div class="ts__arrows"> <button class="ts__arrow ts__arrow--prev" aria-label="Vorige"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none"> <path d="M11 4L6 9l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </button> <button class="ts__arrow ts__arrow--next" aria-label="Volgende"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none"> <path d="M7 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </button> </div> </div> </section>
<style>
.ts{padding:6rem 1.5rem;background:var(--color-bg, #fff);overflow:hidden}
.ts__inner{max-width:800px;margin:0 auto;position:relative}
.ts__header{text-align:center;margin-bottom:4rem}
.ts__pre{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:1rem}
.ts__headline{font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:800;letter-spacing:-.03em;color:var(--color-primary, #0a0a0a);line-height:1.1}
.ts__headline em{font-style:normal;color:var(--color-accent, #6366f1)}
.ts__stage{position:relative;min-height:280px;margin-bottom:3rem}
.ts__slide{position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);pointer-events:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;padding:0 1rem}
.ts__slide--active{opacity:1;transform:translateY(0);pointer-events:auto;position:relative}
.ts__stars{display:flex;gap:.25rem;color:#f59e0b}
.ts__quote{font-size:clamp(1.125rem,2.5vw,1.5rem);font-weight:500;line-height:1.6;color:var(--color-primary, #0a0a0a);letter-spacing:-.01em;position:relative;quotes:none}
.ts__quote-mark{font-size:5rem;line-height:0;vertical-align:-.5em;color:var(--color-accent, #6366f1);font-weight:900;opacity:.15;margin-right:-.1em;font-style:normal}
.ts__author{display:flex;align-items:center;gap:.875rem}
.ts__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(0,0,0,.06)}
.ts__avatar-fallback{width:48px;height:48px;border-radius:50%;background:var(--color-accent, #6366f1);color:#fff;font-weight:700;font-size:1.125rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ts__author-info{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.ts__name{font-size:.9375rem;font-weight:700;color:var(--color-primary, #0a0a0a)}
.ts__role{font-size:.8125rem;color:var(--color-muted, #6b7280)}
.ts__nav{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:0}
.ts__dot{width:32px;height:4px;border-radius:2px;background:#0000001a;border:none;cursor:pointer;padding:0;transition: transform .3s,background .2s;position:relative;overflow:hidden}
.ts__dot--active{width:48px;background:#00000026}
.ts__dot-fill{position:absolute;inset:0;background:var(--color-accent, #6366f1);transform:scaleX(0);transform-origin:left}
.ts__dot--active .ts__dot-fill{animation:ts-fill 5.5s linear forwards}
.ts__arrows{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;pointer-events:none}
.ts__arrow{width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,0,0,.1);background:var(--color-bg, #fff);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-primary, #0a0a0a);transition:border-color .2s,box-shadow .2s;pointer-events:auto;transform:translate(-60px)}
.ts__arrow--next{transform:translate(60px)}
.ts__arrow:hover{border-color:var(--color-accent, #6366f1);box-shadow:0 2px 12px #6366f126;color:var(--color-accent, #6366f1)}
.ts__arrow{display:none}
.ts__stage{min-height:320px}
</style>