Merge pull request #95 from storytold/bflat-storyteller-landing

storyteller corporate site refresh
2026-10-26 02:59:37 +00:00 · 2022-09-04 00:41:52 -04:00
parent 6b4b6689d0 676afe52e4
commit bb372a3999
31 changed files with 3131 additions and 865 deletions
@@ -12,6 +12,7 @@
    "start-fakeyou-w": "set PORT=7000 && lerna exec --scope @storyteller/fakeyou -- yarn start-w",
    "build-fakeyou": "lerna exec --scope @storyteller/fakeyou -- yarn build",
    "start-storyteller-home": "PORT=7008 BROWSER=none lerna exec --scope @storyteller/storyteller-home -- yarn start",
+    "start-storyteller-home-w": "set PORT=7008 && lerna exec --scope @storyteller/storyteller-home -- yarn start-w",
    "build-storyteller-home": "lerna exec --scope @storyteller/storyteller-home -- yarn build",
    "start-storyteller-obs": "PORT=7007 BROWSER=none lerna exec --scope @storyteller/storyteller-obs -- yarn start",
    "build-storyteller-obs": "lerna exec --scope @storyteller/storyteller-obs -- yarn build",
@@ -5,10 +5,10 @@
  "dependencies": {
    "@storyteller/components": "0.1.0",
    "@craco/craco": "^6.4.3",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.15",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^13.5.0",
@@ -27,10 +27,18 @@
    "react-scripts": "5.0.0",
    "three": "0.138.3",
    "typescript": "^4.5.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "locomotive-scroll": "^4.1.4",
+    "react-locomotive-scroll": "^0.2.2",
+    "react-fast-marquee": "^1.3.5",
+    "@tippyjs/react": "^4.2.6",
+    "gsap": "^3.11.0",
+    "split-type": "^0.3.2",
+    "swiper": "^8.3.2"
  },
  "scripts": {
    "start": "craco start",
+    "start-w": "set BROWSER=none && craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
@@ -3,16 +3,27 @@
  <head>
    <meta charset="utf-8" />

-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="%PUBLIC_URL%/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%PUBLIC_URL%/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%PUBLIC_URL%/favicon-16x16.png"
+    />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#209cee" />
-    <meta
-      name="description"
-      content="Storyteller supercharges your stream"
-    />
+    <meta name="description" content="Storyteller supercharges your stream" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
@@ -31,26 +42,57 @@
    <title>Storyteller. Stream tech.</title>

    <!-- Twitter, Discord, etc. -->
-    <meta property="og:title" content="Storyteller, deep fake and production tools." />
+    <meta
+      property="og:title"
+      content="Storyteller, deep fake and production tools."
+    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://storyteller.io" />
    <meta property="og:image" content="%PUBLIC_URL%/apple-touch-icon.png" />
-    <meta property="og:description" content="Storyteller. You can supercharge your stream." />
+    <meta
+      property="og:description"
+      content="Storyteller. You can supercharge your stream."
+    />

    <!-- Include this to make the og:image larger -->
-    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:card" content="summary_large_image" />

    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-9FYFXYQ42S"></script>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-9FYFXYQ42S"
+    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'G-9FYFXYQ42S');
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "G-9FYFXYQ42S");
    </script>

-    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,300;0,400;1,300&family=Fugaz+One&family=Merriweather:wght@300&family=Fira+Sans:ital,wght@0,200;0,300;0,400;1,200;1,300;1,400&display=swap" rel="stylesheet">
+    <!-- Font -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Bootstrap -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+
+    <!-- Bootstrap JS -->
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+      crossorigin="anonymous"
+    ></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -1,37 +1,59 @@
-import 'bulma/css/bulma.css'
-import './App.scss';
+// import 'bulma/css/bulma.css'
+import "./App.scss";

-import React from 'react';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
-import IndexPage from './pages/index/IndexPage';
-import VoxelCamPage from './pages/voxelcam/VoxelCamPage';
-import { Footer } from './common/Footer';
-import JobsPage from './pages/jobs/JobsPage';
-import ScrollToTop from '@storyteller/components/src/elements/ScrollToTop';
+import React, { useRef } from "react";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
+import IndexPage from "./pages/index/IndexPage";
+import VoxelCamPage from "./pages/voxelcam/VoxelCamPage";
+import JobsPage from "./pages/jobs/JobsPage";
+import { LocomotiveScrollProvider } from "react-locomotive-scroll";
+import { TopNav } from "./common/TopNav";
+import { Footer } from "./common/Footer";
+
+function App() {
+  const containerRef = useRef(null);

-function App () {
  return (
    <>
-      <BrowserRouter>
-        <div id="main" className="mainwrap">
-          <div id="viewable">
-            {/*<TopNav /> */}
-            <ScrollToTop />
-            <Switch>
-              <Route path="/voxelcam">
-                <VoxelCamPage />
-              </Route>
-              <Route path="/jobs">
-                <JobsPage />
-              </Route>
-              <Route exact={true} path="/">
-                <IndexPage />
-              </Route>
-            </Switch>
+      <LocomotiveScrollProvider
+        options={{
+          smooth: true,
+          multiplier: 0.9,
+          getDirection: true,
+          mobile: {
+            smooth: false,
+          },
+          // ... all available Locomotive Scroll instance options
+        }}
+        watch={
+          [
+            //..all the dependencies you want to watch to update the scroll.
+            //  Basicaly, you would want to watch page/location changes
+            //  For exemple, on Next.js you would want to watch properties like `router.asPath` (you may want to add more criterias if the instance should be update on locations with query parameters)
+          ]
+        }
+        containerRef={containerRef}
+      >
+        <BrowserRouter>
+          <div data-scroll-container ref={containerRef}>
+            <div>
+              <TopNav />
+              <Switch>
+                <Route path="/voxelcam">
+                  <VoxelCamPage />
+                </Route>
+                <Route path="/jobs">
+                  <JobsPage />
+                </Route>
+                <Route exact={true} path="/">
+                  <IndexPage />
+                </Route>
+              </Switch>
+              <Footer />
+            </div>
          </div>
-        </div>
-        <Footer />
-      </BrowserRouter>
+        </BrowserRouter>
+      </LocomotiveScrollProvider>
    </>
  );
 }
@@ -1,24 +1,50 @@
-import React from 'react';
-import { GitSha } from '@storyteller/components/src/elements/GitSha';
+import React from "react";
+import { GitSha } from "@storyteller/components/src/elements/GitSha";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faDiscord,
+  faFacebook,
+  faTwitch,
+  faTwitter,
+} from "@fortawesome/free-brands-svg-icons";

