# Video 4

> video

A shadcn/ui block from the [@cnippet-blocks](https://blocks.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet-blocks/video-4).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/video-4
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/video-4/light.png
- Registry item: https://blocks.cnippet.dev/r/video-4.json
- Categories: video
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet-blocks/video-4.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`
- Registry items: `@cnippet/badge`

## Files

### `registry/default/sections/video-4.tsx`

```tsx
"use client";

import { Clock, Play, Users } from "lucide-react";
import { Badge } from "@/components/ui/badge";

export default function Component() {
  return (
    <div className="w-full bg-gray-50 px-4 py-16 md:py-20 dark:bg-neutral-900">
      <div className="mx-auto max-w-4xl">
        <div className="mb-8 text-center">
          <Badge className="mb-4">Featured</Badge>
          <h2 className="mb-4 font-normal text-3xl text-gray-900 md:text-4xl lg:text-5xl dark:text-gray-100">
            Join our live webinar
          </h2>
          <p className="mx-auto max-w-2xl text-gray-600 text-sm sm:text-base dark:text-gray-400">
            Learn from industry experts about the future of modern workflows
          </p>
        </div>

        <div className="mb-8 overflow-hidden rounded-2xl bg-white shadow-xl dark:bg-neutral-800">
          <div className="group relative aspect-video bg-gray-900">
            <img
              alt="Webinar"
              className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
              src="https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h2.jpg"
            />
            <div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/40 to-transparent" />
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="flex h-20 w-20 items-center justify-center rounded-full bg-white/95 shadow-2xl transition-all hover:scale-110 hover:bg-white">
                <Play className="ml-1.5 h-8 w-8 fill-violet-600 text-violet-600" />
              </div>
            </div>
            <div className="absolute top-4 left-4 rounded-full bg-red-500 px-3 py-1.5 font-medium text-white text-xs">
              LIVE
            </div>
          </div>

          <div className="p-6 sm:p-8">
            <div className="mb-6 flex flex-wrap gap-4 text-gray-600 text-sm dark:text-gray-400">
              <div className="flex items-center gap-2">
                <Clock className="h-4 w-4" />
                <span>45 minutes</span>
              </div>
              <div className="flex items-center gap-2">
                <Users className="h-4 w-4" />
                <span>2,345 watching now</span>
              </div>
            </div>
            <h3 className="mb-3 font-medium text-gray-900 text-lg sm:text-xl dark:text-gray-100">
              Building Scalable Applications in 2026
            </h3>
            <p className="text-gray-600 text-xs leading-relaxed sm:text-sm dark:text-gray-400">
              Join Sarah Chen, VP of Engineering, as she shares proven
              strategies for building applications that scale. Learn about
              architecture patterns, performance optimization, and team
              collaboration.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
```