updated banner

dist/assets/images/.gitattributes

@@ -0,0 +1,2 @@
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

dist/fragments/enterprisebanner.html

@@ -1,7 +1,7 @@
-<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 10s ease infinite;">
-  <div id=banner-text style="position: absolute; white-space: nowrap; font-size: 24px; font-weight: bold; color: black; animation: text-pan 10s linear infinite;">
+<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; white-space: nowrap; font-size: 120px; font-weight: black; color: black; animation: text-pan 20s linear infinite;">
     Collaboration
   </div>
 </div>
 
-<style>@keyframes rainbow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes text-pan{0%{left:-100%}16.66%{left:100%}16.67%{content:"Compute";left:-100%}33.33%{left:100%}33.34%{content:"Security";left:-100%}50%{left:100%}50.01%{content:"Governance";left:-100%}66.66%{left:100%}66.67%{content:"Compliance";left:-100%}83.33%{left:100%}83.34%{content:"Support";left:-100%}to{left:100%}}</style><script>let bannerText=document.getElementById("banner-text"),textSequence=["Collaboration","Compute","Security","Governance","Compliance","Support"],currentIndex=0;setInterval(()=>{bannerText.textContent=textSequence[currentIndex],currentIndex=(currentIndex+1)%textSequence.length},1666)</script>
+<style>@keyframes rainbow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes text-pan{0%{left:-100%}16.66%{left:100%}16.67%{content:"Compute";left:-100%}33.33%{left:100%}33.34%{content:"Security";left:-100%}50%{left:100%}50.01%{content:"Governance";left:-100%}66.66%{left:100%}66.67%{content:"Compliance";left:-100%}83.33%{left:100%}83.34%{content:"Support";left:-100%}to{left:100%}}</style><script>let bannerText=document.getElementById("banner-text"),textSequence=["Collaboration","Compute","Security","Governance","Compliance","Support"],currentIndex=0;setInterval(()=>{bannerText.textContent=textSequence[currentIndex],currentIndex=(currentIndex+1)%textSequence.length},3333)</script>

dist/index.html

@@ -42,13 +42,13 @@
         <h1 class="l-page" style="text-align: center;">Enterprise Hub:<br>Why you need it, how to get it</h1>
         <div id="title-plot" class="main-plot-container l-screen" style="overflow-x: hidden; width: 100%; text-align: center;">
             <div style="display: flex; justify-content: center; position: relative;">
-                <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 10s ease infinite;">
-  <div id=banner-text style="position: absolute; white-space: nowrap; font-size: 24px; font-weight: bold; color: black; animation: text-pan 10s linear infinite;">
+                <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; white-space: nowrap; font-size: 120px; font-weight: black; color: black; animation: text-pan 20s linear infinite;">
     Collaboration
   </div>
 </div>
 
-<style>@keyframes rainbow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes text-pan{0%{left:-100%}16.66%{left:100%}16.67%{content:"Compute";left:-100%}33.33%{left:100%}33.34%{content:"Security";left:-100%}50%{left:100%}50.01%{content:"Governance";left:-100%}66.66%{left:100%}66.67%{content:"Compliance";left:-100%}83.33%{left:100%}83.34%{content:"Support";left:-100%}to{left:100%}}</style><script>let bannerText=document.getElementById("banner-text"),textSequence=["Collaboration","Compute","Security","Governance","Compliance","Support"],currentIndex=0;setInterval(()=>{bannerText.textContent=textSequence[currentIndex],currentIndex=(currentIndex+1)%textSequence.length},1666)</script>
+<style>@keyframes rainbow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes text-pan{0%{left:-100%}16.66%{left:100%}16.67%{content:"Compute";left:-100%}33.33%{left:100%}33.34%{content:"Security";left:-100%}50%{left:100%}50.01%{content:"Governance";left:-100%}66.66%{left:100%}66.67%{content:"Compliance";left:-100%}83.33%{left:100%}83.34%{content:"Support";left:-100%}to{left:100%}}</style><script>let bannerText=document.getElementById("banner-text"),textSequence=["Collaboration","Compute","Security","Governance","Compliance","Support"],currentIndex=0;setInterval(()=>{bannerText.textContent=textSequence[currentIndex],currentIndex=(currentIndex+1)%textSequence.length},3333)</script>
             </div>
             <!--<p style="text-align: cekter; font-style: italic; margin-top: 10px; max-width: 900px; margin-left: auto; margin-right: auto;">banner subtitle</p>-->
   

src/fragments/enterprisebanner.html

@@ -1,5 +1,5 @@
-<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 10s ease infinite;">
-  <div id="banner-text" style="position: absolute; white-space: nowrap; font-size: 24px; font-weight: bold; color: black; animation: text-pan 10s linear infinite;">
+<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; white-space: nowrap; font-size: 120px; font-weight: black; color: black; animation: text-pan 20s linear infinite;">
     Collaboration
   </div>
 </div>
@@ -35,5 +35,5 @@
   setInterval(() => {
     bannerText.textContent = textSequence[currentIndex];
     currentIndex = (currentIndex + 1) % textSequence.length;
-  }, 1666); // 10s / 6 colors = ~1666ms per color
+  }, 3333); // 20s / 6 colors = ~3333ms per color
 </script>