# CTA Section v1

> Two-column CTA block with headline and description on the left, dual action buttons on the right, and a full-width background image frame below.

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

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

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/cta-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`

## Files

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

```tsx
import CtaSectionV1 from "./components/cta-section-v1"

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

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

```tsx
import { GeistPixelCircle } from "geist/font/pixel"
import { createBlockImage } from "@/lib/block-media"
import { ArrowUpRightIcon } from "lucide-react"
import Image from "next/image"

const blockImage = createBlockImage("cta-section-v1")
import { Button } from "@/components/ui/button"

const CTA_IMAGE = blockImage("image.png")

export default function CtaSectionV1() {
  return (
    <div className="py-4 md:py-6 lg:py-8">
      <div className="mx-auto max-w-6xl px-4">
        <div className="overflow-hidden px-6 pb-6 md:px-8 md:pb-8 lg:px-10 lg:pb-10">
          <div className="flex flex-col gap-6">

            <div>
              <h2 className="tracking-tighter text-4xl sm:text-5xl lg:text-6xl">
                Get started in{" "}
                <span
                  className={`${GeistPixelCircle.className} text-4xl text-lime-400 sm:text-5xl lg:text-6xl`}
                >
                  minutes
                </span>
              </h2>
            </div>

            <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 lg:items-center">
              <p className="max-w-prose text-lg leading-8 font-light tracking-tight text-muted-foreground/90 sm:text-xl">
                Try out our playground, and start with our free tier to test
                models in your application.
              </p>
              <div className="flex flex-row flex-wrap gap-3 lg:justify-end">
                <Button
                  size="lg"
                  className="w-full rounded-none text-base font-light sm:w-auto"
                >
                  Get A Demo
                  <ArrowUpRightIcon data-icon="inline-end" />
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="w-full rounded-none text-base font-light sm:w-auto"
                >
                  Sign Up For Free
                  <ArrowUpRightIcon data-icon="inline-end" />
                </Button>
              </div>
            </div>
          </div>

          <div className="relative mt-6 aspect-16/5 w-full overflow-hidden">
            <Image
              src={CTA_IMAGE}
              unoptimized
              alt=""
              aria-hidden
              fill
              loading="eager"
              sizes="(max-width: 1280px) 100vw, 1152px"
              className="object-cover object-top"
            />
          </div>
        </div>
      </div>
    </div>
  )
}
```

### `public/images/blocks/cta-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.
```