# Hero Section 2

> A split hero built around a fixed-ratio media card for a product image or video

A shadcn/ui block from the [@shadcnstore](https://www.shadcnstore.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnstore/hero-section-2).

- Page, with a live preview: https://shadcn.exchange/r/shadcnstore/hero-section-2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnstore/hero-section-2-light-5b42cecce5c93d65.png
- Registry item: https://shadcnstore.com/r/hero-section-2.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstore.com/r/hero-section-2.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: `aspect-ratio`, `badge`, `button`, `card`

## Files

### `storage/app/registry-sources/marketing/hero-sections/hero-section-2/page.tsx`

```tsx
import { HeroSection2 } from "@/components/blocks/marketing/hero-sections/hero-section-2/components/hero-section-2"

export default function Page() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center">
      <div className="w-full">
        <HeroSection2 />
      </div>
    </div>
  )
}
```

### `storage/app/registry-sources/marketing/hero-sections/hero-section-2/hero-section-2.tsx`

```tsx
'use client'

import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Play, Medal } from 'lucide-react'
import { AspectRatio } from '@/components/ui/aspect-ratio'
import { Card, CardContent } from '@/components/ui/card'
import { useState } from 'react'

export function HeroSection2() {
  const [isPlaying, setIsPlaying] = useState(false)

  return (
    <section className='w-full py-12 md:py-16 lg:py-20'>
      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
        <div className='grid items-center gap-8 lg:grid-cols-2 lg:gap-12'>
          <div className='flex flex-col items-center gap-6 lg:items-start'>
            <Badge variant='outline' className='h-auto font-semibold [&>svg]:size-4! rounded-md text-muted-foreground gap-2 px-4 py-2'>
              <Medal aria-hidden='true' />
              PREMIUM COMPONENTS
            </Badge>

            <div className='flex flex-col gap-4 text-center lg:text-start'>
              <h1 className='text-4xl font-bold tracking-tight text-balance md:text-5xl'>
                Build Beautiful UIs with ShadcnStore
              </h1>
              <p className='text-muted-foreground text-balance md:text-lg'>
                Access our premium collection of responsive, accessible, and customizable UI components to accelerate
                your development workflow.
              </p>
            </div>

            <div className='flex flex-wrap items-center justify-center gap-4 lg:justify-start'>
              <Button size='lg' className="h-10 px-8 cursor-pointer">
                Browse Components
              </Button>
              <Button variant='outline' size='lg' className="h-10 px-8 cursor-pointer">
                View Documentation
              </Button>
            </div>
          </div>

          <div className='group relative overflow-hidden rounded-xl'>
            <Card className='overflow-hidden border-0 shadow-lg py-0'>
              <CardContent className='p-0'>
                <AspectRatio ratio={16 / 9}>
                  {isPlaying ? (
                    <iframe
                      src='https://www.youtube.com/embed/zc6JjX95Tn0?si=TxJQQ8F9CXAvloUs'
                      title='Shadcn UI Tutorial - Build Beautiful Interfaces'
                      allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
                      allowFullScreen
                      className='size-full rounded-lg'
                      loading='lazy'
                    />
                  ) : (
                    <div className='relative size-full'>
                      <img
                        src='https://ui.shadcn.com/placeholder.svg'
                        alt='ShadcnStore Demo'
                        className='size-full rounded-lg object-cover dark:brightness-[0.95] dark:invert'
                        width={800}
                        height={450}
                      />
                      <div className='from-background/40 via-background/20 absolute inset-0 bg-gradient-to-t to-transparent' />

                      <Button
                        variant='ghost'
                        onClick={() => setIsPlaying(true)}
                        className="h-9 px-4 py-2 focus-visible:ring-ring/50 absolute inset-0 flex size-full cursor-pointer items-center justify-center transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:outline-none"
                        aria-label='Play demo video'
                      >
                        <div className='bg-background/90 flex size-14 items-center justify-center rounded-full shadow-lg transition-transform hover:scale-105'>
                          <Play size={20} className='ms-1' />
                        </div>
                      </Button>

                      <div className='absolute start-4 end-4 bottom-4'>
                        <p className='text-foreground text-sm font-medium'>Watch Demo</p>
                        <p className='text-muted-foreground text-xs'>1:54 mins</p>
                      </div>
                    </div>
                  )}
                </AspectRatio>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </section>
  )
}

export default HeroSection2
```