feat: change text on free period info page, fixed touch screen, add animation for Aura on create profile page

src/components/CreateProfilePage/index.tsx

@@ -26,6 +26,7 @@ function CreateProfilePage(): JSX.Element {
   return (
     <section className={`${styles.page} page`}>
       <div className={styles.progressbar}>
+        <div className={styles.aura}></div>
         <CircularProgressbar
           value={progress}
           text={`${progress}%`}
@@ -38,6 +39,7 @@ function CreateProfilePage(): JSX.Element {
             textColor: '#fff',
             pathTransitionDuration: 1,
           })}
+          className={styles['circular-progressbar']}
         />
       </div>
       <ProcessFlow items={processItems} onDone={handleDone} />

src/components/CreateProfilePage/styles.module.css

@@ -3,16 +3,33 @@
   flex: auto !important;
   background-color: #000;
   color: #fff;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
 }
 
 .progressbar {
+  position: relative;
   width: 100%;
   max-width: 250px;
   margin: 24px auto;
-  background-image: url('/goosebumps-aura.png');
+}
+
+.aura {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  background-image: url("/goosebumps-aura.png");
   background-size: 130%;
   background-repeat: no-repeat;
   background-position: center center;
+  animation: appearance 3s, pulse 1s alternate infinite;
 }
 
 .process-items {
@@ -26,7 +43,7 @@
   margin-bottom: 24px;
   line-height: 32px;
   position: relative;
-  transition: top .4s ease-in-out;
+  transition: top 0.4s ease-in-out;
 }
 
 .process-item__pick {
@@ -41,3 +58,53 @@
 .process-item__label {
   color: red;
 }
+
+.circular-progressbar {
+  animation: appearance-progressbar 3s;
+}
+
+
+@keyframes appearance {
+  0% {
+    scale: .4;
+  }
+
+  33% {
+    scale: .6;
+  }
+
+  66% {
+    scale: .8;
+  }
+
+  100% {
+    scale: 1;
+  }
+}
+
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.9);
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.1);
+  }
+}
+
+@keyframes appearance-progressbar {
+  0% {
+    opacity: 0;
+  }
+
+  80% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

src/components/FreePeriodInfoPage/index.tsx

@@ -10,11 +10,10 @@ function FreePeriodInfoPage(): JSX.Element {
   const handleNext = () => navigate(routes.client.createProfile())
 
   return (
-    <section className={`${styles.page} page`} onClick={handleNext}>
+    <section className={`${styles.page} page`} onMouseDown={handleNext} onTouchStart={handleNext}>
       <div className={styles.content}>
-        <Title variant='h4' style={{color: 'white', fontWeight: 500}}>{t('free_period_info')}</Title>
+        <Title variant='h4' className={styles.title}>{t('touch_screen')}</Title>
       </div>
-      {/* <img src="/goosebumps-aura.png" alt="Aura" /> */}
     </section>
   )
 }

src/components/FreePeriodInfoPage/styles.module.css

@@ -1,14 +1,25 @@
 .page {
-    background-color: #000;
+  background-color: #000;
-    height: calc(100vh - 50px);
+  height: calc(100vh - 50px);
-    flex: auto;
+  flex: auto;
-    padding-top: 22%;
+  padding-top: 22%;
-    background-image: url('/goosebumps-aura-click-icon-animation.png');
+  background-image: url("/goosebumps-aura-click-icon-animation.png");
-    background-size: 100%;
+  background-size: 100%;
-    background-position: center 0;
+  background-position: center 0;
-    background-repeat: no-repeat;
+  background-repeat: no-repeat;
 }
 
 .content {
-    text-align: center;
+  text-align: center;
-}
+}
+
+.title {
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  color: white;
+  font-weight: 500;
+}

src/components/Header/styles.css

@@ -8,6 +8,12 @@
   height: 50px;
   min-height: 50px;
   z-index: 1;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
 }
 
 .header__title {

src/index.css

@@ -118,3 +118,7 @@ a,button,div,input,select,textarea {
 .ta-l {
   text-align: left;
 }
+
+.CircularProgressbar {
+  position: relative;
+}

src/locales/dev.ts

@@ -53,7 +53,7 @@ export default {
     zodiac_sign_info: "According to the study, 85% of people with your Zodiac sign, <zodiacSign>, experience financial difficulties due to a loss of sexual energy.",
     learn_about_my_energy: "Learn about my energy",
     skip_for_now: "Skip for now",
-    free_period_info: "You won't be charged until after your free trial. Cancel anytime.",
+    touch_screen: "Touch the screen",
     money_energy: "MONEY energy",
     sexual_energy: "SEXUAL energy",
     black_energy: "BLACK energy",