1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Llamadas a la Acción

CTA Glow Banner

Banner de llamada a la acción de alto impacto con resplandor radial, formulario y botones de conversión.

ctabannerconversionnewsletterglow
Vista Previa en Vivo
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

Uso

Copia y pega este código directamente en tu componente React:

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

<CtaGlowBanner />

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: 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%;
  }
}