All Prompts
All Prompts
sectionstatscardsgridtailwindanimatedresponsiveticker
Metric Cards Grid with Scrolling Logo Ticker
Секция с карточками KPI и анимированным тикером логотипов. Отображает метрики и социальные доказательства для SaaS и AI лендингов.
Prompt
<section class="overflow-hidden lg:py-20 pt-8 pb-8 relative" data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(1)" id="solutions">
<!-- Decorative grid lines -->
<div class="pointer-events-none z-0 absolute top-0 right-0 bottom-0 left-0">
<div class="absolute inset-y-0 left-[15%] w-px bg-gradient-to-b from-transparent via-white/5 to-transparent">
</div>
<div class="absolute inset-y-0 left-[35%] w-px bg-gradient-to-b from-transparent via-white/5 to-transparent">
</div>
<div class="absolute inset-y-0 left-1/2 w-px bg-gradient-to-b from-transparent via-white/8 to-transparent"></div>
<div class="absolute inset-y-0 left-[65%] w-px bg-gradient-to-b from-transparent via-white/5 to-transparent">
</div>
<div class="absolute inset-y-0 left-[85%] w-px bg-gradient-to-b from-transparent via-white/5 to-transparent">
</div>
<div class="absolute inset-x-0 top-[25%] h-px bg-gradient-to-r from-transparent via-white/5 to-transparent"></div>
<div class="absolute inset-x-0 top-[50%] h-px bg-gradient-to-r from-transparent via-white/5 to-transparent"></div>
<div class="absolute inset-x-0 top-[75%] h-px bg-gradient-to-r from-transparent via-white/5 to-transparent"></div>
</div>
<div class="z-10 md:px-8 flex flex-col h-full max-w-7xl mr-auto ml-auto pr-6 pl-6 relative" data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(1) > div:nth-of-type(2)">
<div class="flex-1 flex items-center">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8 w-full gap-x-6 gap-y-6">
<!-- Card: Real-time metrics -->
<div class="rounded-3xl bg-slate-900/40 ring-1 ring-white/10 backdrop-blur-md p-5 md:p-6 flex flex-col h-full animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.1s_both]">
<div class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1.5 text-xs font-medium text-white/80 ring-1 ring-white/10 font-geist w-fit">
<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-3.5 h-3.5"><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>
Real-time metrics
</div>
<div class="mt-4 space-y-3 flex-1 flex flex-col justify-between">
<div class="">
<p class="md:text-lg leading-relaxed text-base text-slate-300 font-geist">
AI market projected to grow by
<span class="text-orange-300 font-normal">59%</span> by 2025
</p>
<!-- Inline trend (no charts) -->
<div class="mt-4 rounded-xl bg-black/20 ring-1 ring-white/10 p-3">
<div class="flex gap-2 h-24 gap-x-2 gap-y-2 items-end">
<div class="bg-white/10 w-4 rounded" style="height: 28px"></div>
<div class="bg-white/10 w-4 rounded" style="height: 46px"></div><div class="bg-white/10 w-4 rounded" style="height: 46px"></div>
<div class="bg-white/10 w-4 rounded" style="height: 54px"></div>
<div class="bg-white/10 w-4 rounded" style="height: 64px"></div><div class="bg-orange-400/70 w-4 rounded" style="height: 88px"></div>
<div class="bg-orange-400/80 w-4 rounded" style="height: 96px"></div><div class="bg-orange-400/80 w-4 rounded" style="height: 96px"></div><div class="bg-orange-400/70 w-4 rounded" style="height: 88px"></div><div class="bg-white/10 w-4 rounded" style="height: 64px"></div><div class="bg-white/10 w-4 rounded" style="height: 54px"></div><div class="bg-white/10 w-4 rounded" style="height: 28px"></div><div class="bg-white/10 w-4 rounded" style="height: 28px"></div>
</div>
<div class="mt-2 flex items-center justify-between text-xs text-slate-400 font-geist">
<span>2021</span>
<span class="">2025</span>
</div>
</div>
</div>
<div class="pt-4 border-t border-white/5">
<div class="text-4xl md:text-5xl font-normal tracking-tighter font-geist">$40B</div>
<p class="text-slate-400 text-sm font-geist mt-1">Expected valuation</p>
<div class="mt-3 flex items-center gap-2 text-xs text-slate-400 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="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5 text-orange-300">
<path d="m5 12 5 5L20 7" class=""></path>
</svg>
<span class="">Forecasted growth trajectory</span>
</div>
</div>
</div>
</div>
<!-- Card: AI Face Verification -->
<div class="overflow-hidden md:p-4 flex flex-col bg-gradient-to-b from-white/10 to-white/5 h-full ring-white/10 ring-1 rounded-3xl pt-3 pr-3 pb-3 pl-3 relative backdrop-blur-md animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.2s_both]">
<div class="relative rounded-2xl overflow-hidden ring-1 ring-white/10 flex-1">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/863c6d3d-359c-471a-8fd8-543677b59c4c_800w.webp" alt="Face scan" class="min-h-[256px] md:min-h-[320px] w-full h-full object-cover">
<div class="absolute top-3 md:top-4 left-4 right-4 flex items-center justify-between">
<span class="text-slate-100 text-sm md:text-base font-normal font-geist tracking-tighter">98%</span>
<span class="text-[11px] md:text-xs text-slate-300/80 font-geist">Face detection</span>
</div>
<div class="absolute bottom-3 left-4 right-4 flex items-center gap-2">
<div class="flex items-center gap-1 bg-black/40 backdrop-blur-sm px-2 py-1 rounded-full">
<div class="w-1.5 h-1.5 rounded-full bg-orange-300"></div>
<span class="text-[10px] text-slate-200 font-geist">Live</span>
</div>
</div>
</div>
<div class="relative px-2 md:px-1 pt-4">
<h3 class="md:text-xl text-lg font-normal tracking-tighter font-geist">AI Face Verification</h3>
<p class="text-sm text-slate-400 font-geist">Identity match in milliseconds</p>
</div>
</div>
<!-- Card: Success Rate -->
<div class="md:p-6 flex flex-col bg-slate-900/60 ring-white/10 ring-1 rounded-3xl pt-5 pr-5 pb-5 pl-5 backdrop-blur-md h-full animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.3s_both]">
<div class="flex items-start justify-between gap-4">
<p class="md:text-lg leading-relaxed text-base text-slate-300 font-geist">
With a <span class="text-orange-300 font-normal">75%</span> project success rate, we help teams ship
reliable AI to
production.
</p>
</div>
<div class="mt-6 flex-1 flex flex-col justify-between">
<div class="">
<p class="text-sm text-slate-400 font-geist">Delivery outcomes</p>
<div class="mt-4 grid grid-cols-3 gap-4">
<div class="">
<p class="text-slate-300 text-xs font-geist">Succeeded</p>
<div class="text-2xl md:text-3xl font-normal tracking-tighter font-geist">63%</div>
</div>
<div class="">
<p class="text-slate-300 text-xs font-geist">In Progress</p>
<div class="text-2xl md:text-3xl font-normal tracking-tighter font-geist">24%</div>
</div>
<div class="">
<p class="text-slate-300 text-xs font-geist">Failed</p>
<div class="text-2xl md:text-3xl font-normal tracking-tighter font-geist">13%</div>
</div>
</div>
<!-- Bars -->
<div class="mt-5 space-y-3">
<!-- Success bar -->
<div class="relative h-5 rounded-full bg-white/5 ring-1 ring-white/10 overflow-hidden">
<div class="bg-orange-400/80 absolute top-0 bottom-0 left-0" style="width:63%"></div>
<div class="absolute left-[63%] -translate-x-1/2 top-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-white shadow">
</div>
</div>
<!-- In progress bar -->
<div class="relative h-5 rounded-full bg-white/5 ring-1 ring-white/10 overflow-hidden">
<div class="absolute inset-y-0 left-0 bg-red-500/80" style="width:24%"></div>
<div class="absolute left-[24%] -translate-x-1/2 top-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-white shadow">
</div>
</div>
<!-- Failed bar -->
<div class="relative h-5 rounded-full bg-white/5 ring-1 ring-white/10 overflow-hidden">
<div class="absolute inset-y-0 left-0 bg-slate-300/40" style="width:13%"></div>
<div class="absolute left-[13%] -translate-x-1/2 top-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-white/80 shadow">
</div>
</div>
</div>
</div>
<div class="mt-4 pt-4 border-t border-white/5">
<p class="text-xs text-slate-400 font-geist">
<span class="text-orange-300 font-normal">+12%</span> improvement vs. industry average
</p>
</div>
</div>
</div>
<!-- Card: Customer Satisfaction -->
<div class="rounded-3xl bg-slate-900/40 ring-1 ring-white/10 backdrop-blur-md p-5 md:p-6 flex flex-col h-full animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.35s_both]">
<div class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1.5 text-xs font-medium text-white/80 ring-1 ring-white/10 font-geist w-fit">
<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="smile" class="lucide lucide-smile w-3.5 h-3.5"><circle cx="12" cy="12" r="10" class=""></circle><path d="M8 14s1.5 2 4 2 4-2 4-2" class=""></path><line x1="9" x2="9.01" y1="9" y2="9" class=""></line><line x1="15" x2="15.01" y1="9" y2="9" class=""></line></svg>
Customer satisfaction
</div>
<div class="mt-4 flex-1 flex flex-col items-center justify-center">
<div class="relative w-24 h-24">
<div class="absolute inset-0 rounded-full" style="background: conic-gradient(rgba(163,230,53,0.85) 0% 86%, rgba(255,255,255,0.12) 86% 100%);">
</div>
<div class="absolute inset-2 rounded-full bg-black/20 ring-1 ring-white/10"></div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="text-2xl font-normal tracking-tighter font-geist">4.8</div>
</div>
</div>
<p class="mt-3 text-slate-400 text-sm font-geist">CSAT • last 90 days</p>
<div class="mt-6 w-full pt-4 border-t border-white/5">
<div class="grid grid-cols-2 gap-4">
<div class="text-center">
<div class="text-lg font-normal text-slate-300 font-geist">1,240</div>
<p class="text-xs text-slate-400 font-geist">Responses</p>
</div>
<div class="text-center">
<div class="text-lg font-normal text-slate-300 font-geist">+0.3</div>
<p class="text-xs text-slate-400 font-geist">vs. Last Period</p>
</div>
</div>
</div>
</div>
</div>
<!-- Card: Deployment Time -->
<div class="rounded-3xl bg-slate-900/60 ring-1 ring-white/10 backdrop-blur-md p-5 md:p-6 flex flex-col h-full animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.4s_both]">
<div class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1.5 text-xs font-medium text-white/80 ring-1 ring-white/10 font-geist w-fit">
<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 w-3.5 h-3.5"><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>
Deployment speed
</div>
<div class="mt-4 flex-1 flex flex-col justify-between">
<div class="">
<div class="md:text-5xl text-4xl font-normal tracking-tighter font-geist">14 days</div>
<p class="text-slate-400 text-sm font-geist">Avg. from kickoff to production</p>
<div class="mt-5 grid grid-cols-3 items-center gap-3">
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded-full bg-white/10 ring-1 ring-white/10 flex items-center justify-center">
<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" data-lucide="check" class="lucide lucide-check w-4 h-4 text-orange-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</div>
<span class="text-xs text-slate-300 font-geist">Discovery</span>
</div>
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded-full bg-white/10 ring-1 ring-white/10 flex items-center justify-center">
<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" data-lucide="check" class="lucide lucide-check w-4 h-4 text-orange-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</div>
<span class="text-xs text-slate-300 font-geist">MVP</span>
</div>
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded-full bg-white/10 ring-1 ring-white/10 flex items-center justify-center">
<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" data-lucide="check" class="lucide lucide-check w-4 h-4 text-orange-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</div>
<span class="text-xs text-slate-300 font-geist">Prod</span>
</div>
</div>
</div>
<div class="mt-5 pt-4 border-t border-white/5">
<div class="grid grid-cols-2 gap-3">
<div class="">
<div class="text-lg font-normal text-slate-300 font-geist">98%</div>
<p class="text-xs text-slate-400 font-geist">On-time delivery</p>
</div>
<div class="">
<div class="text-lg font-normal text-slate-300 font-geist">24/7</div>
<p class="text-xs text-slate-400 font-geist">Support coverage</p>
</div>
</div>
</div>
</div>
</div>
<!-- Card: Model Latency -->
<div class="rounded-3xl bg-slate-900/40 ring-1 ring-white/10 backdrop-blur-md p-5 md:p-6 flex flex-col h-full animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.45s_both]">
<div class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1.5 text-xs font-medium text-white/80 ring-1 ring-white/10 font-geist w-fit">
<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="clock" class="lucide lucide-clock w-3.5 h-3.5"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
Model latency
</div>
<div class="mt-4 space-y-3 flex-1 flex flex-col justify-between">
<div class="">
<div class="text-4xl md:text-5xl font-normal tracking-tighter font-geist">120ms</div>
<p class="text-slate-400 text-sm font-geist">p95 response time</p>
<!-- Latency meter -->
<div class="mt-4">
<div class="relative h-3 rounded-full bg-white/5 ring-1 ring-white/10 overflow-hidden">
<div class="absolute inset-y-0 left-0 bg-gradient-to-r from-orange-400/80 to-red-500/80" style="width:60%">
</div>
</div>
<div class="mt-2 flex items-center justify-between text-xs text-slate-400 font-geist">
<span>0ms</span>
<span class="">200ms</span>
</div>
</div>
</div>
<div class="pt-4 border-t border-white/5">
<div class="grid grid-cols-2 gap-3">
<div class="">
<div class="text-lg font-normal text-slate-300 font-geist">99.9%</div>
<p class="text-xs text-slate-400 font-geist">Uptime SLA</p>
</div>
<div class="">
<div class="text-lg font-normal text-slate-300 font-geist">50ms</div>
<p class="text-xs text-slate-400 font-geist">p50 latency</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Logos row -->
<section class="z-10 fade-in fade-in-delay-4 sm:pb-12 sm:pt-12 pt-8 pb-8 relative animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.5s_both]" style="opacity: 1; transform: translateY(0px);">
<div class="sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pr-4 pl-4">
<div class="text-center mb-12">
<p class="uppercase text-xs font-medium text-zinc-500 tracking-wide">Trusted by teams at</p>
</div>
<!-- Ticker Container -->
<div class="overflow-hidden relative" style="mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);">
<!-- Gradient Overlays -->
<div class="z-10 pointer-events-none bg-gradient-to-r from-black via-black/80 to-transparent w-20 absolute top-0 bottom-0 left-0" style="visibility: hidden;"></div>
<!-- Animated Ticker -->
<div class="ticker-track flex gap-16 pt-2 pb-2 gap-x-16 gap-y-16 items-center">
<!-- First set of logos -->
<div class="flex gap-16 shrink-0 gap-x-16 gap-y-16 items-center">
<div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
<span class="text-lg font-normal tracking-tighter">TechFlow</span>
</div>
<div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
<span class="text-lg font-bold tracking-tighter font-bricolage">Nexus Labs</span>
</div>
<div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
<span class="text-lg font-semibold tracking-tighter font-merriweather">DataSync</span>
</div>
<div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
<span class="text-lg font-normal tracking-tighter font-instrument-serif">VisionCorp</span>
</div>
<div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
<span class="text-lg font-semibold tracking-tighter font-playfair">CloudBase</span>
</div>
<div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
<span class="text-lg font-normal tracking-tighter">InnovateTech</span>
</div>
<div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
<span class="text-lg font-bold tracking-tighter">FlowState</span>
</div>
</div>
<!-- Duplicate set for seamless loop -->
<div class="flex items-center gap-16 shrink-0">
<div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
<span class="text-lg font-normal tracking-tighter">TechFlow</span>
</div>
<div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
<span class="text-lg font-bold tracking-tighter font-bricolage">Nexus Labs</span>
</div>
<div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
<span class="text-lg font-semibold tracking-tighter font-merriweather">DataSync</span>
</div>
<div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
<span class="text-lg font-normal tracking-tighter font-instrument-serif">VisionCorp</span>
</div>
<div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
<span class="text-lg font-semibold tracking-tighter font-playfair">CloudBase</span>
</div>
<div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
<span class="text-lg font-normal tracking-tighter">InnovateTech</span>
</div>
<div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
<span class="text-lg font-bold tracking-tighter">FlowState</span>
</div>
</div>
</div>
</div>
</div>
<style>
@keyframes ticker {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.ticker-track {
animation: ticker 40s linear infinite;
width: calc(200% + 16px);
}
.ticker-track:hover {
animation-play-state: paused;
}
</style>
</section>
</div>
</section>