Загрузка...
Секция Hero с интерактивным блоком отзывов. Реализована с помощью Tailwind CSS, подходит для лендингов продуктов и SaaS.
<header class="md:px-10 md:pt-16 max-w-7xl mr-auto ml-auto pt-10 pr-6 pl-6">
<!-- Top bar -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="bg-center text-sm text-white/60 w-[140px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/d257331d-dbc9-4389-9767-ff5d0e2512eb_1600w.png?w=800&q=80)] bg-cover"></span>
</div>
<div class="hidden sm:flex items-center gap-6 text-sm">
<a class="text-white/60 hover:text-white transition-colors" href="#">Docs</a>
<a class="text-white/60 hover:text-white transition-colors" href="#">Components</a>
<a class="text-white/60 hover:text-white transition-colors" href="#">Examples</a>
<button class="border-gradient before:rounded-2xl inline-flex items-center gap-2 rounded-2xl px-4 py-2 text-sm transition-colors [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)] hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:star-bold-duotone" class="iconify text-base iconify--solar"><path fill="currentColor" d="M18.483 16.767A8.5 8.5 0 0 1 8.118 7.081a1 1 0 0 1-.113.097c-.28.213-.63.292-1.33.45l-.635.144c-2.46.557-3.69.835-3.983 1.776c-.292.94.546 1.921 2.223 3.882l.434.507c.476.557.715.836.822 1.18c.107.345.071.717-.001 1.46l-.066.677c-.253 2.617-.38 3.925.386 4.506s1.918.052 4.22-1.009l.597-.274c.654-.302.981-.452 1.328-.452s.674.15 1.329.452l.595.274c2.303 1.06 3.455 1.59 4.22 1.01c.767-.582.64-1.89.387-4.507z" class=""></path><path fill="currentColor" d="m9.153 5.408l-.328.588c-.36.646-.54.969-.82 1.182q.06-.045.113-.097a8.5 8.5 0 0 0 10.366 9.686l-.02-.19c-.071-.743-.107-1.115 0-1.46c.107-.344.345-.623.822-1.18l.434-.507c1.677-1.96 2.515-2.941 2.222-3.882c-.292-.941-1.522-1.22-3.982-1.776l-.636-.144c-.699-.158-1.049-.237-1.33-.45c-.28-.213-.46-.536-.82-1.182l-.327-.588C13.58 3.136 12.947 2 12 2s-1.58 1.136-2.847 3.408" opacity=".5" class=""></path></svg>
<span class="tracking-tight">Star</span>
<svg class="fx-svg-defs" data-fx-svg="true" style="position: absolute; width: 0; height: 0;">
<filter id="fx-liquid-glass-jdxfek" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB" class="">
<feImage result="FEIMG" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAkCAYAAADxYNZEAAAAoklEQVR4AezSsQnAQBADwcP9F21QC7vRsw4ukzDz+q4PC4SICe9CDFEQECpaYoiCgFDREkMUBISKlhiiICBUtMQQBQGh4oUlCgysIkTmt3SIY2AnROa3dIhjYCdE5rd0iGNgJ0Tmt3SIY2AnROa3dIhjYCdE5rd0iGNgR0BkP/BCOkThFUMMURAQKlpiiIKAUNESQxQEhIqWGKIgIFS0RAHxBwAA//+lkpnWAAAABklEQVQDAMkSAEmthUTIAAAAAElFTkSuQmCC" color-interpolation-filters="sRGB" class=""></feImage>
<feDisplacementMap in="SourceGraphic" in2="FEIMG" scale="127" yChannelSelector="B" xChannelSelector="R" color-interpolation-filters="sRGB" class=""></feDisplacementMap>
</filter><filter id="fx-noise-2hbcsu" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB" class="">
<feImage href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAkCAYAAADxYNZEAAAAoklEQVR4AezSsQnAQBADwcP9F21QC7vRsw4ukzDz+q4PC4SICe9CDFEQECpaYoiCgFDREkMUBISKlhiiICBUtMQQBQGh4oUlCgysIkTmt3SIY2AnROa3dIhjYCdE5rd0iGNgJ0Tmt3SIY2AnROa3dIhjYCdE5rd0iGNgR0BkP/BCOkThFUMMURAQKlpiiIKAUNESQxQEhIqWGKIgIFS0RAHxBwAA//+lkpnWAAAABklEQVQDAMkSAEmthUTIAAAAAElFTkSuQmCC" result="noiseAdd" image-rendering="pixelated" class=""></feImage>
<feBlend in="SourceGraphic" in2="noiseAdd" mode="overlay" image-rendering="pixelated" result="brightened" class=""></feBlend>
</filter>
</svg>
<div class="fx-container" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px) url(#fx-liquid-glass-jdxfek) saturate(1.25) url(#fx-noise-2hbcsu); background: transparent; pointer-events: none; z-index: -1; overflow: hidden; border-radius: inherit;"></div>
</button>
</div>
</div>
<section class="grid grid-cols-1 lg:grid-cols-12 gap-10 md:gap-12 items-start mt-10 md:mt-16">
<!-- Left: Hero content -->
<div class="lg:col-span-5">
<div
class="border-gradient before:rounded-2xl inline-flex items-center gap-2 rounded-2xl px-2.5 py-1.5 [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)]">
<div class="h-6 w-6 grid place-items-center rounded-xl bg-emerald-500/10 text-emerald-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:shield-user-bold-duotone" class="iconify text-sm iconify--solar">
<path fill="currentColor"
d="M3 10.417c0-3.198 0-4.797.378-5.335c.377-.537 1.88-1.052 4.887-2.081l.573-.196C10.405 2.268 11.188 2 12 2s1.595.268 3.162.805l.573.196c3.007 1.029 4.51 1.544 4.887 2.081C21 5.62 21 7.22 21 10.417v1.574c0 5.638-4.239 8.375-6.899 9.536C13.38 21.842 13.02 22 12 22s-1.38-.158-2.101-.473C7.239 20.365 3 17.63 3 11.991z"
opacity=".5" class=""></path>
<path fill="currentColor"
d="M14 9a2 2 0 1 1-4 0a2 2 0 0 1 4 0m-2 8c4 0 4-.895 4-2s-1.79-2-4-2s-4 .895-4 2s0 2 4 2" class=""></path>
</svg>
</div>
<span class="text-xs text-white/70">Live interactive hero</span>
<svg class="fx-svg-defs" data-fx-svg="true" style="position: absolute; width: 0; height: 0;">
<filter id="fx-liquid-glass-3b9kav" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"
class="">
<feImage result="FEIMG"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKcAAAAkCAYAAADsMiqaAAAA/UlEQVR4Aezc0QkEQRAC0eXyD/qScKDFtwGIXRb7Ob/Ph8BRAuQ8Ooxa30dOFpwlQM6z0yhGTg6cJUDOs9MolpcTUwRCBMgZAikmT4CceaYSQwTIGQIpJk+AnHmmEkMEyBkCKSZPoEHO/NUSKwiQs2KmzZLk3Ny94mpyVsy0WZKcm7tXXE3Oipk2S27Kubl13dXkrJtspzA5d7auu5ScdZPtFCbnztZ1l5KzbrKdwuTMbC3lAQFyPoAqMkOAnBmOUh4QIOcDqCIzBMiZ4SjlAQFyPoAqMkOAnBmO+RSJHvLiwF0C/px3t5lvRs55Be4CIOfdbeabkXNegbsA/gAAAP//om92RAAAAAZJREFUAwD3uwBJa9ittQAAAABJRU5ErkJggg=="
color-interpolation-filters="sRGB" class=""></feImage>
<feDisplacementMap in="SourceGraphic" in2="FEIMG" scale="127" yChannelSelector="B" xChannelSelector="R"
color-interpolation-filters="sRGB" class=""></feDisplacementMap>
</filter>
<filter id="fx-noise-tv6rpo" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"
class="">
<feImage
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKcAAAAkCAYAAADsMiqaAAAA/UlEQVR4Aezc0QkEQRAC0eXyD/qScKDFtwGIXRb7Ob/Ph8BRAuQ8Ooxa30dOFpwlQM6z0yhGTg6cJUDOs9MolpcTUwRCBMgZAikmT4CceaYSQwTIGQIpJk+AnHmmEkMEyBkCKSZPoEHO/NUSKwiQs2KmzZLk3Ny94mpyVsy0WZKcm7tXXE3Oipk2S27Kubl13dXkrJtspzA5d7auu5ScdZPtFCbnztZ1l5KzbrKdwuTMbC3lAQFyPoAqMkOAnBmOUh4QIOcDqCIzBMiZ4SjlAQFyPoAqMkOAnBmO+RSJHvLiwF0C/px3t5lvRs55Be4CIOfdbeabkXNegbsA/gAAAP//om92RAAAAAZJREFUAwD3uwBJa9ittQAAAABJRU5ErkJggg=="
result="noiseAdd" image-rendering="pixelated" class=""></feImage>
<feBlend in="SourceGraphic" in2="noiseAdd" mode="overlay" image-rendering="pixelated" result="brightened"
class=""></feBlend>
</filter>
</svg>
<div class="fx-container"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px) url(#fx-liquid-glass-3b9kav) saturate(1.25) url(#fx-noise-tv6rpo); background: transparent; pointer-events: none; z-index: -1; overflow: hidden; border-radius: inherit;">
</div>
</div>
<h1 class="sm:text-6xl md:text-7xl leading-[0.95] text-5xl font-semibold text-white tracking-tight mt-5">
Liquid glass meets
<span class="text-transparent bg-clip-text" style="background-image: linear-gradient(180deg, #fff, rgba(255,255,255,0.65));">dynamic grids</span>
</h1>
<p class="sm:text-base leading-relaxed text-sm text-white/60 max-w-lg mt-5">
A responsive hero that blends a hover-reactive icon grid with floating glass panels.
Subtle depth, crisp type, and delightful motion—crafted for modern product launches.
</p>
<!-- Feature chips -->
<div class="mt-6 flex flex-wrap gap-2.5">
<div
class="border-gradient before:rounded-2xl inline-flex hover:bg-white/[0.07] transition-colors rounded-2xl pt-1.5 pr-3 pb-1.5 pl-3 gap-2 items-center [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:shield-user-bold-duotone" class="iconify text-base iconify--solar">
<path fill="currentColor"
d="M3 10.417c0-3.198 0-4.797.378-5.335c.377-.537 1.88-1.052 4.887-2.081l.573-.196C10.405 2.268 11.188 2 12 2s1.595.268 3.162.805l.573.196c3.007 1.029 4.51 1.544 4.887 2.081C21 5.62 21 7.22 21 10.417v1.574c0 5.638-4.239 8.375-6.899 9.536C13.38 21.842 13.02 22 12 22s-1.38-.158-2.101-.473C7.239 20.365 3 17.63 3 11.991z"
opacity=".5" class=""></path>
<path fill="currentColor"
d="M14 9a2 2 0 1 1-4 0a2 2 0 0 1 4 0m-2 8c4 0 4-.895 4-2s-1.79-2-4-2s-4 .895-4 2s0 2 4 2" class=""></path>
</svg>
<span class="text-xs text-white/70">GPU-smooth interactions</span>
<svg class="fx-svg-defs" data-fx-svg="true" style="position: absolute; width: 0; height: 0;">
<filter id="fx-liquid-glass-l1i6al" x="0" y="0" width="100%" height="100%"
color-interpolation-filters="sRGB" class="">
<feImage result="FEIMG"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAcCAYAAAA3ILBTAAAA20lEQVR4AezTMQ7EIBAEQev+/+hLEAGSpU1NlxNA3oDpoX+PD4EwAQKEyxf9eQjgFaQJECBdv/AE8AbSBMICpHsXfhEgwAJhaRIgQLN3qRcBAiwQliYBAjR7l3oRIMACkVqE3QQIsFHYFAkQoNi6zJsAATYKmyIBAhRbl3kTIMBGYVMgcGYkwEnEOUWAAKm6hT0JEOAk4pwiQIBU3cKeBAhwEnFOEQgJkOpV2CEBAgxBGbuTAAHu7FWqIQECDEEZu5MAAe7sVaohAQIMQX16zOVfCRDgFY0fBQJ/AAAA//9KzzsPAAAABklEQVQDANvPADmCwQyDAAAAAElFTkSuQmCC"
color-interpolation-filters="sRGB" class=""></feImage>
<feDisplacementMap in="SourceGraphic" in2="FEIMG" scale="127" yChannelSelector="B" xChannelSelector="R"
color-interpolation-filters="sRGB" class=""></feDisplacementMap>
</filter>
<filter id="fx-noise-1wnj3i" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"
class="">
<feImage
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAcCAYAAAA3ILBTAAAA20lEQVR4AezTMQ7EIBAEQev+/+hLEAGSpU1NlxNA3oDpoX+PD4EwAQKEyxf9eQjgFaQJECBdv/AE8AbSBMICpHsXfhEgwAJhaRIgQLN3qRcBAiwQliYBAjR7l3oRIMACkVqE3QQIsFHYFAkQoNi6zJsAATYKmyIBAhRbl3kTIMBGYVMgcGYkwEnEOUWAAKm6hT0JEOAk4pwiQIBU3cKeBAhwEnFOEQgJkOpV2CEBAgxBGbuTAAHu7FWqIQECDEEZu5MAAe7sVaohAQIMQX16zOVfCRDgFY0fBQJ/AAAA//9KzzsPAAAABklEQVQDANvPADmCwQyDAAAAAElFTkSuQmCC"
result="noiseAdd" image-rendering="pixelated" class=""></feImage>
<feBlend in="SourceGraphic" in2="noiseAdd" mode="overlay" image-rendering="pixelated" result="brightened"
class=""></feBlend>
</filter>
</svg>
<div class="fx-container"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px) url(#fx-liquid-glass-l1i6al) saturate(1.25) url(#fx-noise-1wnj3i); background: transparent; pointer-events: none; z-index: -1; overflow: hidden; border-radius: inherit;">
</div>
</div>
<div
class="border-gradient before:rounded-2xl inline-flex hover:bg-white/[0.07] transition-colors rounded-2xl pt-1.5 pr-3 pb-1.5 pl-3 gap-2 items-center [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:target-bold-duotone" class="iconify text-base iconify--solar">
<path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10"
opacity=".5" class=""></path>
<path fill="currentColor"
d="M9.25 12a.75.75 0 0 1 .75-.75h1.25V10a.75.75 0 0 1 1.5 0v1.25H14a.75.75 0 0 1 0 1.5h-1.25V14a.75.75 0 0 1-1.5 0v-1.25H10a.75.75 0 0 1-.75-.75m-7.222.75a10 10 0 0 1 0-1.5H5a.75.75 0 0 1 0 1.5zm10.722 9.222a10 10 0 0 1-1.5 0V19a.75.75 0 0 1 1.5 0zm9.222-10.722a10 10 0 0 1 0 1.5H19a.75.75 0 0 1 0-1.5zM12.75 2.028V5a.75.75 0 0 1-1.5 0V2.028a10 10 0 0 1 1.5 0"
class=""></path>
</svg>
<span class="text-xs text-white/70">Glassmorphism</span>
<svg class="fx-svg-defs" data-fx-svg="true" style="position: absolute; width: 0; height: 0;">
<filter id="fx-liquid-glass-h22ytv" x="0" y="0" width="100%" height="100%"
color-interpolation-filters="sRGB" class="">
<feImage result="FEIMG"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAAAcCAYAAABLRqyKAAAAvUlEQVR4AezSwQkEQQwDweHyD/oi8McsSODa5w5Gtrp/z6eBoQFyDMX4/R45WDA2QI6xGg/k4MDYADnGajyQgwNjA+QYq5kfrryQ4wrpxZ3kWJR2ZYQcV0gv7iTHorQrI+S4QnpxJzkWpV0ZIccV0os7P5VjkW+kuAFyFMNJr0aONIHifHIUw0mvRo40geJ8chTDSa9GjjSB4nxypOEU55OjGE56NXKkCRTnk6MYTno1cqQJFOeToxhOerU/AAAA///ss+T/AAAABklEQVQDAO+CADmFyn3mAAAAAElFTkSuQmCC"
color-interpolation-filters="sRGB" class=""></feImage>
<feDisplacementMap in="SourceGraphic" in2="FEIMG" scale="127" yChannelSelector="B" xChannelSelector="R"
color-interpolation-filters="sRGB" class=""></feDisplacementMap>
</filter>
<filter id="fx-noise-2izjfg" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"
class="">
<feImage
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAAAcCAYAAABLRqyKAAAAvUlEQVR4AezSwQkEQQwDweHyD/oi8McsSODa5w5Gtrp/z6eBoQFyDMX4/R45WDA2QI6xGg/k4MDYADnGajyQgwNjA+QYq5kfrryQ4wrpxZ3kWJR2ZYQcV0gv7iTHorQrI+S4QnpxJzkWpV0ZIccV0os7P5VjkW+kuAFyFMNJr0aONIHifHIUw0mvRo40geJ8chTDSa9GjjSB4nxypOEU55OjGE56NXKkCRTnk6MYTno1cqQJFOeToxhOerU/AAAA///ss+T/AAAABklEQVQDAO+CADmFyn3mAAAAAElFTkSuQmCC"
result="noiseAdd" image-rendering="pixelated" class=""></feImage>
<feBlend in="SourceGraphic" in2="noiseAdd" mode="overlay" image-rendering="pixelated" result="brightened"
class=""></feBlend>
</filter>
</svg>
<div class="fx-container"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px) url(#fx-liquid-glass-h22ytv) saturate(1.25) url(#fx-noise-2izjfg); background: transparent; pointer-events: none; z-index: -1; overflow: hidden; border-radius: inherit;">
</div>
</div>
<div
class="border-gradient before:rounded-2xl inline-flex hover:bg-white/[0.07] transition-colors rounded-2xl pt-1.5 pr-3 pb-1.5 pl-3 gap-2 items-center [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:magic-stick-3-bold-duotone" class="iconify text-base iconify--solar">
<path fill="currentColor"
d="M3.845 3.845a2.883 2.883 0 0 0 0 4.077L5.432 9.51c.012-.014.555.503.568.49l4-4c.013-.013-.504-.556-.49-.568L7.922 3.845a2.883 2.883 0 0 0-4.077 0m1.288 11.462a.483.483 0 0 1 .9 0l.157.4a.48.48 0 0 0 .272.273l.398.157a.486.486 0 0 1 0 .903l-.398.158a.48.48 0 0 0-.272.273l-.157.4a.483.483 0 0 1-.9 0l-.157-.4a.48.48 0 0 0-.272-.273l-.398-.158a.486.486 0 0 1 0-.903l.398-.157a.48.48 0 0 0 .272-.274z"
opacity=".5" class=""></path>
<path fill="currentColor"
d="M19.967 9.13a.483.483 0 0 1 .9 0l.156.399c.05.125.148.224.273.273l.398.158a.486.486 0 0 1 0 .902l-.398.158a.5.5 0 0 0-.273.273l-.156.4a.483.483 0 0 1-.9 0l-.157-.4a.5.5 0 0 0-.272-.273l-.398-.158a.486.486 0 0 1 0-.902l.398-.158a.5.5 0 0 0 .272-.273z"
opacity=".2" class=""></path>
<path fill="currentColor"
d="M16.1 2.307a.483.483 0 0 1 .9 0l.43 1.095a.48.48 0 0 0 .272.274l1.091.432a.486.486 0 0 1 0 .903l-1.09.432a.5.5 0 0 0-.273.273L17 6.81a.483.483 0 0 1-.9 0l-.43-1.095a.5.5 0 0 0-.273-.273l-1.09-.432a.486.486 0 0 1 0-.903l1.09-.432a.5.5 0 0 0 .273-.274z"
opacity=".7" class=""></path>
<path fill="currentColor"
d="M10.568 6.49c-.012.014-.555-.503-.568-.49l-4 4c-.013.013.504.556.49.568l9.588 9.587a2.883 2.883 0 1 0 4.078-4.077z"
class=""></path>
</svg>
<span class="text-xs text-white/70">Hover trails</span>
<svg class="fx-svg-defs" data-fx-svg="true" style="position: absolute; width: 0; height: 0;">
<filter id="fx-liquid-glass-asb7zz" x="0" y="0" width="100%" height="100%"
color-interpolation-filters="sRGB" class="">
<feImage result="FEIMG"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAAAcCAYAAABWFFBUAAAAeklEQVR4AezTAREAMAyDwN78i56OfokDwvGmrX8giesVziQxicADAEIlJhF4AECoxCQCDwAIlWhKBKiOIVQiIDyJSQQeABAqMYnAAwBCJSYReABAqMQzEgFQGaESAbtJTCLwAIBQiUkEHgAQKjGJwAMAQiVelgiwMwgfAAD//6ZDwqAAAAAGSURBVAMAzrMAObjtOhoAAAAASUVORK5CYII="
color-interpolation-filters="sRGB" class=""></feImage>
<feDisplacementMap in="SourceGraphic" in2="FEIMG" scale="127" yChannelSelector="B" xChannelSelector="R"
color-interpolation-filters="sRGB" class=""></feDisplacementMap>
</filter>
<filter id="fx-noise-joqb8e" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"
class="">
<feImage
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAAAcCAYAAABWFFBUAAAAeklEQVR4AezTAREAMAyDwN78i56OfokDwvGmrX8giesVziQxicADAEIlJhF4AECoxCQCDwAIlWhKBKiOIVQiIDyJSQQeABAqMYnAAwBCJSYReABAqMQzEgFQGaESAbtJTCLwAIBQiUkEHgAQKjGJwAMAQiVelgiwMwgfAAD//6ZDwqAAAAAGSURBVAMAzrMAObjtOhoAAAAASUVORK5CYII="
result="noiseAdd" image-rendering="pixelated" class=""></feImage>
<feBlend in="SourceGraphic" in2="noiseAdd" mode="overlay" image-rendering="pixelated" result="brightened"
class=""></feBlend>
</filter>
</svg>
<div class="fx-container"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px) url(#fx-liquid-glass-asb7zz) saturate(1.25) url(#fx-noise-joqb8e); background: transparent; pointer-events: none; z-index: -1; overflow: hidden; border-radius: inherit;">
</div>
</div>
</div>
<!-- CTAs -->
<div class="flex flex-col sm:flex-row gap-3 mt-8">
<button class="border-gradient before:rounded-2xl group inline-flex items-center justify-center gap-2 rounded-2xl bg-zinc-100 text-zinc-900 hover:bg-white px-4 sm:px-5 py-3 text-sm font-medium tracking-tight transition-all hover:-translate-y-0.5">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:play-bold-duotone" class="iconify text-base iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M23 12c0-1.035-.53-2.07-1.591-2.647L8.597 2.385C6.534 1.264 4 2.724 4 5.033V12z" clip-rule="evenodd" class=""></path><path fill="currentColor" d="m8.597 21.615l12.812-6.968A2.99 2.99 0 0 0 23 12H4v6.967c0 2.31 2.534 3.769 4.597 2.648" opacity=".5" class=""></path></svg>
<span>See live demo</span>
</button>
<button class="border-gradient before:rounded-2xl group inline-flex hover:bg-white/10 transition-all hover:-translate-y-0.5 text-sm text-white tracking-tight rounded-2xl pt-3 pr-4 pb-3 pl-4 [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)] gap-2 items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-bold-duotone" class="iconify text-base iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M3.25 12a.75.75 0 0 1 .75-.75h9.25v1.5H4a.75.75 0 0 1-.75-.75" clip-rule="evenodd" opacity=".5" class=""></path><path fill="currentColor" d="M13.25 12.75V18a.75.75 0 0 0 1.28.53l6-6a.75.75 0 0 0 0-1.06l-6-6a.75.75 0 0 0-1.28.53z" class=""></path></svg>
<span>Get started</span>
<svg class="fx-svg-defs" data-fx-svg="true" style="position: absolute; width: 0; height: 0;">
<filter id="fx-liquid-glass-syn2l6" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB" class="">
<feImage result="FEIMG" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH0AAAAsCAYAAABIUrd3AAAA90lEQVR4AezTsQ3EQAwDQeP7L/oDlXAiIGLXwWUWRA70+/xwDYiOI/8+0UUHNgCM7KWLDmwAGNlLFx3YADBy6tKBVfZEFr3Ham1T0deq7Bkkeo/V2qair1XZM0j0Hqu1TUVfq7JnkOg9VmubtqGvBScPEh2oL7rowAaAkb100YENACN76aIDGwBG9tIHHfWKjuKesKJPD6hXdBT3hBV9ekC9oqO4J6zo0wPqFR3FPWFFnx5S78m5op9kyS4lerbfk9NFP8mSXUr0bL8np4t+kiW7lOjZfk9OF/0kS3Yp0bP9pqY/zRX9qb7On0XvdHvaWvSn+jp//gMAAP//02AFRgAAAAZJREFUAwB56QBZFNGGBwAAAABJRU5ErkJggg==" color-interpolation-filters="sRGB" class=""></feImage>
<feDisplacementMap in="SourceGraphic" in2="FEIMG" scale="127" yChannelSelector="B" xChannelSelector="R" color-interpolation-filters="sRGB" class=""></feDisplacementMap>
</filter><filter id="fx-noise-0csgnm" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB" class="">
<feImage href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH0AAAAsCAYAAABIUrd3AAAA90lEQVR4AezTsQ3EQAwDQeP7L/oDlXAiIGLXwWUWRA70+/xwDYiOI/8+0UUHNgCM7KWLDmwAGNlLFx3YADBy6tKBVfZEFr3Ham1T0deq7Bkkeo/V2qair1XZM0j0Hqu1TUVfq7JnkOg9VmubtqGvBScPEh2oL7rowAaAkb100YENACN76aIDGwBG9tIHHfWKjuKesKJPD6hXdBT3hBV9ekC9oqO4J6zo0wPqFR3FPWFFnx5S78m5op9kyS4lerbfk9NFP8mSXUr0bL8np4t+kiW7lOjZfk9OF/0kS3Yp0bP9pqY/zRX9qb7On0XvdHvaWvSn+jp//gMAAP//02AFRgAAAAZJREFUAwB56QBZFNGGBwAAAABJRU5ErkJggg==" result="noiseAdd" image-rendering="pixelated" class=""></feImage>
<feBlend in="SourceGraphic" in2="noiseAdd" mode="overlay" image-rendering="pixelated" result="brightened" class=""></feBlend>
</filter>
</svg>
<div class="fx-container" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px) url(#fx-liquid-glass-syn2l6) saturate(1.25) url(#fx-noise-0csgnm); background: transparent; pointer-events: none; z-index: -1; overflow: hidden; border-radius: inherit;"></div>
</button>
</div>
<!-- Divider -->
<div class="mt-10 h-px w-full bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
<!-- Mini metrics -->
<div class="mt-6 grid grid-cols-3 gap-4 max-w-md">
<div
class="border-gradient before:rounded-3xl overflow-hidden aspect-[16/12] [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0.05)] rounded-3xl pt-4 pr-4 pb-4 pl-4 relative">
<div class="text-xs text-white/60">Latency</div>
<div class="mt-1 text-lg font-medium tracking-tight text-white">~12ms</div>
<svg class="fx-svg-defs" data-fx-svg="true" style="position: absolute; width: 0; height: 0;">
<filter id="fx-liquid-glass-12oalj" x="0" y="0" width="100%" height="100%"
color-interpolation-filters="sRGB" class="">
<feImage result="FEIMG"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIsAAABoCAYAAADByQPTAAACl0lEQVR4AezSMZLkMAwEwY37/6PPkbPOigpQAgHkODIGJBvV9e/HD4FFAmRZBGXs54csLFgmQJZlVAbJwoFlAmRZRmWQLBxYJtBCluVtDYYIkCWEb9ZhsszqO7QtWUL4Zh0my6y+Q9uSJYRv1mGyzOo7tC1ZQvg2Hi5wFVkKlHRKRLKc0kSBHGQpUNIpEclyShMFcpClQEmnRCTLKU0UyEGWAiWdEvFellOSypFOgCzpFdQJQJY6XaUnJUt6BXUCkKVOV+lJyZJeQZ0AZKnTVXrSIbKkc24RgCwtavxmCbJ8w7nFK2RpUeM3S5DlG84tXiFLixq/WYIs33Bu8QpZ6tSYnpQs6RXUCUCWOl2lJyVLegV1ApClTlfpScmSXkGdAGSp01V6UrKkV1AnwA5Z6mwraYgAWUL4Zh0my6y+Q9uSJYRv1mGyzOo7tC1ZQvhmHSbLrL5D25LlwudzT4As94xMXATIcoHwuSdAlntGJi4CZLlA+NwTIMs9IxMXAbJcIHzuCZDlnlGdiZeTkuVlwJ2uJ0unNl/ehSwvA+50PVk6tfnyLmR5GXCn68nSqc2XdyHLy4A7Xf+NLJ2IDd6FLIPLf7o6WZ4SGzxPlsHlP12dLE+JDZ4ny+Dyn65OlqfEBs+TZbl8g2ThwDIBsiyjMkgWDiwTIMsyKoNk4cAyAbIsozJIllkOhLYlSwjfrMNkmdV3aFuyhPDNOkyWWX2HtiVLCN+sw2SZ1XdoW7KE8M06fIoss6gX3ZYsRYvLiE2WDOpF3yRL0eIyYpMlg3rRN8lStLiM2GTJoF70TbJsLK77VWTp3vDG/ciyEWb3q8jSveGN+5FlI8zuV5Gle8Mb9yPLRpjdryJL94af7vfHPFn+gOOv3wT+AwAA//+03GrwAAAABklEQVQDALdDANG1z8yWAAAAAElFTkSuQmCC"
color-interpolation-filters="sRGB" class=""></feImage>
<feDisplacementMap in="SourceGraphic" in2="FEIMG" scale="127" yChannelSelector="B" xChannelSelector="R"
color-interpolation-filters="sRGB" class=""></feDisplacementMap>
</filter>
<filter id="fx-noise-wmopee" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"
class="">
<feImage
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIsAAABoCAYAAADByQPTAAACl0lEQVR4AezSMZLkMAwEwY37/6PPkbPOigpQAgHkODIGJBvV9e/HD4FFAmRZBGXs54csLFgmQJZlVAbJwoFlAmRZRmWQLBxYJtBCluVtDYYIkCWEb9ZhsszqO7QtWUL4Zh0my6y+Q9uSJYRv1mGyzOo7tC1ZQvg2Hi5wFVkKlHRKRLKc0kSBHGQpUNIpEclyShMFcpClQEmnRCTLKU0UyEGWAiWdEvFellOSypFOgCzpFdQJQJY6XaUnJUt6BXUCkKVOV+lJyZJeQZ0AZKnTVXrSIbKkc24RgCwtavxmCbJ8w7nFK2RpUeM3S5DlG84tXiFLixq/WYIs33Bu8QpZ6tSYnpQs6RXUCUCWOl2lJyVLegV1ApClTlfpScmSXkGdAGSp01V6UrKkV1AnwA5Z6mwraYgAWUL4Zh0my6y+Q9uSJYRv1mGyzOo7tC1ZQvhmHSbLrL5D25LlwudzT4As94xMXATIcoHwuSdAlntGJi4CZLlA+NwTIMs9IxMXAbJcIHzuCZDlnlGdiZeTkuVlwJ2uJ0unNl/ehSwvA+50PVk6tfnyLmR5GXCn68nSqc2XdyHLy4A7Xf+NLJ2IDd6FLIPLf7o6WZ4SGzxPlsHlP12dLE+JDZ4ny+Dyn65OlqfEBs+TZbl8g2ThwDIBsiyjMkgWDiwTIMsyKoNk4cAyAbIsozJIllkOhLYlSwjfrMNkmdV3aFuyhPDNOkyWWX2HtiVLCN+sw2SZ1XdoW7KE8M06fIoss6gX3ZYsRYvLiE2WDOpF3yRL0eIyYpMlg3rRN8lStLiM2GTJoF70TbJsLK77VWTp3vDG/ciyEWb3q8jSveGN+5FlI8zuV5Gle8Mb9yPLRpjdryJL94af7vfHPFn+gOOv3wT+AwAA//+03GrwAAAABklEQVQDALdDANG1z8yWAAAAAElFTkSuQmCC"
result="noiseAdd" image-rendering="pixelated" class=""></feImage>
<feBlend in="SourceGraphic" in2="noiseAdd" mode="overlay" image-rendering="pixelated" result="brightened"
class=""></feBlend>
</filter>
</svg>
<div class="fx-container"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px) url(#fx-liquid-glass-12oalj) saturate(1.25) url(#fx-noise-wmopee); background: transparent; pointer-events: none; z-index: -1; overflow: hidden; border-radius: inherit;">
</div>
</div>
<div
class="border-gradient before:rounded-3xl overflow-hidden aspect-[16/12] [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0.05)] rounded-3xl pt-4 pr-4 pb-4 pl-4 relative">
<div class="text-xs text-white/60">Icons</div>
<div class="mt-1 text-lg font-medium tracking-tight text-white">700+</div>
<svg class="fx-svg-defs" data-fx-svg="true" style="position: absolute; width: 0; height: 0;">
<filter id="fx-liquid-glass-yq8tpc" x="0" y="0" width="100%" height="100%"
color-interpolation-filters="sRGB" class="">
<feImage result="FEIMG"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIsAAABoCAYAAADByQPTAAACl0lEQVR4AezSMZLkMAwEwY37/6PPkbPOigpQAgHkODIGJBvV9e/HD4FFAmRZBGXs54csLFgmQJZlVAbJwoFlAmRZRmWQLBxYJtBCluVtDYYIkCWEb9ZhsszqO7QtWUL4Zh0my6y+Q9uSJYRv1mGyzOo7tC1ZQvg2Hi5wFVkKlHRKRLKc0kSBHGQpUNIpEclyShMFcpClQEmnRCTLKU0UyEGWAiWdEvFellOSypFOgCzpFdQJQJY6XaUnJUt6BXUCkKVOV+lJyZJeQZ0AZKnTVXrSIbKkc24RgCwtavxmCbJ8w7nFK2RpUeM3S5DlG84tXiFLixq/WYIs33Bu8QpZ6tSYnpQs6RXUCUCWOl2lJyVLegV1ApClTlfpScmSXkGdAGSp01V6UrKkV1AnwA5Z6mwraYgAWUL4Zh0my6y+Q9uSJYRv1mGyzOo7tC1ZQvhmHSbLrL5D25LlwudzT4As94xMXATIcoHwuSdAlntGJi4CZLlA+NwTIMs9IxMXAbJcIHzuCZDlnlGdiZeTkuVlwJ2uJ0unNl/ehSwvA+50PVk6tfnyLmR5GXCn68nSqc2XdyHLy4A7Xf+NLJ2IDd6FLIPLf7o6WZ4SGzxPlsHlP12dLE+JDZ4ny+Dyn65OlqfEBs+TZbl8g2ThwDIBsiyjMkgWDiwTIMsyKoNk4cAyAbIsozJIllkOhLYlSwjfrMNkmdV3aFuyhPDNOkyWWX2HtiVLCN+sw2SZ1XdoW7KE8M06fIoss6gX3ZYsRYvLiE2WDOpF3yRL0eIyYpMlg3rRN8lStLiM2GTJoF70TbJsLK77VWTp3vDG/ciyEWb3q8jSveGN+5FlI8zuV5Gle8Mb9yPLRpjdryJL94af7vfHPFn+gOOv3wT+AwAA//+03GrwAAAABklEQVQDALdDANG1z8yWAAAAAElFTkSuQmCC"
color-interpolation-filters="sRGB" class=""></feImage>
<feDisplacementMap in="SourceGraphic" in2="FEIMG" scale="127" yChannelSelector="B" xChannelSelector="R"
color-interpolation-filters="sRGB" class=""></feDisplacementMap>
</filter>
<filter id="fx-noise-hksnjd" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"
class="">
<feImage
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIsAAABoCAYAAADByQPTAAACl0lEQVR4AezSMZLkMAwEwY37/6PPkbPOigpQAgHkODIGJBvV9e/HD4FFAmRZBGXs54csLFgmQJZlVAbJwoFlAmRZRmWQLBxYJtBCluVtDYYIkCWEb9ZhsszqO7QtWUL4Zh0my6y+Q9uSJYRv1mGyzOo7tC1ZQvg2Hi5wFVkKlHRKRLKc0kSBHGQpUNIpEclyShMFcpClQEmnRCTLKU0UyEGWAiWdEvFellOSypFOgCzpFdQJQJY6XaUnJUt6BXUCkKVOV+lJyZJeQZ0AZKnTVXrSIbKkc24RgCwtavxmCbJ8w7nFK2RpUeM3S5DlG84tXiFLixq/WYIs33Bu8QpZ6tSYnpQs6RXUCUCWOl2lJyVLegV1ApClTlfpScmSXkGdAGSp01V6UrKkV1AnwA5Z6mwraYgAWUL4Zh0my6y+Q9uSJYRv1mGyzOo7tC1ZQvhmHSbLrL5D25LlwudzT4As94xMXATIcoHwuSdAlntGJi4CZLlA+NwTIMs9IxMXAbJcIHzuCZDlnlGdiZeTkuVlwJ2uJ0unNl/ehSwvA+50PVk6tfnyLmR5GXCn68nSqc2XdyHLy4A7Xf+NLJ2IDd6FLIPLf7o6WZ4SGzxPlsHlP12dLE+JDZ4ny+Dyn65OlqfEBs+TZbl8g2ThwDIBsiyjMkgWDiwTIMsyKoNk4cAyAbIsozJIllkOhLYlSwjfrMNkmdV3aFuyhPDNOkyWWX2HtiVLCN+sw2SZ1XdoW7KE8M06fIoss6gX3ZYsRYvLiE2WDOpF3yRL0eIyYpMlg3rRN8lStLiM2GTJoF70TbJsLK77VWTp3vDG/ciyEWb3q8jSveGN+5FlI8zuV5Gle8Mb9yPLRpjdryJL94af7vfHPFn+gOOv3wT+AwAA//+03GrwAAAABklEQVQDALdDANG1z8yWAAAAAElFTkSuQmCC"
result="noiseAdd" image-rendering="pixelated" class=""></feImage>
<feBlend in="SourceGraphic" in2="noiseAdd" mode="overlay" image-rendering="pixelated" result="brightened"
class=""></feBlend>
</filter>
</svg>
<div class="fx-container"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px) url(#fx-liquid-glass-yq8tpc) saturate(1.25) url(#fx-noise-hksnjd); background: transparent; pointer-events: none; z-index: -1; overflow: hidden; border-radius: inherit;">
</div>
</div>
<div
class="border-gradient before:rounded-3xl overflow-hidden aspect-[16/12] [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0.05)] rounded-3xl pt-4 pr-4 pb-4 pl-4 relative">
<div class="text-xs text-white/60">FPS</div>
<div class="mt-1 text-lg font-medium tracking-tight text-white">60</div>
<svg class="fx-svg-defs" data-fx-svg="true" style="position: absolute; width: 0; height: 0;">
<filter id="fx-liquid-glass-u6c0nl" x="0" y="0" width="100%" height="100%"
color-interpolation-filters="sRGB" class="">
<feImage result="FEIMG"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIsAAABoCAYAAADByQPTAAACl0lEQVR4AezSMZLkMAwEwY37/6PPkbPOigpQAgHkODIGJBvV9e/HD4FFAmRZBGXs54csLFgmQJZlVAbJwoFlAmRZRmWQLBxYJtBCluVtDYYIkCWEb9ZhsszqO7QtWUL4Zh0my6y+Q9uSJYRv1mGyzOo7tC1ZQvg2Hi5wFVkKlHRKRLKc0kSBHGQpUNIpEclyShMFcpClQEmnRCTLKU0UyEGWAiWdEvFellOSypFOgCzpFdQJQJY6XaUnJUt6BXUCkKVOV+lJyZJeQZ0AZKnTVXrSIbKkc24RgCwtavxmCbJ8w7nFK2RpUeM3S5DlG84tXiFLixq/WYIs33Bu8QpZ6tSYnpQs6RXUCUCWOl2lJyVLegV1ApClTlfpScmSXkGdAGSp01V6UrKkV1AnwA5Z6mwraYgAWUL4Zh0my6y+Q9uSJYRv1mGyzOo7tC1ZQvhmHSbLrL5D25LlwudzT4As94xMXATIcoHwuSdAlntGJi4CZLlA+NwTIMs9IxMXAbJcIHzuCZDlnlGdiZeTkuVlwJ2uJ0unNl/ehSwvA+50PVk6tfnyLmR5GXCn68nSqc2XdyHLy4A7Xf+NLJ2IDd6FLIPLf7o6WZ4SGzxPlsHlP12dLE+JDZ4ny+Dyn65OlqfEBs+TZbl8g2ThwDIBsiyjMkgWDiwTIMsyKoNk4cAyAbIsozJIllkOhLYlSwjfrMNkmdV3aFuyhPDNOkyWWX2HtiVLCN+sw2SZ1XdoW7KE8M06fIoss6gX3ZYsRYvLiE2WDOpF3yRL0eIyYpMlg3rRN8lStLiM2GTJoF70TbJsLK77VWTp3vDG/ciyEWb3q8jSveGN+5FlI8zuV5Gle8Mb9yPLRpjdryJL94af7vfHPFn+gOOv3wT+AwAA//+03GrwAAAABklEQVQDALdDANG1z8yWAAAAAElFTkSuQmCC"
color-interpolation-filters="sRGB" class=""></feImage>
<feDisplacementMap in="SourceGraphic" in2="FEIMG" scale="127" yChannelSelector="B" xChannelSelector="R"
color-interpolation-filters="sRGB" class=""></feDisplacementMap>
</filter>
<filter id="fx-noise-qcq0uy" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"
class="">
<feImage
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIsAAABoCAYAAADByQPTAAACl0lEQVR4AezSMZLkMAwEwY37/6PPkbPOigpQAgHkODIGJBvV9e/HD4FFAmRZBGXs54csLFgmQJZlVAbJwoFlAmRZRmWQLBxYJtBCluVtDYYIkCWEb9ZhsszqO7QtWUL4Zh0my6y+Q9uSJYRv1mGyzOo7tC1ZQvg2Hi5wFVkKlHRKRLKc0kSBHGQpUNIpEclyShMFcpClQEmnRCTLKU0UyEGWAiWdEvFellOSypFOgCzpFdQJQJY6XaUnJUt6BXUCkKVOV+lJyZJeQZ0AZKnTVXrSIbKkc24RgCwtavxmCbJ8w7nFK2RpUeM3S5DlG84tXiFLixq/WYIs33Bu8QpZ6tSYnpQs6RXUCUCWOl2lJyVLegV1ApClTlfpScmSXkGdAGSp01V6UrKkV1AnwA5Z6mwraYgAWUL4Zh0my6y+Q9uSJYRv1mGyzOo7tC1ZQvhmHSbLrL5D25LlwudzT4As94xMXATIcoHwuSdAlntGJi4CZLlA+NwTIMs9IxMXAbJcIHzuCZDlnlGdiZeTkuVlwJ2uJ0unNl/ehSwvA+50PVk6tfnyLmR5GXCn68nSqc2XdyHLy4A7Xf+NLJ2IDd6FLIPLf7o6WZ4SGzxPlsHlP12dLE+JDZ4ny+Dyn65OlqfEBs+TZbl8g2ThwDIBsiyjMkgWDiwTIMsyKoNk4cAyAbIsozJIllkOhLYlSwjfrMNkmdV3aFuyhPDNOkyWWX2HtiVLCN+sw2SZ1XdoW7KE8M06fIoss6gX3ZYsRYvLiE2WDOpF3yRL0eIyYpMlg3rRN8lStLiM2GTJoF70TbJsLK77VWTp3vDG/ciyEWb3q8jSveGN+5FlI8zuV5Gle8Mb9yPLRpjdryJL94af7vfHPFn+gOOv3wT+AwAA//+03GrwAAAABklEQVQDALdDANG1z8yWAAAAAElFTkSuQmCC"
result="noiseAdd" image-rendering="pixelated" class=""></feImage>
<feBlend in="SourceGraphic" in2="noiseAdd" mode="overlay" image-rendering="pixelated" result="brightened"
class=""></feBlend>
</filter>
</svg>
<div class="fx-container"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px) url(#fx-liquid-glass-u6c0nl) saturate(1.25) url(#fx-noise-qcq0uy); background: transparent; pointer-events: none; z-index: -1; overflow: hidden; border-radius: inherit;">
</div>
</div>
</div>
</div>
<!-- Right: Interactive grid + floating glass cards -->
<div class="lg:col-span-7">
<div
class="border-gradient before:rounded-3xl overflow-hidden aspect-[16/12] rounded-3xl pt-4 pr-4 pb-4 pl-4 relative [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0.05)]">
<!-- Stacked testimonial cards -->
<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
<div class="relative w-full max-w-[280px] sm:max-w-[300px] h-[320px]" id="testimonials-stack">
<!-- Card 1 -->
<div class="testimonial-card pointer-events-auto active" data-index="0">
<div
class="border-gradient before:rounded-2xl transition-transform duration-300 hover:-translate-y-1 hover:scale-[1.02] rounded-2xl shadow-2xl [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)]">
<div class="pt-4 pr-4 pb-4 pl-4">
<div
class="inline-flex w-9 h-9 rounded-xl items-center justify-center [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:chat-round-bold-duotone"
class="iconify text-base iconify--solar">
<path fill="currentColor"
d="M7.456 3.09A10 10 0 0 0 2 12c0 1.6.376 3.112 1.043 4.453c.178.356.237.764.134 1.148l-.595 2.226a1.3 1.3 0 0 0 1.591 1.592l2.226-.596a1.63 1.63 0 0 1 1.149.134A9.96 9.96 0 0 0 12 22c4.885 0 8.952-3.503 9.826-8.134A9 9 0 0 1 7.456 3.09"
class=""></path>
<path fill="currentColor"
d="M21.826 13.866q.172-.909.174-1.866c0-5.523-4.477-10-10-10a9.96 9.96 0 0 0-4.544 1.09a9 9 0 0 0 14.37 10.776"
opacity=".5" class=""></path>
</svg>
</div>
<p class="mt-3 text-xs text-white/70 leading-relaxed">
"The hover grid adds a tactile feel without overwhelming the layout."
</p>
<div class="mt-4 flex items-center gap-2 pt-3 border-t border-white/10">
<img class="h-8 w-8 rounded-xl ring-2 ring-white/10 object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=320" alt="Portrait">
<div>
<div class="text-[11px] font-medium text-white tracking-tight">Avery Lin</div>
<div class="text-[11px] text-white/60">Design Lead</div>
</div>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="testimonial-card pointer-events-auto next-1" data-index="1">
<div
class="border-gradient before:rounded-2xl transition-transform duration-300 hover:-translate-y-1 hover:scale-[1.02] rounded-2xl shadow-2xl [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)]">
<div class="pt-4 pr-4 pb-4 pl-4">
<div
class="inline-flex w-9 h-9 rounded-xl items-center justify-center [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:document-text-bold-duotone"
class="iconify text-base iconify--solar">
<path fill="currentColor"
d="M3 10c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h2c3.771 0 5.657 0 6.828 1.172S21 6.229 21 10v4c0 3.771 0 5.657-1.172 6.828S16.771 22 13 22h-2c-3.771 0-5.657 0-6.828-1.172S3 17.771 3 14z"
opacity=".5" class=""></path>
<path fill="currentColor" fill-rule="evenodd"
d="M7.25 12a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75m0-4A.75.75 0 0 1 8 7.25h8a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 8m0 8a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75"
clip-rule="evenodd" class=""></path>
</svg>
</div>
<p class="leading-relaxed text-xs text-white/70 mt-3">
"Glass panels feel premium, and remain readable above the motion."
</p>
<div class="mt-4 flex items-center gap-2 pt-3 border-t border-white/10">
<img class="h-8 w-8 rounded-xl ring-2 ring-white/10 object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=320" alt="Portrait">
<div>
<div class="text-[11px] font-medium text-white tracking-tight">Jon Vega</div>
<div class="text-[11px] text-white/60">PM, Core</div>
</div>
</div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="testimonial-card pointer-events-auto next-2" data-index="2">
<div
class="border-gradient before:rounded-2xl transition-transform duration-300 hover:-translate-y-1 hover:scale-[1.02] rounded-2xl shadow-2xl [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)]">
<div class="pt-4 pr-4 pb-4 pl-4">
<div
class="inline-flex w-9 h-9 rounded-xl items-center justify-center [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:star-bold-duotone" class="iconify text-base iconify--solar">
<path fill="currentColor"
d="M18.483 16.767A8.5 8.5 0 0 1 8.118 7.081a1 1 0 0 1-.113.097c-.28.213-.63.292-1.33.45l-.635.144c-2.46.557-3.69.835-3.983 1.776c-.292.94.546 1.921 2.223 3.882l.434.507c.476.557.715.836.822 1.18c.107.345.071.717-.001 1.46l-.066.677c-.253 2.617-.38 3.925.386 4.506s1.918.052 4.22-1.009l.597-.274c.654-.302.981-.452 1.328-.452s.674.15 1.329.452l.595.274c2.303 1.06 3.455 1.59 4.22 1.01c.767-.582.64-1.89.387-4.507z"
class=""></path>
<path fill="currentColor"
d="m9.153 5.408l-.328.588c-.36.646-.54.969-.82 1.182q.06-.045.113-.097a8.5 8.5 0 0 0 10.366 9.686l-.02-.19c-.071-.743-.107-1.115 0-1.46c.107-.344.345-.623.822-1.18l.434-.507c1.677-1.96 2.515-2.941 2.222-3.882c-.292-.941-1.522-1.22-3.982-1.776l-.636-.144c-.699-.158-1.049-.237-1.33-.45c-.28-.213-.46-.536-.82-1.182l-.327-.588C13.58 3.136 12.947 2 12 2s-1.58 1.136-2.847 3.408"
opacity=".5" class=""></path>
</svg>
</div>
<p class="leading-relaxed text-xs text-white/70 mt-3">
"Smooth animation timing creates a natural, delightful experience."
</p>
<div class="mt-4 flex items-center gap-2 pt-3 border-t border-white/10">
<img class="h-8 w-8 rounded-xl ring-2 ring-white/10 object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=320" alt="Portrait">
<div>
<div class="text-[11px] font-medium text-white tracking-tight">Maya Chen</div>
<div class="text-[11px] text-white/60">Creative Director</div>
</div>
</div>
</div>
</div>
</div>
<!-- Card 4 -->
<div class="testimonial-card pointer-events-auto hidden" data-index="3">
<div
class="border-gradient before:rounded-2xl transition-transform duration-300 hover:-translate-y-1 hover:scale-[1.02] rounded-2xl shadow-2xl [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)]">
<div class="pt-4 pr-4 pb-4 pl-4">
<div
class="inline-flex w-9 h-9 rounded-xl items-center justify-center [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:heart-bold-duotone" class="iconify text-base iconify--solar">
<path fill="currentColor" fill-rule="evenodd"
d="M8.106 18.247C5.298 16.083 2 13.542 2 9.137C2 4.274 7.5.825 12 5.501V20.5c-1 0-2-.77-3.038-1.59q-.417-.326-.856-.663"
clip-rule="evenodd" opacity=".5" class=""></path>
<path fill="currentColor"
d="M15.038 18.91C17.981 16.592 22 14 22 9.138S16.5.825 12 5.501V20.5c1 0 2-.77 3.038-1.59"
class=""></path>
</svg>
</div>
<p class="leading-relaxed text-xs text-white/70 mt-3">
"The perfect balance between visual impact and performance."
</p>
<div class="mt-4 flex items-center gap-2 pt-3 border-t border-white/10">
<img class="h-8 w-8 rounded-xl ring-2 ring-white/10 object-cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=320" alt="Portrait">
<div>
<div class="text-[11px] font-medium text-white tracking-tight">Liam Foster</div>
<div class="text-[11px] text-white/60">Frontend Eng</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation dots -->
<div class="pointer-events-auto absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2 z-10" id="progress-dots">
<div class="w-2 h-2 rounded-full transition-all duration-300 active-dot bg-white" style="width: 24px;"></div>
<div class="w-2 h-2 rounded-full transition-all duration-300 bg-white/30" style="width: 8px;"></div>
<div class="w-2 h-2 rounded-full transition-all duration-300 bg-white/30" style="width: 8px;"></div>
<div class="w-2 h-2 rounded-full transition-all duration-300 bg-white/30" style="width: 8px;"></div>
</div>
<!-- Vignette -->
<div class="pointer-events-none absolute inset-0 rounded-3xl"
style="background: radial-gradient(600px 280px at 60% 40%, rgba(255,255,255,0.07), transparent 60%)"></div>
<svg class="fx-svg-defs" data-fx-svg="true" style="position: absolute; width: 0; height: 0;">
<filter id="fx-liquid-glass-2fetco" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"
class="">
<feImage result="FEIMG"
href="data:image/png;base64,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"
color-interpolation-filters="sRGB" class=""></feImage>
<feDisplacementMap in="SourceGraphic" in2="FEIMG" scale="127" yChannelSelector="B" xChannelSelector="R"
color-interpolation-filters="sRGB" class=""></feDisplacementMap>
</filter>
<filter id="fx-noise-uvz2nq" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"
class="">
<feImage
href="data:image/png;base64,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"
result="noiseAdd" image-rendering="pixelated" class=""></feImage>
<feBlend in="SourceGraphic" in2="noiseAdd" mode="overlay" image-rendering="pixelated" result="brightened"
class=""></feBlend>
</filter>
</svg>
<div class="fx-container"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px) url(#fx-liquid-glass-2fetco) saturate(1.25) url(#fx-noise-uvz2nq); background: transparent; pointer-events: none; z-index: -1; overflow: hidden; border-radius: inherit;">
</div>
</div>
</div>
</section>
</header>