# Video 3

> 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-3).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/video-3
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/video-3/light.png
- Registry item: https://blocks.cnippet.dev/r/video-3.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-3.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/button`

## Files

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

```tsx
//biome-ignore-all lint/suspicious/noArrayIndexKey:<>

"use client";

import { CheckCircle, Play } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function Component() {
  const features = [
    "Seamless collaboration tools",
    "Real-time synchronization",
    "Advanced security features",
    "24/7 customer support",
  ];

  return (
    <div className="w-full bg-white px-4 py-16 md:py-20 dark:bg-background">
      <div className="mx-auto max-w-6xl">
        <div className="grid gap-8 md:grid-cols-2 lg:gap-12">
          {/* Left: Video */}
          <div className="group relative aspect-video overflow-hidden rounded-2xl bg-gray-900 md:aspect-square">
            <img
              alt="Product demo"
              className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
              src="https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h1.jpg"
            />
            <div className="absolute inset-0 bg-linear-to-br from-violet-600/20 to-black/40" />
            <div className="absolute inset-0 flex items-center justify-center">
              <Button
                className="h-16 w-16 rounded-full bg-white/95 p-0 shadow-lg transition-all hover:scale-110 hover:bg-white dark:bg-white/95 dark:hover:bg-white"
                size="icon"
              >
                <Play className="ml-1 h-6 w-6 fill-violet-600 text-violet-600" />
              </Button>
            </div>
          </div>

          {/* Right: Content */}
          <div className="flex flex-col justify-center">
            <h2 className="mb-4 font-normal text-3xl text-gray-900 md:text-4xl lg:text-5xl dark:text-gray-100">
              Transform your workflow today
            </h2>
            <p className="mb-6 text-gray-600 text-sm leading-relaxed sm:text-base dark:text-gray-400">
              Discover how our platform can help you streamline processes,
              increase productivity, and achieve better results.
            </p>
            <ul className="mb-8 space-y-3">
              {features.map((feature, index) => (
                <li
                  className="flex items-center gap-3 text-gray-700 text-sm dark:text-gray-300"
                  key={index}
                >
                  <CheckCircle className="h-5 w-5 shrink-0 text-violet-600 dark:text-violet-400" />
                  {feature}
                </li>
              ))}
            </ul>
            <div>
              <Button className="bg-violet-600 hover:bg-violet-700 dark:bg-violet-600 dark:hover:bg-violet-700">
                Start Free Trial
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
```