# CTA Sections

> Four closing calls to action — a frosted card over a tilting product window, cards drifting around the headline with pointer parallax, counter-rotating rings of logos and metrics, and a liquid goo button.

- Collection: Blocks
- Tier: pro
- Docs: https://geturui.com/docs/cta-sections
- Install: `npx shadcn@latest add @geturui-pro/cta-sections`
- Dependencies: motion, lucide-react

## Variants

### Product window

A tilting app window with a frosted glass card on top; the email form shakes on errors and morphs into a confirmation.

Install: `npx shadcn@latest add @geturui-pro/cta-sections-product-window`

```tsx
import { CtaProductWindow } from "@/components/blocks/cta-sections/product-window";

export default function Cta() {
  return (
    <CtaProductWindow
      headline="Your workspace is one email away"
      onSubmit={async (email) => {
        await fetch("/api/trial", { method: "POST", body: JSON.stringify({ email }) });
      }}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | `string` | — | Chip above the headline. |
| headline | `string` | — | Section h2. |
| subcopy | `string` | — | Supporting paragraph. |
| actionLabel | `string` | "Start my trial" | Submit button label. |
| finePrint | `string` | — | Small line under the form. |
| onSubmit | `(email: string) => Promise<void> | void` | — | Resolve to show success, reject to show the error state. |
| className | `string` | — | Classes for the section. |

### Floating gallery

Small UI cards drift around the headline on their own loops and shift with the pointer at different depths.

Install: `npx shadcn@latest add @geturui-pro/cta-sections-floating-gallery`

```tsx
import { CtaFloatingGallery } from "@/components/blocks/cta-sections/floating-gallery";

export default function Cta() {
  return <CtaFloatingGallery primaryAction={{ label: "Get Pro", href: "/pricing" }} parallax={28} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | `string` | — | Label above the headline. |
| headline | `string` | — | Section h2. |
| subcopy | `string` | — | Supporting paragraph. |
| primaryAction | `{ label: string; href?: string; onClick?: () => void }` | — | Volt button. |
| secondaryAction | `{ label: string; href?: string; onClick?: () => void } | null` | — | Secondary button. null hides it. |
| parallax | `number` | 28 | Pointer parallax strength in px; 0 turns it off. |
| className | `string` | — | Classes for the section. |

### Proof orbit

The CTA sits at the centre of two counter-rotating rings of customer wordmarks and proof metrics that stay upright and pause on hover.

Install: `npx shadcn@latest add @geturui-pro/cta-sections-proof-orbit`

```tsx
import { CtaProofOrbit } from "@/components/blocks/cta-sections/proof-orbit";

export default function Cta() {
  return (
    <CtaProofOrbit
      logos={["Fernbrook", "Kestrel", "Halden", "Northpeak"]}
      metrics={[
        { value: "4.9", caption: "average rating" },
        { value: "12k", caption: "teams" },
      ]}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | `string` | — | Label above the headline. |
| headline | `string` | — | Section h2. |
| subcopy | `string` | — | Supporting paragraph. |
| primaryAction | `{ label: string; href?: string; onClick?: () => void }` | — | Volt button. |
| secondaryAction | `{ label: string; href?: string; onClick?: () => void } | null` | — | Ghost button. null hides it. |
| logos | `string[]` | — | Wordmarks on the outer ring. |
| metrics | `{ value: string; caption: string }[]` | — | Proof points on the inner ring. |
| duration | `number` | 70 | Seconds per turn of the outer ring. |
| className | `string` | — | Classes for the section. |

### Liquid

Bold CTA panel whose button is built with an SVG goo filter: droplets and a cursor-following blob melt out of the pill on hover.

Install: `npx shadcn@latest add @geturui-pro/cta-sections-liquid`

```tsx
import { CtaLiquid } from "@/components/blocks/cta-sections/liquid";

export default function Cta() {
  return <CtaLiquid tone="volt" primaryAction={{ label: "Get lifetime access", href: "/checkout" }} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | `string` | — | Chip above the headline. |
| headline | `string` | — | Section h2. |
| subcopy | `string` | — | Supporting paragraph. |
| primaryAction | `{ label: string; href?: string; onClick?: () => void }` | — | The liquid button. |
| secondaryAction | `{ label: string; href?: string; onClick?: () => void } | null` | — | Underlined text link. null hides it. |
| meta | `string[]` | — | Reassurance items under the buttons. |
| tone | `"volt" | "ember"` | "volt" | Fill colour of the liquid. |
| className | `string` | — | Classes for the section. |

## Accessibility

- Every action is a real link or button; the email form has a label, aria-invalid and a live message for errors and success.
- Floating cards, orbit rings and goo blobs are aria-hidden; the orbit's logos and metrics are also listed as text for screen readers.
- Parallax, tilt, orbits and liquid motion stop under reduced motion, and the orbit has a visible Pause control.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.