Free
🛬 Landing Page

Conversion CTA Banner

Pre-footer CTA banner with animated gradient border, urgency-free copy structure and dual action hierarchy.

4.3k views 827 copies 255 words

The Prompt

# Conversion CTA Banner — Landing Page Section

## Goal
Build the final pre-footer CTA: a rounded panel with animated gradient edge, strong headline, and primary + ghost secondary actions. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Panel: max-w-5xl centered, rounded-3xl, bg near-black, 1px animated gradient border (conic gradient rotating via CSS @property or masked pseudo-element).
- Inside: centered — headline 32-44px ('Ship your best site this week'), one supporting line max 60ch, then button row: primary solid accent + ghost 'Talk to us' with arrow.
- Under buttons: micro-trust row — 'No credit card · Cancel anytime · Setup in 2 min' separated by dots, 12px muted.
- Background flourish inside panel: two blurred accent orbs (blur-3xl, 20% opacity) top-left & bottom-right, overflow-hidden.
- Mobile: padding tightens, buttons stack full-width, primary first.

## Motion Spec
- Gradient border rotates 360° every 8s, linear, pausable via reduced-motion.
- Orbs drift on 12s ease-in-out loops (±16px) — alive, not busy.
- Primary button: arrow icon nudges 3px on hover; whole button has a 0.98 press scale.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<CtaBanner title subtitle primary={{label,href}} secondary?={{label,href}} trustItems?: string[] />`

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files.
- Works on mobile: touch targets ≥ 44px, no hover-only affordances.
- 60fps: animate only `transform` and `opacity`; use `will-change` sparingly.
- Accessible: correct roles/aria, keyboard operable, focus-visible styles.

You may also like