# Hero section 01

> Centered vertical layout hero with navigation header, AI-powered badge in muted container, decorative SVG underline animation on "Effortless" text, call-to-action button, and full-width bottom dish image showcase

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

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/hero-section-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/hero-section-01-light-9dd6c9a2c4f56349.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/hero-section-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/hero-section-01.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: `badge`, `button`, `dropdown-menu`, `navigation-menu`, `utils`

## Files

### `src/registry/new-york/blocks/marketing-ui/hero-section/hero-section-01/page.tsx`

```tsx
import HeroSection from '@/registry/new-york/components/blocks/hero-section-01/hero-section-01'
import Header from '@/registry/new-york/components/blocks/hero-section-01/header'
import type { NavigationSection } from '@/registry/new-york/components/blocks/hero-section-01/header'

const navigationData: NavigationSection[] = [
  {
    title: 'Home',
    href: '#'
  },
  {
    title: 'Products',
    href: '#'
  },
  {
    title: 'About Us',
    href: '#'
  },
  {
    title: 'Contact Us',
    href: '#'
  }
]

const HeroSectionPage = () => {
  return (
    <>
      {/* Header Section */}
      <Header navigationData={navigationData} />

      {/* Main Content */}
      <main className='flex flex-col'>
        <HeroSection />
      </main>
    </>
  )
}

export default HeroSectionPage
```

### `src/assets/svg/logo.tsx`

```tsx
// React Imports
import type { SVGAttributes } from 'react'

const Logo = (props: SVGAttributes<SVGElement>) => {
  return (
    <svg width='1em' height='1em' viewBox='0 0 328 329' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
      <rect y='0.5' width='328' height='328' rx='164' fill='black' className='dark:fill-white' />
      <path
        d='M165.018 72.3008V132.771C165.018 152.653 148.9 168.771 129.018 168.771H70.2288'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
      <path
        d='M166.627 265.241L166.627 204.771C166.627 184.889 182.744 168.771 202.627 168.771L261.416 168.771'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
      <line
        x1='238.136'
        y1='98.8184'
        x2='196.76'
        y2='139.707'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
      <line
        x1='135.688'
        y1='200.957'
        x2='94.3128'
        y2='241.845'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
      <line
        x1='133.689'
        y1='137.524'
        x2='92.5566'
        y2='96.3914'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
      <line
        x1='237.679'
        y1='241.803'
        x2='196.547'
        y2='200.671'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
    </svg>
  )
}

export default Logo
```

### `src/registry/new-york/components/blocks/hero-section-01/header.tsx`

```tsx
import { MenuIcon } from 'lucide-react'

import { Button } from '@/registry/new-york/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from '@/registry/new-york/ui/dropdown-menu'
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList
} from '@/registry/new-york/ui/navigation-menu'

import { cn } from '@/registry/new-york/lib/utils'

import Logo from '@/components/layout/logo'

export type NavigationSection = {
  title: string
  href: string
}

type HeaderProps = {
  navigationData: NavigationSection[]
  className?: string
}

const Header = ({ navigationData, className }: HeaderProps) => {
  return (
    <header className={cn('bg-background sticky top-0 z-50 h-16 border-b', className)}>
      <div className='mx-auto flex h-full max-w-7xl items-center justify-between gap-6 px-4 sm:px-6 lg:px-8'>
        {/* Logo */}
        <a href='#'>
          <Logo className='gap-3' />
        </a>

        {/* Navigation */}
        <NavigationMenu className='max-md:hidden'>
          <NavigationMenuList className='flex-wrap justify-start gap-0'>
            {navigationData.map(navItem => (
              <NavigationMenuItem key={navItem.title}>
                <NavigationMenuLink
                  href={navItem.href}
                  className='text-muted-foreground hover:text-primary px-3 py-1.5 text-base! font-medium hover:bg-transparent'
                >
                  {navItem.title}
                </NavigationMenuLink>
              </NavigationMenuItem>
            ))}
          </NavigationMenuList>
        </NavigationMenu>

        {/* Login Button */}
        <Button className='rounded-lg max-md:hidden' asChild>
          <a href='#'>Login</a>
        </Button>

        {/* Navigation for small screens */}
        <div className='flex gap-4 md:hidden'>
          <Button className='rounded-lg' asChild>
            <a href='#'>Login</a>
          </Button>

          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant='outline' size='icon'>
                <MenuIcon />
                <span className='sr-only'>Menu</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className='w-56' align='end'>
              {navigationData.map((item, index) => (
                <DropdownMenuItem key={index}>
                  <a href={item.href}>{item.title}</a>
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
  )
}

export default Header
```

