src/components/video/VideoTestimonial.astro
---
// VideoTestimonial, recovered from blurr-components.pages.dev
---
<section class="vt__section"> <div class="vt__header"> <p class="vt__eyebrow">Wat klanten zeggen</p> <h2 class="vt__headline">Hoor het van onze klanten zelf</h2> </div> <div class="vt__grid"> <div class="vt__card" role="button" tabindex="0" data-video-id="dQw4w9WgXcQ" data-name="Sarah van den Berg" aria-label="Bekijk video van Sarah van den Berg" style="--vt-delay: 0ms;"> <div class="vt__thumb-wrap"> <img data-allow-img src="/img/ext/photo-1438761681033-6461ffad8d80-w600-831806.jpg" alt="Sarah van den Berg, Marketing Director" class="vt__thumb" loading="lazy" decoding="async"> <div class="vt__overlay" aria-hidden="true"> <div class="vt__play-icon"> <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"> <polygon points="5,3 19,12 5,21"></polygon> </svg> </div> </div> </div> <div class="vt__info"> <p class="vt__name">Sarah van den Berg</p> <p class="vt__role"> Marketing Director, TechCorp </p> <blockquote class="vt__quote">"Binnen 6 weken verdubbelde onze leadstroom."</blockquote> </div> </div><div class="vt__card" role="button" tabindex="0" data-video-id="dQw4w9WgXcQ" data-name="Pieter de Groot" aria-label="Bekijk video van Pieter de Groot" style="--vt-delay: 100ms;"> <div class="vt__thumb-wrap"> <img data-allow-img src="/img/ext/photo-1507003211169-0a1dd7228f2d-w600-8954f7.jpg" alt="Pieter de Groot, CEO" class="vt__thumb" loading="lazy" decoding="async"> <div class="vt__overlay" aria-hidden="true"> <div class="vt__play-icon"> <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"> <polygon points="5,3 19,12 5,21"></polygon> </svg> </div> </div> </div> <div class="vt__info"> <p class="vt__name">Pieter de Groot</p> <p class="vt__role"> CEO, Modehaus </p> <blockquote class="vt__quote">"De ROI spreekt voor zich, 5× in het eerste kwartaal."</blockquote> </div> </div><div class="vt__card" role="button" tabindex="0" data-video-id="dQw4w9WgXcQ" data-name="Lisa Jansen" aria-label="Bekijk video van Lisa Jansen" style="--vt-delay: 200ms;"> <div class="vt__thumb-wrap"> <img data-allow-img src="/img/ext/photo-1438761681033-6461ffad8d80-w600-831806.jpg" alt="Lisa Jansen, Founder" class="vt__thumb" loading="lazy" decoding="async"> <div class="vt__overlay" aria-hidden="true"> <div class="vt__play-icon"> <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"> <polygon points="5,3 19,12 5,21"></polygon> </svg> </div> </div> </div> <div class="vt__info"> <p class="vt__name">Lisa Jansen</p> <p class="vt__role"> Founder, StartupX </p> <blockquote class="vt__quote">"Eindelijk een bureau dat meetbare resultaten levert."</blockquote> </div> </div> </div> </section> <!-- Native dialog modal --> <dialog class="vt__modal" id="vt-modal" aria-label="Video testimonial"> <div class="vt__modal-inner"> <button class="vt__modal-close" id="vt-modal-close" aria-label="Sluiten"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </button> <div class="vt__modal-frame"> <iframe id="vt-modal-iframe" class="vt__modal-iframe" src="" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen frameborder="0" title="Video testimonial"></iframe> </div> </div> </dialog>
<style>
.vt__section{padding:4rem 1.5rem;background:var(--color-bg)}
.vt__header{text-align:center;margin-bottom:2.5rem}
.vt__eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);margin:0 0 .5rem}
.vt__headline{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700;color:var(--color-primary);margin:0;line-height:1.15}
.vt__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1100px;margin:0 auto}
.vt__card{border-radius:var(--radius);overflow:hidden;background:#f9fafb;cursor:default;opacity:0;transform:translateY(20px);transition:opacity .5s ease var(--vt-delay, 0ms),transform .5s ease var(--vt-delay, 0ms)}
.vt__card[data-video-id]{cursor:pointer}
.vt__card--visible{opacity:1;transform:translateY(0)}
.vt__card[data-video-id]:hover{transform:translateY(-4px);box-shadow:0 12px 40px #0000001a}
.vt__card--visible[data-video-id]:hover{transform:translateY(-4px)}
.vt__thumb-wrap{position:relative;aspect-ratio:16 / 9;overflow:hidden}
.vt__thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.vt__card[data-video-id]:hover .vt__thumb{transform:scale(1.03)}
.vt__overlay{position:absolute;inset:0;background:#0000;display:flex;align-items:center;justify-content:center;transition:background .3s ease}
.vt__card[data-video-id]:hover .vt__overlay{background:#0006}
.vt__play-icon{width:52px;height:52px;border-radius:50%;background:#fffffff2;display:flex;align-items:center;justify-content:center;color:var(--color-primary);opacity:0;transform:scale(.8);transition:opacity .3s ease,transform .3s ease;padding-left:3px}
.vt__card[data-video-id]:hover .vt__play-icon{opacity:1;transform:scale(1)}
.vt__info{padding:1.125rem 1.25rem 1.25rem}
.vt__name{margin:0 0 .2rem;font-size:.9375rem;font-weight:700;color:var(--color-primary)}
.vt__role{margin:0 0 .75rem;font-size:.8125rem;color:var(--color-muted)}
.vt__quote{margin:0;font-size:.875rem;font-style:italic;color:#374151;line-height:1.55;padding:0;border:none}
.vt__modal{position:fixed;inset:0;max-width:100%;max-height:100%;width:100%;height:100%;background:transparent;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center}
.vt__modal::backdrop{background:#000c}
.vt__modal[open]{display:flex}
.vt__modal-inner{position:relative;width:min(900px,95vw);border-radius:var(--radius);overflow:hidden;background: #0a0a0a;box-shadow:0 24px 80px #0006}
.vt__modal-close{position:absolute;top:.75rem;right:.75rem;z-index:10;width:36px;height:36px;border-radius:50%;border:none;background:#ffffff26;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.vt__modal-close:hover{background:#ffffff4d}
.vt__modal-frame{aspect-ratio:16 / 9;width:100%}
.vt__modal-iframe{width:100%;height:100%;border:none;display:block}
.vt__grid{grid-template-columns:repeat(2,1fr)}
.vt__grid{grid-template-columns:1fr}
</style>