# Cta 03

> CTA with heading, button, and ripple background.

A shadcn/ui block from the [@eldoraui](https://eldoraui.site) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/eldoraui/cta-03).

- Page, with a live preview: https://shadcn.exchange/r/eldoraui/cta-03
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/eldoraui/cta-03-light-12d52d982f71c1d2.png
- Registry item: https://eldoraui.site/r/cta-03.json
- Categories: cta
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://eldoraui.site/r/cta-03.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: `utils`

## Files

### `registry/blocks/cta-03/page.tsx`

```tsx
import { CallToAction } from "@/registry/blocks/cta-03/components/cta-03"

export default function Page() {
  return (
    <div className="flex min-h-screen w-full flex-col items-center justify-center px-4">
      <CallToAction />
    </div>
  )
}
```

### `registry/blocks/cta-03/components/cta-03.tsx`

```tsx
import { ArrowRightIcon, AtSignIcon } from "lucide-react"

import { Ripple } from "./ripple-bg"

export function CallToAction() {
  return (
    <div className="bg-secondary/80 dark:bg-secondary/40 relative mx-auto flex min-h-[20rem] w-full max-w-3xl flex-col justify-between gap-y-8 border-x px-2 py-14 md:px-4 md:py-20">
      <div className="pointer-events-none absolute -top-px left-1/2 w-screen -translate-x-1/2 border-t" />
      <Ripple />

      <div className="space-y-1">
        <h2 className="text-center text-2xl font-semibold tracking-tight md:text-4xl">
          Join our community
        </h2>
        <p className="text-muted-foreground text-center text-sm text-balance md:text-base">
          Connect with fellow builders, get early access, and stay in the loop
          with product updates and exclusive events.
        </p>
        <div className="mt-4 flex items-center justify-center -space-x-[0.45rem]">
          <img
            alt="Avatar 01"
            className="ring-background rounded-full ring-1"
            height={24}
            src="https://avatar.vercel.sh/avatar1"
            width={24}
          />
          <img
            alt="Avatar 02"
            className="ring-background rounded-full ring-1"
            height={24}
            src="https://avatar.vercel.sh/avatar2"
            width={24}
          />
          <img
            alt="Avatar 03"
            className="ring-background rounded-full ring-1"
            height={24}
            src="https://avatar.vercel.sh/avatar3"
            width={24}
          />
          <img
            alt="Avatar 04"
            className="ring-background rounded-full ring-1"
            height={24}
            src="https://avatar.vercel.sh/avatar4"
            width={24}
          />
          <img
            alt="Avatar 05"
            className="ring-background rounded-full ring-1"
            height={24}
            src="https://avatar.vercel.sh/avatar5"
            width={24}
          />
          <img
            alt="Avatar 06"
            className="ring-background rounded-full ring-1"
            height={24}
            src="https://avatar.vercel.sh/avatar6"
            width={24}
          />
        </div>
      </div>
      <div className="pointer-events-none absolute -bottom-px left-1/2 w-screen -translate-x-1/2 border-b" />
    </div>
  )
}
```

### `registry/blocks/cta-03/components/ripple-bg.tsx`

```tsx
import React, { ComponentPropsWithoutRef, CSSProperties } from "react"

import { cn } from "@/lib/utils"

interface RippleProps extends ComponentPropsWithoutRef<"div"> {
  mainCircleSize?: number
  mainCircleOpacity?: number
  numCircles?: number
}

export const Ripple = React.memo(function Ripple({
  mainCircleSize = 210,
  mainCircleOpacity = 0.24,
  numCircles = 8,
  className,
  ...props
}: RippleProps) {
  return (
    <div
      className={cn(
        "pointer-events-none absolute inset-0 [mask-image:linear-gradient(to_bottom,white,transparent)] select-none",
        className
      )}
      {...props}
    >
      {Array.from({ length: numCircles }, (_, i) => {
        const size = mainCircleSize + i * 70
        const opacity = mainCircleOpacity - i * 0.03
        const animationDelay = `${i * 0.06}s`
        const borderStyle = "solid"

        return (
          <div
            key={i}
            className={`animate-ripple bg-foreground/25 absolute rounded-full border shadow-xl`}
            style={
              {
                "--i": i,
                width: `${size}px`,
                height: `${size}px`,
                opacity,
                animationDelay,
                borderStyle,
                borderWidth: "1px",
                borderColor: `var(--foreground)`,
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%) scale(1)",
              } as CSSProperties
            }
          />
        )
      })}
    </div>
  )
})

Ripple.displayName = "Ripple"
```