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
Free
Featured
Aurora Hero Section
🛬 Landing Page
Full-viewport hero with aurora gradient backdrop and split-text headline reveal.
5.1k 441Cursorv0Lovable
Free
FAQ Accordion Pro
🛬 Landing Page
Two-column FAQ section with buttery height animation, deep-link anchors and a 'still stuck' contact card.
4.4k 54CursorClaude CodeLovable
Free
Button Motion Set
🛬 Landing Page
A cohesive set of 6 animated buttons: magnetic, shine-sweep, morph-to-loader, icon-nudge, gradient-ring, ghost-fill.
3.5k 371CursorClaude CodeLovable
Free
Bento Feature Grid
☁️ SaaS
Six-cell bento features section with one hero cell, live UI fragments inside cells and hover choreography.
3.5k 501CursorClaude CodeLovable