Exit Intent Popup

'use client';

import './ExitIntentOverlay.css';

/** ExitIntentOverlay — ported from astro-component-kit. */
export interface ExitIntentOverlayProps {
}

export function ExitIntentOverlay({}: ExitIntentOverlayProps) {
  return (
    <>
      <div className="exit-modal" data-rk-aa5def="">
        <div className="exit-card" data-rk-aa5def="">
          <h2 data-rk-aa5def="">Wait! Before you go...</h2>
          <p data-rk-aa5def="">Get 20% off your first order when you join our mailing list.</p>
          <input type="email" placeholder="Your email" data-rk-aa5def="" />
          <button data-rk-aa5def="">Get My Code</button>
        </div>
      </div>
    </>
  );
}

export default ExitIntentOverlay;

/* ExitIntentOverlay — ported from astro-component-kit (overlays/ExitIntentOverlay.astro) */

.exit-modal:where([data-rk-aa5def]) { position: fixed; inset: 0; background: rgba(99,102,241,0.1); backdrop-filter: blur(15px); z-index: 6000; display: grid; place-items: center; }
.exit-card:where([data-rk-aa5def]) { background: #fff; color: #000; padding: 3rem; border-radius: 30px; text-align: center; max-width: 450px; box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
h2:where([data-rk-aa5def]) { font-weight: 900; font-size: 1.8rem; margin-bottom: 1rem; }
p:where([data-rk-aa5def]) { color: #64748b; margin-bottom: 2rem; line-height: 1.5; }
input:where([data-rk-aa5def]) { width: 100%; padding: 1rem; border: 1px solid #eee; border-radius: 12px; margin-bottom: 1rem; outline: none; font-size: 1rem; }
button:where([data-rk-aa5def]) { width: 100%; padding: 1rem; background: #6366f1; color: #fff; border: none; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; }
button:hover:where([data-rk-aa5def]) { background: #4f46e5; }