diff --git a/src/ui/assets/image/steps/step-1.png b/src/ui/assets/image/steps/step-1.png
new file mode 100644
index 0000000..cbf2c7e
Binary files /dev/null and b/src/ui/assets/image/steps/step-1.png differ
diff --git a/src/ui/assets/image/steps/step-2.png b/src/ui/assets/image/steps/step-2.png
new file mode 100644
index 0000000..90df525
Binary files /dev/null and b/src/ui/assets/image/steps/step-2.png differ
diff --git a/src/ui/assets/image/steps/step-3.png b/src/ui/assets/image/steps/step-3.png
new file mode 100644
index 0000000..67a4a6a
Binary files /dev/null and b/src/ui/assets/image/steps/step-3.png differ
diff --git a/src/ui/pages/welcome/index.html b/src/ui/pages/welcome/index.html
new file mode 100644
index 0000000..3bfea19
--- /dev/null
+++ b/src/ui/pages/welcome/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+ Speak Comigo
+
+
+
+
+
+
+
+
+ 
+
+ Welcome to
+
Speak Comigo
+
+
+
+
+
+
+
+
diff --git a/src/ui/pages/welcome/script.js b/src/ui/pages/welcome/script.js
new file mode 100644
index 0000000..59a91b7
--- /dev/null
+++ 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) === ' ' ? ' ' : 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
new file mode 100644
index 0000000..0997271
--- /dev/null
+++ 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
index 4d752cd..24c1976 100644
--- 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
index d9e07cc..f90d2e4 100644
--- 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',