From 72f8f6dbc3879e17c2716d3ba176c24907bf83e7 Mon Sep 17 00:00:00 2001
From: jnrpalma <nicolas.jnr10@outlook.com>
Date: Sun, 28 Jan 2024 18:07:33 -0300
Subject: [PATCH] =?UTF-8?q?feat(home-colorful):=20realiza=20altera=C3=A7?=
 =?UTF-8?q?=C3=B5es=20visuais?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

realiza alterações visuais na home do portal
---
 .../home-colorful/home-colorful.component.css | 43 +++++++++++++++++++
 .../home-colorful.component.html              |  8 +++-
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/projects/portal/src/app/home/home-colorful/home-colorful.component.css b/projects/portal/src/app/home/home-colorful/home-colorful.component.css
index 41f6a0a30..a58d76e66 100644
--- a/projects/portal/src/app/home/home-colorful/home-colorful.component.css
+++ b/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;
 }
diff --git a/projects/portal/src/app/home/home-colorful/home-colorful.component.html b/projects/portal/src/app/home/home-colorful/home-colorful.component.html
index e4e3d030b..ad28f93cb 100644
--- a/projects/portal/src/app/home/home-colorful/home-colorful.component.html
+++ b/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"