testimonials video customer-stories social-proof play-button quotes testimonials video customer-stories play-button quotes social-proof testimonials with video thumbnails customer story cards with play button video testimonial grid
Testimonials With Video
Fetch pattern JSON:
curl https://webspire.de/patterns/testimonials/with-video.json with-video.html
<section class="ws-testimonials bg-[var(--ws-testimonials-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-testimonials-accent)]">Customer stories</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-testimonials-text)] sm:text-4xl">From the people who use it every day</h2>
</div>
<div class="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Testimonial with video -->
<div class="flex flex-col gap-6 rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
<!-- Video thumbnail -->
<div class="group relative aspect-video cursor-pointer overflow-hidden rounded-xl bg-[var(--ws-testimonials-bg)]">
<div class="absolute inset-0 flex items-center justify-center bg-slate-900/60">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--ws-color-surface)] shadow-lg transition-transform group-hover:scale-110">
<svg class="h-5 w-5 translate-x-0.5 text-slate-900" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</div>
</div>
<div class="h-full w-full bg-[var(--ws-testimonials-border)]"></div>
</div>
<!-- Quote -->
<blockquote class="flex-1">
<p class="text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"It really did feel like magic. The level of visibility we have now — into where sensitive data lives and how it moves — is something I couldn't have imagined with our previous stack."</p>
</blockquote>
<!-- Attribution -->
<div class="flex items-center gap-3">
<div class="h-10 w-10 shrink-0 rounded-full bg-[var(--ws-testimonials-border)]"></div>
<div>
<p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Alex Faiella</p>
<p class="text-xs text-[var(--ws-testimonials-text-soft)]">VP Security, ThoughtSpot</p>
</div>
</div>
</div>
<!-- Testimonial with video -->
<div class="flex flex-col gap-6 rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
<div class="group relative aspect-video cursor-pointer overflow-hidden rounded-xl bg-[var(--ws-testimonials-bg)]">
<div class="absolute inset-0 flex items-center justify-center bg-indigo-900/70">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--ws-color-surface)] shadow-lg transition-transform group-hover:scale-110">
<svg class="h-5 w-5 translate-x-0.5 text-slate-900" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</div>
</div>
<div class="h-full w-full bg-[var(--ws-testimonials-border)]"></div>
</div>
<blockquote class="flex-1">
<p class="text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"We went from a backlog of hundreds of unresolved data incidents to near-zero in three months. The automated remediation alone saved us more than a full-time equivalent."</p>
</blockquote>
<div class="flex items-center gap-3">
<div class="h-10 w-10 shrink-0 rounded-full bg-[var(--ws-testimonials-border)]"></div>
<div>
<p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Maria Chen</p>
<p class="text-xs text-[var(--ws-testimonials-text-soft)]">CISO, Guild Education</p>
</div>
</div>
</div>
<!-- Testimonial with video -->
<div class="flex flex-col gap-6 rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
<div class="group relative aspect-video cursor-pointer overflow-hidden rounded-xl bg-[var(--ws-testimonials-bg)]">
<div class="absolute inset-0 flex items-center justify-center bg-emerald-900/70">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--ws-color-surface)] shadow-lg transition-transform group-hover:scale-110">
<svg class="h-5 w-5 translate-x-0.5 text-slate-900" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</div>
</div>
<div class="h-full w-full bg-[var(--ws-testimonials-border)]"></div>
</div>
<blockquote class="flex-1">
<p class="text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"The onboarding was surprisingly fast. Within a week we had full coverage across our SaaS stack and the first risk report was more detailed than anything we'd produced manually."</p>
</blockquote>
<div class="flex items-center gap-3">
<div class="h-10 w-10 shrink-0 rounded-full bg-[var(--ws-testimonials-border)]"></div>
<div>
<p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">James Okafor</p>
<p class="text-xs text-[var(--ws-testimonials-text-soft)]">Head of IT Security, Akamai</p>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
testimonialsvideocustomer-storiessocial-proofplay-buttonquotes
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Optional kicker and section title. |
| testimonials | Yes | Three cards each with video thumbnail, quote, and author attribution. |
Three testimonial cards with a video thumbnail at the top (aspect-video ratio, play button overlay), followed by a blockquote and author attribution. The play button scales on hover via group-hover:scale-110. Replace the placeholder thumbnail div with a real <img> or <video> poster. Link the thumbnail to open a modal or navigate to a case study page.