1 GitHub star = 1 new component.

Star the repo
Call to Action

CTA Glow Banner

High-impact call to action banner featuring radial glow background and newsletter input.

ctabannerconversionnewsletterglow
Live Preview
Get Started Today

Ready to Build Something Extraordinary?

Join over 10,000 developers building modern, accessible, and blindingly fast Astro web applications.

View Components
SOC2 Type II Certified
WCAG 2.1 AA Compliant
100/100 Lighthouse Performance

Usage

Copy and paste this code into your React component:

tsx
import { CtaGlowBanner } from 'react-component-kit-ui/sections';

<CtaGlowBanner />

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/sections/CtaGlowBanner.tsx + CtaGlowBanner.css:

CtaGlowBanner.tsx
'use client';

import './CtaGlowBanner.css';
// TODO(port): inline handler onSubmit="event.preventDefault(); alert('Thank you"

/**
 * CtaGlowBanner โ€” Full-width high-converting CTA section with radial cyber mesh and interactive action group.
 * 
 * @param {string} badge - Eyebrow badge.
 * @param {string} title - Main headline.
 * @param {string} subtitle - Description text.
 * @param {string} primaryCtaText - Primary button text.
 * @param {string} secondaryCtaText - Secondary button text.
 */
export interface CtaGlowBannerProps {
  badge?: string;
  title?: string;
  subtitle?: string;
  primaryCtaText?: string;
  secondaryCtaText?: string;
  className?: string;
}

export function CtaGlowBanner({
  badge = "Get Started Today",
  title = "Ready to Build Something Extraordinary?",
  subtitle = "Join over 10,000 developers building modern, accessible, and blindingly fast Astro web applications.",
  primaryCtaText = "Start Building Free",
  secondaryCtaText = "View Components",
  className = ""
}: CtaGlowBannerProps) {
  return (
    <>
      <div className="cq-cta-glow-banner-cq" data-rk-c3786a="">
      <section className={`cta-banner-section ${className}`} aria-labelledby="cta-title" data-rk-c3786a="">
        <div className="container" data-rk-c3786a="">
          <div className="cta-banner-card" data-rk-c3786a="">
            <div className="cta-mesh-bg" aria-hidden="true" data-rk-c3786a=""></div>
      
            <div className="cta-content" data-rk-c3786a="">
              {badge && <span className="cta-badge" data-rk-c3786a="">{badge}</span>}
              <h2 id="cta-title" className="cta-title" data-rk-c3786a="">{title}</h2>
              <p className="cta-subtitle" data-rk-c3786a="">{subtitle}</p>
      
              {/* CTA Action Buttons & Email Input */}
              <div className="cta-actions" data-rk-c3786a="">
                <form className="cta-form" data-rk-c3786a="">
                  <input type="email" placeholder="Enter your work email..." required className="cta-input" aria-label="Email address" data-rk-c3786a="" />
                  <button type="submit" className="cta-btn cta-btn--primary" data-rk-c3786a="">
                    {primaryCtaText}
                  </button>
                </form>
                <a href="/docs/glass-button" className="cta-btn cta-btn--ghost" data-rk-c3786a="">
                  {secondaryCtaText}
                </a>
              </div>
      
              {/* Trust Badges Row */}
              <div className="cta-trust-row" data-rk-c3786a="">
                <div className="trust-item" data-rk-c3786a="">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" data-rk-c3786a=""><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" data-rk-c3786a="" /></svg>
                  <span data-rk-c3786a="">SOC2 Type II Certified</span>
                </div>
                <div className="trust-item" data-rk-c3786a="">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" data-rk-c3786a=""><circle cx="12" cy="12" r="10" data-rk-c3786a="" /><path d="m9 12 2 2 4-4" data-rk-c3786a="" /></svg>
                  <span data-rk-c3786a="">WCAG 2.1 AA Compliant</span>
                </div>
                <div className="trust-item" data-rk-c3786a="">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" data-rk-c3786a=""><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" data-rk-c3786a="" /></svg>
                  <span data-rk-c3786a="">100/100 Lighthouse Performance</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      </div>
    </>
  );
}

