Загрузка...
Hero-секция для AI-консалтинга: заголовок, CTA, отзывы, логотипы и карусель карточек с примерами использования AI. Адаптивный дизайн.
<section class="grid lg:grid-cols-12 min-h-[600px] m-8 max-w-5xl my-20 mx-auto">
<!-- Left Content -->
<div class="lg:col-span-7 lg:px-12 flex flex-col z-10 pt-12 pr-6 pb-12 pl-6 relative justify-center">
<h1 class="text-6xl lg:text-8xl tracking-tighter leading-[0.95] mb-8 text-neutral-900">
<span class="font-light block">Neural</span>
<span class="font-serif-custom italic font-medium block ml-2">Intelligence</span>
</h1>
<p class="text-lg text-neutral-500 max-w-xl leading-relaxed mb-10 font-normal">
AI consulting redefined with next-gen neural networks. We craft tailored algorithms to supercharge your digital
transformation and automate complex workflows.
</p>
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-8 mb-16">
<button class="group shadow-orange-500/30 hover:shadow-orange-500/60 transition-all duration-300 overflow-hidden hover:bg-orange-600 font-medium text-white bg-orange-500 rounded-lg pt-4 pr-8 pb-4 pl-8 relative shadow-lg" style="box-shadow:0 18px 40px -15px rgba(234,88,12,0.85), inset 0 2px 4px rgba(255,247,237,0.9); border-radius:0.5rem; position: relative; --border-gradient: linear-gradient(180deg, rgba(251, 146, 60, 0.4), rgba(234, 88, 12, 0.5)); --border-radius-before: 8px">
<div class="group-hover:tranneutral-y-0 group-hover:opacity-0 transition-all duration-300 bg-white/10 absolute top-0 right-0 bottom-0 left-0 tranneutral-y-full"></div>
<span class="flex items-center gap-2 relative">Sign up free <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="width: 16px; height: 16px; color: rgb(255, 255, 255)" class="lucide lucide-send group-hover:tranneutral-x-0.5 group-hover:-tranneutral-y-0.5 transition-transform duration-300 w-[16px] h-[16px]" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" data-solar="arrow-right-up-outline" data-icon-set="solar" data-icon-replaced="true" stroke-width="0.5"><path fill="#ffffff" fill-rule="evenodd" d="M9 6.75a.75.75 0 0 1 0-1.5h9a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0V7.81L6.53 18.53a.75.75 0 0 1-1.06-1.06L16.19 6.75z" clip-rule="evenodd" class=""></path></svg></span>
</button>
<div class="flex items-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=33" alt="User" class="w-10 h-10 rounded-full border-2 border-white">
<img src="https://i.pravatar.cc/100?img=47" alt="User" class="w-10 h-10 rounded-full border-2 border-white">
<img src="https://i.pravatar.cc/100?img=12" alt="User" class="w-10 h-10 rounded-full border-2 border-white">
</div>
<div class="text-xs font-medium text-neutral-600">
<div class="flex items-center text-orange-500 mb-0.5">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14"
viewBox="0 0 24 24" data-icon="solar:star-bold" data-width="14" class="">
<path fill="currentColor"
d="M9.153 5.408C10.42 3.136 11.053 2 12 2s1.58 1.136 2.847 3.408l.328.588c.36.646.54.969.82 1.182s.63.292 1.33.45l.636.144c2.46.557 3.689.835 3.982 1.776c.292.94-.546 1.921-2.223 3.882l-.434.507c-.476.557-.715.836-.822 1.18c-.107.345-.071.717.001 1.46l.066.677c.253 2.617.38 3.925-.386 4.506s-1.918.051-4.22-1.009l-.597-.274c-.654-.302-.981-.452-1.328-.452s-.674.15-1.328.452l-.596.274c-2.303 1.06-3.455 1.59-4.22 1.01c-.767-.582-.64-1.89-.387-4.507l.066-.676c.072-.744.108-1.116 0-1.46c-.106-.345-.345-.624-.821-1.18l-.434-.508c-1.677-1.96-2.515-2.941-2.223-3.882S3.58 8.328 6.04 7.772l.636-.144c.699-.158 1.048-.237 1.329-.45s.46-.536.82-1.182z"
class="">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14"
viewBox="0 0 24 24" data-icon="solar:star-bold" data-width="14" class="">
<path fill="currentColor"
d="M9.153 5.408C10.42 3.136 11.053 2 12 2s1.58 1.136 2.847 3.408l.328.588c.36.646.54.969.82 1.182s.63.292 1.33.45l.636.144c2.46.557 3.689.835 3.982 1.776c.292.94-.546 1.921-2.223 3.882l-.434.507c-.476.557-.715.836-.822 1.18c-.107.345-.071.717.001 1.46l.066.677c.253 2.617.38 3.925-.386 4.506s-1.918.051-4.22-1.009l-.597-.274c-.654-.302-.981-.452-1.328-.452s-.674.15-1.328.452l-.596.274c-2.303 1.06-3.455 1.59-4.22 1.01c-.767-.582-.64-1.89-.387-4.507l.066-.676c.072-.744.108-1.116 0-1.46c-.106-.345-.345-.624-.821-1.18l-.434-.508c-1.677-1.96-2.515-2.941-2.223-3.882S3.58 8.328 6.04 7.772l.636-.144c.699-.158 1.048-.237 1.329-.45s.46-.536.82-1.182z"
class="">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14"
viewBox="0 0 24 24" data-icon="solar:star-bold" data-width="14" class="">
<path fill="currentColor"
d="M9.153 5.408C10.42 3.136 11.053 2 12 2s1.58 1.136 2.847 3.408l.328.588c.36.646.54.969.82 1.182s.63.292 1.33.45l.636.144c2.46.557 3.689.835 3.982 1.776c.292.94-.546 1.921-2.223 3.882l-.434.507c-.476.557-.715.836-.822 1.18c-.107.345-.071.717.001 1.46l.066.677c.253 2.617.38 3.925-.386 4.506s-1.918.051-4.22-1.009l-.597-.274c-.654-.302-.981-.452-1.328-.452s-.674.15-1.328.452l-.596.274c-2.303 1.06-3.455 1.59-4.22 1.01c-.767-.582-.64-1.89-.387-4.507l.066-.676c.072-.744.108-1.116 0-1.46c-.106-.345-.345-.624-.821-1.18l-.434-.508c-1.677-1.96-2.515-2.941-2.223-3.882S3.58 8.328 6.04 7.772l.636-.144c.699-.158 1.048-.237 1.329-.45s.46-.536.82-1.182z"
class="">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14"
viewBox="0 0 24 24" data-icon="solar:star-bold" data-width="14" class="">
<path fill="currentColor"
d="M9.153 5.408C10.42 3.136 11.053 2 12 2s1.58 1.136 2.847 3.408l.328.588c.36.646.54.969.82 1.182s.63.292 1.33.45l.636.144c2.46.557 3.689.835 3.982 1.776c.292.94-.546 1.921-2.223 3.882l-.434.507c-.476.557-.715.836-.822 1.18c-.107.345-.071.717.001 1.46l.066.677c.253 2.617.38 3.925-.386 4.506s-1.918.051-4.22-1.009l-.597-.274c-.654-.302-.981-.452-1.328-.452s-.674.15-1.328.452l-.596.274c-2.303 1.06-3.455 1.59-4.22 1.01c-.767-.582-.64-1.89-.387-4.507l.066-.676c.072-.744.108-1.116 0-1.46c-.106-.345-.345-.624-.821-1.18l-.434-.508c-1.677-1.96-2.515-2.941-2.223-3.882S3.58 8.328 6.04 7.772l.636-.144c.699-.158 1.048-.237 1.329-.45s.46-.536.82-1.182z"
class="">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14"
viewBox="0 0 24 24" data-icon="solar:star-bold-duotone" data-width="14" class="">
<path fill="currentColor"
d="M18.483 16.767A8.5 8.5 0 0 1 8.118 7.081a1 1 0 0 1-.113.097c-.28.213-.63.292-1.33.45l-.635.144c-2.46.557-3.69.835-3.983 1.776c-.292.94.546 1.921 2.223 3.882l.434.507c.476.557.715.836.822 1.18c.107.345.071.717-.001 1.46l-.066.677c-.253 2.617-.38 3.925.386 4.506s1.918.052 4.22-1.009l.597-.274c.654-.302.981-.452 1.328-.452s.674.15 1.329.452l.595.274c2.303 1.06 3.455 1.59 4.22 1.01c.767-.582.64-1.89.387-4.507z"
class="">
</path>
<path fill="currentColor"
d="m9.153 5.408l-.328.588c-.36.646-.54.969-.82 1.182q.06-.045.113-.097a8.5 8.5 0 0 0 10.366 9.686l-.02-.19c-.071-.743-.107-1.115 0-1.46c.107-.344.345-.623.822-1.18l.434-.507c1.677-1.96 2.515-2.941 2.222-3.882c-.292-.941-1.522-1.22-3.982-1.776l-.636-.144c-.699-.158-1.049-.237-1.33-.45c-.28-.213-.46-.536-.82-1.182l-.327-.588C13.58 3.136 12.947 2 12 2s-1.58 1.136-2.847 3.408"
opacity=".5" class=""></path>
</svg>
</div>
4.9/5 Customer Score
</div>
</div>
</div>
<div class="flex flex-wrap items-center gap-8 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"
data-icon="simple-icons:stripe" class="">
<path fill="currentColor"
d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409c0-.831.683-1.305 1.901-1.305c2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0C9.667 0 7.589.654 6.104 1.872C4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219c2.585.92 3.445 1.574 3.445 2.583c0 .98-.84 1.545-2.354 1.545c-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813c1.664-1.305 2.525-3.236 2.525-5.732c0-4.128-2.524-5.851-6.594-7.305z"
class="">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"
data-icon="simple-icons:spotify" class="">
<path fill="currentColor"
d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12s12-5.4 12-12S18.66 0 12 0m5.521 17.34c-.24.359-.66.48-1.021.24c-2.82-1.74-6.36-2.101-10.561-1.141c-.418.122-.779-.179-.899-.539c-.12-.421.18-.78.54-.9c4.56-1.021 8.52-.6 11.64 1.32c.42.18.479.659.301 1.02m1.44-3.3c-.301.42-.841.6-1.262.3c-3.239-1.98-8.159-2.58-11.939-1.38c-.479.12-1.02-.12-1.14-.6s.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2m.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721c-.18-.601.18-1.2.72-1.381c4.26-1.26 11.28-1.02 15.721 1.621c.539.3.719 1.02.419 1.56c-.299.421-1.02.599-1.559.3"
class="">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"
data-icon="simple-icons:airbnb" class="">
<path fill="currentColor"
d="M12.001 18.275c-1.353-1.697-2.148-3.184-2.413-4.457c-.263-1.027-.16-1.848.291-2.465c.477-.71 1.188-1.056 2.121-1.056s1.643.345 2.12 1.063c.446.61.558 1.432.286 2.465c-.291 1.298-1.085 2.785-2.412 4.458zm9.601 1.14c-.185 1.246-1.034 2.28-2.2 2.783c-2.253.98-4.483-.583-6.392-2.704c3.157-3.951 3.74-7.028 2.385-9.018c-.795-1.14-1.933-1.695-3.394-1.695c-2.944 0-4.563 2.49-3.927 5.382c.37 1.565 1.352 3.343 2.917 5.332c-.98 1.085-1.91 1.856-2.732 2.333c-.636.344-1.245.558-1.828.609c-2.679.399-4.778-2.2-3.825-4.88c.132-.345.395-.98.845-1.961l.025-.053c1.464-3.178 3.242-6.79 5.285-10.795l.053-.132l.58-1.116c.45-.822.635-1.19 1.351-1.643c.346-.21.77-.315 1.246-.315c.954 0 1.698.558 2.016 1.007c.158.239.345.557.582.953l.558 1.089l.08.159c2.041 4.004 3.821 7.608 5.279 10.794l.026.025l.533 1.22l.318.764c.243.613.294 1.222.213 1.858zm1.22-2.39c-.186-.583-.505-1.271-.9-2.094v-.03c-1.889-4.006-3.642-7.608-5.307-10.844l-.111-.163C15.317 1.461 14.468 0 12.001 0c-2.44 0-3.476 1.695-4.535 3.898l-.081.16c-1.669 3.236-3.421 6.843-5.303 10.847v.053l-.559 1.22c-.21.504-.317.768-.345.847C-.172 20.74 2.611 24 5.98 24c.027 0 .132 0 .265-.027h.372c1.75-.213 3.554-1.325 5.384-3.317c1.829 1.989 3.635 3.104 5.382 3.317h.372c.133.027.239.027.265.027c3.37.003 6.152-3.261 4.802-6.975"
class="">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"
data-icon="simple-icons:intercom" class="">
<path fill="currentColor"
d="M21 0H3a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h18c1.658 0 3-1.342 3-3V3a3 3 0 0 0-3-3m-5.801 4.399c0-.44.36-.8.802-.8c.44 0 .8.36.8.8v10.688a.802.802 0 0 1-1.602 0zM11.2 3.994a.8.8 0 0 1 1.6 0v11.602a.8.8 0 0 1-1.6 0zm-4 .405a.801.801 0 0 1 1.601 0v10.688a.801.801 0 0 1-1.601 0zM3.199 6A.801.801 0 0 1 4.8 6v7.195a.8.8 0 0 1-1.601 0zM20.52 18.202c-.123.105-3.086 2.593-8.52 2.593s-8.397-2.486-8.521-2.593a.8.8 0 0 1 1.039-1.218c.047.041 2.693 2.211 7.481 2.211c4.848 0 7.456-2.186 7.479-2.207a.8.8 0 0 1 1.128.086c.289.336.25.84-.086 1.128m.281-5.007a.802.802 0 0 1-1.602 0V6a.802.802 0 0 1 1.602 0z"
class=""></path>
</svg>
</div>
</div>
<!-- Right Visual (Abstract Glassmorphism) -->
<div
class="lg:col-span-5 lg:h-auto overflow-hidden bg-center bg-neutral-50/50 w-full h-[500px] bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/71c4c7d3-59fe-4e15-933d-af3eb8ea0caa_1600w.webp)] bg-cover relative">
<!-- Background Gradient Sphere -->
<div
class="-tranneutral-x-1/2 -tranneutral-y-1/2 animate-pulse bg-gradient-to-br from-orange-400 via-red-500 to-rose-600 opacity-80 mix-blend-multiply w-[500px] h-[500px] rounded-full absolute top-1/2 left-1/2 blur-3xl">
</div>
<!-- Dark Glass Fanned Cards Carousel moved to bottom -->
<div class="flex z-30 pointer-events-none pb-10 absolute right-0 bottom-2 left-0 items-end justify-center">
<div class="w-80 h-64 relative perspective-normal" id="neutral-stack">
<!-- Styles for transitions and animations -->
<style class="">
.stack-card {
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
position: absolute;
inset: 0;
transform-origin: center bottom;
backface-visibility: hidden;
}
.stack-card.active {
opacity: 1;
transform: scale(1) tranneutralY(0);
z-index: 30;
filter: grayscale(0%);
}
.stack-card.next {
opacity: 0.6;
transform: scale(0.96) tranneutralY(12px);
z-index: 20;
filter: grayscale(100%);
}
.stack-card.last {
opacity: 0.3;
transform: scale(0.92) tranneutralY(24px);
z-index: 10;
filter: grayscale(100%);
}
@keyframes progress-fill {
from {
width: 0%;
}
to {
width: 100%;
}
}
.active .progress-track .progress-fill {
animation: progress-fill 4000ms linear forwards;
}
</style>
<!-- Card 1 -->
<div
class="stack-card active flex flex-col bg-gradient-to-b from-white/10 to-white/0 rounded-3xl pt-5 pr-5 pb-5 pl-5 shadow-2xl backdrop-blur-xl justify-between"
id="n-card-1">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<div
class="flex items-center justify-center w-10 h-10 border rounded-lg bg-white/5 border-white/10 text-zinc-100">
<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="gamepad-2" class="lucide lucide-gamepad-2 w-5 h-5 opacity-90">
<line x1="6" x2="10" y1="11" y2="11" class=""></line>
<line x1="8" x2="8" y1="9" y2="13" class=""></line>
<line x1="15" x2="15.01" y1="12" y2="12" class=""></line>
<line x1="18" x2="18.01" y1="10" y2="10" class=""></line>
<path
d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"
class=""></path>
</svg>
</div>
<div>
<h3 class="text-sm font-semibold tracking-tight text-white">Gaming AI</h3>
<p class="text-xs text-zinc-400">NPC Behavior</p>
</div>
</div>
<span class="text-xs font-medium text-zinc-50 font-mono">01</span>
</div>
<div class="relative w-full overflow-hidden border rounded-lg h-28 bg-zinc-800 border-white/5">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/ff9ad30b-a9f1-4ef0-839b-ced635b53a95_800w.webp" class="object-cover w-full h-full opacity-80" alt="Gaming AI">
</div>
<div class="w-full h-px mt-4 overflow-hidden rounded-full bg-white/10 progress-track">
<div class="h-full bg-white rounded-full w-0 progress-fill"></div>
</div>
</div>
<!-- Card 2 -->
<div
class="stack-card next flex flex-col bg-gradient-to-b from-white/10 to-white/0 border-white/10 border rounded-3xl pt-5 pr-5 pb-5 pl-5 shadow-2xl backdrop-blur-xl justify-between"
id="n-card-2">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<div
class="flex items-center justify-center w-10 h-10 border rounded-lg bg-white/5 border-white/10 text-zinc-100">
<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="building-2" class="lucide lucide-building-2 w-5 h-5 opacity-90">
<path d="M10 12h4" class=""></path>
<path d="M10 8h4" class=""></path>
<path d="M14 21v-3a2 2 0 0 0-4 0v3" class=""></path>
<path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2" class=""></path>
<path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16" class=""></path>
</svg>
</div>
<div>
<h3 class="text-sm font-semibold tracking-tight text-white">Prop Tech</h3>
<p class="text-xs text-zinc-400">Valuation Models</p>
</div>
</div>
<span class="text-xs font-medium text-zinc-50 font-mono">02</span>
</div>
<div class="relative w-full overflow-hidden border rounded-lg h-28 bg-zinc-800 border-white/5">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/fb158590-9b46-4a1d-b6a6-869fe22092db_800w.webp" class="object-cover w-full h-full opacity-80" alt="Prop Tech">
</div>
<div class="w-full h-px mt-4 overflow-hidden rounded-full bg-white/10 progress-track">
<div class="h-full bg-white rounded-full w-0 progress-fill"></div>
</div>
</div>
<!-- Card 3 -->
<div
class="stack-card last flex flex-col bg-gradient-to-b from-white/10 to-white/0 border-white/10 border rounded-3xl pt-5 pr-5 pb-5 pl-5 shadow-2xl backdrop-blur-xl justify-between"
id="n-card-3">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<div
class="flex items-center justify-center w-10 h-10 border rounded-lg bg-white/5 border-white/10 text-zinc-100">
<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="activity" class="lucide lucide-activity w-5 h-5 opacity-90">
<path
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
class=""></path>
</svg>
</div>
<div>
<h3 class="text-sm font-semibold tracking-tight text-white">Health AI</h3>
<p class="text-xs text-zinc-400">Signal Forecasting</p>
</div>
</div>
<span class="text-xs font-medium text-zinc-50 font-mono">03</span>
</div>
<div class="relative w-full overflow-hidden border rounded-lg h-28 bg-zinc-800 border-white/5">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/774c907c-76ea-4322-ac02-fb7696eee62e_800w.webp" class="object-cover w-full h-full opacity-80" alt="Health AI">
</div>
<div class="w-full h-px mt-4 overflow-hidden rounded-full bg-white/10 progress-track">
<div class="h-full bg-white rounded-full w-0 progress-fill"></div>
</div>
</div>
</div>
<script class="">
(function() {
const stack = document.getElementById('neutral-stack');
const cards = Array.from(stack.querySelectorAll('.stack-card'));
let currentIndex = 0;
function rotateCards() {
currentIndex = (currentIndex + 1) % cards.length;
cards.forEach((card, i) => {
const offset = (i - currentIndex + cards.length) % cards.length;
// Remove all state classes first
card.classList.remove('active', 'next', 'last');
// Reset animation on progress bar
const fill = card.querySelector('.progress-fill');
fill.style.animation = 'none';
if (offset === 0) {
card.classList.add('active');
// Trigger reflow to restart animation for active card
void fill.offsetWidth;
fill.style.animation = 'progress-fill 4000ms linear forwards';
} else if (offset === 1) {
card.classList.add('next');
} else {
card.classList.add('last');
}
});
}
// Initialize Lucide icons
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
// Start loop
setInterval(rotateCards, 4000);
})();
</script>
</div>
<!-- Caption Text for cards -->
<div class="flex pointer-events-none z-30 pb-2 absolute right-0 bottom-0 left-0 justify-center">
<div
class="bg-neutral-950/50 backdrop-blur-md text-xs text-neutral-200 rounded-full px-4 py-1.5 flex items-center gap-2 border border-white/10">
<span class="inline-flex w-1.5 h-1.5 rounded-full bg-orange-400"></span>
<span class="font-medium tracking-tight">Live industry playbooks powered by Neural Intelligence</span>
</div>
</div>
<!-- Glass Stripes Overlay -->
<div class="absolute inset-0 flex pointer-events-none">
<div class="w-1/4 h-full border-r border-white/10 backdrop-blur-[1px]"></div>
<div class="w-1/4 h-full border-r border-white/10 backdrop-blur-[2px]"></div>
<div class="w-1/4 h-full border-r border-white/10 backdrop-blur-[4px] bg-white/5"></div>
<div class="w-1/4 h-full backdrop-blur-[8px] bg-white/10"></div>
</div>
</div>
</section>