src/components/ui/ClientLogosScroll.astro
---
// ClientLogosScroll, recovered from blurr-components.pages.dev
---
<section class="cls cls--white"> <div class="cls-inner"> <p class="cls-eyebrow">Vertrouwd door</p> <div class="cls-track-wrap"> <div class="cls-track" style="animation-duration: 25s"> <div class="cls-logo"> <span class="cls-name">TechFlow</span> </div><div class="cls-logo"> <span class="cls-name">GreenBuild</span> </div><div class="cls-logo"> <span class="cls-name">Stijlvol Wonen</span> </div><div class="cls-logo"> <span class="cls-name">FlexHR</span> </div><div class="cls-logo"> <span class="cls-name">VDB Installatie</span> </div><div class="cls-logo"> <span class="cls-name">Pura Studio</span> </div><div class="cls-logo"> <span class="cls-name">DataDriven</span> </div><div class="cls-logo"> <span class="cls-name">RetailX</span> </div><div class="cls-logo"> <span class="cls-name">BuildPro</span> </div><div class="cls-logo"> <span class="cls-name">FinServ</span> </div><div class="cls-logo"> <span class="cls-name">HealthTech</span> </div><div class="cls-logo"> <span class="cls-name">EduPlus</span> </div><div class="cls-logo"> <span class="cls-name">TechFlow</span> </div><div class="cls-logo"> <span class="cls-name">GreenBuild</span> </div><div class="cls-logo"> <span class="cls-name">Stijlvol Wonen</span> </div><div class="cls-logo"> <span class="cls-name">FlexHR</span> </div><div class="cls-logo"> <span class="cls-name">VDB Installatie</span> </div><div class="cls-logo"> <span class="cls-name">Pura Studio</span> </div><div class="cls-logo"> <span class="cls-name">DataDriven</span> </div><div class="cls-logo"> <span class="cls-name">RetailX</span> </div><div class="cls-logo"> <span class="cls-name">BuildPro</span> </div><div class="cls-logo"> <span class="cls-name">FinServ</span> </div><div class="cls-logo"> <span class="cls-name">HealthTech</span> </div><div class="cls-logo"> <span class="cls-name">EduPlus</span> </div> </div> </div> </div> </section>
<style>
.cls{padding:3.5rem 0;overflow:hidden}
.cls--white{background:#fff;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.cls--light{background:#f8fafc;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.cls--dark{background:#0a0a0a}
.cls-eyebrow{text-align:center;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 1.75rem}
.cls--white .cls-eyebrow,.cls--light .cls-eyebrow{color:#9ca3af}
.cls--dark .cls-eyebrow{color:#ffffff4d}
.cls-track-wrap{position:relative}
.cls-track-wrap:before,.cls-track-wrap:after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.cls--white .cls-track-wrap:before,.cls--light .cls-track-wrap:before{background:linear-gradient(90deg,#fff,transparent)}
.cls--white .cls-track-wrap:after,.cls--light .cls-track-wrap:after{background:linear-gradient(-90deg,#fff,transparent);right:0}
.cls--dark .cls-track-wrap:before{background:linear-gradient(90deg,#0a0a0a,transparent)}
.cls--dark .cls-track-wrap:after{background:linear-gradient(-90deg,#0a0a0a,transparent);right:0}
.cls--light .cls-track-wrap:before{background:linear-gradient(90deg,#f8fafc,transparent)}
.cls--light .cls-track-wrap:after{background:linear-gradient(-90deg,#f8fafc,transparent);right:0}
.cls-track{display:flex;gap:3rem;align-items:center;width:max-content;animation:cls-scroll linear infinite}
.cls-logo{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:.5rem 1rem}
.cls-img{height:28px;width:auto;opacity:.45;filter:grayscale(1)}
.cls-name{font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.cls--white .cls-name,.cls--light .cls-name{color:#d1d5db}
.cls--dark .cls-name{color:#ffffff2e}
</style>