export default CtaGlowBanner;
CtaGlowBanner.css
/* CtaGlowBanner โ€” ported from astro-component-kit (sections/CtaGlowBanner.astro) */

.cq-cta-glow-banner-cq:where([data-rk-c3786a]) { container-type: inline-size; }
.cta-banner-section:where([data-rk-c3786a]) {
  padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
  background: var(--c-bg-primary, #030712);
}

.container:where([data-rk-c3786a]) {
  max-width: 1100px;
  margin: 0 auto;
}

.cta-banner-card:where([data-rk-c3786a]) {
  position: relative;
  background: linear-gradient(135deg, rgba(20, 25, 55, 0.9) 0%, rgba(10, 15, 30, 0.95) 100%);
  border: 1px solid rgba(234, 179, 8, 0.25);
  border-radius: var(--r-2xl, 24px);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  overflow: hidden;
  box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.8), 0 0 40px -15px rgba(234, 179, 8, 0.15);
}

.cta-mesh-bg:where([data-rk-c3786a]) {
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 50% 50%, rgba(234, 179, 8, 0.12) 0%, rgba(99, 102, 241, 0.1) 40%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  animation: cta-glow-banner-rotateMesh 20s linear infinite;
}

@keyframes cta-glow-banner-rotateMesh {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.cta-content:where([data-rk-c3786a]) {
  position: relative;
  z-index: 1;
  max-width: 750px;
  margin: 0 auto;
}

.cta-badge:where([data-rk-c3786a]) {
  display: inline-flex;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--c-primary, #b8860b) 15%, transparent);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.3);
  margin-bottom: var(--sp-4, 1.25rem);
}

.cta-title:where([data-rk-c3786a]) {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 var(--sp-4, 1.25rem);
}

.cta-subtitle:where([data-rk-c3786a]) {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: #94a3b8;
  line-height: 1.6;
  margin: 0 0 2.5rem;
}

.cta-actions:where([data-rk-c3786a]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.cta-form:where([data-rk-c3786a]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
  border-radius: 12px;
  padding: 0.35rem;
  max-width: 460px;
  width: 100%;
}

.cta-input:where([data-rk-c3786a]) {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: #fff;
  outline: none;
}

.cta-input:where([data-rk-c3786a])::placeholder {
  color: #64748b;
}

.cta-btn:where([data-rk-c3786a]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.4rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  border: none;
}

.cta-btn--primary:where([data-rk-c3786a]) {
  background: linear-gradient(135deg, #eab308, #d97706);
  color: #000;
  box-shadow: 0 4px 15px rgba(234, 179, 8, 0.35);
}

.cta-btn--primary:hover:where([data-rk-c3786a]) {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(234, 179, 8, 0.5);
}

.cta-btn--ghost:where([data-rk-c3786a]) {
  background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
  color: #fff;
  border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
  height: 48px;
  box-sizing: border-box;
}

.cta-btn--ghost:hover:where([data-rk-c3786a]) {
  background: rgb(var(--ink-rgb, 255 255 255) / 0.12);
  border-color: rgb(var(--ink-rgb, 255 255 255) / 0.25);
}

.cta-trust-row:where([data-rk-c3786a]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
}

.trust-item:where([data-rk-c3786a]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: #94a3b8;
  font-weight: 500;
}

.trust-item:where([data-rk-c3786a]) svg:where([data-rk-c3786a]) {
  color: #eab308;
}

@container (max-width: 640px) {
  .cta-form:where([data-rk-c3786a]) {
    flex-direction: column;
    background: transparent;
    border: none;
    padding: 0;
  }
  .cta-input:where([data-rk-c3786a]) {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
    border-radius: 8px;
    box-sizing: border-box;
  }
  .cta-btn:where([data-rk-c3786a]) {
    width: 100%;
  }
}