Gradient CTA Banner
Full-width closing CTA: gradient panel, one promise, one button, one reassurance line. Nothing else.
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer + designer. Build the last section before the footer: a single decision, made easy.
STACK
Target Stack
React + TypeScript + Tailwind CSS + Framer Motion.
LAYOUT
Layout
Centred panel inside the page container: rounded-[2rem] gradient panel (primary → accent, 135deg) with a subtle noise overlay and one soft radial glow. Content centred: H2 promise (max-w-xl), one supporting line, primary white button + ghost secondary link, reassurance microline under the buttons.
TYPOGRAPHY
Typography
H2: clamp(1.8rem, 4vw, 2.6rem)/650 white. Support: 1.05rem white/80. Button: 1rem/600. Microline: 0.85rem white/70.
COLOR TOKENS
Color Tokens
--primary: 250 80% 60%; --accent: 190 90% 45%; --primary-foreground: 0 0% 100%. Panel text is white scale derived from primary-foreground with opacity.
SPACING
Spacing
Panel padding 4rem 2rem (mobile 3rem 1.5rem); section padding 5rem/3.5rem; element gaps 1.25rem.
ANIMATION
Animation
Panel scales 0.98→1 + fade on view (0.5s). Glow breathes very slowly (8s, opacity 0.5→0.7) unless reduced motion. Button hover: translateY(-1px) + shadow.
RESPONSIVE
Responsive
Buttons stack full width on mobile; H2 stays centred; glow clipped by panel radius.
SAMPLE COPY
Sample Copy
H2: "Start your first project in the next two minutes."
Support: "Free plan, no card, cancel anytime — the way it should be."
Buttons: "Start free" / "Talk to us". Microline: "Set up by 12,000+ small teams."