Загрузка...
Адаптивный UI-блок с макетом iPhone. Демонстрирует типографику, сетку иконок. Идеален для страниц маркетингаproductIdelUX-инструментов.
<section class="overflow-hidden bg-[#FAFAFA] border-neutral-100 border-t pt-24 pb-24 relative">
<!-- Subtle Grid Background -->
<div class="[mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_100%)] bg-neutral-200 pointer-events-none absolute top-0 right-0 bottom-0 left-0">
</div>
<div class="container mx-auto px-6 lg:px-12 relative z-10">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 h-full gap-x-8 gap-y-8">
<!-- Left Column: Adaptive Interface (Spacings Visualization) -->
<div class="lg:p-12 overflow-hidden flex flex-col min-h-[640px] group bg-center bg-white bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/132b8948-f042-43a8-bfc6-a2ff9e54713d_1600w.jpg)] bg-cover border-neutral-200 border rounded-[32px] pt-8 pr-8 pb-8 pl-8 relative shadow-xl items-center">
<!-- Header Label -->
<div class="w-full flex justify-between items-start mb-12 relative z-20">
<div class="w-10 h-10 rounded-xl bg-neutral-50 border border-neutral-200 flex items-center justify-center text-neutral-900">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="M16 22c-1.886 0-2.828 0-3.414-.586c-.503-.502-.574-1.267-.584-2.664L12 17.25V6.75l.002-1.5c.01-1.397.081-2.162.584-2.664C13.172 2 14.114 2 16 2h2c1.886 0 2.828 0 3.414.586S22 4.114 22 6v12c0 1.886 0 2.828-.586 3.414S19.886 22 18 22z" opacity=".35" class=""></path>
<path fill="currentColor" d="M15 8.25h-3v1.5h3a.75.75 0 0 0 0-1.5m-1-3h-1.998L12 6.75h2a.75.75 0 0 0 0-1.5m0 6h-2v1.5h2a.75.75 0 0 0 0-1.5m1 3h-3v1.5h3a.75.75 0 0 0 0-1.5m-1 3h-2l.002 1.5H14a.75.75 0 0 0 0-1.5m-6-2.27V7a7.9 7.9 0 0 1-3 .59A7.9 7.9 0 0 1 2 7v7.98c0 .622 0 .934.038 1.24a5 5 0 0 0 .25 1.056c.102.29.241.569.52 1.126l1.468 2.937a.809.809 0 0 0 1.448 0l1.468-2.937c.279-.557.418-.835.52-1.126a5 5 0 0 0 .25-1.057C8 15.914 8 15.602 8 14.98" class="">
</path>
<path fill="currentColor" d="M5 2a3 3 0 0 1 3 3v2a7.9 7.9 0 0 1-3 .589A7.9 7.9 0 0 1 2 7V5a3 3 0 0 1 3-3" opacity=".35" class=""></path>
</svg>
</div>
<span class="text-xs font-medium text-neutral-400 uppercase tracking-widest mt-2">Adaptive UI</span>
</div>
<!-- Decorative Measurement Lines -->
<div class="absolute inset-0 pointer-events-none">
<!-- Vertical Spacers -->
<div class="absolute left-16 top-0 bottom-0 w-px border-l border-dashed border-indigo-400/40"></div>
<div class="absolute right-16 top-0 bottom-0 w-px border-l border-dashed border-indigo-400/40"></div>
<!-- Horizontal Spacers -->
<div class="absolute top-32 left-0 right-0 h-px border-t border-dashed border-indigo-400/40"></div>
<div class="absolute bottom-32 left-0 right-0 h-px border-t border-dashed border-indigo-400/40"></div>
<!-- Floating Labels -->
<div class="absolute left-[4.5rem] bottom-40 bg-indigo-50 border border-indigo-200 text-indigo-500 text-[10px] font-mono font-medium px-1.5 py-0.5 rounded-full">
24px</div>
<div class="absolute top-[8.5rem] right-8 bg-violet-50 border border-violet-200 text-violet-500 text-[10px] font-mono font-medium px-1.5 py-0.5 rounded-full">
16px</div>
</div>
<!-- Mobile Phone Mockup (Dynamic Island iPhone) -->
<div class="relative w-[300px] h-[580px] bg-neutral-900 rounded-[40px] border-[6px] border-neutral-950 shadow-[0_20px_50px_-12px_rgba(15,23,42,0.65)] ring-1 ring-neutral-900/60 z-10 overflow-hidden transform group-hover:scale-[1.02] transition-transform duration-500">
<!-- Dynamic Island -->
<div class="absolute top-3 left-1/2 -tranneutral-x-1/2 w-28 h-8 bg-black rounded-full z-30 flex items-center justify-center gap-1 px-3 shadow-sm shadow-black/70">
<span class="w-1.5 h-1.5 rounded-full bg-neutral-800"></span>
<span class="w-8 h-1 rounded-full bg-neutral-800"></span>
</div>
<!-- Screen Content -->
<div class="flex flex-col bg-gradient-to-b from-neutral-900 via-neutral-950 to-black h-full pt-12 pr-5 pb-6 pl-5 relative">
<!-- App Header -->
<div class="flex justify-between items-center mb-6">
<div class="flex items-center gap-3">
<div class="flex text-[10px] font-semibold text-white tracking-tight bg-gradient-to-br from-orange-500 to-rose-500 w-8 h-8 rounded-full items-center justify-center" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); --border-radius-before: 9999px">
CG</div>
<div>
<div class="text-[11px] text-neutral-400 leading-none mb-1">Welcome back</div>
<div class="text-sm font-medium text-white leading-none tracking-tight">Alex</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" class="text-neutral-300">
<path fill="currentColor" d="M18.75 9v.704c0 .845.24 1.671.692 2.374l1.108 1.723c1.011 1.574.239 3.713-1.52 4.21a25.8 25.8 0 0 1-14.06 0c-1.759-.497-2.531-2.636-1.52-4.21l1.108-1.723a4.4 4.4 0 0 0 .693-2.374V9c0-3.866 3.022-7 6.749-7s6.75 3.134 6.75 7" opacity=".45" class=""></path>
<path fill="currentColor" d="M7.243 18.545a5.002 5.002 0 0 0 9.513 0c-3.145.59-6.367.59-9.513 0" class=""></path>
</svg>
</div>
<!-- Highlight Card -->
<div class="overflow-hidden bg-gradient-to-b from-white/10 to-white/5 rounded-2xl mb-6 px-4 py-4 relative" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 16px">
<div class="absolute top-0 right-0 p-3 opacity-25 text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12" opacity=".45" class=""></path>
<path fill="currentColor" d="M14.5 10.75a.75.75 0 0 1 0-1.5H17a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-.69l-2.013 2.013a1.75 1.75 0 0 1-2.474 0l-1.586-1.586a.25.25 0 0 0-.354 0L7.53 14.53a.75.75 0 0 1-1.06-1.06l2.293-2.293a1.75 1.75 0 0 1 2.474 0l1.586 1.586a.25.25 0 0 0 .354 0l2.012-2.013z" class="">
</path>
</svg>
</div>
<div class="relative z-10">
<div class="text-xs text-neutral-200/70 mb-1">Weekly Insights</div>
<div class="text-2xl font-medium tracking-tight text-white mb-2">+24.5%</div>
<div class="flex items-center gap-2">
<span class="bg-emerald-400/15 text-emerald-300 text-[10px] font-semibold px-2 py-0.5 rounded-full">On Track</span>
<span class="text-[10px] text-neutral-300/70">vs last week</span>
</div>
</div>
</div>
<!-- List Items -->
<div class="space-y-3">
<div class="flex items-center justify-between text-xs font-medium text-neutral-300/80 mb-2 uppercase tracking-wide">
Recent Models</div>
<!-- Item 1 -->
<div class="flex gap-3 hover:border-orange-400/50 transition-colors bg-neutral-900/70 rounded-xl pt-3 pr-3 pb-3 pl-3 gap-x-3 gap-y-3 items-center" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 12px">
<div class="w-10 h-10 rounded-lg bg-indigo-500/20 flex items-center justify-center text-indigo-300">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12" opacity=".4" class=""></path>
<path fill="currentColor" d="M13.488 6.446a.75.75 0 0 1 .53.918l-2.588 9.66a.75.75 0 0 1-1.449-.389l2.589-9.659a.75.75 0 0 1 .918-.53M14.97 8.47a.75.75 0 0 1 1.06 0l.209.208c.635.635 1.165 1.165 1.529 1.642c.384.504.654 1.036.654 1.68s-.27 1.176-.654 1.68c-.364.477-.894 1.007-1.53 1.642l-.208.208a.75.75 0 1 1-1.06-1.06l.171-.172c.682-.682 1.139-1.14 1.434-1.528c.283-.37.347-.586.347-.77s-.064-.4-.347-.77c-.295-.387-.752-.846-1.434-1.528l-.171-.172a.75.75 0 0 1 0-1.06m-7 0a.75.75 0 0 1 1.06 1.06l-.171.172c-.682.682-1.138 1.14-1.434 1.528c-.283.37-.346.586-.346.77s.063.4.346.77c.296.387.752.846 1.434 1.528l.172.172a.75.75 0 1 1-1.061 1.06l-.208-.208c-.636-.635-1.166-1.165-1.53-1.642c-.384-.504-.653-1.036-.653-1.68s.27-1.176.653-1.68c.364-.477.894-1.007 1.53-1.642z" class="">
</path>
</svg>
</div>
<div class="flex-1">
<h4 class="text-xs font-medium text-neutral-50 tracking-tight">NLP Processor</h4>
<p class="text-[10px] text-neutral-300/80">v4.2 • Updated 2h ago</p>
</div>
<div class="w-2 h-2 rounded-full bg-emerald-400"></div>
</div>
<!-- Item 2 -->
<div class="flex gap-3 hover:border-orange-400/50 transition-colors bg-neutral-900/70 rounded-xl pt-3 pr-3 pb-3 pl-3 gap-x-3 gap-y-3 items-center" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 12px">
<div class="w-10 h-10 rounded-lg bg-rose-500/15 flex items-center justify-center text-rose-300">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="M18.512 10.077c0 .738-.625 1.337-1.396 1.337s-1.395-.599-1.395-1.337c0-.739.625-1.338 1.395-1.338s1.396.599 1.396 1.338" class="">
</path>
<path fill="currentColor" fill-rule="evenodd" d="M18.036 5.532c-1.06-.137-2.414-.137-4.123-.136h-3.826c-1.71 0-3.064 0-4.123.136c-1.09.14-1.974.437-2.67 1.104S2.29 8.149 2.142 9.195C2 10.21 2 11.508 2 13.147v.1c0 1.64 0 2.937.142 3.953c.147 1.046.456 1.892 1.152 2.559s1.58.963 2.67 1.104c1.06.136 2.414.136 4.123.136h3.826c1.71 0 3.064 0 4.123-.136c1.09-.14 1.974-.437 2.67-1.104s1.005-1.514 1.152-2.559C22 16.184 22 14.886 22 13.248v-.1c0-1.64 0-2.937-.142-3.953c-.147-1.046-.456-1.892-1.152-2.559s-1.58-.963-2.67-1.104M6.15 6.858c-.936.12-1.475.346-1.87.724c-.393.377-.629.894-.755 1.791c-.1.72-.123 1.619-.128 2.795l.47-.395c1.125-.942 2.819-.888 3.875.124l3.99 3.825a1.2 1.2 0 0 0 1.491.124l.278-.187a3.606 3.606 0 0 1 4.34.25l2.407 2.077c.098-.264.173-.579.227-.964c.128-.916.13-2.124.13-3.824s-.002-2.909-.13-3.825c-.126-.897-.362-1.414-.756-1.791c-.393-.378-.933-.604-1.869-.724c-.956-.124-2.216-.125-3.99-.125h-3.72c-1.774 0-3.034.001-3.99.125" clip-rule="evenodd" class=""></path>
<path fill="currentColor" d="M17.087 2.61c-.86-.11-1.955-.11-3.32-.11h-3.09c-1.364 0-2.459 0-3.318.11c-.89.115-1.633.358-2.222.92a2.9 2.9 0 0 0-.724 1.12c.504-.23 1.074-.366 1.714-.45c1.085-.14 2.47-.14 4.22-.14h3.915c1.749 0 3.134 0 4.219.14c.559.073 1.064.186 1.52.366a2.9 2.9 0 0 0-.693-1.035c-.589-.563-1.331-.806-2.221-.92" opacity=".45" class=""></path>
</svg>
</div>
<div class="flex-1">
<h4 class="text-xs font-medium text-neutral-50 tracking-tight">Image Gen Alpha</h4>
<p class="text-[10px] text-neutral-300/80">Rendering...</p>
</div>
<div class="w-8 h-8 rounded-full border border-white/15 flex items-center justify-center text-neutral-200/90">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="M3.68 11.333h-.75zm0 1.667l-.528.532a.75.75 0 0 0 1.056 0zm2.208-1.134A.75.75 0 1 0 4.83 10.8zM2.528 10.8a.75.75 0 0 0-1.056 1.065zm16.088-3.408a.75.75 0 1 0 1.277-.786zM12.079 2.25c-5.047 0-9.15 4.061-9.15 9.083h1.5c0-4.182 3.42-7.583 7.65-7.583zm-9.15 9.083V13h1.5v-1.667zm1.28 2.2l1.679-1.667L4.83 10.8l-1.68 1.667zm0-1.065L2.528 10.8l-1.057 1.065l1.68 1.666zm15.684-5.86A9.16 9.16 0 0 0 12.08 2.25v1.5a7.66 7.66 0 0 1 6.537 3.643zM20.314 11l.527-.533a.75.75 0 0 0-1.054 0zM18.1 12.133a.75.75 0 0 0 1.055 1.067zm3.373 1.067a.75.75 0 1 0 1.054-1.067zM5.318 16.606a.75.75 0 1 0-1.277.788zm6.565 5.144c5.062 0 9.18-4.058 9.18-9.083h-1.5c0 4.18-3.43 7.583-7.68 7.583zm9.18-9.083V11h-1.5v1.667zm-1.276-2.2L18.1 12.133l1.055 1.067l1.686-1.667zm0 1.066l1.686 1.667l1.054-1.067l-1.686-1.666zM4.04 17.393a9.2 9.2 0 0 0 7.842 4.357v-1.5a7.7 7.7 0 0 1-6.565-3.644z" class="">
</path>
</svg>
</div>
</div>
</div>
<!-- Bottom Tab Bar -->
<div class="flex bg-neutral-900/80 h-14 rounded-2xl mt-auto pr-2 pl-2 items-center justify-around" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 16px">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" aria-hidden="true" class="text-white">
<path fill="currentColor" d="M2 12.204c0-2.289 0-3.433.52-4.381c.518-.949 1.467-1.537 3.364-2.715l2-1.241C9.889 2.622 10.892 2 12 2s2.11.622 4.116 1.867l2 1.241c1.897 1.178 2.846 1.766 3.365 2.715S22 9.915 22 12.203v1.522c0 3.9 0 5.851-1.172 7.063S17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.212S2 17.626 2 13.725z" opacity=".45" class=""></path>
<path fill="currentColor" d="M9.447 15.398a.75.75 0 0 0-.894 1.205A5.77 5.77 0 0 0 12 17.75a5.77 5.77 0 0 0 3.447-1.147a.75.75 0 0 0-.894-1.206A4.27 4.27 0 0 1 12 16.25a4.27 4.27 0 0 1-2.553-.852" class="">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" aria-hidden="true" class="text-neutral-300">
<path fill="currentColor" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" opacity=".45" class=""></path>
<path fill="currentColor" d="M13.024 14.56c.493-.197.739-.296.932-.465q.075-.065.139-.139c.17-.193.268-.44.465-.932c.924-2.31 1.386-3.465.938-4.124a1.5 1.5 0 0 0-.398-.398c-.66-.448-1.814.014-4.124.938c-.493.197-.74.295-.933.465q-.074.065-.138.139c-.17.193-.268.44-.465.932c-.924 2.31-1.386 3.464-.938 4.124a1.5 1.5 0 0 0 .398.398c.66.448 1.814-.014 4.124-.938" class="">
</path>
</svg>
<div class="w-10 h-10 rounded-full bg-white text-neutral-900 flex items-center justify-center -mt-6 border-4 border-neutral-900">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22" opacity=".35" class=""></path>
<path fill="currentColor" d="M12 8.25a.75.75 0 0 1 .75.75v2.25H15a.75.75 0 0 1 0 1.5h-2.25V15a.75.75 0 0 1-1.5 0v-2.25H9a.75.75 0 0 1 0-1.5h2.25V9a.75.75 0 0 1 .75-.75" class="">
</path>
</svg>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" aria-hidden="true" class="text-neutral-300">
<path fill="currentColor" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12c0 1.6.376 3.112 1.043 4.453c.178.356.237.763.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.133A9.96 9.96 0 0 0 12 22" opacity=".45" class=""></path>
<path fill="currentColor" d="M7.825 12.85a.825.825 0 0 0 0 1.65h6.05a.825.825 0 0 0 0-1.65zm0-3.85a.825.825 0 0 0 0 1.65h8.8a.825.825 0 0 0 0-1.65z" class="">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" aria-hidden="true" class="text-neutral-300">
<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=".45" class=""></path>
<path fill="currentColor" d="M16.807 19.011A8.46 8.46 0 0 1 12 20.5a8.46 8.46 0 0 1-4.807-1.489c-.604-.415-.862-1.205-.51-1.848C7.41 15.83 8.91 15 12 15s4.59.83 5.318 2.163c.35.643.093 1.433-.511 1.848M12 12a3 3 0 1 0 0-6a3 3 0 0 0 0 6" class="">
</path>
</svg>
</div>
</div>
<!-- Decorative Spacing Marker -->
<div class="absolute bottom-[5.5rem] left-1/2 -tranneutral-x-1/2 w-full flex justify-center pointer-events-none">
<div class="h-4 border-l border-r border-indigo-400/60 w-8 flex items-center justify-center relative">
<div class="absolute h-px bg-indigo-400/60 w-full top-1/2"></div>
<span class="bg-neutral-950 px-1 text-[9px] text-indigo-300 font-mono relative z-10">32</span>
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="flex flex-col gap-8">
<!-- Typography / Model Context Card -->
<div class="lg:p-10 overflow-hidden flex-1 flex flex-col min-h-[320px] bg-white border-neutral-200 border rounded-[32px] pt-8 pr-8 pb-8 pl-8 relative shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)] justify-between">
<div class="flex justify-between items-start w-full relative z-20">
<div class="w-10 h-10 rounded-xl bg-neutral-50 border border-neutral-200 flex items-center justify-center text-neutral-900 font-serif italic font-light text-xl">
Aa
</div>
<span class="text-xs font-medium text-neutral-400 uppercase tracking-widest mt-2">Typography</span>
</div>
<!-- Main Text Visualization -->
<div class="flex-1 flex flex-col items-center justify-center text-center mt-6 relative z-10">
<h2 class="bg-clip-text lg:text-8xl text-7xl font-normal text-transparent tracking-tight bg-gradient-to-br from-neutral-900 via-neutral-900 to-neutral-400 mb-4 py-2">
Cognitive.
</h2>
<div class="flex items-center gap-6 text-sm text-neutral-400 font-medium tracking-wide">
<span class="hover:text-neutral-900 transition-colors cursor-default">Regular</span>
<span class="text-neutral-900 scale-110 font-medium cursor-default">Medium</span>
<span class="hover:text-neutral-900 transition-colors cursor-default">Semibold</span>
</div>
</div>
<!-- Slider Controls -->
<div class="z-10 mt-8 pt-8 relative">
<div class="h-0.5 bg-neutral-100 w-full rounded-full mt-1 relative">
<div class="-tranneutral-y-1/2 flex w-full pr-0.5 pl-0.5 absolute top-1/2 left-0 justify-between">
<div class="w-2 h-2 rounded-full bg-neutral-200 hover:bg-neutral-300 transition-colors cursor-pointer ring-4 ring-white">
</div>
<div class="w-2 h-2 rounded-full bg-neutral-200 hover:bg-neutral-300 transition-colors cursor-pointer ring-4 ring-white">
</div>
<div class="w-2 h-2 rounded-full bg-lime-400 shadow-[0_0_10px_rgba(163,230,53,0.6)] cursor-pointer ring-4 ring-white z-10">
</div>
<div class="w-2 h-2 rounded-full bg-neutral-200 hover:bg-neutral-300 transition-colors cursor-pointer ring-4 ring-white">
</div>
<div class="w-2 h-2 rounded-full bg-neutral-200 hover:bg-neutral-300 transition-colors cursor-pointer ring-4 ring-white">
</div>
<div class="w-2 h-2 rounded-full bg-neutral-200 hover:bg-neutral-300 transition-colors cursor-pointer ring-4 ring-white">
</div>
</div>
</div>
<div class="flex justify-between mt-5 text-[10px] font-mono text-neutral-300 uppercase tracking-widest">
<span>11</span>
<span class="">14</span>
<span class="text-lime-500">16</span>
<span>18</span>
<span>20</span>
<span>24</span>
</div>
</div>
<!-- Background Glow -->
<div class="absolute top-1/2 left-1/2 -tranneutral-x-1/2 -tranneutral-y-1/2 w-40 h-40 bg-orange-300/10 blur-[80px] rounded-full pointer-events-none">
</div>
</div>
<!-- Icons & Integrations Grid -->
<div class="lg:p-10 overflow-hidden flex-1 min-h-[340px] bg-white border-neutral-200 border rounded-[32px] pt-8 pr-8 pb-8 pl-8 relative shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]">
<div class="flex w-full z-20 mb-2 relative items-start justify-between">
<div class="w-10 h-10 rounded-xl bg-neutral-50 border border-neutral-200 flex items-center justify-center text-neutral-900">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="M13 15.4c0-2.074 0-3.111.659-3.756S15.379 11 17.5 11s3.182 0 3.841.644C22 12.29 22 13.326 22 15.4v2.2c0 2.074 0 3.111-.659 3.756S19.621 22 17.5 22s-3.182 0-3.841-.644C13 20.71 13 19.674 13 17.6z" opacity=".35" class=""></path>
<path fill="currentColor" d="M2 8.6c0 2.074 0 3.111.659 3.756S4.379 13 6.5 13s3.182 0 3.841-.644C11 11.71 11 10.674 11 8.6V6.4c0-2.074 0-3.111-.659-3.756S8.621 2 6.5 2s-3.182 0-3.841.644C2 3.29 2 4.326 2 6.4zm11-3.1c0-1.087 0-1.63.171-2.06a2.3 2.3 0 0 1 1.218-1.262C14.802 2 15.327 2 16.375 2h2.25c1.048 0 1.573 0 1.986.178c.551.236.99.69 1.218 1.262c.171.43.171.973.171 2.06s0 1.63-.171 2.06a2.3 2.3 0 0 1-1.218 1.262C20.198 9 19.673 9 18.625 9h-2.25c-1.048 0-1.573 0-1.986-.178a2.3 2.3 0 0 1-1.218-1.262C13 7.13 13 6.587 13 5.5" class="">
</path>
<path fill="currentColor" d="M2 18.5c0 1.087 0 1.63.171 2.06a2.3 2.3 0 0 0 1.218 1.262c.413.178.938.178 1.986.178h2.25c1.048 0 1.573 0 1.986-.178c.551-.236.99-.69 1.218-1.262c.171-.43.171-.973.171-2.06s0-1.63-.171-2.06a2.3 2.3 0 0 0-1.218-1.262C9.198 15 8.673 15 7.625 15h-2.25c-1.048 0-1.573 0-1.986.178c-.551.236-.99.69-1.218 1.262C2 16.87 2 17.413 2 18.5" opacity=".35" class=""></path>
</svg>
</div>
<span class="text-xs font-medium text-neutral-400 uppercase tracking-widest mt-2">Icons & Assets</span>
</div>
<div class="grid grid-cols-6 gap-3 lg:gap-4 z-10 relative gap-x-3 gap-y-3">
<!-- Row 1 -->
<button class="aspect-square flex hover:bg-neutral-100 hover:text-neutral-900 transition-all group text-neutral-500 bg-neutral-50 border-neutral-200 border rounded-2xl items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="M1 12c0-5.185 0-7.778 1.61-9.39C4.223 1 6.816 1 12 1s7.778 0 9.39 1.61C23 4.223 23 6.816 23 12s0 7.778-1.61 9.39C19.777 23 17.184 23 12 23s-7.778 0-9.39-1.61C1 19.777 1 17.184 1 12" opacity=".4" class=""></path>
<path fill="currentColor" d="M13.926 14.302c.245-.191.467-.413.912-.858l5.54-5.54c.134-.134.073-.365-.106-.427a6.1 6.1 0 0 1-2.3-1.449a6.1 6.1 0 0 1-1.45-2.3c-.061-.18-.292-.24-.426-.106l-5.54 5.54c-.445.444-.667.667-.858.912a5 5 0 0 0-.577.932c-.133.28-.233.579-.431 1.175l-.257.77l-.409 1.226l-.382 1.148a.817.817 0 0 0 1.032 1.033l1.15-.383l1.224-.408l.77-.257c.597-.199.895-.298 1.175-.432q.498-.237.933-.576m8.187-8.132a3.028 3.028 0 0 0-4.282-4.283l-.179.178a.73.73 0 0 0-.206.651c.027.15.077.37.168.633a4.9 4.9 0 0 0 1.174 1.863a4.9 4.9 0 0 0 1.862 1.174c.263.09.483.141.633.168c.24.043.48-.035.652-.207z" class=""></path>
</svg>
</button>
<button class="aspect-square flex transition-transform hover:-tranneutral-y-0.5 text-neutral-900 bg-orange-500 border-orange-600 border rounded-2xl shadow-[0_0_20px_-5px_rgba(163,230,53,0.5)] items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="color: rgb(15, 23, 42); width: 16px; height: 16px" class="w-[16px] h-[16px]" aria-hidden="true" data-solar="circle-bottom-up-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#0f172a" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" opacity=".5" class=""></path><path fill="#0f172a" fill-rule="evenodd" d="M4.25 13a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0v-4.19l-6.72 6.72a.75.75 0 0 1-1.06-1.06l6.72-6.72H5a.75.75 0 0 1-.75-.75" clip-rule="evenodd" class=""></path></svg>
</button>
<button class="aspect-square rounded-2xl bg-neutral-50 border border-neutral-200 flex items-center justify-center text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 transition-all group">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="M18.75 9v.704c0 .845.24 1.671.692 2.374l1.108 1.723c1.011 1.574.239 3.713-1.52 4.21a25.8 25.8 0 0 1-14.06 0c-1.759-.497-2.531-2.636-1.52-4.21l1.108-1.723a4.4 4.4 0 0 0 .693-2.374V9c0-3.866 3.022-7 6.749-7s6.75 3.134 6.75 7" opacity=".45" class=""></path>
<path fill="currentColor" d="M7.243 18.545a5.002 5.002 0 0 0 9.513 0c-3.145.59-6.367.59-9.513 0" class=""></path>
</svg>
</button>
<button class="aspect-square rounded-2xl bg-neutral-50 border border-neutral-200 flex items-center justify-center text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 transition-all group">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" fill-rule="evenodd" d="M14.279 2.152C13.909 2 13.439 2 12.5 2s-1.408 0-1.779.152a2 2 0 0 0-1.09 1.083c-.094.223-.13.484-.145.863a1.62 1.62 0 0 1-.796 1.353a1.64 1.64 0 0 1-1.579.008c-.338-.178-.583-.276-.825-.308a2.03 2.03 0 0 0-1.49.396c-.318.242-.553.646-1.022 1.453c-.47.807-.704 1.21-.757 1.605c-.07.526.074 1.058.4 1.479c.148.192.357.353.68.555c.477.297.783.803.783 1.361s-.306 1.064-.782 1.36c-.324.203-.533.364-.682.556a2 2 0 0 0-.399 1.479c.053.394.287.798.757 1.605s.704 1.21 1.022 1.453c.424.323.96.465 1.49.396c.242-.032.487-.13.825-.308a1.64 1.64 0 0 1 1.58.008c.486.28.774.795.795 1.353c.015.38.051.64.145.863c.204.49.596.88 1.09 1.083c.37.152.84.152 1.779.152s1.409 0 1.779-.152a2 2 0 0 0 1.09-1.083c.094-.223.13-.483.145-.863c.02-.558.309-1.074.796-1.353a1.64 1.64 0 0 1 1.579-.008c.338.178.583.276.825.308c.53.07 1.066-.073 1.49-.396c.318-.242.553-.646 1.022-1.453c.47-.807.704-1.21.757-1.605a2 2 0 0 0-.4-1.479c-.148-.192-.357-.353-.68-.555c-.477-.297-.783-.803-.783-1.361s.306-1.064.782-1.36c.324-.203.533-.364.682-.556a2 2 0 0 0 .399-1.479c-.053-.394-.287-.798-.757-1.605s-.704-1.21-1.022-1.453a2.03 2.03 0 0 0-1.49-.396c-.242.032-.487.13-.825.308a1.64 1.64 0 0 1-1.58-.008a1.62 1.62 0 0 1-.795-1.353c-.015-.38-.051-.64-.145-.863a2 2 0 0 0-1.09-1.083" clip-rule="evenodd" opacity=".4" class=""></path>
<path fill="currentColor" d="M15.523 12c0 1.657-1.354 3-3.023 3s-3.023-1.343-3.023-3S10.83 9 12.5 9s3.023 1.343 3.023 3" class=""></path>
</svg>
</button>
<button class="aspect-square rounded-2xl bg-neutral-50 border border-neutral-200 flex items-center justify-center text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 transition-all group">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" class="">
<circle cx="15" cy="6" r="3" fill="currentColor" opacity=".35" class=""></circle>
<ellipse cx="16" cy="17" fill="currentColor" opacity=".35" rx="5" ry="3" class=""></ellipse>
<circle cx="9.001" cy="6" r="4" fill="currentColor" class=""></circle>
<ellipse cx="9.001" cy="17.001" fill="currentColor" rx="7" ry="4" class=""></ellipse>
</svg>
</button>
<button class="aspect-square rounded-2xl bg-neutral-50 border border-neutral-200 flex items-center justify-center text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 transition-all group">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="M7 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0m14 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" class=""></path>
<path fill="currentColor" d="M14 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0" opacity=".5" class=""></path>
</svg>
</button>
<!-- Row 2 -->
<button class="aspect-square rounded-2xl bg-neutral-50 border border-neutral-200 flex items-center justify-center text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 transition-all group">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" fill-rule="evenodd" d="M20.25 2.77a.76.76 0 0 1-.75.768h-15a.76.76 0 0 1-.75-.769A.76.76 0 0 1 4.5 2h15a.76.76 0 0 1 .75.77m0 18.46a.76.76 0 0 1-.75.77h-15a.76.76 0 0 1-.75-.77a.76.76 0 0 1 .75-.768h15a.76.76 0 0 1 .75.769" clip-rule="evenodd" opacity=".4" class=""></path>
<path fill="currentColor" d="M16 5.846c2.828 0 4.243 0 5.121.901C22 7.65 22 9.1 22 12s0 4.352-.879 5.253c-.878.9-2.293.9-5.121.9H8c-2.828 0-4.243 0-5.121-.9C2 16.352 2 14.9 2 12s0-4.351.879-5.253c.878-.9 2.293-.9 5.121-.9z" class=""></path>
</svg>
</button>
<div class="aspect-square rounded-2xl bg-neutral-100 border border-neutral-200 flex items-center justify-center overflow-hidden relative group cursor-pointer">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1c2951be-3ecd-4505-b19f-362a5b68a2f9_320w.webp" class="group-hover:opacity-100 transition-opacity opacity-90 w-full h-full object-cover" alt="User">
</div>
<button class="aspect-square rounded-2xl bg-neutral-50 border border-neutral-200 flex items-center justify-center text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 transition-all group">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="M10.577 12.399A10.8 10.8 0 0 1 7.2 15.238a16.42 16.42 0 0 1-.32-11.83a9.9 9.9 0 0 1 3.484-1.275l-.18.426a10.92 10.92 0 0 0 .563 9.623zM4.859 5A9.97 9.97 0 0 0 2 12c0 1.617.384 3.145 1.066 4.497c.954-.093 1.883-.31 2.767-.64a17.9 17.9 0 0 1-.969-10.863z" class=""></path>
<path fill="currentColor" d="M12.017 12.993c1.923.046 3.769.6 5.363 1.57c-2.889 3.035-6.988 5.14-11.165 5.594a10 10 0 0 1-2.29-2.258c3.077-.48 5.887-2.1 7.831-4.574zm8.423 4.372A9.99 9.99 0 0 1 12 22a10 10 0 0 1-3.635-.681c3.903-.872 7.577-3.006 10.25-5.88a10.7 10.7 0 0 1 1.825 1.926" opacity=".55" class=""></path>
<path fill="currentColor" d="m21.624 11.358l.002.002l.37.373Q22 11.866 22 12c0 1.388-.282 2.71-.793 3.91a12.27 12.27 0 0 0-9.126-4.415a9.43 9.43 0 0 1-1.253-4.684a15.8 15.8 0 0 1 10.796 4.547M10.946 5.313a9.4 9.4 0 0 1 .622-2.172L12.048 2c4.583.021 8.439 3.127 9.597 7.348a17.3 17.3 0 0 0-10.699-4.035" opacity=".4" class=""></path>
</svg>
</button>
<button class="aspect-square rounded-2xl bg-neutral-50 border border-neutral-200 flex items-center justify-center text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 transition-all group">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="M12 2c-4.418 0-8 4.003-8 8.5c0 4.462 2.553 9.312 6.537 11.174a3.45 3.45 0 0 0 2.926 0C17.447 19.812 20 14.962 20 10.5C20 6.003 16.418 2 12 2" opacity=".4" class=""></path>
<path fill="currentColor" d="M12 12.5a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5" class=""></path>
</svg>
</button>
<div class="aspect-square rounded-2xl bg-neutral-100 border border-neutral-200 flex items-center justify-center overflow-hidden relative group cursor-pointer">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/95d8c74e-6fe4-4d51-9390-853f5b39a219_320w.jpg" class="group-hover:opacity-100 transition-opacity opacity-90 w-full h-full object-cover" alt="User">
</div>
<button class="aspect-square flex hover:bg-neutral-100 hover:text-red-500 transition-all group text-neutral-500 bg-neutral-50 border-neutral-200 border rounded-2xl items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" class="">
<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=".4" class=""></path>
<path fill="currentColor" d="M8.97 8.97a.75.75 0 0 1 1.06 0L12 10.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L13.06 12l1.97 1.97a.75.75 0 0 1-1.06 1.06L12 13.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L10.94 12l-1.97-1.97a.75.75 0 0 1 0-1.06" class=""></path>
</svg>
</button>
<!-- Row 3 -->
<button class="aspect-square rounded-2xl bg-neutral-50 border border-neutral-200 flex items-center justify-center text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 transition-all group">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="M7.75 19a.75.75 0 0 1-.75.75H5a.75.75 0 0 1 0-1.5h2a.75.75 0 0 1 .75.75" class=""></path>
<path fill="currentColor" d="M10 18V6c0-1.4 0-2.1-.272-2.635a2.5 2.5 0 0 0-1.093-1.093C8.1 2 7.4 2 6 2s-2.1 0-2.635.272a2.5 2.5 0 0 0-1.093 1.093C2 3.9 2 4.6 2 6v12c0 1.4 0 2.1.272 2.635a2.5 2.5 0 0 0 1.093 1.092C3.9 22 4.6 22 6 22s2.1 0 2.635-.273a2.5 2.5 0 0 0 1.093-1.092C10 20.1 10 19.4 10 18" opacity=".4" class=""></path>
<path fill="currentColor" d="M10 8.243V18c0 .919 0 1.536-.077 2.003l3.299-3.299l5.838-6.09c.973-1.003 1.46-1.505 1.636-2.08a2.5 2.5 0 0 0-.011-1.503C20.5 6.458 20 5.958 19 4.959c-.9-.886-1.352-1.33-1.88-1.514a2.5 2.5 0 0 0-1.353-.085c-.547.118-1.049.502-2.053 1.27L13 5.243zm-1.997 13.68H8v.003z" opacity=".7" class=""></path>
<path fill="currentColor" d="M15.814 14H17.9c1.4 0 2.1 0 2.635.273a2.5 2.5 0 0 1 1.093 1.092C21.9 15.9 21.9 16.6 21.9 18s0 2.1-.272 2.635a2.5 2.5 0 0 1-1.093 1.092C20 22 19.3 22 17.9 22H6c.917 0 1.534 0 2-.077v.003l.003-.003c.245-.04.448-.102.632-.195a2.5 2.5 0 0 0 1.093-1.093c.093-.184.155-.387.195-.632l3.299-3.299z" class=""></path>
</svg>
</button>
<div class="aspect-square col-span-1 flex text-lg font-semibold text-white bg-neutral-950 border-neutral-950 border rounded-2xl shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)] items-center justify-center">
20
</div>
<button class="aspect-square rounded-2xl bg-neutral-50 border border-neutral-200 flex items-center justify-center text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 transition-all group">
<span class="iconify text-xl group-hover:scale-110 transition-transform" data-icon="solar:gloves-bold-duotone"></span>
</button>
<!-- Company SVG Logos (Monotone) -->
<div class="col-span-1 aspect-square rounded-2xl bg-neutral-50 border border-neutral-200 flex items-center justify-center p-3 opacity-70 hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" class="">
</path>
</svg>
</div>
<div class="col-span-1 aspect-square rounded-2xl bg-neutral-50 border border-neutral-200 flex items-center justify-center p-3 opacity-70 hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="m12 1.608l12 20.784H0Z" class=""></path>
</svg>
</div>
<div class="col-span-1 aspect-square rounded-2xl bg-neutral-50 border border-neutral-200 flex items-center justify-center p-3 opacity-70 hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" class="">
<path fill="currentColor" d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514c-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233l4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632" class="">
</path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</section>