feat: add step 1

luccas-specht · Jun 19, 2024 · c2ca914 · c2ca914
1 parent 47eaa1a
commit c2ca914
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 5 deletions.
diff --git a/src/ui/pages/welcome/index.html b/src/ui/pages/welcome/index.html
@@ -16,7 +16,32 @@
   </head>
   <body>
     <main class="main-layout">
-      <section class="welcome">
+      <section class="step">
+        <div class="align-skip">
+          <a href="/personas">Skip</a>
+        </div>
+        <img
+          src="../../assets/image/steps/step-1.png"
+          alt="selecao de persona"
+        />
+        <div></div>
+        <h1>Choose the AI Persona You want to speak with</h1>
+        <span>
+          They have their own ideas, locales characteristics and experiences.
+        </span>
+        <div class="wrapper-go-back-go-forward-buttons">
+          <button>go back</button>
+          <div></div>
+          <button>go forward</button>
+        </div>
+      </section>
+    </main>
+    <script src="script.js"></script>
+  </body>
+</html>
+
+<!--
+  <section class="welcome">
         <img
           src="../../assets/svg/logo-speak-comigo.svg"
           alt="Speak comigo logo"
@@ -28,7 +53,4 @@ <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/style.css b/src/ui/pages/welcome/style.css
@@ -5,6 +5,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-evenly;
+  max-width: var(--max-width-container);
 }
 
 .welcome > h1 {
@@ -42,3 +43,81 @@
   color: white;
   font-size: 16px;
 }
+
+.step {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  max-width: var(--max-width-container);
+}
+
+.step > img {
+  width: 100%;
+  height: 100%;
+  max-width: 400px;
+  max-height: 400px;
+}
+
+.step > h1 {
+  width: 100%;
+  max-width: 360px;
+  font-weight: bold;
+  font-size: 30px;
+  color: #23262f;
+  padding: 0;
+  margin: 0;
+  line-height: 30px;
+  text-align: center;
+  font-family: 'Poppins', sans-serif;
+}
+
+.step > span {
+  width: 100%;
+  max-width: 300px;
+  font-family: 'Poppins', sans-serif;
+  text-align: center;
+  color: #8e9295;
+  font-size: 16px;
+}
+
+.align-skip {
+  width: 100%;
+  height: min-content;
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+}
+
+.align-skip > a {
+  color: #2d9cdb;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.wrapper-go-back-go-forward-buttons {
+  background: white;
+  border-radius: 16px;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  filter: drop-shadow(0px 5px 5px var(--back-secondary));
+}
+
+.wrapper-go-back-go-forward-buttons > button {
+  height: 30px;
+  flex: 1;
+  background: none;
+  border: none;
+}
+
+.wrapper-go-back-go-forward-buttons > div::after {
+  content: '|';
+  height: 100%;
+  flex: 1;
+  padding: 0 10px;
+  color: #e6e8ec;
+}