feat: add welcome page

luccas-specht · Jun 18, 2024 · 47eaa1a · 47eaa1a
1 parent d91aef7
commit 47eaa1a
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 0 deletions.
diff --git a/src/ui/assets/image/steps/step-1.png b/src/ui/assets/image/steps/step-1.png
diff --git a/src/ui/assets/image/steps/step-2.png b/src/ui/assets/image/steps/step-2.png
diff --git a/src/ui/assets/image/steps/step-3.png b/src/ui/assets/image/steps/step-3.png
diff --git a/src/ui/pages/welcome/index.html b/src/ui/pages/welcome/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="../../assets/svg/logo-speak-comigo.svg"
+    />
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Speak Comigo</title>
+    <meta name="description" content="Welcome page" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="./style.css" />
+    <link rel="stylesheet" href="../../styles/global.css" />
+  </head>
+  <body>
+    <main class="main-layout">
+      <section class="welcome">
+        <img
+          src="../../assets/svg/logo-speak-comigo.svg"
+          alt="Speak comigo logo"
+        />
+        <h1>
+          Welcome to
+          <p>Speak Comigo</p>
+        </h1>
+        <span id="animated-text"> </span>
+        <button id="get-started-button">Get Started</button>
+      </section>
+    </main>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/src/ui/pages/welcome/script.js b/src/ui/pages/welcome/script.js
@@ -0,0 +1,68 @@
+const texts = [
+  'Developing your ears to understand any English Accent around the world using personas created by AI.',
+  'Desenvolva seus ouvidos para\n entender qualquer sotaque em\n inglês ao redor do mundo, usando\n personas criadas por IA.',
+  'Desarrolla tus oídos para\n comprender cualquier acento\n inglés en todo el mundo utilizando\n personajes creados por IA.',
+];
+function animatedTextTransition() {
+  let currentIndex = 0;
+  const textElement = document.getElementById('animated-text');
+
+  function typeText(text, callback) {
+    let i = 0;
+    textElement.innerText = '';
+
+    function type() {
+      if (i < text.length) {
+        textElement.innerHTML +=
+          text.charAt(i) === ' ' ? '&nbsp;' : text.charAt(i);
+        i++;
+        setTimeout(type, 50);
+      } else if (callback) {
+        setTimeout(callback, 3500);
+      }
+    }
+
+    type();
+  }
+
+  function eraseText(callback) {
+    let text = textElement.innerText;
+    let i = text.length;
+
+    function erase() {
+      if (i > 0) {
+        textElement.innerText = text.substring(0, i - 1);
+        i--;
+        setTimeout(erase, 25);
+      } else if (callback) {
+        callback();
+      }
+    }
+
+    erase();
+  }
+
+  function changeText() {
+    eraseText(() => {
+      currentIndex = (currentIndex + 1) % texts.length;
+      typeText(texts[currentIndex], changeText);
+    });
+  }
+
+  typeText(texts[currentIndex], changeText);
+}
+
+function handleCleanWelcomePage() {
+  const button = document.getElementById('get-started-button');
+
+  button.addEventListener('click', function () {
+    document.querySelector('main').innerHTML = '';
+  });
+}
+
+function addFirstStepSection() {}
+
+(function main() {
+  animatedTextTransition();
+  handleCleanWelcomePage();
+})();
diff --git a/src/ui/pages/welcome/style.css b/src/ui/pages/welcome/style.css
@@ -0,0 +1,44 @@
+.welcome {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.welcome > h1 {
+  font-weight: bold;
+  font-size: 40px;
+  text-align: center;
+  color: #141718;
+}
+
+.welcome > span {
+  width: 100%;
+  text-align: center;
+  max-width: 296px;
+  font-weight: 400;
+  color: #616161;
+  font-family: 'Poppins', sans-serif;
+  font-size: 16px;
+  min-height: 100px;
+  line-height: 1.5;
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  display: inline-block;
+}
+
+.welcome > button {
+  width: 100%;
+  max-width: 320px;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 500;
+  border: none;
+  background-color: #141718;
+  border-radius: 20px;
+  height: 63px;
+  color: white;
+  font-size: 16px;
+}
diff --git a/src/ui/styles/global.css b/src/ui/styles/global.css
@@ -4,6 +4,7 @@
 
 /* Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 * {
   padding: 0;

diff --git a/webpack.config.js b/webpack.config.js
@@ -5,6 +5,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 module.exports = {
   target: 'web',
   entry: {
+    welcome: './src/ui/pages/welcome/index.html',
     personas: './src/ui/pages/personas/index.html',
     personaDetails: './src/ui/pages/personaDetails/index.html',
     personaScript: './src/ui/pages/personaDetails/script.js',
@@ -56,6 +57,7 @@ module.exports = {
     },
     historyApiFallback: {
       rewrites: [
+        { from: /^\/$/, to: '/welcome.html' },
         { from: /^\/personas$/, to: '/personas.html' },
         { from: /^\/persona-details$/, to: '/personaDetails.html' },
       ],
@@ -68,6 +70,11 @@ module.exports = {
     globalObject: 'this',
   },
   plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/ui/pages/welcome/index.html',
+      filename: 'welcome.html',
+      chunks: ['welcome'],
+    }),
     new HtmlWebpackPlugin({
       template: './src/ui/pages/personaDetails/index.html',
       filename: 'personaDetails.html',