All Prompts
All Prompts
featuresectionresponsiveanimatedmarketingsaastailwind
AI Recruitment Feature Section with Animated Visual
Секция с анимированным визуалом для продвижения AI-рекрутинга. Идеально для SaaS-страниц, демонстрирует преимущества продукта.
Prompt
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- Left Column: Content -->
<div class="order-2 lg:order-1">
<!-- Badge -->
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-300 text-xs font-medium tracking-wide mb-8 shadow-[0_0_15px_rgba(99,102,241,0.15)]">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path></svg>
<span class="uppercase tracking-widest text-[10px]" style="">Next-Gen Automation</span>
</div>
<h2 class="md:text-6xl leading-[1.05] text-4xl font-normal text-white tracking-tight font-serif-custom mb-6" style="">
Revolutionizing Truck Driver
<span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-violet-400 to-fuchsia-400 italic" style="">Recruitment with AI</span>
</h2>
<p class="md:text-xl text-lg font-light text-zinc-400 mb-10 leading-relaxed max-w-lg" style="">
Empower your team with AI agents for autonomous driver candidate outreach via email, job boards, & other channels.
</p>
<div class="space-y-6">
<!-- Feature 1: Database -->
<div class="flex gap-5 group">
<div class="w-10 h-10 rounded-lg bg-zinc-900 border border-white/10 flex items-center justify-center text-zinc-400 shrink-0 group-hover:text-indigo-400 group-hover:border-indigo-500/30 transition-all duration-300 shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><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>
<div class="">
<h4 class="text-white font-medium mb-1" style="">Live Candidate Database</h4>
<p class="text-sm text-zinc-500 font-light leading-relaxed" style="">Leverage an extensive and continuously updated driver candidate database.</p>
</div>
</div>
<!-- Feature 2: Shortlisting -->
<div class="flex gap-5 group">
<div class="w-10 h-10 rounded-lg bg-zinc-900 border border-white/10 flex items-center justify-center text-zinc-400 shrink-0 group-hover:text-violet-400 group-hover:border-violet-500/30 transition-all duration-300 shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" class=""></polygon></svg>
</div>
<div class="">
<h4 class="text-white font-medium mb-1" style="">AI Smart Shortlisting</h4>
<p class="text-sm text-zinc-500 font-light leading-relaxed" style="">Efficient driver screening based on CDL requirements and safety records.</p>
</div>
</div>
<!-- Feature 3: Scheduling -->
<div class="flex gap-5 group">
<div class="w-10 h-10 rounded-lg bg-zinc-900 border border-white/10 flex items-center justify-center text-zinc-400 shrink-0 group-hover:text-fuchsia-400 group-hover:border-fuchsia-500/30 transition-all duration-300 shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5" class=""></path><path d="M16 2v4" class=""></path><path d="M8 2v4" class=""></path><path d="M3 10h5" class=""></path><path d="M17.5 17.5 16 16.25V14" class=""></path><path d="M22 16a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z" class=""></path></svg>
</div>
<div class="">
<h4 class="text-white font-medium mb-1" style="">Autonomous Scheduling</h4>
<p class="text-sm text-zinc-500 font-light leading-relaxed" style="">AI-driven interview scheduling that syncs with recruiter calendars instantly.</p>
</div>
</div>
<!-- Feature 4: Workflows -->
<div class="flex gap-5 group">
<div class="w-10 h-10 rounded-lg bg-zinc-900 border border-white/10 flex items-center justify-center text-zinc-400 shrink-0 group-hover:text-pink-400 group-hover:border-pink-500/30 transition-all duration-300 shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><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>
<div class="">
<h4 class="text-white font-medium mb-1" style="">Custom Agentic Workflows</h4>
<p class="text-sm text-zinc-500 font-light leading-relaxed" style="">Create custom workflows to manage the entire driver candidate lifecycle within our AI-native CRM.</p>
</div>
</div>
</div>
</div>
<!-- Right Column: Visual Animation -->
<div class="order-1 lg:order-2">
<div class="relative w-full aspect-square md:aspect-[4/3] bg-zinc-900/40 border border-white/10 rounded-3xl overflow-hidden shadow-2xl group">
<!-- Grid Background -->
<div class="absolute inset-0 z-0 opacity-20" style="background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 40px 40px;"></div>
<!-- Central Hub -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-32 h-32 z-20">
<div class="relative w-full h-full flex items-center justify-center">
<div class="absolute inset-0 bg-indigo-500/20 rounded-full animate-ping"></div>
<div class="w-24 h-24 bg-zinc-900 border border-indigo-500/50 rounded-full flex items-center justify-center shadow-[0_0_30px_rgba(99,102,241,0.3)] relative z-10 backdrop-blur-md">
<div class="flex flex-col items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-indigo-400"><path d="M12 2a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3Z" class=""></path><path d="M19 10v2a7 7 0 0 1-14 0v-2" class=""></path><line x1="12" x2="12" y1="19" y2="22" class=""></line></svg>
<span class="text-[10px] font-mono text-indigo-300 font-medium" style="">AI AGENT</span>
</div>
</div>
<!-- Orbiting Elements -->
<div class="absolute w-[280px] h-[280px] border border-white/5 rounded-full animate-[spin_20s_linear_infinite]">
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-3 w-6 h-6 bg-zinc-800 border border-white/10 rounded-full flex items-center justify-center">
<span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
</div>
</div>
</div>
</div>
<!-- Node: Database (Top Left) -->
<div class="absolute top-12 left-12 z-20">
<div class="flex items-center gap-3 bg-zinc-900/80 backdrop-blur-sm border border-white/10 px-4 py-2 rounded-xl shadow-lg transform transition-transform hover:scale-105">
<div class="w-8 h-8 rounded-lg bg-violet-500/10 flex items-center justify-center text-violet-400">
<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=""><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>
<div class="flex flex-col">
<span class="text-xs text-white font-medium" style="">Driver DB</span>
<span class="text-[9px] text-zinc-500 font-mono" style="">Syncing...</span>
</div>
</div>
</div>
<!-- Node: Outreach (Top Right) -->
<div class="absolute top-12 right-12 z-20">
<div class="flex items-center gap-3 bg-zinc-900/80 backdrop-blur-sm border border-white/10 px-4 py-2 rounded-xl shadow-lg transform transition-transform hover:scale-105">
<div class="w-8 h-8 rounded-lg bg-fuchsia-500/10 flex items-center justify-center text-fuchsia-400">
<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=""><rect width="20" height="16" x="2" y="4" rx="2" class=""></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" class=""></path></svg>
</div>
<div class="flex flex-col">
<span class="text-xs text-white font-medium" style="">Outreach</span>
<span class="text-[9px] text-zinc-500 font-mono" style="">Active</span>
</div>
</div>
</div>
<!-- Node: CRM (Bottom) -->
<div class="absolute bottom-12 left-1/2 -translate-x-1/2 z-20">
<div class="flex items-center gap-3 bg-zinc-900/80 backdrop-blur-sm border border-white/10 px-6 py-3 rounded-xl shadow-lg min-w-[200px] justify-between">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center text-emerald-400">
<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=""><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><circle cx="9" cy="7" r="4" class=""></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><path d="M16 3.13a4 4 0 0 1 0 7.75" class=""></path></svg>
</div>
<div class="flex flex-col">
<span class="text-xs text-white font-medium" style="">CRM Update</span>
<span class="text-[9px] text-emerald-400 font-mono" style="">Candidate Hired</span>
</div>
</div>
<div class="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)] animate-pulse"></div>
</div>
</div>
<!-- Animated Data Flow Lines -->
<svg class="absolute inset-0 w-full h-full pointer-events-none z-10" viewBox="0 0 400 400" preserveAspectRatio="none">
<defs class="">
<linearGradient id="gradientFlow" x1="0%" y1="0%" x2="100%" y2="0%" class="">
<stop offset="0%" stop-color="rgba(99, 102, 241, 0)" class=""></stop>
<stop offset="50%" stop-color="rgba(167, 139, 250, 1)" class=""></stop>
<stop offset="100%" stop-color="rgba(99, 102, 241, 0)" class=""></stop>
</linearGradient>
</defs>
<!-- Path: DB to Center -->
<path d="M 80 80 Q 200 80 200 200" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1" class=""></path>
<path d="M 80 80 Q 200 80 200 200" fill="none" stroke="url(#gradientFlow)" stroke-width="2" stroke-dasharray="10 200" stroke-linecap="round" class="">
<animate attributeName="stroke-dashoffset" from="210" to="-210" dur="3s" repeatCount="indefinite" class=""></animate>
</path>
<!-- Path: Outreach to Center -->
<path d="M 320 80 Q 200 80 200 200" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1" class=""></path>
<path d="M 320 80 Q 200 80 200 200" fill="none" stroke="url(#gradientFlow)" stroke-width="2" stroke-dasharray="10 200" stroke-linecap="round" class="">
<animate attributeName="stroke-dashoffset" from="210" to="-210" dur="3s" begin="1s" repeatCount="indefinite" class=""></animate>
</path>
<!-- Path: Center to CRM -->
<path d="M 200 200 L 200 320" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1" class=""></path>
<path d="M 200 200 L 200 320" fill="none" stroke="url(#gradientFlow)" stroke-width="2" stroke-dasharray="20 200" stroke-linecap="round" class="">
<animate attributeName="stroke-dashoffset" from="220" to="-220" dur="2s" begin="1.5s" repeatCount="indefinite" class=""></animate>
</path>
</svg>
<!-- Floating Candidate Cards (Background) -->
<div class="absolute inset-0 pointer-events-none z-0">
<div class="absolute top-[30%] left-[20%] w-32 bg-zinc-800/40 border border-white/5 p-2 rounded-lg opacity-40 animate-[float-subtle_5s_infinite]">
<div class="h-2 w-16 bg-zinc-700 rounded mb-1"></div>
<div class="h-1.5 w-24 bg-zinc-700/50 rounded"></div>
</div>
<div class="absolute bottom-[30%] right-[20%] w-32 bg-zinc-800/40 border border-white/5 p-2 rounded-lg opacity-40 animate-[float-subtle_7s_infinite_reverse]">
<div class="h-2 w-16 bg-zinc-700 rounded mb-1"></div>
<div class="h-1.5 w-24 bg-zinc-700/50 rounded"></div>
</div>
</div>
</div>
</div>
</div>