-interface Props {
-}
+interface Props {}

 function Footer(props: Props) {
  return (
    <>
-      <footer className="footer">
-        <div className="content has-text-centered">
-          <p>
-            Copyright &copy; 2020 &mdash; 2022 Learning Machines, Inc. (makers of FakeYou and Storyteller)
-          </p>
-          <p>
+      <footer data-scroll-section>
+        <div className="bg-dark-solid">
+          <div className="container footer-top text-center">
+            <div className="d-flex gap-4 justify-content-center p-4">
+              <a href="https://google.com" className="footer-social-icon">
+                <FontAwesomeIcon icon={faDiscord} />
+              </a>
+              <a href="https://google.com" className="footer-social-icon">
+                <FontAwesomeIcon icon={faTwitch} />
+              </a>
+              <a href="https://google.com" className="footer-social-icon">
+                <FontAwesomeIcon icon={faFacebook} />
+              </a>
+              <a href="https://google.com" className="footer-social-icon">
+                <FontAwesomeIcon icon={faTwitter} />
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="footer-bottom">
+          <div className="container d-flex flex-column flex-md-row text-center text-md-start gap-3">
+            <div className="flex-grow-1">
+              Copyright &copy; 2020 &mdash; 2022 Learning Machines, Inc. (makers
+              of FakeYou and Storyteller)
+            </div>
+
            <GitSha />
-          </p>
+          </div>
        </div>
      </footer>
    </>
-  )
+  );
 }

-export { Footer }
+export { Footer };
@@ -1,97 +1,177 @@
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { useLocomotiveScroll } from "react-locomotive-scroll";
+import React, { useState, useEffect } from "react";

-interface Props {
-}
+interface Props {}

 function TopNav(props: Props) {
+  const { scroll } = useLocomotiveScroll();
+  const [isScrolling, setIsScrolling] = useState(false);
+  const [showTopBtn, setTopBtn] = useState(false);

-  const [mobileHamburgerIsActive, setMobileHamburgerIsActive] = useState<boolean>(false);
+  if (!!scroll) {
+    scroll.on(
+      "scroll",
+      (position: { scroll: { y: number } }, direction: string) => {
+        if (position.scroll.y > 50) {
+          // console.log(">> scroll > 50");
+          if (!isScrolling) {
+            setIsScrolling(true);
+          }
+        } else {
+          // console.log(">> scroll < 50 ");
+          if (isScrolling) {
+            setIsScrolling(false);
+          }
+        }

-  const toggleHamburger = () => { 
-    setMobileHamburgerIsActive(!mobileHamburgerIsActive);
+        if (position.scroll.y > 400) {
+          // console.log(">> scroll > 50");
+          if (!showTopBtn) {
+            setTopBtn(true);
+          }
+        } else {
+          // console.log(">> scroll < 50 ");
+          if (showTopBtn) {
+            setTopBtn(false);
+          }
+        }
+      }
+    );
  }

-  const closeHamburger = () => { 
-    // TODO: This is an ergonomic hack. 
-    // The hamburger ideally should close whenever it is no longer active.
-    setMobileHamburgerIsActive(false);
-  }
+  const navClassNames = isScrolling
+    ? "container-fluid nav-scroll"
+    : "container-fluid";

-  const navbarClasses = mobileHamburgerIsActive ? "navbar-menu is-active" : "navbar-menu";
-  const navbarBurgerClasses = mobileHamburgerIsActive ? "navbar-burger is-active" : "navbar-burger";
+  const backToTop = showTopBtn
+    ? "btn-to-top nav-link show"
+    : "btn-to-top nav-link";
+
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const menuToggle = () => {
+    setMobileMenuOpen(!mobileMenuOpen);
+  };
+
+  const hamburgerClassNames = mobileMenuOpen
+    ? "button_container active"
+    : "button_container";
+
+  const menuClassNames = mobileMenuOpen ? "overlay open" : "overlay";
+
+  useEffect(() => {
+    if (mobileMenuOpen) {
+      document.body.classList.add("lock-scroll");
+    } else {
+      document.body.classList.remove("lock-scroll");
+    }
+  }, [mobileMenuOpen]);

  return (
    <>
-      <nav className="navbar is-transparent padding-bottom-1em">
-        <div className="navbar-brand">
-          <Link className="navbar-item" to="/">
-            <img src="/storyteller-nav-logo-mascot-pink.png" alt="Storyteller: Stream tech" />
-          </Link>
-          <div className={navbarBurgerClasses} data-target="navbarExampleTransparentExample" onClick={() => toggleHamburger()}>
-            <span></span>
-            <span></span>
-            <span></span>
+      <nav id="navbar" className={navClassNames} data-scroll-section>
+        <div className="d-none d-lg-flex flex-wrap align-items-center justify-content-center justify-content-md-between mt-3 topnav">
+          <a
+            href="/"
+            className="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none"
+          >
+            <img
+              id="logo"
+              src="/logo/Storyteller-Logo.png"
+              alt="Storyteller Logo"
+              height="36"
+              className="mb-2"
+            />
+          </a>
+
+          <ul className="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
+            <li>
+              <a href="#root" className="nav-link active" data-scroll-to>
+                Home
+              </a>
+            </li>
+            <li>
+              <a href="#about" className="nav-link" data-scroll-to>
+                About
+              </a>
+            </li>
+            <li>
+              <a href="#products" className="nav-link" data-scroll-to>
+                What We Do
+              </a>
+            </li>
+            <li>
+              <a href="#mentions" className="nav-link" data-scroll-to>
+                Mentions
+              </a>
+            </li>
+          </ul>
+
+          <div className="col-md-3 text-end">
+            <a className="btn btn-primary fs-6" href="#about" data-scroll-to>
+              Contact
+            </a>
          </div>
        </div>

-        <div id="navbarExampleTransparentExample" className={navbarClasses}>
-          <div className="navbar-start">
-
-            <Link to="/"
-              className="navbar-item"
-              onClick={() => closeHamburger()}
-              >Foo</Link>
-
-            <Link to="/"
-              className="navbar-item"
-              onClick={() => closeHamburger()}
-              >Bar</Link>
-
-            {/* 
-            <div className="navbar-item has-dropdown is-hoverable">
-              <Link to="/"
-                className="navbar-link"
-                onClick={() => closeHamburger()}
-                >Community</Link>
-
-              <div className="navbar-dropdown is-boxed">
-                {/* NB: There's an "is-active" class that looks nice. * /}
-
-                <Link to="/contribute"
-                  className="navbar-item"
-                  onClick={() => closeHamburger()}
-                  ><FontAwesomeIcon icon={faUpload} />&nbsp;&nbsp;Contribute / Upload</Link>
-
-              </div>
-            </div>
-            */}
-          </div>
-
-
-          <div className="navbar-end">
-            <div className="navbar-item">
-              <div className="field is-grouped">
-                <p className="control">
-                </p>
-              </div>
-            </div>
-          </div>
-          {/*<div className="navbar-end">
-            <div className="navbar-item">
-              <div className="field is-grouped">
-                <p className="control">
-                  TODO
-                </p>
-              </div>
-            </div>
-          </div>*/}
+        <div className="d-flex d-lg-none justify-content-between pt-2">
+          <a
+            href="/"
+            className="d-flex align-items-center text-dark text-decoration-none"
+          >
+            <img
+              id="logo"
+              src="/logo/Storyteller-Logo.png"
+              alt="Storyteller Logo"
+              height="36"
+              className="mb-2"
+            />
+          </a>
+          <button
+            onClick={menuToggle}
+            className={hamburgerClassNames}
+            id="toggle"
+            aria-controls="primary-menu"
+            aria-expanded="false"
+          >
+            <span className="top"></span>
+            <span className="middle"></span>
+            <span className="bottom"></span>
+          </button>
        </div>
      </nav>
+      <div className={menuClassNames}>
+        <div className="overlay-menu">
+          <ul>
+            <li className="nav-link active">
+              <a onClick={menuToggle} href="#root" data-scroll-to>
+                Home
+              </a>
+            </li>
+            <li>
+              <a onClick={menuToggle} href="#about" data-scroll-to>
+                About
+              </a>
+            </li>
+            <li>
+              <a onClick={menuToggle} href="#products" data-scroll-to>
+                What We Do
+              </a>
+            </li>
+            <li>
+              <a onClick={menuToggle} href="#mentions" data-scroll-to>
+                Mentions
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <a href="#home" className={backToTop} data-scroll-to>
+        <div className="btt-shape"></div>
+        Back to Top
+      </a>
    </>
-  )
-
-
+  );
 }

