push of function displayword

src/css/style.css

@@ -32,6 +32,19 @@ img{
     height: 660px;
 }
 
+#who_we_are{
+    width: 100%;
+    height: 100%;
+    color:red;
+    text-align: center;
+}
+
+.word {
+    color: black;
+    transition: color 0.5s ease;
+}
+
+
 .secondary{
     display: flex;
     flex-direction: column;

src/js/index/index.js

@@ -1,15 +1,18 @@
-const textElement = document.getElementById("who_we_are");
-const words = textElement.textContent.trim().split(" ");
-let currentIndex = 0;
-
 function displayWord() {
-  textElement.textContent = words[currentIndex];
-  currentIndex++;
-  if (currentIndex >= words.length) {
-    currentIndex = 0;
-  }
+  const words = document.getElementById('who_we_are').textContent.trim().split(' ');
+
+  words.forEach((word, index) => {
+    const wordElement = document.createElement('span');
+    wordElement.classList.add('word');
+    wordElement.innerText = word;
+    wordElement.style.transitionDelay = `${index * 100}ms`;
+    document.getElementById('who_we_are').appendChild(wordElement);
+
+    setTimeout(() => {
+      wordElement.classList.add('show');
+    }, 100);
+  });
 }
 
-
-
-export { zoom, displayWord };
+ 
+export { displayWord };

src/js/index/main.js

@@ -1,11 +1,8 @@
-import { zoom, displayWord } from "./index.js";
+import { displayWord } from "./index.js";
 
 function main() {
-    let imgAnalyse = document.getElementById("img_analyse");
-    zoom(imgAnalyse);
-    imgAnalyse.addEventListener("click", function() {
-        zoom(imgAnalyse);
-    });
+    displayWord();
 }
 
+
 main();