# Video Testimonial

> A pull quote beside its 90-second video proof.

A shadcn/ui block from the [@blockforge](https://blockforge.terravidhal.me) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blockforge/video-testimonial).

- Page, with a live preview: https://shadcn.exchange/r/blockforge/video-testimonial
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blockforge/video-testimonial-light-9fd1f7bf7390cfc0.png
- Registry item: https://blockforge.terravidhal.me/r/video-testimonial.json
- Categories: video
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blockforge.terravidhal.me/r/video-testimonial.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`

## Files

### `registry/blocks/video-testimonial.tsx`

```tsx
import { Play } from "lucide-react";

export default function VideoTestimonial() {
  return (
    <section className="border-y border-border/60 bg-muted/30">
      <div className="mx-auto grid w-full max-w-5xl items-center gap-10 px-6 py-20 sm:py-24 lg:grid-cols-2">
        <div>
          <blockquote className="text-2xl font-medium tracking-tight text-balance sm:text-3xl">
            “We migrated forty services in a quarter. Our old platform took a
            year to onboard twelve.”
          </blockquote>
          <p className="mt-6 text-sm font-medium">Imane Rekik</p>
          <p className="text-sm text-muted-foreground">
            Engineering manager, Corda — 220 engineers
          </p>
        </div>

        {/* Compact player card */}
        <button
          type="button"
          aria-label="Watch the Corda story, 1 minute 32"
          className="group relative overflow-hidden rounded-xl border border-border/60 bg-foreground text-left shadow-sm"
        >
          <div className="relative aspect-video">
            <div
              aria-hidden
              className="absolute inset-0 bg-[linear-gradient(to_right,color-mix(in_oklab,var(--background)_10%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_oklab,var(--background)_10%,transparent)_1px,transparent_1px)] bg-[size:32px_32px]"
            />
            <span className="absolute top-1/2 left-1/2 flex size-14 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-background text-foreground shadow-lg transition-transform group-hover:scale-105 motion-reduce:transition-none">
              <Play className="ml-0.5 size-5 fill-current" />
            </span>
            <span className="absolute right-3 bottom-3 rounded-md bg-background/15 px-2 py-0.5 font-mono text-[11px] text-background tabular-nums">
              1:32
            </span>
          </div>
        </button>
      </div>
    </section>
  );
}
```