feat(about): appear transitions

Novout · May 20, 2022 · 354f967 · 354f967
1 parent bff3784
commit 354f967
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 10 deletions.
diff --git a/packages/better-write-app/src/components/page/about/AboutFinish.vue b/packages/better-write-app/src/components/page/about/AboutFinish.vue
@@ -22,7 +22,10 @@
       <AboutFinishLogo />
     </div>
     <h2
-      v-motion
+      class="flex gap-2 font-bold text-lg md:text-3xl font-poppins text-center tracking-wide"
+    >
+      <span
+v-motion
       :initial="{
         opacity: 0,
         x: -150,
@@ -34,10 +37,35 @@
           duration: 750,
         },
       }"
-      :delay="750"
-      class="font-bold text-lg md:text-3xl font-poppins text-center"
-    >
-      {{ t('about.finish.title') }}
+      :delay="500 + (500 * 1)">{{ t('about.finish.title1') }}</span>
+      <span
+v-motion
+      :initial="{
+        opacity: 0,
+        x: -150,
+      }"
+      :visible="{
+        opacity: 1,
+        x: 0,
+        transition: {
+          duration: 750,
+        },
+      }"
+      :delay="500 + (500 * 2)">{{ t('about.finish.title2') }}</span>
+      <span
+v-motion
+      :initial="{
+        opacity: 0,
+        x: -150,
+      }"
+      :visible="{
+        opacity: 1,
+        x: 0,
+        transition: {
+          duration: 750,
+        },
+      }"
+      :delay="500 + (500 * 3)">{{ t('about.finish.title3') }}</span>
     </h2>
     <AboutFinishTo />
   </div>

diff --git a/packages/better-write-app/src/components/page/about/AboutInfo.vue b/packages/better-write-app/src/components/page/about/AboutInfo.vue
@@ -1,7 +1,8 @@
 <template>
-  <div id="about-0" class="flex flex-col items-center py-10">
-    <div class="flex gap-10 items-center flex-col md:w-2/4 lg:w-3/5 w-full">
-      <h1
+  <div id="about-0" class="flex min-h-screen flex-col justify-between items-center py-10">
+    <div class="flex gap-10 items-center justify-around flex-col justify-start h-full md:w-3/4 lg:w-3/5 w-full">
+      <div class="flex flex-col gap-5">
+        <h1
         v-motion
         :initial="{
           opacity: 0,
@@ -41,6 +42,7 @@
         :loop="Infinity"
         :wrapper="'p'"
       />
+      </div>
       <img
         v-motion
         :initial="{

diff --git a/packages/better-write-app/src/components/page/about/finish/AboutFinishTo.vue b/packages/better-write-app/src/components/page/about/finish/AboutFinishTo.vue
@@ -12,7 +12,7 @@
         duration: 750,
       },
     }"
-    :delay="750 * 2"
+    :delay="750 + (500 * 4)"
     class="flex text-gray-200 items-center text-lg rounded-full gap-2 transition-colors bg-gradient-to-br from-gray-900 to-gray-800 hover:from-gray-800 hover:to-gray-900 px-7 py-3.5 md:(px-8 py-4) shadow-gray-900 shadow transition-colors font-bold"
     @click.prevent.stop="onClick"
   >

diff --git a/packages/better-write-localisation/src/pt-BR/about.ts b/packages/better-write-localisation/src/pt-BR/about.ts
@@ -15,6 +15,8 @@ export default {
       'Converta seus projetos de outras ferramentas e transforme-os como preferir.',
   },
   finish: {
-    title: 'Explore. Descubra. Transforme.',
+    title1: 'Explore.',
+    title2: 'Descubra.',
+    title3: 'Transforme.',
   },
 }