Загрузка...
Hero-секция для 3D-дизайна с интерактивным превью. Современный SaaS-дизайн, адаптивный, с анимацией. Идеально для лендингов.
<div
class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-24 z-10 w-full max-w-[90rem] mr-auto ml-auto relative gap-x-12 gap-y-12 items-center m-8 my-24">
<div class="lg:col-span-6 flex flex-col gap-x-8 gap-y-8">
<div
class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/10 bg-white/5 w-fit animate-on-scroll visible">
<span class="w-1.5 h-1.5 rounded-full bg-orange-500 animate-pulse"></span>
<span class="text-[10px] uppercase text-orange-200 tracking-widest font-mono">
Flux 2.0 is live
</span>
</div>
<h1
class="md:text-7xl lg:text-8xl leading-[0.95] animate-on-scroll text-5xl font-medium text-white tracking-tighter font-display visible"
style="animation-delay: 100ms">
Design in
<span class="bg-clip-text text-transparent bg-gradient-to-l from-[#fd953f] to-orange-600 pr-2 pl-2">
3D
</span>
.
<br>
Ship to web.
</h1>
<p class="text-lg text-neutral-400 font-light max-w-md leading-relaxed animate-on-scroll visible"
style="animation-delay: 200ms;">
A collaborative design tool for the browser. Create organic shapes,
interactive scenes, and export production-ready React components in
seconds.
</p>
<div class="flex flex-wrap animate-on-scroll gap-x-4 gap-y-4 items-center visible" style="animation-delay: 300ms">
<button class="group flex overflow-hidden uppercase transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_0_40px_-10px_rgba(234,88,12,0.5)] focus:outline-none text-sm font-medium text-white tracking-widest font-geist rounded-full pt-5 pr-12 pb-5 pl-12 relative items-center justify-center">
<style>
@keyframes beam-spin { to { transform: rotate(360deg); } }
@keyframes dots-move {
0% { background-position: 0 0; }
100% { background-position: 24px 24px; }
}
</style>
<!-- Full Border Beam (Single Beam) -->
<div class="absolute inset-0 -z-20 rounded-full overflow-hidden p-[1px]">
<div class="absolute inset-[-100%] bg-[conic-gradient(from_0deg,transparent_0_300deg,#ea580c_360deg)]" style="animation: beam-spin 3s linear infinite;"></div>
<div class="absolute inset-[1px] rounded-full bg-black"></div>
</div>
<!-- Inner Background & Effects -->
<div class="-z-10 overflow-hidden bg-zinc-950 rounded-full absolute top-[2px] right-[2px] bottom-[2px] left-[2px]">
<!-- Light Monotone Gradient Background -->
<div class="absolute inset-0 bg-gradient-to-b from-zinc-800/60 to-transparent"></div>
<!-- Animated Dots Pattern -->
<div class="opacity-30 mix-blend-overlay absolute top-0 right-0 bottom-0 left-0" style="background-image: radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px); background-size: 12px 12px; animation: dots-move 8s linear infinite"></div>
<!-- Orange Glow on Hover -->
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-2/3 h-1/2 bg-orange-500/10 blur-2xl rounded-full pointer-events-none transition-colors duration-500 group-hover:bg-orange-500/30"></div>
</div>
<!-- Content -->
<span class="relative z-10 text-white/90 transition-colors group-hover:text-white">
Start Building
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right relative z-10 ml-2 transition-transform duration-300 group-hover:translate-x-1">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</button>
<div class="flex bg-white/5 rounded-full pt-3 pr-4 pb-3 pl-4 backdrop-blur-xl gap-x-4 gap-y-4 items-center"
style="position: relative; --border-gradient: linear-gradient(225deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 9999px">
<div class="flex -space-x-2">
<div
class="bg-neutral-700 w-6 h-6 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/90ec73f0-6fd3-4d0c-922c-fcc592c983df_320w.webp)] bg-cover bg-center border-[#050505] border rounded-full">
</div>
<div
class="bg-neutral-600 w-6 h-6 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3e3e1091-f8e8-4022-a02a-fa37a35c59a5_320w.jpg)] bg-cover bg-center border-[#050505] border rounded-full">
</div>
<div
class="bg-neutral-500 w-6 h-6 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c4ee565a-2084-483b-8358-9fc06da5ee99_320w.jpg)] bg-cover bg-center border-[#050505] border rounded-full"
style="transition: outline 0.1s ease-in-out;"></div>
</div>
<span class="text-xs text-neutral-400">
Used by 10k+ designers
</span>
</div>
</div>
<div class="mt-8 font-mono text-xs text-neutral-500 flex items-center gap-2 animate-on-scroll visible"
style="animation-delay: 400ms;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="terminal"
class="lucide lucide-terminal w-3 h-3">
<path d="M12 19h8" class=""></path>
<path d="m4 17 6-6-6-6" class=""></path>
</svg>
<span class="">npm install @flux/react-three-fiber</span>
</div>
</div>
<div class="lg:col-span-6 animate-on-scroll h-[420px] md:h-[520px] lg:h-[620px] relative perspective-[1000px] visible"
style="animation-delay: 500ms">
<div
class="glass-panel overflow-hidden flex flex-col transform transition-transform hover:rotate-0 duration-700 ease-out rounded-xl absolute top-0 right-0 bottom-0 left-0 rotate-x-[5deg] rotate-y-[-5deg]">
<div class="flex bg-white/5 h-10 border-white/5 border-b pr-4 pl-4 backdrop-blur-md gap-x-2 gap-y-2 items-center">
<div class="flex gap-1.5">
<div class="w-2.5 h-2.5 rounded-full bg-red-500/20"></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500/20"></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-500/20"></div>
</div>
<div class="mx-auto font-mono text-[10px] text-neutral-500">
scene.flux — Edited
</div>
</div>
<div class="flex-1 overflow-hidden bg-neutral-950 relative perspective-midrange">
<iframe src="https://my.spline.design/genkubgreetingrobot-ojzcjWInavuKpZSt2luvgvjl/" frameborder="0"
allowfullscreen="" loading="lazy" class="absolute inset-0 w-full h-full border-none"
data-container-bg="true"></iframe>
<div class="absolute top-0 right-0 bottom-0 left-0"
style="background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 50px 50px; transform: perspective(500px) rotateX(60deg) translateY(100px) scale(2); opacity: 0.5">
</div>
<div
class="transform-style-preserve-3d animate-[spin-slow_10s_linear_infinite] w-32 h-32 absolute top-3/4 left-1/2"
style="margin-left: -4rem; margin-top: -4rem">
<div
class="backdrop-blur-[2px] bg-purple-500/10 border-purple-500/40 border absolute top-0 right-0 bottom-0 left-0"
style="transform: translateZ(4rem)"></div>
<div class="absolute inset-0 border border-purple-500/40 bg-purple-500/10 backdrop-blur-[2px]"
style="transform: rotateY(180deg) translateZ(4rem);"></div>
<div class="absolute inset-0 border border-purple-500/40 bg-purple-500/10 backdrop-blur-[2px]"
style="transform: rotateY(90deg) translateZ(4rem);"></div>
<div class="absolute inset-0 border border-purple-500/40 bg-purple-500/10 backdrop-blur-[2px]"
style="transform: rotateY(-90deg) translateZ(4rem);"></div>
<div class="absolute inset-0 border border-purple-500/40 bg-purple-500/10 backdrop-blur-[2px]"
style="transform: rotateX(90deg) translateZ(4rem);"></div>
<div class="absolute inset-0 border border-purple-500/40 bg-purple-500/10 backdrop-blur-[2px]"
style="transform: rotateX(-90deg) translateZ(4rem);"></div>
<div
class="absolute top-1/2 left-1/2 w-16 h-16 -translate-x-1/2 -translate-y-1/2 bg-blue-500/20 rounded-full blur-md animate-pulse transform-style-preserve-3d">
</div>
</div>
<div class="-translate-x-1/2 -translate-y-1/2 pointer-events-none z-20 w-0 h-0 absolute top-3/4 left-1/2">
<div class="absolute bottom-0 left-0 w-px h-20 bg-green-500 origin-bottom"></div>
<div class="absolute bottom-0 left-0 h-px w-20 bg-red-500 origin-left"></div>
<div
class="absolute bottom-0 left-0 w-px h-16 bg-blue-500 origin-bottom transform rotate-45 translate-y-2 -translate-x-2">
</div>
</div>
<div
class="-translate-x-1/2 flex gap-1 z-30 bg-[#0A0A0A]/90 border-white/10 border rounded-full pt-1.5 pr-1.5 pb-1.5 pl-1.5 absolute bottom-6 left-1/2 shadow-2xl backdrop-blur-md items-center">
<button class="flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 text-[10px] font-medium text-white hover:bg-white/20 transition-all border border-white/5">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-cw">
<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" class=""></path>
<path d="M21 3v5h-5" class=""></path>
</svg>
Rotate
</button>
<button class="flex items-center gap-2 px-4 py-1.5 rounded-full text-[10px] font-medium text-neutral-400 hover:text-white hover:bg-white/5 transition-all border border-transparent">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move">
<path d="M12 2v20" class=""></path>
<path d="m15 19-3 3-3-3" class=""></path>
<path d="m19 9 3 3-3 3" class=""></path>
<path d="M2 12h20" class=""></path>
<path d="m5 9-3 3 3 3" class=""></path>
<path d="m9 5 3-3 3 3" class=""></path>
</svg>
Move
</button>
</div>
</div>
</div>
<div
class="-left-6 flex flex-col glass-panel transform translate-z-10 animate-float bg-neutral-800/40 w-12 rounded-lg pt-2 pr-2 pb-2 pl-2 absolute top-12 [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)] gap-x-2 gap-y-2">
<button class="p-1.5 hover:bg-white/10 rounded text-purple-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="mouse-pointer-2" class="lucide lucide-mouse-pointer-2 w-4 h-4"><path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" class=""></path></svg>
</button>
<button class="p-1.5 hover:bg-white/10 rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="box" class="lucide lucide-box w-4 h-4"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" class=""></path><path d="m3.3 7 8.7 5 8.7-5" class=""></path><path d="M12 22V12" class=""></path></svg>
</button>
<button class="p-1.5 hover:bg-white/10 rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="move" class="lucide lucide-move w-4 h-4"><path d="M12 2v20" class=""></path><path d="m15 19-3 3-3-3" class=""></path><path d="m19 9 3 3-3 3" class=""></path><path d="M2 12h20" class=""></path><path d="m5 9-3 3 3 3" class=""></path><path d="m9 5 3-3 3 3" class=""></path></svg>
</button>
<button class="p-1.5 hover:bg-white/10 rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="scaling" class="lucide lucide-scaling w-4 h-4"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" class=""></path><path d="M14 15H9v-5" class=""></path><path d="M16 3h5v5" class=""></path><path d="M21 3 9 15" class=""></path></svg>
</button>
<div class="h-px w-full bg-white/10 my-1"></div>
<button class="p-1.5 hover:bg-white/10 rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="image" class="lucide lucide-image w-4 h-4"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect><circle cx="9" cy="9" r="2" class=""></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" class=""></path></svg>
</button>
<svg class="fx-svg-defs" data-fx-svg="true" style="position: absolute; width: 0; height: 0;">
<filter id="fx-liquid-glass-1jwwan" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"
class="">
<feImage result="FEIMG"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAADPCAYAAACzxlJLAAACM0lEQVR4AeySwW0DQRDDgvRfdBrQYxeEdL6YfgozmlvSvz8v//mApwVqQAOQgH8hCBCvawAjhAUagADxugYwQligAQgQr2sAI4QFGoAA8fo3GcCwKgUaqGC9KNXABazKqAYqWC9KNXABqzKqgQrWi1INXMCqjGqggvWiVAMXsCqjGqhgvSjVwAWsymjHQOVTc6kPyFx2qQZ2rPMlDWQuu1QDO9b5kgYyl12qgR3rfEkDmcsu1cCOdb6kgcxll2pgxzpfetxA/qzz1Aecs+pMaqDD9bxVA+esOpMa6HA9b9XAOavOpAY6XM9bNXDOqjOpgQ7X81YNnLPqTGqgw/W89U0G4qt8QMQyDDUwhB1PaSBiGYYaGMKOpzQQsQxDDQxhx1MaiFiGoQaGsOMpDUQsw1ADQ9jx1D81EN/6maEGnvaiAQ1AAv6FIEC8rgGMEBZoAALE6xrACGGBBiBAvK4BjBAWaAACxOsawAhhgQYgQLyuAYwQFmgAAsTrGsAIYYEGIEC8rgGMEBZoAALE6xrACGGBBiBAvK4BjBAWLA3AT83rPiBz2aUa2LHOlzSQuexSDexY50sayFx2qQZ2rPMlDWQuu1QDO9b5kgYyl12qgR3rfOlDDeSPTakPSFSWmQaWtNMtDSQqy0wDS9rplgYSlWWmgSXtdEsDicoy08CSdrqlgURlmWlgSTvder+B9Ko3ZRp42pYGNAAJ+BeCAPG6BjBCWKABCBCvawAjhAUagADx+h8AAAD//6dOPDoAAAAGSURBVAMAb7ABn2nSzb8AAAAASUVORK5CYII="
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-nl8t6y" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB" class="">
<feImage
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAADNCAYAAADHaUIbAAACJElEQVR4AezS0WpFIRBD0dL//+iKr9JxiJmUS3cRH86YKKv3++tD/3h4+h+HOOJNAX4qTSjbMcRtlM0ixJtQtmOI2yibRYg3oWzHELdRNosQb0LZjiFuo2wW/S7eLPirYzw8LY844k0BfipNKNsxxG2UzSLEm1C2Y4jbKJtFiDehbMcQt1E2ixBvQtmOIW6jbBYp4s3q2WM8fNb3bEf8NJn9gvis79mO+Gky+wXxWd+zHfHTZPYL4rO+Zzvip8nsF8Rnfc92xE+T2S+Ib9/ghngQe1+F+GYIbogHsfdViG+G4IZ4EHtfhfhmCG6IB7H3VYhvhuCGeBB7X4X4ZghuiF+w7WPE7aSXQsQvQPYx4nbSSyHiFyD7GHE76aUQ8QuQfYy4nfRSiPgFyD5G3E56KUT8AmQfIy6TikHERTg5hrhMJwYRF+HkGOIynRhEXISTY4jLdGIQcRFOjiEu04lBxEU4OYa4TCcGERfhqlg5Q7zkGRgiPoBaViJe8gwMER9ALSsRL3kGhogPoJaViJc8A0PEB1DLSsRLnoEh4gOoZSXiJY97uPoQXwjRhXiUe12G+EKILsSj3OsyxBdCdCEe5V6XIb4QogvxKPe6DPGFEF2IR7nXZYgvhOj6RTz6BukyHi6xPYQQf8CToohLbA8hxB/wpCjiEttDCPEHPCmKuMT2EEL8AU+KIi6xPYQQf8CTov9HXOIZCCE+gFpWIl7yDAw/VvwHAAD//9+PpR0AAAAGSURBVAMA0OQBm0Ab0QYAAAAASUVORK5CYII="
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-1jwwan) saturate(1.25) url(#fx-noise-nl8t6y); background: transparent; pointer-events: none; z-index: -1; overflow: hidden; border-radius: inherit;">
</div>
</div>
<div
class="-right-4 glass-panel transform translate-z-20 animate-float -bottom-4 w-48 rounded-lg pt-4 pr-4 pb-4 pl-4 absolute [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)]"
style="animation-delay: 1s">
<div class="flex justify-between items-center mb-4">
<span class="text-[10px] font-bold uppercase tracking-wider text-neutral-500">
Material
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="layers"
class="lucide lucide-layers w-3 h-3 text-neutral-500">
<path
d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"
class=""></path>
<path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path>
<path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path>
</svg>
</div>
<div class="space-y-3">
<div class="space-y-1">
<div class="flex justify-between text-[10px] text-neutral-400">
<span class="">Roughness</span>
<span>0.4</span>
</div>
<div class="h-1 bg-white/10 rounded-full overflow-hidden">
<div class="h-full w-[40%] bg-purple-500 rounded-full"></div>
</div>
</div>
<div class="space-y-1">
<div class="flex justify-between text-[10px] text-neutral-400">
<span class="">Metalness</span>
<span>0.8</span>
</div>
<div class="h-1 bg-white/10 rounded-full overflow-hidden">
<div class="bg-orange-500 w-[80%] h-full rounded-full"></div>
</div>
</div>
<div class="flex gap-2 pt-2">
<div class="w-6 h-6 rounded bg-purple-500/50 border border-white/20"></div>
<div class="bg-orange-500/50 w-6 h-6 border-white/20 border rounded"></div>
<div class="w-6 h-6 rounded bg-white/10 border border-white/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus"
class="lucide lucide-plus w-3 h-3">
<path d="M5 12h14" class=""></path>
<path d="M12 5v14" class=""></path>
</svg>
</div>
</div>
</div>
<svg class="fx-svg-defs" data-fx-svg="true" style="position: absolute; width: 0; height: 0;">
<filter id="fx-liquid-glass-4aqtl0" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"
class="">
<feImage result="FEIMG"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAACnCAYAAABHLVPlAAAFCUlEQVR4AezTWY4iSRBF0VTvf9GtQogPBMIJfLDhlFQJJB5uz+7L+9+ffwg0JkCAxuVb/e+PAP4KWhMgQOv6LU8AfwOtCTQWoHXvlr8TIMAdhJeeBAjQs3db3wkQ4A7CS08CBOjZu63vBAhwB9HqxbIPAgR4oPCmIwECdGzdzg8CBHig8KYjAQJ0bN3ODwIEeKDwpgOB5x0J8EzE51YECNCqbss+EyDAMxGfWxEgQKu6LftMgADPRHxuRaCRAK16tewgAQIMgnKsJgEC1OzVVoMECDAIyrGaBAhQs1dbDRIgwCCo1MeEf0uAAG/R+KIDAQJ0aNmObwkQ4C0aX3QgQIAOLdvxLQECvEXjiwoEPu1AgE+EfF+aAAFK12u5TwQI8ImQ70sTIEDpei33iQABPhHyfWkChQUo3ZvlJhEgwCSQrslJgAA5e5N6EgECTALpmpwECJCzN6knESDAJJChrhFmmAABhlE5WJEAASq2aqdhAgQYRuVgRQIEqNiqnYYJEGAYlYMZCHybkQDfEnO+FAEClKrTMt8SIMC3xJwvRYAApeq0zLcECPAtMedLESgkQKleLLOJAAE2gTYmJgECxOxFqk0ECLAJtDExCRAgZi9SbSJAgE2gl45x+WUCBLiMzoMVCBCgQot2uEyAAJfRebACAQJUaNEOlwkQ4DI6D0Yg8GsGAvxK0POpCRAgdX3C/0qAAL8S9HxqAgRIXZ/wvxIgwK8EPZ+aQGIBUnMXPggBAgQpQowzBAhwhrupQQgQIEgRYpwhQIAz3E0NQoAAQYr4KobD0wgQYBpKF2UkQICMrck8jQABpqF0UUYCBMjYmszTCBBgGkoX7SAwewYBZhN1XyoCBEhVl7CzCRBgNlH3pSJAgFR1CTubAAFmE3VfKgKJBEjFVdgkBAiQpCgx1xAgwBqubk1CgABJihJzDQECrOHq1iQECJChKBmXESDAMrQuzkCAABlaknEZAQIsQ+viDAQIkKElGZcRIMAytC6eQWD1HQRYTdj9oQkQIHQ9wq0mQIDVhN0fmgABQtcj3GoCBFhN2P2hCQQWIDQ34YoQIECRIq1xjQABrnHzVBECBChSpDWuESDANW6eKkKAABGLlGkbAQJsQ21QRAIEiNiKTNsIEGAbaoMiEiBAxFZk2kaAANtQGzRCYPcZAuwmbl4oAgQIVYcwuwkQYDdx80IRIECoOoTZTYAAu4mbF4pAIAFCcRGmCQECNCnamq8JEOA1F79tQoAATYq25msCBHjNxW+bECBAhKJlOEaAAMfQGxyBAAEitCDDMQIEOIbe4AgECBChBRmOESDAMfQG/yNw+j8BTjdg/lECBDiK3/DTBAhwugHzjxIgwFH8hp8mQIDTDZh/lMBBAY7ubTgCNwIEuGHwoysBAnRt3t43AgS4YfCjKwECdG3e3jcCBLhh2PzDuDAECBCmCkFOECDACepmhiFAgDBVCHKCAAFOUDczDAEChKmiR5BoWxIgWiPybCVAgK24DYtGgADRGpFnKwECbMVtWDQCBIjWiDxbCWwUYOtehiEwRIAAQ5gcqkqAAFWbtdcQAQIMYXKoKgECVG3WXkMECDCE6cdDHg9LgABhqxFsBwEC7KBsRlgCBAhbjWA7CBBgB2UzwhIgQNhqagSLvgUBojck31ICBFiK1+XRCRAgekPyLSVAgKV4XR6dAAGiNyTfUgILBVia2+UITCFAgCkYXZKVwP8AAAD//xJNjUgAAAAGSURBVAMAPqQBT4effAAAAAAASUVORK5CYII="
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-tq9zgj" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB" class="">
<feImage
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL4AAAClCAYAAADiZUfFAAAE1UlEQVR4AezSS67rOBAE0Yve/6J7KA/4YJAmqfocjwxBqsqKjP/+/BBoSID4DUt38t8f8VnQkgDxW9buaOJzoCUB4n+t3QsVCRC/Yqtu+kqA+F8ReaEiAeJXbNVNXwkQ/ysiL1QkQPyKrd6+KeE+4icsTeTfCRD/d4YmJCRA/ISlifw7AeL/ztCEhASIn7A0kX8ncFv83xObgMAGAsTfANGIfASIn68ziTcQIP4GiEbkI0D8fJ1JvIEA8TdA3DvCtBsEiH+Dsh3hCBA/XCUC3SBA/BuU7QhHgPjhKhHoBgHi36Bsx14CG6YRfwNEI/IRIH6+ziTeQID4GyAakY8A8fN1JvEGAsTfANGIfASqi5+vEYmvECD+FcyWRCNA/GiNyHOFAPGvYLYkGgHiR2tEnisEiH8Fc+QlPbMRv2fv7a8mfnsFegIgfs/e219N/PYK9ARA/J69t796Svz2tAAoQ4D4Zap0yAwB4s/Q8m4ZAsQvU6VDZggQf4aWd8sQIP7eKk1LQoD4SYoScy8B4u/laVoSAsRPUpSYewkQfy9P05IQIH6SourEjHEJ8WP0IMVlAsS/DNy6GASIH6MHKS4TIP5l4NbFIED8GD1IcZlAaPEvs7CuEQHiNyrbqQ8B4j8s/GtEgPiNynbqQ4D4Dwv/GhEgfu6ypV8kQPxFcD7LTYD4ufuTfpEA8RfB+Sw3AeLn7k/6RQLEXwTnsywExjmJP+biaXECxC9esPPGBIg/5uJpcQLEL16w88YEiD/m4mlxAsT/KNjfPgSI36drl34QIP4HDH/7ECB+n65d+kGA+B8w/O1DgPh9ut5xaZkZxC9TpUNmCBB/hpZ3yxAgfpkqHTJDgPgztLxbhgDxy1TpkBkC58SfSeFdBC4TIP5l4NbFIED8GD1IcZkA8S8Dty4GAeLH6EGKywSIfxn45zr/3yNA/PfY2/wiAeK/CN/q9wgQ/z32Nr9IgPgvwrf6PQLEf4+9zd8JHHuD+MfQGhyZAPEjtyPbMQLEP4bW4MgEiB+5HdmOESD+MbQGRyZQR/zIlGULR4D44SoR6AYB4t+gbEc4AsQPV4lANwgQ/wZlO8IRIH64Ss4FMvkhQPyHhX+NCBC/UdlOfQgQ/2HhXyMCxG9UtlMfAsR/WPjXiMA/xG9EwKktCRC/Ze2OJj4HWhIgfsvaHU18DrQkQPzV2n2XmgDxU9cn/CoB4q+S811qAsRPXZ/wqwSIv0rOd6kJED91fbHDR05H/MjtyHaMAPGPoTU4MgHiR25HtmMEiH8MrcGRCRA/cjuyHSMQRPxj9xmMwJAA8YdYPKxOgPjVG3bfkADxh1g8rE6A+NUbdt+QAPGHWAI+FGkrAeJvxWlYFgLEz9KUnFsJEH8rTsOyECB+lqbk3EqA+FtxGvYmgZndxJ+h5d0yBIhfpkqHzBAg/gwt75YhQPwyVTpkhgDxZ2h5twyBpuKX6c8hiwSIvwjOZ7kJED93f9IvEiD+Ijif5SZA/Nz9Sb9IgPiL4Mp/VvxA4hcv2HljAsQfc/G0OAHiFy/YeWMCxB9z8bQ4AeIXL9h5YwI7xB9P9hSBwASIH7gc0c4RIP45tiYHJkD8wOWIdo4A8c+xNTkwAeJfKceSaASIH60Rea4QIP4VzJZEI0D8aI3Ic4XA/wAAAP//T/MkgwAAAAZJREFUAwAKSwFLXQVAcgAAAABJRU5ErkJggg=="
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-4aqtl0) saturate(1.25) url(#fx-noise-tq9zgj); background: transparent; pointer-events: none; z-index: -1; overflow: hidden; border-radius: inherit;">
</div>
</div>
</div>
</div>