Загрузка...
Секция с видео-карточками клиентов. Отзывы клиентов в виде адаптивной сетки 3 колонок с эффектом стекла. Идеально для демонстрации кейсов.
<section id="product" class="bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/31cad904-f00d-40ae-ba05-a23e01be6ada_3840w.jpg)] w-full bg-cover pt-16 pb-16">
<div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4">
<div class="text-center">
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs bg-white/5 border border-white/10 text-gray-300">Customer stories</span>
<h2 class="sm:text-5xl text-4xl tracking-tight mt-4" style="font-weight: 600">
Discover how <span class="italic" style="font-weight: 500">real teams</span> automate their workflow.
</h2>
<p class="mt-3 text-gray-300 max-w-3xl mx-auto">
Unscripted clips from people automating their day-to-day. New workflows, less context switching, happier teams.
</p>
</div>
<div class="mt-8 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="group relative overflow-hidden hover:border-white/15 transition-all bg-black/40 border-white/10 border rounded-2xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-lg">
<div class="relative aspect-video rounded-xl overflow-hidden border border-white/10">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6a8399dc-9cc9-4f4f-a393-c5dc669e58ae_800w.jpg" alt="Customer video thumbnail" class="w-full h-full object-cover" style="">
<button type="button" class="absolute inset-0 grid place-items-center">
<span class="inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-500 text-black ring-1 ring-white/10 shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play w-5 h-5"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
</span>
</button>
<div class="absolute inset-x-0 bottom-0 p-2">
<div class="flex items-center justify-between text-[11px] text-white">
<span>00:00</span>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="volume-2" class="lucide lucide-volume-2 w-3.5 h-3.5"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" class=""></path><path d="M16 9a5 5 0 0 1 0 6" class=""></path><path d="M19.364 18.364a9 9 0 0 0 0-12.728" class=""></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="settings" class="lucide lucide-settings w-3.5 h-3.5"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="expand" class="lucide lucide-expand w-3.5 h-3.5"><path d="m15 15 6 6" class=""></path><path d="m15 9 6-6" class=""></path><path d="M21 16v5h-5" class=""></path><path d="M21 8V3h-5" class=""></path><path d="M3 16v5h5" class=""></path><path d="m3 21 6-6" class=""></path><path d="M3 8V3h5" class=""></path><path d="M9 9 3 3" class=""></path></svg>
</div>
</div>
<div class="mt-1 h-1.5 rounded bg-white/10 overflow-hidden">
<div class="h-1.5 rounded bg-blue-500" style="width: 22%;"></div>
</div>
</div>
</div>
<div class="mt-4">
<p class="text-lg italic" style="font-weight: 500">lumen</p>
<p class="mt-2 text-sm text-gray-300">“We consolidated three tools and shaved minutes off every task. Setup took under 10 minutes.”</p>
<p class="mt-4 text-xs text-gray-500">Jamal Ortiz • Ops Lead, Lumen Studio</p>
</div>
</div>
<!-- Card 2 -->
<div class="group relative overflow-hidden hover:border-white/15 transition-all bg-black/40 border-white/10 border rounded-2xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-lg">
<div class="relative aspect-video rounded-xl overflow-hidden border border-white/10">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/09af58f4-5734-4602-a993-9208786f9267_800w.jpg" alt="Customer video thumbnail" class="w-full h-full object-cover">
<button type="button" class="absolute inset-0 grid place-items-center">
<span class="inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-500 text-black ring-1 ring-white/10 shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play w-5 h-5"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
</span>
</button>
<div class="absolute inset-x-0 bottom-0 p-2">
<div class="flex items-center justify-between text-[11px] text-white">
<span>00:00</span>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="volume-2" class="lucide lucide-volume-2 w-3.5 h-3.5"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" class=""></path><path d="M16 9a5 5 0 0 1 0 6" class=""></path><path d="M19.364 18.364a9 9 0 0 0 0-12.728" class=""></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="settings" class="lucide lucide-settings w-3.5 h-3.5"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="expand" class="lucide lucide-expand w-3.5 h-3.5"><path d="m15 15 6 6" class=""></path><path d="m15 9 6-6" class=""></path><path d="M21 16v5h-5" class=""></path><path d="M21 8V3h-5" class=""></path><path d="M3 16v5h5" class=""></path><path d="m3 21 6-6" class=""></path><path d="M3 8V3h5" class=""></path><path d="M9 9 3 3" class=""></path></svg>
</div>
</div>
<div class="mt-1 h-1.5 rounded bg-white/10 overflow-hidden">
<div class="h-1.5 rounded bg-blue-500" style="width: 35%;"></div>
</div>
</div>
</div>
<div class="mt-4">
<div class="flex items-center gap-2">
<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" data-lucide="toggle-left" class="lucide lucide-toggle-left w-4 h-4 text-gray-300"><circle cx="9" cy="12" r="3" class=""></circle><rect width="20" height="14" x="2" y="5" rx="7" class=""></rect></svg>
<p class="text-xl tracking-tight" style="font-weight: 600">Northwind</p>
</div>
<p class="mt-2 text-sm text-gray-300">“Week one, results were obvious. Voice triggers cut our context switching to almost zero.”</p>
<p class="mt-4 text-xs text-gray-500">Riya Sen • Founder, Northwind</p>
</div>
</div>
<!-- Card 3 -->
<div class="group relative overflow-hidden hover:border-white/15 transition-all bg-black/40 border-white/10 border rounded-2xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-lg">
<div class="relative aspect-video rounded-xl overflow-hidden border border-white/10">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/90c7269b-467c-4ab1-b003-073d48f6ce28_800w.jpg" alt="Customer video thumbnail" class="w-full h-full object-cover">
<button type="button" class="absolute inset-0 grid place-items-center">
<span class="inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-500 text-black ring-1 ring-white/10 shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play w-5 h-5"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
</span>
</button>
<div class="absolute inset-x-0 bottom-0 p-2">
<div class="flex items-center justify-between text-[11px] text-white">
<span>00:00</span>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="volume-2" class="lucide lucide-volume-2 w-3.5 h-3.5"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" class=""></path><path d="M16 9a5 5 0 0 1 0 6" class=""></path><path d="M19.364 18.364a9 9 0 0 0 0-12.728" class=""></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="settings" class="lucide lucide-settings w-3.5 h-3.5"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="expand" class="lucide lucide-expand w-3.5 h-3.5"><path d="m15 15 6 6" class=""></path><path d="m15 9 6-6" class=""></path><path d="M21 16v5h-5" class=""></path><path d="M21 8V3h-5" class=""></path><path d="M3 16v5h5" class=""></path><path d="m3 21 6-6" class=""></path><path d="M3 8V3h5" class=""></path><path d="M9 9 3 3" class=""></path></svg>
</div>
</div>
<div class="mt-1 h-1.5 rounded bg-white/10 overflow-hidden">
<div class="h-1.5 rounded bg-blue-500" style="width: 48%;"></div>
</div>
</div>
<div class="absolute inset-y-0 right-0 w-1/3 pointer-events-none bg-gradient-to-l from-black/60 to-transparent hidden lg:block"></div>
<span class="absolute right-3 top-1/2 -translate-y-1/2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-black shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-right" class="lucide lucide-chevron-right w-3.5 h-3.5"><path d="m9 18 6-6-6-6" class=""></path></svg>
</span>
</div>
<div class="mt-4">
<p class="text-xl tracking-tight uppercase" style="font-weight: 600">Oak & Pine</p>
<p class="mt-2 text-sm text-gray-300">“Automated follow‑ups and window layouts boosted conversions and kept our team in flow.”</p>
<p class="mt-4 text-xs text-gray-500">Naomi Park • CEO, Oak & Pine</p>
</div>
</div>
</div>
</div>
</section>