feat(home-colorful): realiza alterações visuais

realiza alterações visuais na home do portal

projects/portal/src/app/home/home-colorful/home-colorful.component.css

@@ -1,3 +1,46 @@
+h1 span {
+  position: relative;
+  color: rgba(255, 255, 255, 0.1);
+  animation: displayText 9s infinite;
+  animation-delay: calc(-3s * var(--i));
+  display: inline-block;
+}
+
+@keyframes displayText {
+  0% {
+    display: inline-block;
+  }
+  33.33%,
+  100% {
+    display: none;
+  }
+}
+
+h1 span::before {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  color: #c9357d;
+  overflow: hidden;
+  border-right: 4px solid #c9357d;
+  filter: drop-shadow(0 0 5px #c9357d) drop-shadow(0 0 25px #c9357d);
+  animation: animate 3s linear infinite;
+}
+
+@keyframes animate {
+  0%,
+  10%,
+  100% {
+    width: 0;
+  }
+  70%,
+  90% {
+    width: 100%;
+  }
+}
+
 .home-colorful-content {
   margin-bottom: 72px;
 }

projects/portal/src/app/home/home-colorful/home-colorful.component.html

@@ -37,7 +37,13 @@
   </div>
   <div class="po-row">
     <div class="po-offset-lg-1 po-offset-xl-2 po-lg-10 po-xl-8">
-      <h1 class="title">PO UI</h1>
+      <h1 class="title">
+        PO UI
+        <span style="--i: 0" data-text="Produtividade.">Produtividade.</span>
+        <span style="--i: 1" data-text="Responsividade.">Responsividade.</span>
+        <span style="--i: 2" data-text="Personalização.">Personalização.</span>
+      </h1>
+
       <p class="library">Biblioteca de componentes baseado em Angular</p>
       <po-button
         class="star"