-export { TopNav }
+export { TopNav };
@@ -1,14 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";

 ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );

 // If you want to start measuring performance in your app, pass a function
@@ -0,0 +1,87 @@
+/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
+html.has-scroll-smooth {
+  overflow: hidden;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+html.has-scroll-dragging {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.has-scroll-smooth body {
+  overflow: hidden;
+}
+
+.has-scroll-smooth [data-scroll-container] {
+  min-height: 100vh;
+}
+
+[data-scroll-direction="horizontal"] [data-scroll-container] {
+  height: 100vh;
+  display: inline-block;
+  white-space: nowrap;
+}
+
+[data-scroll-direction="horizontal"] [data-scroll-section] {
+  display: inline-block;
+  vertical-align: top;
+  white-space: nowrap;
+  height: 100%;
+}
+
+.c-scrollbar {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 11px;
+  height: 100%;
+  transform-origin: center right;
+  transition: transform 0.3s, opacity 0.3s;
+  opacity: 0;
+}
+.c-scrollbar:hover {
+  transform: scaleX(1.45);
+}
+.c-scrollbar:hover,
+.has-scroll-scrolling .c-scrollbar,
+.has-scroll-dragging .c-scrollbar {
+  opacity: 1;
+}
+[data-scroll-direction="horizontal"] .c-scrollbar {
+  width: 100%;
+  height: 10px;
+  top: auto;
+  bottom: 0;
+  transform: scaleY(1);
+}
+[data-scroll-direction="horizontal"] .c-scrollbar:hover {
+  transform: scaleY(1.3);
+}
+
+.c-scrollbar_thumb {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: black;
+  opacity: 0.5;
+  width: 7px;
+  border-radius: 10px;
+  margin: 2px;
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+.has-scroll-dragging .c-scrollbar_thumb {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+[data-scroll-direction="horizontal"] .c-scrollbar_thumb {
+  right: auto;
+  bottom: 0;
+}
@@ -1,14 +1,13 @@
-import React, { useRef, useState } from 'react';
-import { Howl } from 'howler';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPause, faPlay } from '@fortawesome/free-solid-svg-icons';
+import React, { useRef, useState } from "react";
+import { Howl } from "howler";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPause, faPlay } from "@fortawesome/free-solid-svg-icons";

 interface Props {
-  sampleUrl: string,
+  sampleUrl: string;
 }

 function AudioSample(props: Props) {
-
  const [isPlaying, setIsPlaying] = useState(false);

  const howlPlayer = useRef(
@@ -16,9 +15,15 @@ function AudioSample(props: Props) {
      src: [props.sampleUrl],
      autoplay: false,
      loop: false,
-      onplay: function() { setIsPlaying(true) },
-      onpause: function() { setIsPlaying(false) },
-      onend: function() { setIsPlaying(false) },
+      onplay: function () {
+        setIsPlaying(true);
+      },
+      onpause: function () {
+        setIsPlaying(false);
+      },
+      onend: function () {
+        setIsPlaying(false);
+      },
    })
  );

@@ -31,17 +36,18 @@ function AudioSample(props: Props) {
      player.play();
      setIsPlaying(true);
    }
-  }
+  };

-  const playIcon = isPlaying ? 
-    <FontAwesomeIcon icon={faPause} /> :
-    <FontAwesomeIcon icon={faPlay} /> ;
+  const playIcon = isPlaying ? (
+    <FontAwesomeIcon className="fs-5" icon={faPause} />
+  ) : (
+    <FontAwesomeIcon className="fs-5" icon={faPlay} />
+  );

  return (
-    <button 
-      className="button is-info is-rounded is-outlined"
-      onClick={onClickToggle}
-      >{playIcon}</button>
+    <button className="btn btn-secondary mb-4 d-flex" onClick={onClickToggle}>
+      {playIcon}
+    </button>
  );
 }

