done

app/assets/stylesheets/pages/_home.scss

@@ -31,3 +31,5 @@ video {
   display: flex;
   justify-content: space-between;
 }
+
+

app/javascript/components/banner.js

@@ -0,0 +1,13 @@
+import Typed from 'typed.js';
+
+function loadDynamicBannerText() {
+  new Typed('#banner-typed-text', {
+    strings: ["Language is not a barrier anymore", "Stay connected"],
+    typeSpeed: 50,
+    loop: true
+  });
+}
+
+export { loadDynamicBannerText };
+
+

app/javascript/packs/application.js

@@ -2,6 +2,9 @@ import "bootstrap";
 
 import { triggerModalEvent } from "../components/modal.js";
 
+import { loadDynamicBannerText } from '../components/banner';
+loadDynamicBannerText();
+
 triggerModalEvent();
 
 const settingsPage = document.getElementById('settings-page');

app/views/pages/home.html.erb

@@ -1,5 +1,8 @@
 <div class="banner" style="background-image: linear-gradient(-225deg, rgba(5,25,55,0.3) 0%, rgba(68,73,101,0.3),rgba(128,129,149,0.3),rgba(191,190,200,0.3),rgba(255,255,255,0.3) 50%), url('<%= image_path 'phone.jpg' %>');">
   <div class="banner-content">
+    <p>
+      <span id="banner-typed-text"></span>
+    </p>
     <h1>Make a call</h1>
     <p>Communicate in different languages</p>
     <p>and receive real-time translated</p>