besper-frontend-site-dev-main/src/components/demo/DemoHeader.js

Professional B-esper Frontend Site - Site-wide integration toolkit for full website bot deployment

/**
 * Demo Header Component
 * Handles the header section of the demo widget
 */

export class DemoHeader {
  constructor(botId, options = {}) {
    this.botId = botId;
    this.options = options;
  }

  /**
   * Renders the demo header HTML
   * @returns {string} Header HTML
   */
  render() {
    return `
      <div class="demo-header">
        <div class="demo-header-content">
          <div class="demo-header-left">
            <h1 class="demo-title">
              <i class="demo-icon"><div class="bsp-icon-circle-sm">B</div></i>
              B-esper AI Assistant Demo
            </h1>
            <p class="demo-subtitle">
              Experience intelligent conversation powered by advanced AI
            </p>
          </div>
          <div class="demo-header-right">
            <div class="demo-badge">
              <span class="demo-badge-text">Live Demo</span>
            </div>
          </div>
        </div>
      </div>
    `;
  }

  /**
   * Gets the CSS styles for the demo header
   * @returns {string} CSS styles
   */
  getStyles() {
    return `
      .demo-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 2rem 0;
        margin-bottom: 2rem;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      }

      .demo-header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
      }

      .demo-header-left {
        flex: 1;
      }

      .demo-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin: 0 0 0.5rem 0;
        display: flex;
        align-items: center;
        gap: 1rem;
      }

      .demo-icon {
        font-size: 3rem;
        animation: bounce 2s infinite;
      }

      .demo-subtitle {
        font-size: 1.2rem;
        opacity: 0.9;
        margin: 0;
        font-weight: 300;
      }

      .demo-header-right {
        display: flex;
        align-items: center;
      }

      .demo-badge {
        background: rgba(255, 255, 255, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 25px;
        padding: 0.5rem 1.5rem;
        backdrop-filter: blur(10px);
      }

      .demo-badge-text {
        font-weight: 600;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
          transform: translateY(0);
        }
        40% {
          transform: translateY(-10px);
        }
        60% {
          transform: translateY(-5px);
        }
      }

      @media (max-width: 768px) {
        .demo-header-content {
          flex-direction: column;
          text-align: center;
          gap: 1rem;
        }

        .demo-title {
          font-size: 2rem;
          justify-content: center;
        }

        .demo-subtitle {
          font-size: 1rem;
        }
      }
    `;
  }

  /**
   * Sets up any interactive elements in the header
   */
  setupEventListeners() {
    // Add any header-specific event listeners here
    // For example, clicking the icon could trigger an animation
    const icon = document.querySelector('.demo-icon');
    icon?.addEventListener('click', () => {
      icon.style.animation = 'none';
      setTimeout(() => {
        icon.style.animation = 'bounce 2s infinite';
      }, 100);
    });
  }
}