Загрузка...
Секция с UI-сеткой для демонстрации AI-функций CRM. Идеально для лендинга SaaS, подчеркивает возможности продукта с помощью анимаций и Tailwind CSS.
<section class="max-w-7xl mr-auto mb-32 ml-auto pr-6 pl-6 relative">
<!-- Section Header -->
<div class="flex flex-col items-center text-center mb-20">
<div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-white/10 bg-white/5 backdrop-blur-sm mb-6">
<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="sparkles" class="lucide lucide-sparkles w-3.5 h-3.5 text-cyan-400"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
<span class="text-[10px] font-medium tracking-wide text-neutral-300 uppercase">Seamless Sales & Recruitment</span>
</div>
<h2 class="text-4xl md:text-5xl lg:text-6xl font-serif-custom font-normal text-white mb-6 tracking-tight max-w-4xl">
Experience the Power of
<span class="text-gradient-accent">CRM AI Staffing Software</span>
</h2>
<p class="leading-relaxed text-lg font-light text-neutral-400 text-center max-w-2xl">Step into a new era of client and candidate relationship management with AI-Powered CRM designed for the staffing industry. Unlike traditional systems, our platform has Artificial Intelligence deeply integrated at its core.</p>
</div>
<!-- Bento Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Feature 1: Always-On Intelligence (Large) -->
<div class="md:col-span-2 md:row-span-2 group relative rounded-xl border border-white/10 bg-[#0a0a0a] overflow-hidden hover:border-white/20 transition-all duration-300 flex flex-col">
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-cyan-900/20 via-[#0a0a0a] to-[#0a0a0a]"></div>
<div class="p-8 relative z-10">
<div class="w-10 h-10 rounded border border-white/10 bg-white/5 flex items-center justify-center mb-4 text-cyan-400">
<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="infinity" class="lucide lucide-infinity w-5 h-5"><path d="M6 16c5 0 7-8 12-8a4 4 0 0 1 0 8c-5 0-7-8-12-8a4 4 0 1 0 0 8" class=""></path></svg>
</div>
<h3 class="text-xl font-medium text-white mb-2">Always-On Intelligence</h3>
<p class="text-sm text-neutral-400 font-light max-w-md">
AI operates continuously, automating sourcing and providing real-time context. Your team builds relationships while AI handles the data.
</p>
</div>
<!-- Visualization: AI Core -->
<div class="flex-1 relative min-h-[300px] flex items-center justify-center overflow-hidden mt-4">
<!-- Orbits -->
<div class="absolute w-[500px] h-[500px] border border-white/5 rounded-full animate-[spin_60s_linear_infinite]"></div>
<div class="absolute w-[350px] h-[350px] border border-white/5 rounded-full animate-[spin_40s_linear_infinite_reverse]"></div>
<div class="absolute w-[200px] h-[200px] border border-white/10 rounded-full animate-[spin_20s_linear_infinite]"></div>
<!-- Center Core -->
<div class="relative z-10 w-24 h-24 rounded-full bg-[#0a0a0a] border border-cyan-500/30 flex items-center justify-center shadow-[0_0_50px_rgba(6,182,212,0.15)]">
<div class="absolute inset-0 rounded-full bg-cyan-500/10 animate-ping"></div>
<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="brain-circuit" class="lucide lucide-brain-circuit w-8 h-8 text-cyan-400"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" class=""></path><path d="M9 13a4.5 4.5 0 0 0 3-4" class=""></path><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" class=""></path><path d="M3.477 10.896a4 4 0 0 1 .585-.396" class=""></path><path d="M6 18a4 4 0 0 1-1.967-.516" class=""></path><path d="M12 13h4" class=""></path><path d="M12 18h6a2 2 0 0 1 2 2v1" class=""></path><path d="M12 8h8" class=""></path><path d="M16 8V5a2 2 0 0 1 2-2" class=""></path><circle cx="16" cy="13" r=".5" class=""></circle><circle cx="18" cy="3" r=".5" class=""></circle><circle cx="20" cy="21" r=".5" class=""></circle><circle cx="20" cy="8" r=".5" class=""></circle></svg>
</div>
<!-- Floating Satellites -->
<div class="absolute top-1/2 left-1/4 -translate-y-1/2 -translate-x-full animate-float">
<div class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 backdrop-blur-md flex items-center gap-2">
<div class="w-1.5 h-1.5 rounded-full bg-green-400"></div>
<span class="text-[10px] text-neutral-300 font-mono">Sourcing_Active</span>
</div>
</div>
<div class="absolute top-1/3 right-1/4 translate-x-full animate-float" style="animation-delay: 1s;">
<div class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 backdrop-blur-md flex items-center gap-2">
<div class="w-1.5 h-1.5 rounded-full bg-blue-400"></div>
<span class="text-[10px] text-neutral-300 font-mono">Client_Sync</span>
</div>
</div>
</div>
</div>
<!-- Feature 2: Action-Oriented Workflows -->
<div class="group relative rounded-xl border border-white/10 bg-[#0a0a0a] overflow-hidden hover:border-white/20 transition-all duration-300">
<div class="p-6 h-full flex flex-col">
<div class="flex items-center gap-3 mb-4">
<div class="w-8 h-8 rounded border border-white/10 bg-white/5 flex items-center justify-center text-white">
<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="workflow" class="lucide lucide-workflow w-4 h-4"><rect width="8" height="8" x="3" y="3" rx="2" class=""></rect><path d="M7 11v4a2 2 0 0 0 2 2h4" class=""></path><rect width="8" height="8" x="13" y="13" rx="2" class=""></rect></svg>
</div>
<h3 class="text-sm font-medium text-white">Action-Oriented</h3>
</div>
<p class="text-xs text-neutral-400 font-light mb-6">
AI Agents suggest next-best actions to optimize sales & recruitment.
</p>
<!-- Mockup -->
<div class="mt-auto space-y-2">
<div class="p-2 rounded bg-white/5 border border-white/5 flex justify-between items-center">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full border border-neutral-600"></div>
<span class="text-[10px] text-neutral-300">Email Acme Corp</span>
</div>
<span class="text-[9px] text-neutral-500">Today</span>
</div>
<div class="p-2 rounded bg-cyan-500/10 border border-cyan-500/20 flex gap-2 items-start animate-pulse">
<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="sparkles" class="lucide lucide-sparkles w-3 h-3 text-cyan-400 mt-0.5 shrink-0"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
<div class="">
<span class="block text-[10px] text-cyan-200 font-medium">Suggestion</span>
<span class="block text-[9px] text-cyan-400/80">They just raised Series B. Mention scale.</span>
</div>
</div>
</div>
</div>
</div>
<!-- Feature 3: Multi-Modality -->
<div class="group relative rounded-xl border border-white/10 bg-[#0a0a0a] overflow-hidden hover:border-white/20 transition-all duration-300">
<div class="p-6 h-full flex flex-col">
<div class="flex items-center gap-3 mb-4">
<div class="w-8 h-8 rounded border border-white/10 bg-white/5 flex items-center justify-center text-white">
<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="files" class="lucide lucide-files w-4 h-4"><path d="M15 2h-4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8" class=""></path><path d="M16.706 2.706A2.4 2.4 0 0 0 15 2v5a1 1 0 0 0 1 1h5a2.4 2.4 0 0 0-.706-1.706z" class=""></path><path d="M5 7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 1.732-1" class=""></path></svg>
</div>
<h3 class="text-sm font-medium text-white">Multi-Modality</h3>
</div>
<p class="text-xs text-neutral-400 font-light mb-6">
Understands unstructured data: resumes, recordings, and emails.
</p>
<!-- Mockup -->
<div class="mt-auto relative h-20 flex items-center justify-center gap-2">
<div class="w-10 h-12 bg-neutral-800 rounded border border-white/10 flex items-center justify-center shadow-lg -rotate-6 transform translate-x-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="file-text" class="lucide lucide-file-text w-4 h-4 text-neutral-400"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" class=""></path><path d="M14 2v5a1 1 0 0 0 1 1h5" class=""></path><path d="M10 9H8" class=""></path><path d="M16 13H8" class=""></path><path d="M16 17H8" class=""></path></svg>
</div>
<div class="w-10 h-12 bg-neutral-800 rounded border border-white/10 flex items-center justify-center shadow-lg rotate-0 z-10">
<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="mic" class="lucide lucide-mic w-4 h-4 text-cyan-400"><path d="M12 19v3" class=""></path><path d="M19 10v2a7 7 0 0 1-14 0v-2" class=""></path><rect x="9" y="2" width="6" height="13" rx="3" class=""></rect></svg>
</div>
<div class="w-10 h-12 bg-neutral-800 rounded border border-white/10 flex items-center justify-center shadow-lg rotate-6 transform -translate-x-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="video" class="lucide lucide-video w-4 h-4 text-neutral-400"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" class=""></path><rect x="2" y="6" width="14" height="12" rx="2" class=""></rect></svg>
</div>
</div>
</div>
</div>
<!-- Feature 4: Conversational UX -->
<div class="md:col-span-1 group relative rounded-xl border border-white/10 bg-[#0a0a0a] overflow-hidden hover:border-white/20 transition-all duration-300">
<div class="p-6 h-full flex flex-col">
<div class="flex items-center gap-3 mb-4">
<div class="w-8 h-8 rounded border border-white/10 bg-white/5 flex items-center justify-center text-white">
<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="message-circle" class="lucide lucide-message-circle w-4 h-4"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" class=""></path></svg>
</div>
<h3 class="text-sm font-medium text-white">Conversational UX</h3>
</div>
<p class="text-xs text-neutral-400 font-light mb-6">
Interact intuitively. Ask questions about candidates in natural language.
</p>
<div class="mt-auto">
<div class="flex items-center gap-2 p-2 rounded-full border border-white/10 bg-white/[0.03]">
<div class="w-4 h-4 rounded-full bg-cyan-500/20 flex items-center justify-center text-cyan-400 text-[8px]">AI</div>
<div class="h-1 w-1 rounded-full bg-neutral-600 animate-bounce"></div>
<div class="h-1 w-1 rounded-full bg-neutral-600 animate-bounce" style="animation-delay: 0.1s"></div>
<div class="h-1 w-1 rounded-full bg-neutral-600 animate-bounce" style="animation-delay: 0.2s"></div>
</div>
</div>
</div>
</div>
<!-- Feature 5: Hyper-Personalization -->
<div class="md:col-span-1 group relative rounded-xl border border-white/10 bg-[#0a0a0a] overflow-hidden hover:border-white/20 transition-all duration-300">
<div class="p-6 h-full flex flex-col">
<div class="flex items-center gap-3 mb-4">
<div class="w-8 h-8 rounded border border-white/10 bg-white/5 flex items-center justify-center text-white">
<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="wand-2" class="lucide lucide-wand-2 w-4 h-4"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" class=""></path><path d="m14 7 3 3" class=""></path><path d="M5 6v4" class=""></path><path d="M19 14v4" class=""></path><path d="M10 2v2" class=""></path><path d="M7 8H3" class=""></path><path d="M21 16h-4" class=""></path><path d="M11 3H9" class=""></path></svg>
</div>
<h3 class="text-sm font-medium text-white">Hyper-Personalization</h3>
</div>
<p class="text-xs text-neutral-400 font-light mb-6">
Tailor every experience from outreach to proposals.
</p>
<div class="mt-auto bg-white/5 border border-white/5 p-2 rounded text-[10px] text-neutral-400 font-mono">
Hi <span class="bg-blue-500/20 text-blue-300 px-1 rounded">{{name}}</span>, saw your work on <span class="bg-blue-500/20 text-blue-300 px-1 rounded">{{project}}</span>...
</div>
</div>
</div>
<!-- Feature 6: Unified Data (Wide) -->
<div class="md:col-span-1 group relative rounded-xl border border-white/10 bg-[#0a0a0a] overflow-hidden hover:border-white/20 transition-all duration-300">
<div class="p-6 h-full flex flex-col">
<div class="flex items-center gap-3 mb-4">
<div class="w-8 h-8 rounded border border-white/10 bg-white/5 flex items-center justify-center text-white">
<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="database" class="lucide lucide-database w-4 h-4"><ellipse cx="12" cy="5" rx="9" ry="3" class=""></ellipse><path d="M3 5V19A9 3 0 0 0 21 19V5" class=""></path><path d="M3 12A9 3 0 0 0 21 12" class=""></path></svg>
</div>
<h3 class="text-sm font-medium text-white">Unified Data</h3>
</div>
<p class="text-xs text-neutral-400 font-light mb-6">
Holistic view of every candidate and client.
</p>
<!-- Connections Visual -->
<div class="mt-auto flex justify-center items-center gap-1">
<div class="w-2 h-2 rounded-full bg-neutral-700"></div>
<div class="w-8 h-[1px] bg-neutral-800"></div>
<div class="w-3 h-3 rounded-full bg-cyan-500 shadow-[0_0_10px_rgba(6,182,212,0.5)]"></div>
<div class="w-8 h-[1px] bg-neutral-800"></div>
<div class="w-2 h-2 rounded-full bg-neutral-700"></div>
</div>
</div>
</div>
</div>
</section>