Email CTA section with a gradient center card and blurred perspective side cards
Email capture CTA section for SaaS and AI landing pages with a headline, email input row, and a gradient center card flanked by two blurred perspective cards. Paste into Bolt, Claude Code, Replit, or Lovable.
About this vibe coding template
A centred white CTA section with a bold headline, a short sub-paragraph, and a horizontal email input paired with a blue submit button. Below the form, three cards sit in a perspective stack: two blurred translucent side cards at perspective angles create depth, and a bright blue gradient center card floats in front with a short headline and supporting text. The center card communicates the core value proposition visually while the form above captures the action. The blurred side cards reference the product without a screenshot. The white background and clean typography keep the section light enough to follow a dark hero section or a busy feature grid without visual fatigue.
Common questions about this template
How do I change the center card colour?
Ask your vibe coding tool to update the background gradient on .center-card. The default is linear-gradient from #1057f7 to #3b82f6 to #06b6d4. Replace the gradient stops with your brand primary and secondary colours.
How do I wire the email form to a mailing list provider?
Ask Bolt, Claude Code, Replit, or Lovable to add a form action attribute pointing to your provider's endpoint, or to add a JavaScript fetch call that posts the input value to a subscribe API. Common providers include Mailchimp, ConvertKit, and Resend Audiences.
How do I change the side card colours?
Ask your vibe coding tool to update the background on .side-l and .side-r. The left card defaults to a purple gradient and the right to a blue-cyan gradient. Change them to match your brand palette or use a neutral dark grey for a more minimal look.
Use this AI coding template for
- ·Email list and product waitlist CTAs on SaaS and AI landing pages where a visual card reinforces the value of signing up
- ·Mid-page conversion sections for landing pages built with Bolt, Replit, or Lovable that need a break between feature sections
- ·Product launch pages where the CTA section needs to communicate both the offer and the visual identity of the product