src/fragments/enterprisebanner.html

<div style="position: relative; height: 120px; width: 100%; overflow: hidden; background: linear-gradient(270deg, #FFEBEE, #FFF3E0, #FFFDE7, #E8F5E9, #E3F2FD, #F3E5F5); background-size: 1400% 1400%; animation: rainbow 20s ease infinite;">
  <div id="banner-text" style="position: absolute; top: 0; white-space: nowrap; font-size: 120px; font-weight: black; font-family: Impact, sans-serif; color: white; animation: text-pan 20s linear infinite;">
    Collaboration
  </div>
</div>

<style>
  @keyframes rainbow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  @keyframes text-pan {
    0% { left: -100%; }
    16.66% { left: 100%; }
    16.67% { left: -100%; content: "Compute"; }
    33.33% { left: 100%; }
    33.34% { left: -100%; content: "Security"; }
    50% { left: 100%; }
    50.01% { left: -100%; content: "Governance"; }
    66.66% { left: 100%; }
    66.67% { left: -100%; content: "Compliance"; }
    83.33% { left: 100%; }
    83.34% { left: -100%; content: "Support"; }
    100% { left: 100%; }
  }
</style>

<script>
  const bannerText = document.getElementById('banner-text');
  const textSequence = ["Collaboration", "Compute", "Security", "Governance", "Compliance", "Support"];
  let currentIndex = 0;

  setInterval(() => {
    bannerText.textContent = textSequence[currentIndex];
    currentIndex = (currentIndex + 1) % textSequence.length;
  }, 3333); // 20s / 6 colors = ~3333ms per color
</script>