@@ -0,0 +1,455 @@
+/* eslint-disable */
+!(function (D, u) {
+  "object" == typeof exports && "undefined" != typeof module
+    ? u(exports)
+    : "function" == typeof define && define.amd
+    ? define(["exports"], u)
+    : u(((D = D || self).window = D.window || {}));
+})(this, function (e) {
+  "use strict";
+  var v = "";
+
+  function m() {
+    return String.fromCharCode.apply(null, arguments);
+  }
+
+  function p(D) {
+    return F.getComputedStyle(D);
+  }
+
+  function s(D, u) {
+    var e;
+    return l(D)
+      ? D
+      : "string" == (e = typeof D) && !u && D
+      ? d.call(Q.querySelectorAll(D), 0)
+      : D && "object" == e && "length" in D
+      ? d.call(D, 0)
+      : D
+      ? [D]
+      : [];
+  }
+
+  function t(D) {
+    return "absolute" === D.position || !0 === D.absolute;
+  }
+
+  function u(D, u) {
+    for (var e, t = u.length; -1 < --t; )
+      if (((e = u[t]), D.substr(0, e.length) === e)) return e.length;
+  }
+
+  function w(D, u) {
+    void 0 === D && (D = "");
+    var e = ~D.indexOf("++"),
+      t = 1;
+    return (
+      e && (D = D.split("++").join("")),
+      function () {
+        return (
+          "<" +
+          u +
+          " style='position:relative;display:inline-block;'" +
+          (D ? " class='" + D + (e ? t++ : "") + "'>" : ">")
+        );
+      }
+    );
+  }
+
+  function x(D, u, e) {
+    var t = D.nodeType;
+    if (1 === t || 9 === t || 11 === t)
+      for (D = D.firstChild; D; D = D.nextSibling) x(D, u, e);
+    else (3 !== t && 4 !== t) || (D.nodeValue = D.nodeValue.split(u).join(e));
+  }
+
+  function y(D, u) {
+    for (var e = u.length; -1 < --e; ) D.push(u[e]);
+  }
+
+  function z(D, u, e) {
+    for (var t; D && D !== u; ) {
+      if ((t = D._next || D.nextSibling)) return t.textContent.charAt(0) === e;
+      D = D.parentNode || D._parent;
+    }
+  }
+
+  function A(D) {
+    var u,
+      e,
+      t = s(D.childNodes),
+      F = t.length;
+    for (u = 0; u < F; u++)
+      (e = t[u])._isSplit
+        ? A(e)
+        : (u && 3 === e.previousSibling.nodeType
+            ? (e.previousSibling.nodeValue +=
+                3 === e.nodeType ? e.nodeValue : e.firstChild.nodeValue)
+            : 3 !== e.nodeType && D.insertBefore(e.firstChild, e),
+          D.removeChild(e));
+  }
+
+  function B(D, u) {
+    return parseFloat(u[D]) || 0;
+  }
+
+  function C(D, u, e, F, C, i, n) {
+    var E,
+      s,
+      r,
+      o,
+      l,
+      d,
+      a,
+      h,
+      f,
+      c,
+      g,
+      m,
+      v = p(D),
+      w = B("paddingLeft", v),
+      S = -999,
+      b = B("borderBottomWidth", v) + B("borderTopWidth", v),
+      _ = B("borderLeftWidth", v) + B("borderRightWidth", v),
+      T = B("paddingTop", v) + B("paddingBottom", v),
+      N = B("paddingLeft", v) + B("paddingRight", v),
+      L = 0.2 * B("fontSize", v),
+      O = v.textAlign,
+      W = [],
+      H = [],
+      V = [],
+      j = u.wordDelimiter || " ",
+      M = u.tag ? u.tag : u.span ? "span" : "div",
+      R = u.type || u.split || "chars,words,lines",
+      k = C && ~R.indexOf("lines") ? [] : null,
+      P = ~R.indexOf("words"),
+      q = ~R.indexOf("chars"),
+      G = t(u),
+      I = u.linesClass,
+      J = ~(I || "").indexOf("++"),
+      K = [];
+    for (
+      J && (I = I.split("++").join("")),
+        r = (s = D.getElementsByTagName("*")).length,
+        l = [],
+        E = 0;
+      E < r;
+      E++
+    )
+      l[E] = s[E];
+    if (k || G)
+      for (E = 0; E < r; E++)
+        ((d = (o = l[E]).parentNode === D) || G || (q && !P)) &&
+          ((m = o.offsetTop),
+          k &&
+            d &&
+            Math.abs(m - S) > L &&
+            ("BR" !== o.nodeName || 0 === E) &&
+            ((a = []), k.push(a), (S = m)),
+          G &&
+            ((o._x = o.offsetLeft),
+            (o._y = m),
+            (o._w = o.offsetWidth),
+            (o._h = o.offsetHeight)),
+          k &&
+            (((o._isSplit && d) ||
+              (!q && d) ||
+              (P && d) ||
+              (!P &&
+                o.parentNode.parentNode === D &&
+                !o.parentNode._isSplit)) &&
+              (a.push(o), (o._x -= w), z(o, D, j) && (o._wordEnd = !0)),
+            "BR" === o.nodeName &&
+              ((o.nextSibling && "BR" === o.nextSibling.nodeName) || 0 === E) &&
+              k.push([])));
+    for (E = 0; E < r; E++)
+      (d = (o = l[E]).parentNode === D),
+        "BR" !== o.nodeName
+          ? (G &&
+              ((f = o.style),
+              P || d || ((o._x += o.parentNode._x), (o._y += o.parentNode._y)),
+              (f.left = o._x + "px"),
+              (f.top = o._y + "px"),
+              (f.position = "absolute"),
+              (f.display = "block"),
+              (f.width = o._w + 1 + "px"),
+              (f.height = o._h + "px")),
+            !P && q
+              ? o._isSplit
+                ? ((o._next = o.nextSibling), o.parentNode.appendChild(o))
+                : o.parentNode._isSplit
+                ? ((o._parent = o.parentNode),
+                  !o.previousSibling &&
+                    o.firstChild &&
+                    (o.firstChild._isFirst = !0),
+                  o.nextSibling &&
+                    " " === o.nextSibling.textContent &&
+                    !o.nextSibling.nextSibling &&
+                    K.push(o.nextSibling),
+                  (o._next =
+                    o.nextSibling && o.nextSibling._isFirst
+                      ? null
+                      : o.nextSibling),
+                  o.parentNode.removeChild(o),
+                  l.splice(E--, 1),
+                  r--)
+                : d ||
+                  ((m = !o.nextSibling && z(o.parentNode, D, j)),
+                  o.parentNode._parent && o.parentNode._parent.appendChild(o),
+                  m && o.parentNode.appendChild(Q.createTextNode(" ")),
+                  "span" === M && (o.style.display = "inline"),
+                  W.push(o))
+              : o.parentNode._isSplit && !o._isSplit && "" !== o.innerHTML
+              ? H.push(o)
+              : q &&
+                !o._isSplit &&
+                ("span" === M && (o.style.display = "inline"), W.push(o)))
+          : k || G
+          ? (o.parentNode && o.parentNode.removeChild(o), l.splice(E--, 1), r--)
+          : P || D.appendChild(o);
+    for (E = K.length; -1 < --E; ) K[E].parentNode.removeChild(K[E]);
+    if (k) {
+      for (
+        G &&
+          ((c = Q.createElement(M)),
+          D.appendChild(c),
+          (g = c.offsetWidth + "px"),
+          (m = c.offsetParent === D ? 0 : D.offsetLeft),
+          D.removeChild(c)),
+          f = D.style.cssText,
+          D.style.cssText = "display:none;";
+        D.firstChild;
+
+      )
+        D.removeChild(D.firstChild);
+      for (h = " " === j && (!G || (!P && !q)), E = 0; E < k.length; E++) {
+        for (
+          a = k[E],
+            (c = Q.createElement(M)).style.cssText =
+              "display:block;text-align:" +
+              O +
+              ";position:" +
+              (G ? "absolute;" : "relative;"),
+            I && (c.className = I + (J ? E + 1 : "")),
+            V.push(c),
+            r = a.length,
+            s = 0;
+          s < r;
+          s++
+        )
+          "BR" !== a[s].nodeName &&
+            ((o = a[s]),
+            c.appendChild(o),
+            h && o._wordEnd && c.appendChild(Q.createTextNode(" ")),
+            G &&
+              (0 === s &&
+                ((c.style.top = o._y + "px"), (c.style.left = w + m + "px")),
+              (o.style.top = "0px"),
+              m && (o.style.left = o._x - m + "px")));
+        0 === r
+          ? (c.innerHTML = "&nbsp;")
+          : P || q || (A(c), x(c, String.fromCharCode(160), " ")),
+          G && ((c.style.width = g), (c.style.height = o._h + "px")),
+          D.appendChild(c);
+      }
+      D.style.cssText = f;
+    }
+    G &&
+      (n > D.clientHeight &&
+        ((D.style.height = n - T + "px"),
+        D.clientHeight < n && (D.style.height = n + b + "px")),
+      i > D.clientWidth &&
+        ((D.style.width = i - N + "px"),
+        D.clientWidth < i && (D.style.width = i + _ + "px"))),
+      y(e, W),
+      P && y(F, H),
+      y(C, V);
+  }
+
+  function D(D, e, F, C) {
+    var i,
+      n,
+      E,
+      s,
+      r,
+      o,
+      l,
+      d,
+      a = e.tag ? e.tag : e.span ? "span" : "div",
+      p = ~(e.type || e.split || "chars,words,lines").indexOf("chars"),
+      h = t(e),
+      B = e.wordDelimiter || " ",
+      f = " " !== B ? "" : h ? "&#173; " : " ",
+      A = "</" + a + ">",
+      c = 1,
+      g = e.specialChars
+        ? "function" == typeof e.specialChars
+          ? e.specialChars
+          : u
+        : null,
+      y = Q.createElement("div"),
+      m = D.parentNode;
+    for (
+      m.insertBefore(y, D),
+        y.textContent = D.nodeValue,
+        m.removeChild(D),
+        l =
+          -1 !==
+          (i = (function getText(D) {
+            var u = D.nodeType,
+              e = "";
+            if (1 === u || 9 === u || 11 === u) {
+              if ("string" == typeof D.textContent) return D.textContent;
+              for (D = D.firstChild; D; D = D.nextSibling) e += getText(D);
+            } else if (3 === u || 4 === u) return D.nodeValue;
+            return e;
+          })(
+            /*!
+             * SplitText: 3.0.0
+             * https://greensock.com
+             *
+             * @license Copyright 2008-2019, GreenSock. All rights reserved.
+             * Subject to the terms at https://greensock.com/standard-license or for
+             * Club GreenSock members, the agreement issued with that membership.
+             * @author: Jack Doyle, jack@greensock.com
+             */
+            (D = y)
+          )).indexOf("<"),
+        !1 !== e.reduceWhiteSpace && (i = i.replace(b, " ").replace(S, "")),
+        l && (i = i.split("<").join("{{LT}}")),
+        r = i.length,
+        n = (" " === i.charAt(0) ? f : "") + F(),
+        E = 0;
+      E < r;
+      E++
+    )
+      if (((o = i.charAt(E)), g && (d = g(i.substr(E), e.specialChars))))
+        (o = i.substr(E, d || 1)),
+          (n += p && " " !== o ? C() + o + "</" + a + ">" : o),
+          (E += d - 1);
+      else if (o === B && i.charAt(E - 1) !== B && E) {
+        for (n += c ? A : "", c = 0; i.charAt(E + 1) === B; ) (n += f), E++;
+        E === r - 1
+          ? (n += f)
+          : ")" !== i.charAt(E + 1) && ((n += f + F()), (c = 1));
+      } else
+        "{" === o && "{{LT}}" === i.substr(E, 6)
+          ? ((n += p ? C() + "{{LT}}</" + a + ">" : "{{LT}}"), (E += 5))
+          : (55296 <= o.charCodeAt(0) && o.charCodeAt(0) <= 56319) ||
+            (65024 <= i.charCodeAt(E + 1) && i.charCodeAt(E + 1) <= 65039)
+          ? ((s = ((i.substr(E, 12).split(v) || [])[1] || "").length || 2),
+            (n +=
+              p && " " !== o
+                ? C() + i.substr(E, s) + "</" + a + ">"
+                : i.substr(E, s)),
+            (E += s - 1))
+          : (n += p && " " !== o ? C() + o + "</" + a + ">" : o);
+    (D.outerHTML = n + (c ? A : "")), l && x(m, "{{LT}}", "<");
+  }
+
+  function E(u, e, F, C) {
+    var i,
+      n,
+      r = s(u.childNodes),
+      o = r.length,
+      l = t(e);
+    if (3 !== u.nodeType || 1 < o) {
+      for (e.absolute = !1, i = 0; i < o; i++)
+        (3 === (n = r[i]).nodeType && !/\S+/.test(n.nodeValue)) ||
+          (l &&
+            3 !== n.nodeType &&
+            "inline" === p(n).display &&
+            ((n.style.display = "inline-block"),
+            (n.style.position = "relative")),
+          (n._isSplit = !0),
+          E(n, e, F, C));
+      return (e.absolute = l), void (u._isSplit = !0);
+    }
+    D(u, e, F, C);
+  }
+  var Q,
+    F,
+    i,
+    S = /(?:\r|\n|\t\t)/g,
+    b = /(?:\s\s+)/g,
+    n = "SplitText",
+    r = m(103, 114, 101, 101, 110, 115, 111, 99, 107, 46, 99, 111, 109),
+    o = true,
+    l = Array.isArray,
+    d = [].slice,
+    a = (function () {
+      function SplitText(D, u) {
+        i ||
+          (function _initCore() {
+            (Q = document), (F = window), (i = 1);
+          })(),
+          (this.elements = s(D)),
+          (this.chars = []),
+          (this.words = []),
+          (this.lines = []),
+          (this._originals = []),
+          (this.vars = u || {}),
+          o && this.split(u);
+      }
+      var D = SplitText.prototype;
+      return (
+        (D.split = function split(D) {
+          this.isSplit && this.revert(),
+            (this.vars = D = D || this.vars),
+            (this._originals.length =
+              this.chars.length =
+              this.words.length =
+              this.lines.length =
+                0);
+          for (
+            var u,
+              e,
+              t,
+              F = this.elements.length,
+              i = D.tag ? D.tag : D.span ? "span" : "div",
+              n = w(D.wordsClass, i),
+              s = w(D.charsClass, i);
+            -1 < --F;
+
+          )
+            (t = this.elements[F]),
+              (this._originals[F] = t.innerHTML),
+              (u = t.clientHeight),
+              (e = t.clientWidth),
+              E(t, D, n, s),
+              C(t, D, this.chars, this.words, this.lines, e, u);
+          return (
+            this.chars.reverse(),
+            this.words.reverse(),
+            this.lines.reverse(),
+            (this.isSplit = !0),
+            this
+          );
+        }),
+        (D.revert = function revert() {
+          var e = this._originals;
+          if (!e) throw "revert() call wasn't scoped properly.";
+          return (
+            this.elements.forEach(function (D, u) {
+              return (D.innerHTML = e[u]);
+            }),
+            (this.chars = []),
+            (this.words = []),
+            (this.lines = []),
+            (this.isSplit = !1),
+            this
+          );
+        }),
+        (SplitText.create = function create(D, u) {
+          return new SplitText(D, u);
+        }),
+        SplitText
+      );
+    })();
+  (a.version = "3.0.0"),
+    (e.SplitText = a),
+    (e.default = a),
+    Object.defineProperty(e, "__esModule", {
+      value: !0,
+    });
+});
@@ -1,12 +1,20 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import { GenerateTtsAudio, GenerateTtsAudioRequest, GenerateTtsAudioIsError, GenerateTtsAudioIsOk } from '@storyteller/components/src/api/tts/GenerateTtsAudio';
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { v4 as uuidv4 } from "uuid";
+import {
+  GenerateTtsAudio,
+  GenerateTtsAudioRequest,
+  GenerateTtsAudioIsError,
+  GenerateTtsAudioIsOk,
+} from "@storyteller/components/src/api/tts/GenerateTtsAudio";
 import { jobStateCanChange } from "@storyteller/components/src/jobs/JobStates";
