Conversion CTA Banner
Pre-footer CTA banner with animated gradient border, urgency-free copy structure and dual action hierarchy.
O 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.
Você também pode gostar
Heritage Grove Footer
Full-viewport footer laid straight onto a hand-drawn ink landscape loop — five columns on the paper sky, and below 1100px the clip leaves the background and becomes a flow item under the copy.
Vectrus Energy
Scroll-tied cinematic section: a 500vh track scrubs an aerial clip frame by frame through a WebCodecs frame bank, with three sequential copy blocks.
Figurine Carousel Hero
Full-viewport figurine carousel where background colour, scale, blur and position all crossfade together on one 650ms curve.
Asme
Dark cinematic hero over a looping film whose seam is hand-rolled with 500ms requestAnimationFrame fades: a liquid-glass nav and Login pill, an Instrument Serif headline, a glass email bar and three glass social buttons.