Загрузка...
Секция с AI-поиском: статистика, CTA, иллюстрации. Адаптивный дизайн для SaaS лендингов. Улучшает конверсию.
<section class="sm:px-6 sm:mt-24 md:mt-32 max-w-7xl mt-16 mr-auto ml-auto pr-4 pl-4 relative">
<div class="max-w-7xl mr-auto ml-auto">
<div class="grid gap-12 lg:grid-cols-2">
<!-- Copy & stats -->
<div class="">
<div class="tech-content">
<h3 class="sm:text-5xl transition-colors duration-500 text-4xl font-medium text-white tracking-tight font-jakarta">Intelligent search, powered by advanced AI models</h3>
<!-- Additional technology details -->
<div class="mt-8">
<div class="border-t border-white/10 pt-6">
<h4 class="text-lg font-semibold text-white mb-4 font-jakarta">Advanced Search Capabilities</h4>
<div class="space-y-4">
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-500/10 flex items-center justify-center mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-lime-400">
<circle cx="11" cy="11" r="8" class=""></circle>
<path d="m21 21-4.3-4.3" class=""></path>
<path d="M11 8a3 3 0 0 1 3 3" class=""></path>
</svg>
</div>
<div class="">
<h5 class="font-medium text-white font-geist">Contextual Understanding</h5>
<p class="text-sm text-white/60 mt-1 font-geist">AI understands your intent and delivers relevant results based on context, not just keywords.</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-500/10 flex items-center justify-center mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-lime-400">
<path d="M12 22v-6" class=""></path>
<path d="M12 8V2" class=""></path>
<path d="M4 12H2" class=""></path>
<path d="M10 12H8" class=""></path>
<path d="M16 12h-2" class=""></path>
<path d="M22 12h-2" class=""></path>
<path d="m15 19-3 3-3-3" class=""></path>
<path d="m15 5-3-3-3 3" class=""></path>
</svg>
</div>
<div class="">
<h5 class="font-medium text-white font-geist">Smart Filtering</h5>
<p class="text-sm text-white/60 mt-1 font-geist">Automatically filters and ranks results by relevance, recency, and reliability for faster information discovery.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="border-t border-white/10 pt-6 mt-8">
<div class="grid gap-6 sm:grid-cols-2">
<div class="flex gap-3 hover:scale-105 transition-transform duration-200 cursor-pointer items-center">
<div class="">
<div class="flex items-baseline gap-2">
<span class="text-2xl tracking-tight font-jakarta font-medium text-white">95%</span>
</div>
<p class="text-xs text-white/60 font-geist">Search accuracy improvement</p>
</div>
</div>
<div class="flex items-center gap-3 hover:scale-105 transition-transform duration-200 cursor-pointer">
<div class="">
<div class="flex items-baseline gap-2">
<span class="text-2xl tracking-tight font-jakarta font-medium text-white">5.8M</span>
</div>
<p class="text-xs text-white/60 font-geist">Searches powered daily</p>
</div>
</div>
</div>
</div>
<div class="border-t border-white/10 pt-6 mt-8">
<a href="#" class="inline-flex items-center justify-center gap-2 h-10 hover:bg-lime-600/90 transition text-sm font-normal text-white bg-lime-600 rounded-full px-4 font-geist">
Discover smart search
<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="h-4 w-4">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</a>
</div>
</div>
<!-- Diagram -->
<div class="bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5aa83035-c72b-4cb5-9937-66ce103b64ef_1600w.webp)] bg-cover rounded-[36px] pt-5 pr-5 pb-5 pl-5 relative" style="mask-image: linear-gradient(230deg, transparent, black 10%, black 70%, transparent); -webkit-mask-image: linear-gradient(230deg, transparent, black 10%, black 70%, transparent);">
<article class="group relative overflow-hidden transition-shadow hover:shadow-md bg-black/70 border-white/10 border rounded-3xl shadow-xl backdrop-blur-xl">
<div class="sm:p-10 pt-6 pr-6 pb-6 pl-6">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
<h3 class="text-2xl font-semibold tracking-tight text-white font-jakarta">AI-Powered Search</h3>
<span class="inline-flex items-center gap-2 text-[10px] sm:text-xs text-white/80 bg-white/5 border border-white/10 rounded-full px-2.5 py-1 backdrop-blur-sm font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-lime-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>
</svg>
AI Enhanced
</span>
</div>
<!-- Illustration -->
<div class="relative h-56 sm:h-64 rounded-2xl bg-gradient-to-b from-white/5 to-white/10 ring-1 ring-inset ring-white/5 mb-8 backdrop-blur-sm">
<!-- Search bar -->
<div class="absolute left-4 sm:left-6 top-4 sm:top-6 w-[85%] rounded-2xl bg-black/90 backdrop-blur border border-white/10 shadow-sm">
<div class="flex items-center gap-3 px-4 py-3 border-b border-white/10">
<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="text-lime-400">
<circle cx="11" cy="11" r="8" class=""></circle>
<path d="m21 21-4.3-4.3" class=""></path>
</svg>
<div class="h-2 w-32 bg-lime-400/40 rounded"></div>
<div class="ml-auto">
<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="text-lime-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>
</svg>
</div>
</div>
<div class="p-3 space-y-1.5">
<div class="text-[9px] sm:text-[10px] text-white/40 tracking-widest px-2 font-geist">SUGGESTED</div>
<div class="flex items-center gap-2 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60">
<path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" class=""></path>
<path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" class=""></path>
<path d="M12 2v2" class=""></path>
<path d="M12 22v-2" class=""></path>
<path d="m17 20.66-1-1.73" class=""></path>
<path d="M11 10.27 7 3.34" class=""></path>
<path d="m20.66 17-1.73-1" class=""></path>
<path d="m3.34 7 1.73 1" class=""></path>
<path d="M14 12h8" class=""></path>
<path d="M2 12h2" class=""></path>
<path d="m20.66 7-1.73 1" class=""></path>
<path d="m3.34 17 1.73-1" class=""></path>
<path d="m17 3.34-1 1.73" class=""></path>
<path d="m11 13.73-4 6.93" class=""></path>
</svg>
<div class="h-1.5 w-24 bg-white/20 rounded"></div>
</div>
<div class="flex items-center gap-2 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60">
<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a2.5 2.5 0 0 1 0-5H20" class=""></path>
</svg>
<div class="h-1.5 w-20 bg-white/20 rounded"></div>
</div>
</div>
</div>
<!-- Results panel -->
<div class="absolute left-4 sm:left-6 bottom-4 sm:bottom-6 w-[85%] rounded-2xl bg-black/90 backdrop-blur border border-white/10 shadow-sm">
<div class="flex items-center justify-between px-3 py-2 border-b border-white/10">
<span class="text-[10px] sm:text-xs tracking-widest text-white/60 font-geist">AI INSIGHTS</span>
<span class="text-[9px] sm:text-[10px] text-lime-400 font-geist">LIVE</span>
</div>
<div class="p-3 space-y-2">
<div class="flex items-start gap-2 bg-lime-500/10 border border-lime-500/20 rounded-lg px-2 py-2">
<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="text-lime-400 flex-shrink-0 mt-0.5">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path>
</svg>
<div class="flex-1 space-y-1">
<div class="h-1 w-full bg-lime-400/40 rounded"></div>
<div class="h-1 w-3/4 bg-lime-400/30 rounded"></div>
</div>
</div>
<div class="flex items-center gap-2 text-[10px] text-white/60 px-2 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/40">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" class=""></polyline>
</svg>
<span>Analyzing context...</span>
</div>
</div>
</div>
<!-- Floating suggestions -->
<div class="absolute right-4 sm:right-6 top-24 sm:top-28 w-[42%] rounded-xl bg-black/90 backdrop-blur border border-white/10 shadow-sm p-2">
<div class="text-[9px] sm:text-[10px] text-white/40 tracking-widest mb-1.5 font-geist">RELATED</div>
<div class="space-y-1">
<div class="flex items-center gap-1.5 bg-blue-500/10 border border-blue-500/20 rounded px-1.5 py-1">
<div class="w-1.5 h-1.5 bg-blue-400 rounded-full"></div>
<div class="h-1 w-16 bg-blue-400/40 rounded"></div>
</div>
<div class="flex items-center gap-1.5 bg-purple-500/10 border border-purple-500/20 rounded px-1.5 py-1">
<div class="w-1.5 h-1.5 bg-purple-400 rounded-full"></div>
<div class="h-1 w-12 bg-purple-400/40 rounded"></div>
</div>
</div>
</div>
</div>
<!-- Features grid -->
<div class="grid grid-cols-1 md:grid-cols-2 mb-8 gap-x-6 gap-y-6">
<div class="">
<h4 class="text-lg font-semibold text-white tracking-tight font-jakarta">Natural Language</h4>
<p class="mt-2 text-sm text-white/60 font-geist">Search using everyday language and get precise results that understand your intent.</p>
</div>
<div>
<h4 class="text-lg font-semibold tracking-tight text-white font-jakarta">Instant Answers</h4>
<p class="mt-2 text-sm text-white/60 font-geist">Get direct answers and summaries without clicking through multiple search results.</p>
</div>
</div>
<!-- CTA -->
<div class="">
<a href="#" class="inline-flex items-center gap-2 text-xs font-medium text-white/90 hover:text-white font-geist">
Explore search features
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</a>
</div>
</div>
</article>
</div>
</div>
</div>
</section>