Загрузка...
Адаптивный Hero-блок для AI SaaS: анимированный заголовок, форма захвата, логотипы, интерактивный 3D UI. Идеально для лендингов.
<div
class="flex flex-col lg:flex-row lg:items-center lg:gap-14 lg:px-6 lg:pb-24 lg:pt-24 max-w-6xl mr-auto ml-auto pt-16 pr-4 pb-24 pl-4 gap-x-10 gap-y-10">
<!-- Left column -->
<section class="lg:w-[55%] animate-on-scroll animate w-full relative gap-x-10 gap-y-10">
<!-- subtle accent -->
<div
class="inline-flex text-[11px] shadow-purple-500/30 [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] font-medium text-purple-100 bg-gradient-to-br from-white/10 to-white/0 rounded-full pt-1 pr-3 pb-1 pl-3 relative shadow-sm gap-x-0 gap-y-0 items-center">
<span class="mr-1.5 inline-flex h-1.5 w-1.5 rounded-full bg-emerald-400" style=""></span>
<span class="font-geist" style="">
Save 9+ hours per teammate each week
</span>
</div>
<h1
class="sm:text-5xl lg:text-[3.2rem] [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] text-4xl font-light text-slate-50 tracking-tighter font-geist mt-6">
The AI engine that
<span class="font-light tracking-tighter font-geist">powers</span>
your entire workflow
</h1>
<p class="lg:text-[15px] [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] text-sm text-slate-300/90 font-geist max-w-xl mt-4"
style="">
Neuro connects documents, tools and messages into one searchable
memory, turning scattered knowledge into answers, next steps and
ready‑to‑run automations.
</p>
<!-- Metrics -->
<!-- Email capture -->
<form class="[animation:fadeSlideIn_0.8s_ease-out_0.5s_both] max-w-none mt-7">
<div
class="flex shadow-slate-900/60 bg-gradient-to-br from-blue-500/10 via-blue-500/0 to-blue-500/10 rounded-3xl pt-1.5 pr-1.5 pb-1.5 pl-1.5 shadow-inner items-center"
style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); --border-radius-before: 24px">
<div class="flex items-center px-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail"
class="lucide lucide-mail h-3.5 w-3.5 text-slate-500" style="">
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path>
<rect x="2" y="4" width="20" height="16" rx="2" class=""></rect>
</svg>
</div>
<input type="email" placeholder="you@company.com" class="h-9 flex-1 bg-transparent text-xs font-normal text-slate-100 placeholder:text-slate-500 focus:outline-none" style="">
<button type="submit" class="inline-flex text-[12px] transition-all hover:brightness-110 hover:shadow-[0_0_40px_rgba(248,181,129,0.9),0_0_0_1px_rgba(251,191,36,0.7)] text-white font-geist bg-gradient-to-bl from-[#fff370] via-orange-500 to-[#fff370] h-9 rounded-full pr-6 pl-6 items-center" style="border-radius: 9999px; position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 9999px;">
Get Started Free
</button>
</div>
</form>
<!-- Logos -->
<div class="[animation:fadeSlideIn_0.8s_ease-out_0.6s_both] mt-12 space-y-2">
<p class="text-[10px] uppercase text-slate-500 font-geist" style="">
Teams already experimenting with NeuroDesk
</p>
<div class="flex flex-wrap text-[11px] text-slate-400 gap-x-6 gap-y-3 items-center" style="">
<span class="flex items-center space-x-1">
<svg xmlns="http://www.w3.org/2000/svg" width="92" height="36" viewBox="0 0 512 134" class="w-[92px] h-[36px]" fill="none" data-logos="adobe" data-icon-set="logos" data-icon-replaced="true" stroke-width="2" style="width: 92px; height: 36px; color: rgb(148, 163, 184)">
<path fill="#FA0F00" d="m221.02 88.874l-5.524 17.025c-.152.567-.68.952-1.266.921h-13.327c-.805 0-1.033-.46-.922-1.149l23.005-66.373a20.9 20.9 0 0 0 1.155-7.02a.766.766 0 0 1 .689-.804h18.408c.555 0 .805.116.922.688l26.098 73.626c.228.555.117 1.032-.555 1.032h-14.954a1.16 1.16 0 0 1-1.266-.805l-5.864-17.141zm4.138-14.377h18.18l-1.75-5.633c-2.411-7.66-5.621-17.629-7.34-24.047h-.117c-1.838 7.708-5.98 20.363-8.973 29.68m46.932 4.232c-.005-16.448 12.3-30.252 33.356-30.252c.917 0 2.072.116 3.799.227V26.043a.727.727 0 0 1 .587-.797l14.71-.008c.556 0 .695.227.695.688V93.91a65 65 0 0 0 .46 8.402c0 .444-.074.693-.456.89l-.348.142a57.8 57.8 0 0 1-22.662 4.604c-17.025 0-30.14-9.662-30.14-29.22m37.155-16.337a11.9 11.9 0 0 0-4.26-.555a15.35 15.35 0 0 0-16.465 15.007l.018 1.096c0 11.389 6.558 16.337 15.298 16.337a16.2 16.2 0 0 0 5.409-.689zm81.83 14.32l.041 1.206c0 18.063-11.733 30.024-28.32 30.024c-19.673 0-28.414-14.837-28.414-29.68a28.147 28.147 0 0 1 28.642-29.791c18.044 0 27.574 13.211 28.051 28.24m-40.473 1.306c0 10.123 4.715 16.564 12.422 16.564c6.664 0 11.733-5.753 11.733-16.337c0-8.973-3.681-16.447-12.421-16.447c-6.664 0-11.734 5.98-11.734 16.22m50.654-52.78l14.032-.006c.921 0 1.15.117 1.15.922v23.583a37 37 0 0 1 7.706-1.217l1.955-.049a26.326 26.326 0 0 1 27.63 25.998l-.021 1.383c0 21.512-17.025 32.096-34.506 32.096a60.2 60.2 0 0 1-18.063-2.643a1.36 1.36 0 0 1-.689-1.15v-78.11c0-.555.228-.805.806-.805m22.959 36.79l-.987.014a23.4 23.4 0 0 0-6.785.922v31.174c.93.215 1.876.356 2.828.42l1.43.04a15.83 15.83 0 0 0 16.66-17.252a13.516 13.516 0 0 0-13.146-15.317m51.97 20.371c.555 6.558 5.175 11.966 16.448 11.966c4.847.09 9.662-.811 14.148-2.648c.35-.228.694-.117.694.555V103.2c0 .805-.227 1.15-.805 1.383a38.65 38.65 0 0 1-15.79 3.374l-1.812-.043c-21.623 0-29.22-14.837-29.22-29.102c0-15.479 9.296-29.643 26.498-30.342l1.339-.027a23.455 23.455 0 0 1 24.272 24.85a37 37 0 0 1-.556 7.707a.994.994 0 0 1-.921.921q-4.433.42-8.884.47zm14.954-11.156a37.5 37.5 0 0 0 5.753-.227v-.806a9.357 9.357 0 0 0-9.779-9.09a10.9 10.9 0 0 0-11.045 10.123zM75.314 49.137l35.466 84.148H87.535l-10.611-26.798H50.97zM150.599 0v133.269L94.921 0zM55.701 0L0 133.269V0z" class=""></path>
</svg>
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="92" height="36" viewBox="0 0 512 106" class="w-[92px] h-[36px]"
fill="none" data-logos="appcircle" data-icon-set="logos" data-icon-replaced="true" stroke-width="2"
style="color: rgb(148, 163, 184); width: 92px; height: 36px">
<path fill="#FFF"
d="M162.217 44.594c0-5.405-3.621-8.428-10.453-8.428c-3.611 0-7.474 1.004-11.444 2.974a23 23 0 0 0-.487.25a2.86 2.86 0 0 1-3.862-1.188l-.004-.01l-1.93-3.672a2.844 2.844 0 0 1 1.201-3.842a60 60 0 0 1 1.583-.806c5.752-2.794 10.73-3.979 17.546-3.979c12.675 0 20.063 6.412 20.155 17.362l.083 28.786a2.853 2.853 0 0 1-2.85 2.856h-6.591a2.853 2.853 0 0 1-2.857-2.848v-2.254c-3.415 3.712-8.613 5.637-15.12 5.637c-10.29 0-17.193-6.28-17.193-15.22c0-9.184 6.88-14.685 18.629-14.775h13.594zm-11.71 9.42c-6.097 0-8.657 1.627-8.657 5.484c0 3.797 3.07 6.197 8.12 6.197c6.474 0 11.646-3.395 12.247-7.804v-3.876zm57.947-28.032c13.8 0 23.117 10.02 23.117 24.86c0 14.665-9.136 24.501-22.937 24.501c-6.813 0-12.276-2.553-15.928-7.341v21.36a2.853 2.853 0 0 1-2.857 2.848h-6.77a2.853 2.853 0 0 1-2.858-2.849V29.188a2.853 2.853 0 0 1 2.858-2.849h6.77a2.853 2.853 0 0 1 2.857 2.849V33.3c3.567-4.76 9.01-7.319 15.748-7.319m-2.603 38.552c7.665 0 13.056-5.789 13.056-14.05c0-8.184-5.402-13.96-13.056-13.96c-7.73 0-13.145 5.762-13.145 13.96c0 8.332 5.373 14.05 13.145 14.05m59.865-38.552c13.8 0 23.117 10.02 23.117 24.86c0 14.665-9.136 24.501-22.938 24.501c-6.813 0-12.276-2.553-15.928-7.341v21.36a2.853 2.853 0 0 1-2.857 2.848h-6.77a2.853 2.853 0 0 1-2.858-2.849V29.188a2.853 2.853 0 0 1 2.858-2.849h6.77a2.853 2.853 0 0 1 2.857 2.849V33.3c3.567-4.76 9.01-7.319 15.749-7.319m-2.603 38.552c7.665 0 13.055-5.789 13.055-14.05c0-8.184-5.402-13.96-13.055-13.96c-7.73 0-13.146 5.762-13.146 13.96c0 8.332 5.373 14.05 13.146 14.05m66.675-24.046c-2.858-2.303-6.414-3.518-10.54-3.518c-7.515 0-12.697 5.552-12.697 13.693c0 8.294 5.16 13.871 12.697 13.871c3.868 0 7.166-.92 9.742-2.721q.58-.407 1.388-1.194a2.864 2.864 0 0 1 3.818-.163l3.617 2.974a2.84 2.84 0 0 1 .386 4.01l-.05.058q-1.174 1.344-2.034 2.078c-4.415 3.765-10.405 5.767-17.496 5.767c-14.6 0-24.642-10.011-24.642-24.591c0-14.727 10.1-24.77 24.822-24.77c7.845 0 14.434 2.532 18.943 7.193a2.597 2.597 0 0 1-.067 3.68l-.017.017l-3.878 3.66a2.864 2.864 0 0 1-3.82.099q-.09-.078-.172-.143M352.193 6.26c3.903 0 6.691 2.856 6.691 6.832s-2.788 6.833-6.691 6.833s-6.691-2.857-6.691-6.833s2.788-6.832 6.69-6.832m-3.385 20.08h6.77a2.853 2.853 0 0 1 2.857 2.848v42.86a2.853 2.853 0 0 1-2.857 2.849h-6.77a2.853 2.853 0 0 1-2.858-2.848V29.188a2.853 2.853 0 0 1 2.858-2.849m41.814-.145q.34-.057.788-.105a2.855 2.855 0 0 1 3.169 2.831v6.172a2.853 2.853 0 0 1-2.785 2.848q-.602.015-1.01.054c-7.774.73-12.541 5.936-12.541 13.47V72.05a2.853 2.853 0 0 1-2.857 2.848h-6.77a2.853 2.853 0 0 1-2.858-2.848V29.188a2.853 2.853 0 0 1 2.857-2.849h6.77a2.853 2.853 0 0 1 2.858 2.849v5.2c2.79-4.52 7.009-7.312 12.379-8.193m41.44 14.468q-.985-.84-1.672-1.267c-2.564-1.595-5.59-2.426-9.003-2.426c-7.514 0-12.696 5.552-12.696 13.693c0 8.294 5.16 13.871 12.696 13.871c3.62 0 6.744-.806 9.242-2.388q.781-.495 1.885-1.556a2.864 2.864 0 0 1 3.804-.15l3.625 2.982a2.84 2.84 0 0 1 .386 4.01l-.057.067q-1.365 1.55-2.362 2.365c-4.382 3.58-10.245 5.48-17.15 5.48c-14.6 0-24.644-10.012-24.644-24.592c0-14.727 10.102-24.77 24.823-24.77c7.092 0 13.166 2.069 17.607 5.928q.497.432 1.155 1.12a2.84 2.84 0 0 1-.1 4.028l-.005.005l-3.712 3.503a2.864 2.864 0 0 1-3.822.097m16.886-32.797h6.77a2.853 2.853 0 0 1 2.858 2.849v61.334a2.853 2.853 0 0 1-2.858 2.848h-6.77a2.853 2.853 0 0 1-2.857-2.848V10.715a2.853 2.853 0 0 1 2.857-2.849M489.75 65.16c3.826 0 7.43-1.15 10.42-3.322q.244-.176.555-.433a2.864 2.864 0 0 1 3.88.222l2.919 3.026a2.84 2.84 0 0 1-.164 4.105q-1.693 1.496-2.866 2.252c-4.403 2.836-9.772 4.334-15.731 4.334c-15.041 0-25.092-9.915-25.092-24.591c0-14.695 10.16-24.77 24.822-24.77c15.326 0 23.414 9.003 23.507 24.938q.003.562-.022 1.402a2.853 2.853 0 0 1-2.856 2.763h-32.587c1.618 6.29 6.567 10.074 13.215 10.074m10.7-18.651c-.43-6.587-4.963-10.699-11.867-10.699c-6.507 0-11.16 4.07-12.354 10.699z"
class=""></path>
<path fill="#FF8F34"
d="M38.503 75.28q12.15 9.876 4.09 20.988c-6.622 8.92-18.88 12.16-29.255 7.142l-.087-.042l-.075-.037C1.512 97.64-3.311 83.608 2.404 71.991l12.934-26.295l7.268-14.775l8.735-17.758C35.585 4.533 44.438-.35 53.5.02c8.754-.033 17.18 4.81 21.289 13.162l28.936 58.828c5.715 11.617.892 25.649-10.772 31.34l-.075.037l-.087.042c-11.592 5.606-25.533.905-31.34-10.508q-4.515-9.458 6.022-17.854h-.002c5.283-4.251 8.662-10.757 8.662-18.048c0-12.807-10.423-23.188-23.28-23.188s-23.28 10.381-23.28 23.188c0 7.414 3.493 14.015 8.93 18.26m14.372-6.109c-6.756 0-12.233-5.454-12.233-12.183s5.477-12.184 12.233-12.184c6.755 0 12.232 5.455 12.232 12.184S59.63 69.17 52.875 69.17"
class=""></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="92" height="36" viewBox="0 0 512 168" class="w-[92px] h-[36px]"
fill="none" data-logos="google" data-icon-set="logos" data-icon-replaced="true" stroke-width="2"
style="color: rgb(148, 163, 184); width: 92px; height: 36px">
<path fill="#FF302F"
d="m496.052 102.672l14.204 9.469c-4.61 6.79-15.636 18.44-34.699 18.44c-23.672 0-41.301-18.315-41.301-41.614c0-24.793 17.816-41.613 39.308-41.613c21.616 0 32.206 17.193 35.633 26.475l1.869 4.735l-55.692 23.049c4.236 8.348 10.84 12.584 20.183 12.584c9.345 0 15.823-4.61 20.495-11.525M452.384 87.66l37.19-15.45c-2.056-5.17-8.16-8.845-15.45-8.845c-9.281 0-22.176 8.223-21.74 24.295"
class=""></path>
<path fill="#20B15A" d="M407.407 4.931h17.94v121.85h-17.94z" class=""></path>
<path fill="#3686F7"
d="M379.125 50.593h17.318V124.6c0 30.711-18.128 43.357-39.558 43.357c-20.183 0-32.33-13.58-36.878-24.606l15.885-6.604c2.865 6.79 9.78 14.827 20.993 14.827c13.767 0 22.24-8.535 22.24-24.482v-5.98h-.623c-4.112 4.983-11.961 9.468-21.928 9.468c-20.807 0-39.87-18.128-39.87-41.488c0-23.486 19.063-41.8 39.87-41.8c9.905 0 17.816 4.423 21.928 9.282h.623zm1.245 38.499c0-14.702-9.78-25.417-22.239-25.417c-12.584 0-23.174 10.715-23.174 25.417c0 14.514 10.59 25.042 23.174 25.042c12.46.063 22.24-10.528 22.24-25.042"
class=""></path>
<path fill="#FF302F"
d="M218.216 88.78c0 23.984-18.688 41.613-41.613 41.613c-22.924 0-41.613-17.691-41.613-41.613c0-24.108 18.689-41.675 41.613-41.675c22.925 0 41.613 17.567 41.613 41.675m-18.19 0c0-14.95-10.84-25.23-23.423-25.23S153.18 73.83 153.18 88.78c0 14.826 10.84 25.23 23.423 25.23c12.584 0 23.423-10.404 23.423-25.23"
class=""></path>
<path fill="#FFBA40"
d="M309.105 88.967c0 23.984-18.689 41.613-41.613 41.613c-22.925 0-41.613-17.63-41.613-41.613c0-24.108 18.688-41.613 41.613-41.613c22.924 0 41.613 17.443 41.613 41.613m-18.253 0c0-14.95-10.839-25.23-23.423-25.23s-23.423 10.28-23.423 25.23c0 14.826 10.84 25.23 23.423 25.23c12.646 0 23.423-10.466 23.423-25.23"
class=""></path>
<path fill="#3686F7"
d="M66.59 112.328c-26.102 0-46.534-21.056-46.534-47.158c0-26.101 20.432-47.157 46.534-47.157c14.079 0 24.357 5.544 31.957 12.646l12.522-12.521C100.479 7.984 86.338.258 66.59.258C30.833.259.744 29.414.744 65.17s30.089 64.912 65.846 64.912c19.312 0 33.889-6.354 45.289-18.19c11.711-11.712 15.324-28.158 15.324-41.489c0-4.174-.498-8.472-1.059-11.649H66.59v17.318h42.423c-1.246 10.84-4.672 18.253-9.718 23.298c-6.105 6.168-15.76 12.958-32.705 12.958"
class=""></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="92" height="36" viewBox="0 0 512 121" class="w-[92px] h-[36px]"
fill="none" data-logos="descript" data-icon-set="logos" data-icon-replaced="true" stroke-width="2"
style="width: 92px; height: 36px; color: rgb(148, 163, 184);">
<path fill="#0062FF"
d="M0 109.614c0 6.585 4.273 10.856 10.86 10.856h31.732c18.93 0 34.415-6.402 44.943-17.61H0zM42.592.001L10.861 0C4.273 0 0 4.271 0 10.856v6.754h87.535C77.007 6.402 61.522 0 42.592 0m27.693 77.4c0 5.327 3.472 8.783 8.824 8.783h19.014c2.156-5.346 3.604-11.224 4.277-17.567H79.11c-5.353 0-8.825 3.456-8.825 8.784M43.93 43.113c0 5.328 3.471 8.784 8.824 8.784H102.4c-.673-6.343-2.121-12.22-4.277-17.567h-45.37c-5.352 0-8.823 3.455-8.823 8.783m8.818 34.288c0-5.328-3.472-8.784-8.824-8.784H0v17.567h43.924c5.352 0 8.824-3.455 8.824-8.783M26.393 43.113c0-5.328-3.472-8.783-8.825-8.783H0v17.567h17.568c5.353 0 8.825-3.456 8.825-8.784M171.67 78.306c-9.404 0-15.058-6.743-15.058-15.06s5.762-15.058 15.059-15.058c9.296 0 15.058 6.742 15.058 15.059s-5.653 15.059-15.058 15.059M185.706 44.1c-3.756-4.51-9.088-7.276-15.707-7.276c-14.794 0-25.433 11.983-25.433 26.764c0 14.782 10.538 26.764 25.433 26.764c6.62 0 11.951-2.765 15.707-7.276v5.958h13.071V18.07h-13.071zm37.6 14.32c1.415-6.874 5.982-10.37 11.985-10.37c5.952 0 10.304 3.652 11.692 10.37zm12.312-22.28c-15.286 0-24.793 12.239-24.793 27.209c0 15.504 10.16 27.003 25.259 27.003c10.414 0 16.73-4.826 20.64-10.903l-9.72-6.224c-2.445 3.346-6.355 5.114-10.547 5.114c-6.857 0-11.449-3.217-13.014-9.651h25.659l9.347.08c.355-1.693.564-3.442.564-5.42c0-13.039-8.016-27.208-23.395-27.208m63.37 26.217c3.548 2.479 5.797 6.196 5.797 11.102c0 9.914-6.682 16.792-19.176 16.792c-11.757 0-18.062-6.024-20.573-12.109l10.792-6.302l.104.364c.448 1.38 2.511 6.212 9.484 6.212c5.036 0 6.586-2.226 6.586-4.192l-.032-.47c-.136-.95-.81-2.334-3.842-3.533l-1.472-.534c-7.463-2.523-19.641-4.423-19.641-16.561c0-10.622 8.325-16.286 18.594-16.286c9.603 0 15.771 5.974 18.113 10.623l-10.558 6.169l-.224-.476c-.658-1.278-2.827-4.684-7.234-4.684c-5.423 0-5.907 3.137-5.907 4.047c0 2.478 2.358 3.593 7.4 5.127l3.723 1.106c2.184.668 4.41 1.456 6.697 2.753zm36.856 15.148c5.185 0 9.171-2.583 11.186-6.82l10.83 6.485c-4.244 7.774-12.15 13.182-22.016 13.182c-14.962 0-25.422-11.957-25.422-26.705c0-14.75 10.556-26.706 25.422-26.706c9.72 0 17.598 5.32 21.887 12.99l-10.806 6.634c-2.054-4.182-6.008-6.777-11.08-6.777c-7.56 0-12.93 6.204-12.93 13.859c0 7.653 5.32 13.858 12.93 13.858m43.73-30.751c2.342-6.09 7.113-9.573 14.3-9.588v14.472c-8.102-.818-14.041 3.288-14.289 13.003l-.012 1.17v22.611h-12.137v-50.25h12.137zm22.618 41.668V38.171h12.137v50.252zm0-56.958V18.07h12.537v13.394zm50.053 5.199c13.736 0 23.615 11.88 23.615 26.533s-9.785 26.533-23.615 26.533c-6.145 0-11.096-2.741-14.583-7.213v25.907h-12.138V38.07h12.138v5.805c3.487-4.471 8.438-7.212 14.583-7.212m-1.553 12.362c-8.044 0-13.03 6.344-13.03 14.17c0 7.827 4.892 14.172 13.03 14.172c8.139 0 13.031-6.345 13.031-14.171c0-7.827-4.987-14.171-13.03-14.171M512 50.8h-10.944v21.04c0 6.577 6.392 5.16 10.944 5.16v11.836l-1.205.152c-1.104.115-2.938.252-5.38.252l-1.776-.038c-8.465-.376-15.076-3.734-15.076-17.361V50.8h-8.426V38.255h8.426V24.094h12.493v14.162H512z"
class=""></path>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="92" height="36" viewBox="0 0 512 160"
class="w-[92px] h-[36px]" fill="none" data-logos="replay" data-icon-set="logos" data-icon-replaced="true"
stroke-width="2" style="color: rgb(148, 163, 184); width: 92px; height: 36px">
<path fill="#F41C52"
d="M63.397 31.206L11.173.999A7.443 7.443 0 0 0 1 3.73a7.47 7.47 0 0 0-1 3.73v60.414a7.47 7.47 0 0 0 3.725 6.462a7.44 7.44 0 0 0 7.448.001l52.224-30.206a7.46 7.46 0 0 0 3.725-6.463a7.47 7.47 0 0 0-3.725-6.463m0 84.127L11.173 85.127A7.44 7.44 0 0 0 1 87.859a7.47 7.47 0 0 0-1 3.731v60.414a7.47 7.47 0 0 0 3.725 6.462a7.44 7.44 0 0 0 7.448.001l52.224-30.207a7.473 7.473 0 0 0 0-12.926m74.47-42.055L85.645 43.07a7.44 7.44 0 0 0-10.174 2.733a7.47 7.47 0 0 0-.999 3.73v60.413a7.47 7.47 0 0 0 3.725 6.462a7.44 7.44 0 0 0 7.448.002l52.224-30.207a7.46 7.46 0 0 0 3.725-6.463a7.46 7.46 0 0 0-3.725-6.463m70.323 32.573V33.197h24.55q8.514 0 13.977 2.91q5.463 2.873 8.089 7.91q2.625 5.038 2.625 11.46q0 6.42-2.625 11.387q-2.626 4.966-8.053 7.805q-5.428 2.802-13.872 2.802h-19.866v-7.946H232.6q5.817 0 9.365-1.703q3.583-1.702 5.18-4.825q1.632-3.158 1.632-7.52q0-4.364-1.632-7.628t-5.215-5.038q-3.583-1.809-9.472-1.809H216.99v64.85zm34.2-32.637l17.88 32.638h-10.218l-17.596-32.638zm50.828 33.773q-7.875 0-13.588-3.476q-5.676-3.513-8.763-9.792q-3.05-6.314-3.05-14.687q0-8.371 3.05-14.758q3.087-6.42 8.586-10.004q5.534-3.618 12.913-3.619q4.257 0 8.408 1.42q4.15 1.418 7.556 4.611q3.405 3.158 5.428 8.373q2.022 5.215 2.022 12.842v3.547H273.78v-7.236h33.489q0-4.612-1.845-8.23q-1.808-3.62-5.18-5.713q-3.334-2.092-7.875-2.092q-5.002 0-8.656 2.483a16.34 16.34 0 0 0-5.57 6.385q-1.95 3.939-1.951 8.444v4.824q0 6.173 2.128 10.466q2.165 4.257 5.996 6.492q3.83 2.2 8.905 2.2q3.298 0 5.96-.923q2.696-.958 4.647-2.838q1.95-1.916 3.015-4.754l8.089 2.27a17.9 17.9 0 0 1-4.293 7.238q-3.015 3.086-7.45 4.824q-4.435 1.704-9.968 1.703m35.298 19.3V51.36h8.088v8.656h.994l.327-.495q.867-1.29 2.227-3.123q1.668-2.235 4.754-3.974q3.122-1.773 8.443-1.774q6.883 0 12.133 3.442q5.25 3.441 8.195 9.756q2.944 6.315 2.944 14.9q.001 8.655-2.944 15.006q-2.945 6.315-8.16 9.791q-5.214 3.441-12.026 3.441q-5.25 0-8.408-1.738q-3.157-1.774-4.86-4.009q-1.702-2.27-2.625-3.76h-.71v28.806zm8.23-47.68q0 6.172 1.81 10.89q1.809 4.684 5.286 7.344q3.477 2.625 8.514 2.625q5.25 0 8.763-2.767q3.546-2.802 5.32-7.52q1.81-4.755 1.81-10.573q0-5.746-1.774-10.359q-1.737-4.646-5.286-7.343q-3.511-2.731-8.833-2.731q-5.108 0-8.585 2.59q-3.477 2.553-5.25 7.165q-1.775 4.576-1.775 10.678m61.02-45.41v72.655h-8.373V33.196zm31.369 73.932q-5.18 0-9.401-1.95q-4.222-1.989-6.705-5.713q-2.484-3.76-2.484-9.081q0-4.684 1.845-7.592a13 13 0 0 1 4.931-4.612q3.087-1.668 6.812-2.484a83 83 0 0 1 7.556-1.347l3.272-.412q2.784-.34 4.781-.546q3.123-.355 4.541-1.171q1.454-.816 1.454-2.838v-.284q0-5.25-2.873-8.16q-2.838-2.908-8.62-2.908q-5.996 0-9.402 2.625t-4.789 5.605l-7.947-2.838q2.13-4.966 5.677-7.734q3.582-2.803 7.804-3.902q4.257-1.136 8.373-1.136q2.625 0 6.03.639q3.442.603 6.634 2.52q3.229 1.915 5.358 5.781q2.127 3.868 2.128 10.36v35.9h-8.373v-7.378h-.425q-.852 1.774-2.838 3.796t-5.286 3.441t-8.053 1.42m1.277-7.52q4.967 0 8.372-1.952q3.44-1.95 5.18-5.037q1.773-3.087 1.773-6.493v-7.662q-.532.638-2.34 1.17q-1.774.497-4.116.887q-2.307.355-4.505.639l-2.63.313l-.883.112q-3.264.427-6.101 1.384q-2.803.923-4.541 2.803q-1.703 1.845-1.703 5.037q0 4.364 3.228 6.599q3.264 2.2 8.266 2.2m42.42 26.677q-1.862 0-3.371-.271l-.424-.083q-1.668-.32-2.306-.639l2.128-7.379q3.051.78 5.392.568t4.151-2.093q1.846-1.845 3.37-5.996l1.562-4.257l-20.151-54.775h9.082l15.042 43.422h.568l15.041-43.422H512l-23.13 62.438q-1.56 4.222-3.867 6.988q-2.306 2.803-5.357 4.152q-3.015 1.347-6.811 1.347"
class=""></path>
</svg>
</div>
</div>
</section>
<!-- Right column: App preview -->
<section
class="lg:w-[45%] group animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.7s_both] w-full relative animate"
style="perspective: 1200px"
onmousemove="const c=this.querySelector('.tilt-card');const r=this.getBoundingClientRect();const x=event.clientX-r.left;const y=event.clientY-r.top;const cx=r.width/2;const cy=r.height/2;const rx=((y-cy)/cy)*5;const ry=((x-cx)/cx)*5;c.style.transform='rotateX('+rx+'deg) rotateY('+ry+'deg)'"
onmouseleave="this.querySelector('.tilt-card').style.transform='rotateX(0) rotateY(0)'">
<div class="tilt-card transition-transform duration-300 ease-out will-change-transform w-full h-full relative"
style="transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg);">
<div
class="pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-[32px] absolute -inset-4 bg-gradient-to-r from-purple-700/20 via-slate-800/20 to-neutral-700/20 blur-2xl"
style="transform: translateZ(-15px);"></div>
<div
class="font-jakarta bg-gradient-to-br from-slate-900 to-slate-900/70 border-white/10 border rounded-[28px] pt-4 pr-4 pb-4 pl-4 relative shadow-[0_0_0_1px_rgba(15,23,42,0.7),0_40px_120px_rgba(0,0,0,0.95)] backdrop-blur-xl"
style="transform: translateZ(10px); transform-style: preserve-3d">
<div
class="absolute inset-0 rounded-[28px] opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none z-20"
style="padding: 1px; background: linear-gradient(135deg, rgba(251, 146, 60, 0.5), rgba(251, 146, 60, 0)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;">
</div>
<div
class="h-px bg-gradient-to-r from-transparent via-amber-400/70 to-transparent absolute top-0 right-6 left-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-20">
</div>
<div
class="absolute inset-0 rounded-[28px] bg-gradient-to-br from-white/10 via-white/0 to-transparent pointer-events-none">
</div>
<div
class="flex z-10 bg-gradient-to-b from-slate-900/90 to-slate-950/95 border-white/10 border rounded-2xl pt-3 pr-4 pb-3 pl-4 relative items-center justify-between">
<div class="flex space-x-3 items-center">
<div class="flex flex-col">
<span class="text-[13px] text-slate-50 font-geist" style="">
Neuro workspace
</span>
<span class="text-[10px] text-slate-500 font-geist" style="">
AI hub · Delivery squad
</span>
</div>
</div>
<div class="flex text-[11px] text-slate-300 space-x-2 items-center">
<button class="inline-flex items-center rounded-lg border border-white/10 bg-slate-900/80 px-2.5 py-1 text-[10px] text-slate-100 shadow-[0_0_0_1px_rgba(15,23,42,0.9)] font-geist hover:bg-slate-800 transition-colors" style="">
<span class="mr-1" style="">+</span>
Add shortcut
</button>
<button class="inline-flex items-center rounded-lg border border-white/10 bg-slate-900/80 px-2.5 py-1 text-[10px] text-slate-100 shadow-[0_0_0_1px_rgba(15,23,42,0.9)] font-geist hover:bg-slate-800 transition-colors" style="">
Share with team
</button>
<button class="inline-flex bg-slate-900/80 w-7 h-7 border-white/10 border rounded-lg shadow-[0_0_0_1px_rgba(15,23,42,0.9)] items-center justify-center hover:bg-slate-800 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
<circle cx="12" cy="12" r="1" class=""></circle>
<circle cx="19" cy="12" r="1" class=""></circle>
<circle cx="5" cy="12" r="1" class=""></circle>
</svg>
</button>
</div>
</div>
<div
class="flex z-10 bg-slate-950/50 border-white/10 border rounded-2xl mt-3 pt-2 pr-3 pb-2 pl-3 relative shadow-inner items-center justify-between">
<div class="flex items-center space-x-1 text-[11px] text-slate-400">
<button class="rounded-lg px-3 py-1 text-slate-300 hover:bg-slate-900/60 font-geist transition-colors" style="">
Overview
<span class="ml-1 rounded-full bg-slate-800 px-1.5 py-0.5 text-[9px] text-slate-200 shadow-sm" style="">
6
</span>
</button>
<button class="rounded-lg bg-gradient-to-b from-slate-800 to-slate-900 px-3 py-1 text-slate-50 shadow-[0_0_0_1px_rgba(2(0,0,0,0.2)] font-geist" style="">
Neuro resources
<span class="ml-1 rounded-full bg-slate-700 px-1.5 py-0.5 text-[9px] text-slate-200" style="">
9
</span>
</button>
<button class="rounded-lg px-3 py-1 text-slate-300 hover:bg-slate-900/60 font-geist transition-colors" style="">
Discussions
<span class="ml-1 rounded-full bg-slate-800 px-1.5 py-0.5 text-[9px] text-slate-200 shadow-sm" style="">
2
</span>
</button>
<button class="rounded-lg px-3 py-1 text-slate-300 hover:bg-slate-900/60 font-geist transition-colors" style="">
Notes
</button>
</div>
</div>
<div
class="mt-4 space-y-4 rounded-2xl border border-white/10 bg-gradient-to-b from-slate-950 via-slate-950/95 to-slate-950/90 p-3 shadow-inner relative z-10">
<div class="space-y-2.5">
<div class="flex items-center justify-between text-[11px]">
<div class="flex items-center space-x-1.5 text-slate-200">
<span class="text-slate-100 font-geist" style="">
Neuro suggestions
</span>
</div>
<button class="text-[10px] text-slate-500 hover:text-slate-300 font-geist transition-colors" style="">
View all suggestions
</button>
</div>
<div class="space-y-2">
<div
class="flex items-center justify-between rounded-xl border border-white/5 bg-slate-900/50 px-3 py-2 hover:bg-slate-800/50 transition-colors">
<div class="flex items-center space-x-2.5">
<div
class="flex text-slate-50 bg-slate-950 w-8 h-8 border border-white/10 rounded-lg shadow-sm items-center justify-center">
<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="w-4 h-4 text-purple-400">
<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" class=""></path>
</svg>
</div>
<div class="flex flex-col">
<span class="text-[11px] text-slate-100 font-geist" style="">
Onboarding playbook
</span>
<div class="flex items-center space-x-2 text-[10px] text-slate-500">
<span class="font-geist" style="">
4 docs
</span>
<span class="font-geist" style="">•</span>
<span class="font-geist" style="">
Notion
</span>
</div>
</div>
</div>
<div class="flex items-center space-x-1.5">
<div class="flex -space-x-1.5">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/dc6dc108-07ea-4b25-98fb-c8196765a394_320w.webp" class="h-5 w-5 rounded-full border border-slate-900 object-cover" alt="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3e54e567-5c30-441a-baee-ee5f1bd4e184_320w.webp" class="h-5 w-5 rounded-full border border-slate-900 object-cover" alt="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/32bd1b67-735b-4792-bd12-9726c91248d8_320w.webp" class="h-5 w-5 rounded-full border border-slate-900 object-cover" alt="">
</div>
</div>
</div>
<div
class="flex items-center justify-between rounded-xl border border-white/5 bg-slate-900/50 px-3 py-2 hover:bg-slate-800/50 transition-colors">
<div class="flex items-center space-x-2.5">
<div
class="flex text-slate-50 bg-slate-950 w-8 h-8 border border-white/10 rounded-lg shadow-sm items-center justify-center">
<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="w-4 h-4 text-orange-400">
<path
d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
class="">
</path>
<path d="M12 10v6" class=""></path>
<path d="M9 13h6" class=""></path>
</svg>
</div>
<div class="flex flex-col">
<span class="text-[11px] text-slate-100 font-geist" style="">
Neuro overview deck
</span>
<div class="flex items-center space-x-2 text-[10px] text-slate-500">
<span class="font-geist" style="">
PowerPoint
</span>
</div>
</div>
</div>
<div class="flex items-center space-x-1.5">
<div class="flex -space-x-1.5">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/da6db32c-0d2f-48d3-8267-62eda009f312_320w.webp" class="h-5 w-5 rounded-full border border-slate-900 object-cover" alt="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1798060b-f297-4981-a4f3-745854800fb8_320w.jpg" class="h-5 w-5 rounded-full border border-slate-900 object-cover" alt="">
</div>
</div>
</div>
<div
class="flex items-center justify-between rounded-xl border border-white/5 bg-slate-900/50 px-3 py-2 hover:bg-slate-800/50 transition-colors">
<div class="flex items-center space-x-2.5">
<div
class="flex text-slate-50 bg-slate-950 w-8 h-8 border border-white/10 rounded-lg shadow-sm items-center justify-center">
<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="w-4 h-4 text-emerald-400">
<rect width="18" height="18" x="3" y="4" rx="2" ry="2" class=""></rect>
<line x1="16" x2="16" y1="2" y2="6" class=""></line>
<line x1="8" x2="8" y1="2" y2="6" class=""></line>
<line x1="3" x2="21" y1="10" y2="10" class=""></line>
</svg>
</div>
<div class="flex flex-col">
<span class="text-[11px] text-slate-100 font-geist" style="">
Launch schedule
</span>
<div class="flex items-center space-x-2 text-[10px] text-slate-500">
<span class="font-geist" style="">
16 tasks
</span>
<span class="font-geist" style="">•</span>
<span class="font-geist" style="">
Google Sheets
</span>
</div>
</div>
</div>
<div class="flex items-center space-x-1.5">
<div class="flex -space-x-1.5">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/90ec73f0-6fd3-4d0c-922c-fcc592c983df_320w.webp" class="h-5 w-5 rounded-full border border-slate-900 object-cover" alt="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f5fb2db0-6611-418c-8354-c7ffd5959c6d_320w.webp" class="h-5 w-5 rounded-full border border-slate-900 object-cover" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="space-y-2.5">
<div class="flex items-center justify-between text-[11px]">
<div class="flex items-center space-x-1.5 text-slate-200">
<span class="text-slate-100 font-geist" style="">
Team work in progress
</span>
</div>
<button class="text-[10px] text-slate-500 hover:text-slate-300 font-geist transition-colors" style="">
View all work
</button>
</div>
<div class="space-y-2">
<div
class="flex items-center justify-between rounded-xl border border-white/5 bg-slate-900/50 px-3 py-2 hover:bg-slate-800/50 transition-colors">
<div class="flex items-center space-x-2.5">
<div
class="flex text-slate-50 bg-slate-950 w-8 h-8 border border-white/10 rounded-lg shadow-sm items-center justify-center">
<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="w-4 h-4 text-purple-400">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" class=""></path>
<polyline points="14 2 14 8 20 8" class=""></polyline>
<line x1="16" x2="8" y1="13" y2="13" class=""></line>
<line x1="16" x2="8" y1="17" y2="17" class=""></line>
<polyline points="10 9 9 9 8 9" class=""></polyline>
</svg>
</div>
<div class="flex flex-col">
<span class="text-[11px] text-slate-100 font-geist" style="">
Customer feedback – June
</span>
<div class="flex items-center space-x-2 text-[10px] text-slate-500">
<span class="font-geist" style="">
4 threads
</span>
<span class="font-geist" style="">•</span>
<span class="font-geist" style="">
Docs
</span>
</div>
</div>
</div>
<div class="flex items-center space-x-1.5">
<div class="flex -space-x-1.5">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/dd2478f4-b046-42e8-ada4-3dfb61175c5c_320w.webp" class="h-5 w-5 rounded-full border border-slate-900 object-cover" alt="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="h-5 w-5 rounded-full border border-slate-900 object-cover" alt="">
</div>
</div>
</div>
<div
class="flex items-center justify-between rounded-xl border border-white/5 bg-slate-900/50 px-3 py-2 hover:bg-slate-800/50 transition-colors">
<div class="flex items-center space-x-2.5">
<div
class="flex text-slate-50 bg-slate-950 w-8 h-8 border border-white/10 rounded-lg shadow-sm items-center justify-center">
<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="w-4 h-4 text-sky-500">
<rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</div>
<div class="flex flex-col">
<span class="text-[11px] text-slate-100 font-geist" style="">
Release checklist
</span>
<div class="flex items-center space-x-2 text-[10px] text-slate-500">
<span class="font-geist" style="">
19 items
</span>
<span class="font-geist" style="">•</span>
<span class="font-geist" style="">
Sheets
</span>
</div>
</div>
</div>
<div class="flex items-center space-x-1.5">
<div class="flex -space-x-1.5">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="h-5 w-5 rounded-full border border-slate-900 object-cover" alt="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/985c6eb9-fe04-40ea-a141-ee053f273a3c_320w.webp" class="h-5 w-5 rounded-full border border-slate-900 object-cover" alt="">
</div>
</div>
</div>
</div>
</div>
<div
class="flex items-center justify-between rounded-2xl border border-white/10 bg-slate-950/95 px-3 py-2 text-[10px] text-slate-400 shadow-lg">
<div class="flex items-center space-x-1.5">
<span class="text-slate-200 font-geist" style="">
Neuro links
</span>
<span class="h-1 w-4 rounded-full bg-slate-700/70"></span>
<span class="font-geist" style="">
Docs, sheets, tickets
</span>
</div>
<div class="flex items-center space-x-1.5">
<span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-slate-900 shadow-[0_0_0_1px_rgba(15,23,42,0.9)]">
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
</span>
<span class="font-geist" style="">
Instant sync on
</span>
</div>
</div>
</div>
</div>
</div>
</section>
</div>