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>

package.json

@@ -6,7 +6,8 @@
     "actioncable": "^5.2.1",
     "babel-plugin-transform-runtime": "^6.23.0",
     "bootstrap": "3",
-    "jquery": "^3.3.1"
+    "jquery": "^3.3.1",
+    "typed.js": "^2.0.9"
   },
   "devDependencies": {
     "webpack-dev-server": "2.11.2"

yarn.lock

@@ -5524,6 +5524,10 @@ type-is@~1.6.15, type-is@~1.6.16:
     media-typer "0.3.0"
     mime-types "~2.1.18"
 
+typed.js@^2.0.9:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/typed.js/-/typed.js-2.0.9.tgz#2e4e590466938ecb2ef5ec966a79b2d9381495ff"
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"