# Cta 4

> CTA

A shadcn/ui block from the [@cnippet-blocks](https://blocks.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet-blocks/cta-4).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/cta-4
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/cta-4/light.png
- Registry item: https://blocks.cnippet.dev/r/cta-4.json
- Categories: cta
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet-blocks/cta-4.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/button`

## Files

### `registry/default/sections/cta-4.tsx`

```tsx
"use client";

import { Button } from "@/components/ui/button";

export function CTA4() {
  return (
    <section className="w-full bg-gray-50 dark:bg-neutral-900">
      <div className="mx-auto w-full max-w-6xl px-6 py-16 md:py-20">
        <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
          {/* Left Illustration */}
          <div className="relative flex items-center justify-center">
            <svg
              className="h-auto w-full max-w-lg"
              fill="none"
              viewBox="0 0 450 400"
              xmlns="http://www.w3.org/2000/svg"
            >
              {/* Decorative elements */}
              {/* Stars */}
              <path
                d="M80 60 L85 70 L95 70 L87 77 L90 87 L80 80 L70 87 L73 77 L65 70 L75 70 Z"
                fill="none"
                stroke="#1e293b"
                strokeWidth="1.5"
              />
              <path
                d="M380 40 L385 50 L395 50 L387 57 L390 67 L380 60 L370 67 L373 57 L365 50 L375 50 Z"
                fill="none"
                stroke="#1e293b"
                strokeWidth="1.5"
              />
              <path
                d="M130 320 L132 325 L137 325 L133 328 L135 333 L130 330 L125 333 L127 328 L123 325 L128 325 Z"
                fill="none"
                stroke="#1e293b"
                strokeWidth="1"
              />

              {/* Plus signs */}
              <path
                d="M60 280 L60 295 M52.5 287.5 L67.5 287.5"
                stroke="#1e293b"
                strokeWidth="2"
              />
              <path
                d="M370 320 L370 330 M365 325 L375 325"
                stroke="#1e293b"
                strokeWidth="1.5"
              />

              {/* Dash lines */}
              <path
                d="M340 70 L350 70 M360 70 L365 70"
                stroke="#1e293b"
                strokeWidth="2"
              />
              <path
                d="M350 290 L355 290 M362 290 L365 290"
                stroke="#1e293b"
                strokeWidth="1.5"
              />

              {/* Monitor - Purple/Blue screen */}
              <rect
                fill="#a78bfa"
                height="130"
                rx="8"
                stroke="#1e293b"
                strokeWidth="2"
                width="180"
                x="70"
                y="140"
              />
              {/* Monitor stand */}
              <rect
                fill="#e2e8f0"
                height="15"
                stroke="#1e293b"
                strokeWidth="2"
                width="40"
                x="140"
                y="270"
              />
              <path
                d="M110 285 L210 285 Q215 295 210 305 L110 305 Q105 295 110 285"
                fill="#e2e8f0"
                stroke="#1e293b"
                strokeWidth="2"
              />

              {/* Screen content - chart */}
              <rect
                fill="#f97316"
                height="40"
                rx="4"
                stroke="#1e293b"
                strokeWidth="1.5"
                width="60"
                x="90"
                y="160"
              />
              <circle
                cx="120"
                cy="180"
                fill="#fef3c7"
                r="12"
                stroke="#1e293b"
                strokeWidth="1"
              />

              {/* Lines on screen */}
              <rect
                fill="#c4b5fd"
                height="4"
                rx="2"
                width="40"
                x="90"
                y="210"
              />
              <rect
                fill="#c4b5fd"
                height="4"
                rx="2"
                width="50"
                x="90"
                y="220"
              />
              <rect
                fill="#c4b5fd"
                height="4"
                rx="2"
                width="35"
                x="90"
                y="230"
              />

              {/* Pie chart on screen */}
              <circle
                cx="200"
                cy="250"
                fill="#7c3aed"
                r="20"
                stroke="#1e293b"
                strokeWidth="1.5"
              />
              <path
                d="M200 230 L200 250 L215 240"
                fill="#c4b5fd"
                stroke="#1e293b"
                strokeWidth="1"
              />

              {/* Floating window - white */}
              <g transform="translate(160, 100)">
                <rect
                  fill="white"
                  height="100"
                  rx="6"
                  stroke="#1e293b"
                  strokeWidth="2"
                  width="130"
                  x="0"
                  y="0"
                />
                {/* Window dots */}
                <circle
                  cx="15"
                  cy="15"
                  fill="#e2e8f0"
                  r="4"
                  stroke="#1e293b"
                  strokeWidth="1"
                />
                <circle
                  cx="28"
                  cy="15"
                  fill="#e2e8f0"
                  r="4"
                  stroke="#1e293b"
                  strokeWidth="1"
                />
                <circle
                  cx="41"
                  cy="15"
                  fill="#e2e8f0"
                  r="4"
                  stroke="#1e293b"
                  strokeWidth="1"
                />
                {/* Lines */}
                <rect
                  fill="#e2e8f0"
                  height="4"
                  rx="2"
                  width="50"
                  x="15"
                  y="35"
                />
                <rect
                  fill="#e2e8f0"
                  height="4"
                  rx="2"
                  width="70"
                  x="15"
                  y="45"
                />
                <rect
                  fill="#e2e8f0"
                  height="4"
                  rx="2"
                  width="40"
                  x="15"
                  y="55"
                />
                <rect
                  fill="#e2e8f0"
                  height="4"
                  rx="2"
                  width="60"
                  x="15"
                  y="70"
                />
              </g>

              {/* Green chart card */}
              <g transform="translate(240, 140)">
                <rect
                  fill="#bef264"
                  height="100"
                  rx="6"
                  stroke="#1e293b"
                  strokeWidth="2"
                  width="120"
                  x="0"
                  y="0"
                />
                {/* Bar chart */}
                <rect
                  fill="#a3e635"
                  height="25"
                  stroke="#1e293b"
                  strokeWidth="1"
                  width="15"
                  x="20"
                  y="60"
                />
                <rect
                  fill="#84cc16"
                  height="40"
                  stroke="#1e293b"
                  strokeWidth="1"
                  width="15"
                  x="40"
                  y="45"
                />
                <rect
                  fill="#65a30d"
                  height="55"
                  stroke="#1e293b"
                  strokeWidth="1"
                  width="15"
                  x="60"
                  y="30"
                />
                <rect
                  fill="#84cc16"
                  height="35"
                  stroke="#1e293b"
                  strokeWidth="1"
                  width="15"
                  x="80"
                  y="50"
                />
              </g>

              {/* Envelope */}
              <g transform="translate(280, 60)">
                <rect
                  fill="#f5f5f5"
                  height="30"
                  rx="3"
                  stroke="#1e293b"
                  strokeWidth="1.5"
                  width="40"
                  x="0"
                  y="0"
                />
                <path
                  d="M0 5 L20 20 L40 5"
                  fill="none"
                  stroke="#1e293b"
                  strokeWidth="1.5"
                />
              </g>

              {/* Magnifying glass */}
              <g transform="translate(300, 260)">
                <circle
                  cx="20"
                  cy="20"
                  fill="#bef264"
                  r="18"
                  stroke="#1e293b"
                  strokeWidth="2"
                />
                <path
                  d="M33 33 L50 50"
                  stroke="#1e293b"
                  strokeLinecap="round"
                  strokeWidth="3"
                />
              </g>

              {/* Mouse */}
              <ellipse
                cx="380"
                cy="340"
                fill="#f5f5f5"
                rx="15"
                ry="22"
                stroke="#1e293b"
                strokeWidth="2"
              />
              <path d="M380 325 L380 340" stroke="#1e293b" strokeWidth="1.5" />
              {/* Mouse cord */}
              <path
                d="M380 318 Q400 300 390 280 Q380 260 360 270"
                fill="none"
                stroke="#1e293b"
                strokeWidth="1.5"
              />
            </svg>
          </div>

          {/* Right Content */}
          <div className="flex flex-col items-start">
            <p className="mb-4 font-medium text-sm text-violet-600 italic tracking-wide dark:text-violet-400">
              Access Tasks Anytime & Anywhere
            </p>

            <h2 className="mb-6 font-normal text-3xl text-gray-900 leading-tight md:text-4xl lg:text-5xl dark:text-gray-100">
              Your{" "}
              <span className="bg-violet-200 px-2 dark:bg-violet-900/30">
                Personal
              </span>
              <br />
              Productivity Hub.
            </h2>

            <p className="mb-10 max-w-md text-gray-600 text-sm leading-relaxed sm:text-base dark:text-gray-400">
              We've shaped Donezo to feel like a natural extension of your mind,
              making it easy to capture and organize tasks.
            </p>

            <Button className="rounded-full bg-violet-600 px-10 py-6 font-medium text-base text-white hover:bg-violet-700 dark:bg-violet-600 dark:hover:bg-violet-700">
              Try it now
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}
```