All Prompts
All Prompts
herosectionlandingmarketingtailwindanimatedresponsivesvg
AI Recruiting Hero Section with SVG Visualization
Hero-секция для найма водителей ИИ: заголовок, описание, кнопки CTA, анимированный SVG-фон. Адаптивный дизайн на Tailwind.
Prompt
<div class="flex-1 flex flex-col md:flex-row z-20 h-full relative">
<!-- Mobile Gradient Overlay for Readability -->
<div class="absolute inset-0 bg-gradient-to-b from-[#09090b]/90 via-[#09090b]/60 to-transparent md:hidden z-10 pointer-events-none">
</div>
<!-- Left: Text Content -->
<div class="w-full md:w-[50%] lg:w-[45%] px-6 md:px-12 pt-8 md:pt-24 z-30 pointer-events-none flex flex-col justify-start md:justify-between pb-12 h-full">
<div class="md:mx-0 pointer-events-auto max-w-xl mr-auto ml-auto">
<!-- Badge -->
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-sky-500/10 border border-sky-500/20 text-sky-300 text-xs font-medium tracking-wide mb-6 shadow-[0_0_10px_rgba(14,165,233,0.15)]" style="">
<span class="w-1.5 h-1.5 rounded-full bg-sky-400 animate-pulse shadow-[0_0_8px_rgba(56,189,248,0.8)]"></span>
NEW VERSION 2.0
</div>
<!-- Title -->
<h1 class="leading-[0.95] sm:text-6xl md:leading-[0.9] md:mb-8 md:text-6xl lg:text-7xl text-6xl font-normal text-white tracking-tight font-serif-custom mb-8 drop-shadow-2xl" style="">AI Truck Driver Recruiting Software <span class="bg-clip-text italic text-transparent bg-gradient-to-r from-sky-400 to-blue-600 pr-2" style="">That Supercharges Your Hiring</span></h1>
<!-- Description -->
<p class="leading-relaxed text-lg font-light text-zinc-400 max-w-md mb-8 md:text-xl md:mb-12 lg:text-xl" style="">Hybrid AI Workforce + Autonomous AI Departments, Built to Scale with Your Firm</p>
<!-- Buttons -->
<div class="flex flex-col sm:flex-row gap-4 mb-16 md:mb-20 w-full flex-none">
<!-- Primary -->
<button class="group inline-flex overflow-hidden transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[0_0_25px_rgba(14,165,233,0.3)] rounded-full pt-[1px] pr-[1px] pb-[1px] pl-[1px] relative items-center justify-center w-full sm:w-auto flex-none">
<span class="absolute inset-[-100%] animate-[spin_3s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,transparent_0%,transparent_75%,#38bdf8_100%)] opacity-0 transition-opacity duration-300 group-hover:opacity-100"></span>
<span class="absolute inset-0 rounded-full bg-zinc-800 transition-opacity duration-300 group-hover:opacity-0"></span>
<span class="flex items-center justify-center gap-2 transition-colors duration-300 group-hover:bg-gradient-to-b group-hover:from-zinc-900 group-hover:to-black text-sm font-medium text-white bg-gradient-to-b from-zinc-800 to-zinc-950 w-full h-full rounded-full pt-3.5 pr-8 pb-3.5 pl-8 relative shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]">
<span class="z-10 relative" style="">Discover How Much You'll Save</span>
<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="chevron-right" class="lucide lucide-chevron-right w-4 h-4 relative z-10 transition-transform duration-300 group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6" class=""></path></svg>
</span>
</button>
<!-- Secondary -->
<button class="group inline-flex overflow-hidden transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[0_0_15px_rgba(255,255,255,0.1)] rounded-full pt-[1px] pr-[1px] pb-[1px] pl-[1px] relative items-center justify-center w-full sm:w-auto flex-none">
<span class="absolute inset-[-100%] animate-[spin_3s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,transparent_0%,transparent_75%,#a1a1aa_100%)] opacity-0 transition-opacity duration-300 group-hover:opacity-100"></span>
<span class="absolute inset-0 rounded-full bg-zinc-800 transition-opacity duration-300 group-hover:opacity-0"></span>
<span class="flex items-center justify-center gap-2 transition-colors duration-300 text-zinc-300 group-hover:text-white text-sm font-medium bg-black w-full h-full rounded-full pt-3.5 pr-8 pb-3.5 pl-8 relative shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]">
<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 relative z-10"><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>
<span class="z-10 relative" style="">Get The Report</span>
</span>
</button>
</div>
<!-- Trusted By Section -->
</div>
</div>
<!-- Right: Visualization -->
<div class="absolute inset-0 pointer-events-none w-full h-full overflow-hidden z-0 opacity-40 md:opacity-100">
<svg class="w-full h-full" viewBox="0 0 1200 900" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<defs class="">
<linearGradient id="roadGradient" x1="0%" y1="100%" x2="100%" y2="0%" class="">
<stop offset="0%" style="stop-color:#0ea5e9;stop-opacity:0.3" class=""></stop>
<stop offset="50%" style="stop-color:#3b82f6;stop-opacity:0.2" class=""></stop>
<stop offset="100%" style="stop-color:#000000;stop-opacity:0.0" class=""></stop>
</linearGradient>
</defs>
<!-- Main Flow Paths Reference -->
<path id="pathMain" d="M 400 1000 C 600 900, 900 600, 1300 200" fill="none" class=""></path>
<!-- Noodles (Visible only on Desktop) -->
<g class="hidden lg:block">
<!-- Noodle 1: Left Vertical Track -->
<rect x="580" y="600" width="120" height="400" rx="60" transform="rotate(-15 640 800)" fill="none" stroke="#3f3f46" stroke-width="0.5" opacity="0.3" class=""></rect>
<rect x="580" y="600" width="120" height="400" rx="60" transform="rotate(-15 640 800)" fill="none" stroke="#38bdf8" stroke-width="1" stroke-linecap="round" class="animate-beam" opacity="0.5"></rect>
<!-- Noodle 2: Center Right Track -->
<rect x="880" y="300" width="140" height="450" rx="70" transform="rotate(-25 950 525)" fill="none" stroke="#3f3f46" stroke-width="0.5" opacity="0.3" class=""></rect>
<rect x="880" y="300" width="140" height="450" rx="70" transform="rotate(-25 950 525)" fill="none" stroke="#38bdf8" stroke-width="1" stroke-linecap="round" class="animate-beam" opacity="0.5" style="animation-delay: -3s;"></rect>
<!-- Noodle 3: Top Right Track -->
<rect x="1050" y="50" width="100" height="300" rx="50" transform="rotate(-35 1100 200)" fill="none" stroke="#3f3f46" stroke-width="0.5" opacity="0.3" class=""></rect>
<rect x="1050" y="50" width="100" height="300" rx="50" transform="rotate(-35 1100 200)" fill="none" stroke="#38bdf8" stroke-width="1" stroke-linecap="round" class="animate-beam" opacity="0.5" style="animation-delay: -6s;"></rect>
</g>
<!-- Background Roads -->
<path d="M 600 1000 C 700 900, 800 700, 1300 550" fill="none" stroke="#1e293b" stroke-width="30" opacity="0.3" stroke-linecap="round" class=""></path>
<path d="M 900 1000 C 950 900, 900 700, 1300 450" fill="none" stroke="#1e293b" stroke-width="20" opacity="0.3" stroke-linecap="round" class=""></path>
<!-- Main Highway -->
<path d="M 400 1000 C 600 900, 900 600, 1300 200" fill="none" stroke="url(#roadGradient)" stroke-width="50" opacity="0.8" stroke-linecap="butt" class=""></path>
<path d="M 400 1000 C 600 900, 900 600, 1300 200" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="20 40" opacity="0.6" class=""></path>
<!-- Moving Data Packet -->
<rect x="-30" y="-15" width="60" height="30" rx="4" fill="#0ea5e9" opacity="0.95" filter="drop-shadow(0 0 10px rgba(14,165,233,0.5))" class="">
<animateMotion dur="5s" repeatCount="indefinite" rotate="auto" keyPoints="0;1" keyTimes="0;1" calcMode="linear" class="">
<mpath href="#pathMain" class=""></mpath>
</animateMotion>
</rect>
</svg>
<!-- UI Cards Overlay (Nodes) -->
<!-- 03: Deliver (Top of stack in corner) -->
<div class="hidden md:block absolute md:right-8 md:bottom-[20rem] lg:right-[10%] lg:top-[15%] lg:bottom-auto animate-float z-40 transform origin-bottom-right">
<div class="bg-zinc-900/90 backdrop-blur-md p-5 w-52 rounded-xl border border-white/10 shadow-[0_8px_30px_rgba(0,0,0,0.5)] flex flex-col gap-3 relative z-10">
<div class="flex items-center justify-between border-b border-white/5 pb-3">
<div class="flex items-center gap-2.5">
<span class="w-5 h-5 rounded flex items-center justify-center bg-zinc-800 text-[10px] font-bold text-zinc-400" style="">03</span>
<span class="text-xs font-semibold text-zinc-200 uppercase tracking-wide" style="">Deliver</span>
</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="server" class="lucide lucide-server text-zinc-500 w-4 h-4"><rect width="20" height="8" x="2" y="2" rx="2" ry="2" class=""></rect><rect width="20" height="8" x="2" y="14" rx="2" ry="2" class=""></rect><line x1="6" x2="6.01" y1="6" y2="6" class=""></line><line x1="6" x2="6.01" y1="18" y2="18" class=""></line></svg>
</div>
<div class="flex items-center gap-2">
<div class="h-2 w-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]"></div>
<span class="text-xs text-zinc-400 font-medium" style="">Endpoint Active</span>
</div>
<div class="flex items-center justify-between mt-1">
<span class="text-[10px] text-zinc-500 font-mono uppercase" style="">Latency</span>
<span class="text-xs text-emerald-400 font-mono font-medium" style="">12ms</span>
</div>
</div>
</div>
<!-- 02: Transform (Middle of stack in corner) -->
<div class="hidden md:block absolute md:right-8 md:bottom-[12rem] lg:right-[25%] lg:bottom-[40%] animate-float delay-200 z-40 transform origin-bottom-right">
<div class="bg-zinc-900/90 backdrop-blur-md p-5 w-56 rounded-xl border border-white/10 shadow-[0_8px_30px_rgba(0,0,0,0.5)] flex flex-col gap-3 relative z-10">
<div class="flex items-center justify-between border-b border-white/5 pb-3">
<div class="flex items-center gap-2.5">
<span class="w-5 h-5 rounded flex items-center justify-center bg-zinc-800 text-[10px] font-bold text-zinc-400" style="">02</span>
<span class="text-xs font-semibold text-zinc-200 uppercase tracking-wide" style="">Transform</span>
</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="cpu" class="lucide lucide-cpu text-zinc-500 w-4 h-4"><path d="M12 20v2" class=""></path><path d="M12 2v2" class=""></path><path d="M17 20v2" class=""></path><path d="M17 2v2" class=""></path><path d="M2 12h2" class=""></path><path d="M2 17h2" class=""></path><path d="M2 7h2" class=""></path><path d="M20 12h2" class=""></path><path d="M20 17h2" class=""></path><path d="M20 7h2" class=""></path><path d="M7 20v2" class=""></path><path d="M7 2v2" class=""></path><rect x="4" y="4" width="16" height="16" rx="2" class=""></rect><rect x="8" y="8" width="8" height="8" rx="1" class=""></rect></svg>
</div>
<div class="bg-black/40 p-2.5 rounded border border-white/5">
<div class="flex gap-1.5 mb-1">
<div class="w-2 h-2 rounded-full bg-red-500/40"></div>
<div class="w-2 h-2 rounded-full bg-yellow-500/40"></div>
<div class="w-2 h-2 rounded-full bg-green-500/40"></div>
</div>
<p class="font-mono text-[10px] text-zinc-400 leading-tight" style="">
<span class="text-purple-400" style="">SELECT</span> * <span class="text-purple-400" style="">FROM</span> stream
<span class="text-purple-400" style="">WHERE</span> val > 0.95
</p>
</div>
</div>
</div>
<!-- 01: Ingest (Bottom of stack in corner) -->
<div class="hidden md:block absolute md:right-8 md:bottom-12 lg:left-[52%] lg:bottom-[12%] lg:right-auto animate-float delay-500 z-40 transform origin-bottom-left">
<div class="bg-zinc-900/90 backdrop-blur-md p-5 w-52 rounded-xl border border-white/10 shadow-[0_8px_30px_rgba(0,0,0,0.5)] flex flex-col gap-3 relative z-10">
<div class="flex items-center justify-between border-b border-white/5 pb-3">
<div class="flex items-center gap-2.5">
<span class="w-5 h-5 rounded flex items-center justify-center bg-zinc-800 text-[10px] font-bold text-zinc-400" style="">01</span>
<span class="text-xs font-semibold text-zinc-200 uppercase tracking-wide" style="">Ingest</span>
</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="zap" class="lucide lucide-zap text-zinc-500 w-4 h-4"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded bg-orange-900/30 text-orange-400 flex items-center justify-center text-[10px] border border-orange-500/20">
<span class="iconify" data-icon="lucide:kafka"></span>
</div>
<span class="text-[10px] font-medium text-zinc-400" style="">Kafka</span>
</div>
<span class="text-[9px] text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 px-1.5 py-0.5 rounded-full font-medium" style="">Live</span>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded bg-blue-900/30 text-blue-400 flex items-center justify-center text-[10px] border border-blue-500/20">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="lucide:database" class="">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="">
<ellipse cx="12" cy="5" rx="9" ry="3" class=""></ellipse>
<path d="M3 5v14a9 3 0 0 0 18 0V5" class=""></path>
<path d="M3 12a9 3 0 0 0 18 0" class=""></path>
</g>
</svg>
</div>
<span class="text-[10px] font-medium text-zinc-400" style="">Postgres</span>
</div>
<span class="text-[9px] text-zinc-600" style="">Syncing</span>
</div>
</div>
</div>
</div>
</div>
</div>