# Hero Section v1

> Full hero block: two-column headline/CTA, brands marquee strip, and animated macOS terminal integration demo.

A shadcn/ui block from the [@uiception](https://uiception.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/hero-section-v1).

- Page, with a live preview: https://shadcn.exchange/r/uiception/hero-section-v1
- Screenshot: https://shadcn.exchange/shot/uiception/hero-section-v1/light.png
- Registry item: https://uiception.com/r/hero-section-v1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/hero-section-v1.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: `geist`
- Registry items: `https://uiception.com/r/block-media.json`, `button`, `https://uiception.com/r/mac-os-terminal.json`, `https://uiception.com/r/brands-section-v1.json`

## Files

### `registry/new-york/blocks/hero-section-v1/page.tsx`

```tsx
import HeroSectionV1 from "./components/hero-section-v1"

export default function Page() {
  return <HeroSectionV1 />
}
```

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

```tsx
import { GeistSans } from "geist/font/sans"
import { GeistPixelCircle } from "geist/font/pixel"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { ArrowUpRightIcon } from "lucide-react"

import BrandsSectionV1 from "../../brands-section-v1/components/brands-section-v1"
import MacOsTerminal from "../../mac-os-terminal/components/mac-os-terminal"
import { HeroV1Image } from "./hero-v1-image"

export default function HeroSectionV1() {
  return (
    <>
      <section className="py-4 md:py-6 lg:py-8">
        <div className="mx-auto max-w-6xl px-4">
          <div className="grid gap-10 lg:grid-cols-2 lg:items-start lg:gap-12">
            <h1
              className={cn(
                GeistSans.className,
                "text-4xl font-medium tracking-tight sm:text-5xl lg:text-6xl xl:text-7xl"
              )}
            >
              Agents built{" "}
              <span
                className={`${GeistPixelCircle.className} font-normal tracking-normal`}
              >
                for coding
              </span>
            </h1>

            <div className="flex flex-col gap-6">
              <p
                className={cn(
                  GeistSans.className,
                  "text-lg leading-relaxed text-muted-foreground sm:text-xl"
                )}
              >
                Build and deploy AI coding agents with a single SDK. Get
                composable tools, intelligent model routing, and deep codebase
                context that works across any repository.
              </p>
              <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap">
                <Button
                  className={GeistSans.className}
                  variant="default"
                  size="lg"
                >
                  Start building
                  <ArrowUpRightIcon data-icon="inline-end" />
                </Button>
                <Button
                  className={GeistSans.className}
                  variant="outline"
                  size="lg"
                >
                  View docs
                  <ArrowUpRightIcon data-icon="inline-end" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <BrandsSectionV1 />

      <section className="px-4 py-4 md:py-6 lg:py-8">
        <div className="relative isolate mx-auto max-w-6xl overflow-hidden rounded-2xl px-4 py-10 md:px-8 md:py-14">
          <HeroV1Image />
          <MacOsTerminal className="relative z-1 mx-auto w-full max-w-2xl min-w-0" />
        </div>
      </section>
    </>
  )
}
```

### `registry/new-york/blocks/hero-section-v1/components/hero-v1-image.tsx`

```tsx
import Image from "next/image"
import { createBlockImage } from "@/lib/block-media"

const blockImage = createBlockImage("hero-section-v1")

const HERO_V1_BG = blockImage("image.png")

export function HeroV1Image() {
  return (
    <Image
      src={HERO_V1_BG}
      unoptimized
      alt=""
      fill
      className="pointer-events-none absolute inset-0 z-0 object-cover object-center"
      sizes="(max-width: 1024px) 100vw, 1152px"
      preload={true}
      aria-hidden
    />
  )
}
```

### `public/images/blocks/hero-section-v1/image.png.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: jpg, jpeg, png, webp, avif, gif, or svg. Remove the .gitkeep extension from the filename.
```