-import { TtsInferenceJob, TtsInferenceJobStateResponsePayload } from "@storyteller/components/src/jobs/TtsInferenceJobs";
-import { ApiConfig } from '@storyteller/components';
-import { TtsResultsList } from './TtsResultsList'
+import {
+  TtsInferenceJob,
+  TtsInferenceJobStateResponsePayload,
+} from "@storyteller/components/src/jobs/TtsInferenceJobs";
+import { ApiConfig } from "@storyteller/components";
+import { TtsResultsList } from "./TtsResultsList";

-const DEFAULT_MODEL_TOKEN = "TM:7wbtjphx8h8v"; 
+const DEFAULT_MODEL_TOKEN = "TM:7wbtjphx8h8v";

 // We're only going to allow a limited selection of voices.
 const DEMO_VOICES_TOKEN_TO_NAME = new Map<string, string>([
@@ -19,12 +27,12 @@ const DEMO_VOICES_TOKEN_TO_NAME = new Map<string, string>([
  ["TM:7ryawppwcnkv", "Stan Lee"],
 ]);

-interface Props {
-}
+interface Props {}

 function TtsComponent(props: Props) {
-  const [selectedModelToken, setSelectedModelToken] = useState(DEFAULT_MODEL_TOKEN);
-  const [inferenceText, setInferenceText] = useState('');
+  const [selectedModelToken, setSelectedModelToken] =
+    useState(DEFAULT_MODEL_TOKEN);
+  const [inferenceText, setInferenceText] = useState("");
  //const [maybeTtsError, setMaybeTtsError] = useState<GenerateTtsAudioErrorType|undefined>(undefined);
  const [jobs, setJobs] = useState<TtsInferenceJob[]>([]);

@@ -33,52 +41,56 @@ function TtsComponent(props: Props) {
  const enqueueTtsJob = (jobToken: string) => {
    const newJob = new TtsInferenceJob(jobToken);
    const newJobs = ttsInferenceJobs.current.concat([newJob]);
-    console.log('new jobs', newJobs);
+    console.log("new jobs", newJobs);
    //setTtsInferenceJobs(newJobs);
    ttsInferenceJobs.current = newJobs;
-  }
+  };

  const checkTtsJob = (jobToken: string) => {
    const endpointUrl = new ApiConfig().getTtsInferenceJobState(jobToken);

    fetch(endpointUrl, {
-      method: 'GET',
-      credentials: 'include',
+      method: "GET",
+      credentials: "include",
      headers: {
-        'Accept': 'application/json',
+        Accept: "application/json",
      },
    })
-    .then(res => res.json())
-    .then(response => {
-      const jobResponse : TtsInferenceJobStateResponsePayload = response;
+      .then((res) => res.json())
+      .then((response) => {
+        const jobResponse: TtsInferenceJobStateResponsePayload = response;

-      if (jobResponse === undefined || jobResponse.state === undefined) {
-        return;
-      }
-
-      let updatedJobs : Array<TtsInferenceJob> = [];
-
-      ttsInferenceJobs.current.forEach(existingJob => {
-        if (existingJob.jobToken !== jobResponse.state!.job_token ||
-            !jobStateCanChange(existingJob.jobState)) {
-          updatedJobs.push(existingJob);
+        if (jobResponse === undefined || jobResponse.state === undefined) {
          return;
        }

-        let updatedJob = TtsInferenceJob.fromResponse(jobResponse.state!);
-        updatedJobs.push(updatedJob);
+        let updatedJobs: Array<TtsInferenceJob> = [];
+
+        ttsInferenceJobs.current.forEach((existingJob) => {
+          if (
+            existingJob.jobToken !== jobResponse.state!.job_token ||
+            !jobStateCanChange(existingJob.jobState)
+          ) {
+            updatedJobs.push(existingJob);
+            return;
+          }
+
+          let updatedJob = TtsInferenceJob.fromResponse(jobResponse.state!);
+          updatedJobs.push(updatedJob);
+        });
+
+        ttsInferenceJobs.current = updatedJobs;
+        //setTtsInferenceJobs(updatedJobs);
+        setJobs(updatedJobs);
+      })
+      .catch((e) => {
+        /* Ignore. */
      });
- 
-      ttsInferenceJobs.current = updatedJobs;
-      //setTtsInferenceJobs(updatedJobs);
-      setJobs(updatedJobs);
-    })
-    .catch(e => { /* Ignore. */ });
-  }
+  };

  const pollJobs = useCallback(() => {
-    console.log('pollJob')
-    ttsInferenceJobs.current.forEach(job => {
+    console.log("pollJob");
+    ttsInferenceJobs.current.forEach((job) => {
      if (jobStateCanChange(job.jobState)) {
        checkTtsJob(job.jobToken);
      }
@@ -86,11 +98,13 @@ function TtsComponent(props: Props) {
  }, []);

  useEffect(() => {
-    console.log('useEffect')
-    setInterval(() => { pollJobs() }, 2000);
-  }, [pollJobs])
+    console.log("useEffect");
+    setInterval(() => {
+      pollJobs();
+    }, 2000);
+  }, [pollJobs]);

-  const handleChangeText = (ev: React.FormEvent<HTMLTextAreaElement>) => { 
+  const handleChangeText = (ev: React.FormEvent<HTMLTextAreaElement>) => {
    const textValue = (ev.target as HTMLTextAreaElement).value;
    setInferenceText(textValue);
  };
@@ -100,7 +114,7 @@ function TtsComponent(props: Props) {
    setSelectedModelToken(token);
  };

-  const handleFormSubmit = async (ev: React.FormEvent<HTMLFormElement>) => { 
+  const handleFormSubmit = async (ev: React.FormEvent<HTMLFormElement>) => {
    ev.preventDefault();

    if (!selectedModelToken) {
@@ -111,14 +125,14 @@ function TtsComponent(props: Props) {
      return false;
    }

-    const request : GenerateTtsAudioRequest = {
+    const request: GenerateTtsAudioRequest = {
      uuid_idempotency_token: uuidv4(),
      tts_model_token: selectedModelToken,
      inference_text: inferenceText,
      is_storyteller_demo: true, // TODO(2022-03): Temporary.
-    }
+    };

-    const response = await GenerateTtsAudio(request)
+    const response = await GenerateTtsAudio(request);

    if (GenerateTtsAudioIsOk(response)) {
      //setMaybeTtsError(undefined);
@@ -130,57 +144,60 @@ function TtsComponent(props: Props) {
    return false;
  };

-  let voiceOptions : any = [];
+  let voiceOptions: any = [];
  DEMO_VOICES_TOKEN_TO_NAME.forEach((name, token) => {
-    voiceOptions.push(<option key={token} value={token}>{name}</option>)
-  })
+    voiceOptions.push(
+      <option key={token} value={token}>
+        {name}
+      </option>
+    );
+  });

  return (
-    <>
-      <form onSubmit={handleFormSubmit} className="main-form">
+    <div className="d-flex justify-content-center pb-5">
+      <div className="card bg-dark-solid tts-demo w-100 mb-5">
+        <form onSubmit={handleFormSubmit} className="w-100">
+          <div className="d-flex flex-column gap-3">
+            <div className="field">
+              <div className="control">
+                <div className="select">
+                  <select className="form-select" onChange={handleVoiceChange}>
+                    {voiceOptions}
+                  </select>
+                </div>
+              </div>
+            </div>

-        <div className="field">
-          <div className="control">
-            <div className="select is-fullwidth">
-              <select
-                onChange={handleVoiceChange}
-                >
-                {voiceOptions}
-              </select>
+            <div className="field">
+              <div className="control">
+                <textarea
+                  onChange={handleChangeText}
+                  className="form-control"
+                  value={inferenceText}
+                  placeholder="Type something fun..."
+                  rows={4}
+                ></textarea>
+              </div>
+            </div>
+
+            <div className="d-flex justify-content-center gap-3">
+              <button className="btn btn-primary w-100" disabled={false}>
+                Generate
+              </button>
+              <button
+                className="btn btn-secondary w-100"
+                onClick={() => setInferenceText("")}
+              >
+                Clear
+              </button>
            </div>
          </div>
-        </div>
+        </form>

-        <div className="field">
-          <div className="control">
-            <textarea 
-              onChange={handleChangeText}
-              className="textarea is-normal" 
-              value={inferenceText}
-              placeholder="Type something fun..."></textarea>
-          </div>
-        </div>
-
-        <div className="button-group">
-          <div className="columns is-mobile">
-            <div className="column has-text-centered">
-              <button 
-                className="button is-info is-large" 
-                disabled={false}>Generate</button>
-            </div>
-            <div className="column has-text-centered">
-              <button 
-                className="button is-info is-light is-large" 
-                onClick={() => setInferenceText('')}>Clear</button>
-            </div>
-          </div>
-        </div>
-
-      </form>
-
-      <TtsResultsList ttsInferenceJobs={jobs} />
-    </>
-  )
+        <TtsResultsList ttsInferenceJobs={jobs} />
+      </div>
+    </div>
+  );
 }

-export { TtsComponent }
+export { TtsComponent };
@@ -1,11 +1,7 @@
 {
  "compilerOptions": {
    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
@@ -20,7 +16,5 @@
    "noEmit": true,
    "jsx": "react-jsx"
  },
-  "include": [
-    "src"
-  ]
+  "include": ["src", "src/pages/index/Split3.min.js"]
 }
@@ -4258,6 +4258,11 @@ before-after-hook@^2.2.0:
  resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.2.tgz#a6e8ca41028d90ee2c24222f201c90956091613e"
  integrity sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==

+bezier-easing@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.1.0.tgz#c04dfe8b926d6ecaca1813d69ff179b7c2025d86"
+  integrity sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==
+
 bfj@^7.0.2:
  version "7.0.2"
  resolved "https://registry.yarnpkg.com/bfj/-/bfj-7.0.2.tgz#1988ce76f3add9ac2913fd8ba47aad9e651bfbb2"
@@ -4283,6 +4288,11 @@ binary-extensions@^2.0.0:
  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==

+bindall-standalone@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/bindall-standalone/-/bindall-standalone-1.0.5.tgz#f7430388f1c7f9a9ade0fc75a400e710f6692a1d"
+  integrity sha512-HDI7YBWXVJk/eoGz+e4lYQQJnYp1ZHcUvAY71lVptLMhQnDm86vD73AGPw2qIlgYR3P0bjmoAcXiA8qhFejBhA==
+
 bindings@^1.5.0:
  version "1.5.0"
  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
@@ -5946,6 +5956,13 @@ dom-serializer@^1.0.1:
    domhandler "^4.2.0"
    entities "^2.0.0"

+dom7@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-4.0.4.tgz#8b68c5d8e5e2ed0fddb1cb93e433bc9060c8f3fb"
+  integrity sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==
+  dependencies:
+    ssr-window "^4.0.0"
+
 domain-browser@^1.1.1:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -7318,6 +7335,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
  integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==

+gsap@^3.11.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.11.0.tgz#5a45da0f35b49e2c479e1e274feb6ac51e86478b"
+  integrity sha512-TV5aFGqXht+0o/CelnhCikSe3QGeG+q1XA/fyFFsMzesILHgWgFWIz0NuXIgcMaL5h7MG2l+j0BTupS5YyYkrw==
+
 gzip-size@^6.0.0:
  version "6.0.0"
  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
@@ -9010,6 +9032,11 @@ lerna@^4.0.0:
    import-local "^3.0.2"
    npmlog "^4.1.2"

+lethargy@^1.0.2:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/lethargy/-/lethargy-1.0.9.tgz#138b0ae384d015c5233e0cc1eeba4d089af3c58b"
+  integrity sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg==
+
 leven@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -9156,6 +9183,15 @@ locate-path@^6.0.0:
  dependencies:
    p-locate "^5.0.0"

+locomotive-scroll@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/locomotive-scroll/-/locomotive-scroll-4.1.4.tgz#a6d83ba3c07a9c51fc1a6d95b4be614d4dc5aad2"
+  integrity sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==
+  dependencies:
+    bezier-easing "^2.1.0"
+    smoothscroll-polyfill "^0.4.4"
+    virtual-scroll "^1.5.2"
+
 lodash._reinterpolate@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -11631,6 +11667,11 @@ react-error-overlay@^6.0.10:
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.10.tgz#0fe26db4fa85d9dbb8624729580e90e7159a59a6"
  integrity sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==

+react-fast-marquee@^1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.3.5.tgz#e53995027102fbec92da90606d7ca89703db9903"
+  integrity sha512-eOqLoz4iVVBvi2wN/web8hd2XX9y2Z6CYR7g++7nTVHlTOXBtqyARQJ9rYNpbp179hAzloMx0yBFAo8LpNYmKQ==
+
 react-i18next@^11.15.4:
  version "11.15.4"
  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.15.4.tgz#fe0c792ea93f038548e838cecae3ed4173822937"
@@ -11650,6 +11691,14 @@ react-is@^17.0.1:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==

+react-locomotive-scroll@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/react-locomotive-scroll/-/react-locomotive-scroll-0.2.2.tgz#50fd3982b5386cd3e4196d391cbdd327c0523079"
+  integrity sha512-F+1JCUNw2sU/g+wtvbxh8Oi4FPrhPQFKY7QlK0p3D0kl2JgK0FK9fF1G43wcZccP8YBrKU81T4ZQBf/DasgVOg==
+  dependencies:
+    use-debounce "6.0.1"
+    use-resize-observer "6.1.0"
+
 react-refresh@^0.11.0:
  version "0.11.0"
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -12096,6 +12145,11 @@ requires-port@^1.0.0:
  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=

+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -12564,6 +12618,11 @@ smart-buffer@^4.1.0:
  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
  integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==

+smoothscroll-polyfill@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz#3a259131dc6930e6ca80003e1cb03b603b69abf8"
+  integrity sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==
+
 snapdragon-node@^2.0.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -12789,6 +12848,11 @@ split-string@^3.0.1, split-string@^3.0.2:
  dependencies:
    extend-shallow "^3.0.0"

+split-type@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/split-type/-/split-type-0.3.2.tgz#b33eb8a62b9d7797bed680b21cc178fd297e44e1"
+  integrity sha512-lriNiO/Z9Uwnn/PL3PEfbRqkESQ5BlPqt0RjiRPQGY/tsfmmpIyITqw312Y5IoxW0l7etA1iHSAVrWUM2GeRhg==
+
 split2@^3.0.0:
  version "3.2.2"
  resolved "https://registry.yarnpkg.com/split2/-/split2-3.2.2.tgz#bf2cf2a37d838312c249c89206fd7a17dd12365f"
@@ -12823,6 +12887,11 @@ sshpk@^1.7.0:
    safer-buffer "^2.0.2"
    tweetnacl "~0.14.0"

+ssr-window@^4.0.0, ssr-window@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 ssri@^6.0.1:
  version "6.0.2"
  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5"
@@ -13192,6 +13261,14 @@ svgo@^2.7.0:
    picocolors "^1.0.0"
    stable "^0.1.8"

+swiper@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-8.3.2.tgz#55a2637125b0514e58715aa51e040dc070203b47"
+  integrity sha512-8wsC7ORYvVSnLUoxs2+xmfLrDPNjBVQXMCFbOlqtHeON6wtu/blOyySDr8TCBCdse1bdcIbn7m8xJNxVFL8o4Q==
+  dependencies:
+    dom7 "^4.0.4"
+    ssr-window "^4.0.2"
+
 symbol-tree@^3.2.4:
  version "3.2.4"
  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -13416,6 +13493,11 @@ timsort@^0.3.0:
  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=

+tiny-emitter@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-1.2.0.tgz#6dc845052cb08ebefc1874723b58f24a648c3b6f"
+  integrity sha512-rWjF00inHeWtT5UbQYAXoMI4hL6TRMqohuKCsODyPYYmfAxqfMnXLsIeNrbdPEkNxlk++rojVilTnI9IVmEBtA==
+
 tiny-invariant@^1.0.2:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
@@ -13843,6 +13925,18 @@ url@^0.11.0:
    punycode "1.3.2"
    querystring "0.2.0"

+use-debounce@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-6.0.1.tgz#ed1eb2b30189408fb9792ea2887f4c6c3cb401a3"
+  integrity sha512-kpvIxpa0vOLz/2I2sfNJ72mUeaT2CMNCu5BT1f2HkV9qZK27UVSOFf1sSSu+wjJE4TcR2VTXS2SM569+m3TN7Q==
+
+use-resize-observer@6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-6.1.0.tgz#d4d267a940dbf9c326da6042f8a4bb8c89d29729"
+  integrity sha512-SiPcWHiIQ1CnHmb6PxbYtygqiZXR0U9dNkkbpX9VYnlstUwF8+QqpUTrzh13pjPwcjMVGR+QIC+nvF5ujfFNng==
+  dependencies:
+    resize-observer-polyfill "^1.5.1"
+
 use@^3.1.0:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@@ -13952,6 +14046,16 @@ verror@1.10.0:
    core-util-is "1.0.2"
    extsprintf "^1.2.0"

+virtual-scroll@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/virtual-scroll/-/virtual-scroll-1.5.2.tgz#cdc051135ea6a1ebaaecdd4a4f39b8ed807f0f53"
+  integrity sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==
+  dependencies:
+    bindall-standalone "^1.0.5"
+    lethargy "^1.0.2"
+    object-assign "^4.0.1"
+    tiny-emitter "^1.0.0"
+
 vm-browserify@^1.0.1:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"