All Prompts
All Prompts
testimonialsectionanimatedresponsiveinteractivetailwinddarkglassmorphism
Cinematic Floating Testimonials Section
Кинематографичная секция отзывов с 3 анимированными карточками. Демонстрирует доверие клиентов на страницах продуктов. Адаптивный дизайн.
Prompt
<section class="sm:py-32 overflow-hidden bg-[#09090b] pt-24 pb-24 relative">
<style>
@keyframes float-1 {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-12px) rotate(0.5deg);
}
}
@keyframes float-2 {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-16px) rotate(-0.5deg);
}
}
@keyframes float-3 {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(0.5deg);
}
}
@keyframes laser-scan {
0% {
top: -10%;
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
top: 110%;
opacity: 0;
}
}
</style>
<!-- Cinematic Ambient Lighting -->
<div
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-[800px] h-[600px] bg-indigo-500/5 rounded-full blur-[120px] pointer-events-none z-0">
</div>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
<!-- Header -->
<div class="text-center mb-24 scroll-animate">
<div
class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-zinc-800 bg-zinc-900/50 mb-6 shadow-inner">
<div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shadow-[0_0_8px_#6366f1] animate-pulse"></div>
<span class="text-[10px] font-mono text-zinc-400 tracking-widest uppercase">
Verified Node Telemetry
</span>
</div>
<h2 class="text-4xl md:text-5xl font-medium tracking-tight text-zinc-100 drop-shadow-md">
Trusted by leading teams
</h2>
</div>
<!-- Cascading Holographic Layout -->
<div class="relative w-full max-w-5xl mx-auto flex flex-col gap-12 md:gap-0 pb-12 perspective-1000">
<!-- Central Physical Connection Line (Desktop Only) -->
<div class="hidden md:block absolute top-[5%] bottom-[5%] left-[50%] -translate-x-1/2 w-px bg-zinc-800/60 z-0">
<div
class="absolute top-0 left-1/2 -translate-x-1/2 w-[2px] h-48 bg-indigo-500 rounded-full shadow-[0_0_15px_#6366f1]"
style="animation: laser-scan 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;"></div>
</div>
<!-- Node 1: Top Left -->
<div
class="md:w-[65%] tactile-glass p-8 md:p-12 rounded-[2.5rem] border border-zinc-700/50 relative z-10 transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] hover:z-50 hover:-translate-y-4 hover:shadow-[0_40px_80px_rgba(0,0,0,0.8)] hover:border-indigo-500/40 group overflow-hidden scroll-animate md:-ml-6 shadow-[0_20px_40px_rgba(0,0,0,0.4)]"
style="animation: float-1 8s ease-in-out infinite;">
<!-- Interactive Gradient Reveal -->
<div
class="absolute inset-0 bg-gradient-to-br from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none">
</div>
<!-- Subtle Oversized Quote -->
<div
class="absolute -top-10 -right-4 text-[180px] font-serif text-white opacity-[0.02] group-hover:opacity-[0.06] transition-all duration-700 pointer-events-none leading-none group-hover:rotate-12 group-hover:scale-110">
"
</div>
<div class="relative z-10 flex flex-col md:flex-row gap-6 md:gap-8 items-start">
<!-- Tactile Avatar Module -->
<div
class="w-16 h-16 rounded-2xl tactile-inset p-1.5 flex-shrink-0 border border-zinc-800 shadow-[inset_0_2px_10px_rgba(0,0,0,0.8)] relative group-hover:border-indigo-500/40 transition-colors duration-700">
<div
class="absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-zinc-900 border border-zinc-700 flex items-center justify-center z-20 shadow-lg group-hover:border-indigo-500/50 transition-colors">
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_#10b981]"></div>
</div>
<div
class="w-full h-full rounded-xl bg-zinc-800 bg-[url('https://i.pravatar.cc/100?img=1')] bg-cover grayscale group-hover:grayscale-0 transition-all duration-700 filter contrast-125">
</div>
</div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-3 mb-6">
<span class="text-[10px] font-mono text-zinc-200 tracking-widest uppercase border border-zinc-700 bg-zinc-800/80 rounded px-3 py-1.5 shadow-inner group-hover:border-indigo-500/40 group-hover:text-indigo-300 transition-colors duration-700">
Sarah Jenkins
</span>
<span class="text-[10px] font-mono text-zinc-500 tracking-widest uppercase">
CTO @ TechFlow
</span>
</div>
<p
class="text-xl md:text-2xl font-normal text-zinc-300 leading-relaxed tracking-tight group-hover:text-white transition-colors duration-700">
"Nexus completely transformed how we ship models. The physical
control over the infrastructure layer is unmatched."
</p>
</div>
</div>
</div>
<!-- Node 2: Middle Right (Offset & Overlapping) -->
<div
class="md:w-[70%] md:ml-auto tactile-glass p-8 md:p-12 rounded-[2.5rem] border border-zinc-700/50 relative z-20 transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] hover:z-50 hover:-translate-y-4 hover:shadow-[0_40px_80px_rgba(0,0,0,0.8)] hover:border-indigo-500/40 group overflow-hidden scroll-animate md:-mt-16 md:-mr-6 shadow-[0_25px_50px_rgba(0,0,0,0.5)]"
style="animation: float-2 9s ease-in-out infinite 1s;">
<div
class="absolute inset-0 bg-gradient-to-bl from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none">
</div>
<div
class="absolute -bottom-10 -left-6 text-[180px] font-serif text-white opacity-[0.02] group-hover:opacity-[0.06] transition-all duration-700 pointer-events-none leading-none group-hover:-rotate-12 group-hover:scale-110">
"
</div>
<div class="relative z-10 flex flex-col md:flex-row-reverse gap-6 md:gap-8 items-start text-left md:text-right">
<div
class="w-16 h-16 rounded-2xl tactile-inset p-1.5 flex-shrink-0 border border-zinc-800 shadow-[inset_0_2px_10px_rgba(0,0,0,0.8)] relative group-hover:border-indigo-500/40 transition-colors duration-700">
<div
class="absolute -bottom-1.5 -left-1.5 w-4 h-4 rounded-full bg-zinc-900 border border-zinc-700 flex items-center justify-center z-20 shadow-lg group-hover:border-indigo-500/50 transition-colors">
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_#10b981]"></div>
</div>
<div
class="w-full h-full rounded-xl bg-zinc-800 bg-[url('https://i.pravatar.cc/100?img=11')] bg-cover grayscale group-hover:grayscale-0 transition-all duration-700 filter contrast-125">
</div>
</div>
<div class="flex-1 flex flex-col md:items-end">
<div class="flex flex-wrap items-center gap-3 mb-6">
<span class="text-[10px] font-mono text-zinc-500 tracking-widest uppercase">
Lead Dev @ StartupX
</span>
<span class="text-[10px] font-mono text-zinc-200 tracking-widest uppercase border border-zinc-700 bg-zinc-800/80 rounded px-3 py-1.5 shadow-inner group-hover:border-indigo-500/40 group-hover:text-indigo-300 transition-colors duration-700">
Marcus Rhodes
</span>
</div>
<p
class="text-xl md:text-2xl font-normal text-zinc-300 leading-relaxed tracking-tight group-hover:text-white transition-colors duration-700">
"The edge routing latency is incredible. We saw our response
times drop by 40% globally within a week."
</p>
</div>
</div>
</div>
<!-- Node 3: Bottom Center/Left (Offset & Overlapping) -->
<div
class="md:w-[68%] md:ml-[15%] tactile-glass p-8 md:p-12 rounded-[2.5rem] border border-zinc-700/50 relative z-30 transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] hover:z-50 hover:-translate-y-4 hover:shadow-[0_40px_80px_rgba(0,0,0,0.8)] hover:border-indigo-500/40 group overflow-hidden scroll-animate md:-mt-20 shadow-[0_30px_60px_rgba(0,0,0,0.6)]"
style="animation: float-3 10s ease-in-out infinite 2s;">
<div
class="absolute inset-0 bg-gradient-to-t from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none">
</div>
<div
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[240px] font-serif text-white opacity-[0.015] group-hover:opacity-[0.05] transition-all duration-1000 pointer-events-none leading-none group-hover:scale-125">
"
</div>
<div class="relative z-10 flex flex-col md:flex-row gap-6 md:gap-8 items-start">
<div
class="w-16 h-16 rounded-2xl tactile-inset p-1.5 flex-shrink-0 border border-zinc-800 shadow-[inset_0_2px_10px_rgba(0,0,0,0.8)] relative group-hover:border-indigo-500/40 transition-colors duration-700">
<div
class="absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-zinc-900 border border-zinc-700 flex items-center justify-center z-20 shadow-lg group-hover:border-indigo-500/50 transition-colors">
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_#10b981]"></div>
</div>
<div
class="w-full h-full rounded-xl bg-zinc-800 bg-[url('https://i.pravatar.cc/100?img=5')] bg-cover grayscale group-hover:grayscale-0 transition-all duration-700 filter contrast-125">
</div>
</div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-3 mb-6">
<span class="text-[10px] font-mono text-zinc-200 tracking-widest uppercase border border-zinc-700 bg-zinc-800/80 rounded px-3 py-1.5 shadow-inner group-hover:border-indigo-500/40 group-hover:text-indigo-300 transition-colors duration-700">
Amanda Lee
</span>
<span class="text-[10px] font-mono text-zinc-500 tracking-widest uppercase">
VP Eng @ CloudScale
</span>
</div>
<p
class="text-xl md:text-2xl font-normal text-zinc-300 leading-relaxed tracking-tight group-hover:text-white transition-colors duration-700">
"Integrated flawlessly into our CI/CD pipelines. The hardware
autoscaling handles Black Friday without manual intervention."
</p>
</div>
</div>
</div>
</div>
</div>
</section>