### `src/registry/new-york/components/blocks/hero-section-01/hero-section-01.tsx`

```tsx
import { Badge } from '@/registry/new-york/ui/badge'
import { Button } from '@/registry/new-york/ui/button'

const HeroSection = () => {
  return (
    <section className='flex min-h-[calc(100dvh-4rem)] flex-1 flex-col justify-between gap-12 overflow-x-hidden pt-8 sm:gap-16 sm:pt-16 lg:gap-24 lg:pt-24'>
      {/* Hero Content */}
      <div className='mx-auto flex max-w-7xl flex-col items-center gap-8 px-4 text-center sm:px-6 lg:px-8'>
        <div className='bg-muted flex items-center gap-2.5 rounded-full border px-2 py-1 text-sm'>
          <Badge>AI-Powered</Badge>
          <span className='text-muted-foreground'>Solution for client-facing businesses</span>
        </div>

        <h1 className='text-3xl leading-[1.29167] font-bold text-balance sm:text-4xl lg:text-5xl'>
          Sizzling Summer Delights
          <br />
          <span className='relative'>
            Effortless
            <svg
              width='223'
              height='12'
              viewBox='0 0 223 12'
              fill='none'
              xmlns='http://www.w3.org/2000/svg'
              className='absolute inset-x-0 bottom-0 w-full translate-y-1/2 max-sm:hidden'
            >
              <path
                d='M1.11716 10.428C39.7835 4.97282 75.9074 2.70494 114.894 1.98894C143.706 1.45983 175.684 0.313587 204.212 3.31596C209.925 3.60546 215.144 4.59884 221.535 5.74551'
                stroke='url(#paint0_linear_10365_68643)'
                strokeWidth='2'
                strokeLinecap='round'
              />
              <defs>
                <linearGradient
                  id='paint0_linear_10365_68643'
                  x1='18.8541'
                  y1='3.72033'
                  x2='42.6487'
                  y2='66.6308'
                  gradientUnits='userSpaceOnUse'
                >
                  <stop stopColor='var(--primary)' />
                  <stop offset='1' stopColor='var(--primary-foreground)' />
                </linearGradient>
              </defs>
            </svg>
          </span>{' '}
          Recipes for Parties!
        </h1>

        <p className='text-muted-foreground'>
          Dive into a world of flavor this summer with our collection of Sizzling Summer Delights!
          <br />
          From refreshing appetizers to delightful desserts
        </p>

        <Button size='lg' asChild>
          <a href='#'>Try It Now</a>
        </Button>
      </div>

      {/* Image */}
      <img
        src='https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/hero/image-19.png'
        alt='Dishes'
        className='w-full object-cover'
        style={{ minHeight: '268px!important' }}
      />
    </section>
  )
}

export default HeroSection
```

### `src/components/layout/logo.tsx`

```tsx
// SVG Imports
import LogoSvg from '@/assets/svg/logo'

// Util Imports
import { cn } from '@/registry/new-york/lib/utils'

const Logo = ({ className }: { className?: string }) => {
  return (
    <div className={cn('flex items-center gap-2.5', className)}>
      <LogoSvg className='size-8.5' />
      <span className='text-xl font-bold'>shadcn/studio</span>
    </div>
  )
}

export default Logo
```