refactor: about route

packages/better-write-app/src/components/page/about/AboutEntity.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="about-1"
-    class="flex min-h-screen justify-evenly p-5 flex-col items-center bg-cover w-full"
+    class="flex min-h-screen justify-evenly mt-50 md:mt-0 p-5 flex-col items-center bg-cover w-full"
   >
     <h2
       v-motion
@@ -33,7 +33,7 @@
           duration: 800,
         },
       }"
-      class="text-white font-thin my-2 text-base lg:text-lg text-center"
+      class="text-white font-bold my-2 text-base lg:text-lg text-center"
     >
       {{ t('about.entity.description') }}
     </p>

packages/better-write-app/src/components/page/about/AboutInfo.vue

@@ -3,11 +3,10 @@
     id="about-0"
     class="flex min-h-screen flex-col justify-between items-center py-10 bg-cover"
   >
-    <div class="relative top-50 w-150 h-60 bg-gradient-to-br from-gray-900 to-gray-600 filter blur-2xl rounded-full" />
     <div
-      class="flex gap-10 items-center flex-col justify-start h-full md:w-3/4 lg:w-3/5 w-full"
+      class="flex gap-20 items-center flex-col justify-start h-full md:w-3/4 lg:w-3/5 w-10/12"
     >
-      <div class="flex flex-col gap-5">
+      <div class="flex items-center flex-col gap-5 w-full">
         <h1
           v-motion
           :initial="{
@@ -21,7 +20,7 @@
               duration: 1000,
             },
           }"
-          class="text-white text-center font-bold text-xl md:text-3xl font-poppins mt-5"
+          class="text-white pt-25 text-center font-bold text-xl md:text-3xl font-poppins mt-5"
         >
           {{ t('about.initial.title') }}
         </h1>
@@ -39,7 +38,7 @@
             },
           }"
           :delay="350"
-          class="text-white font-thin text-base md:text-lg text-center"
+          class="text-white font-bold text-base md:text-lg text-center w-full md:w-150"
           :steps="[
             t('about.initial.description'),
             10000,
@@ -49,6 +48,25 @@
           :wrapper="'p'"
         />
       </div>
+      <ul
+v-motion
+          :initial="{
+            opacity: 0,
+            x: 150,
+          }"
+          :enter="{
+            opacity: 1,
+            x: 0,
+            transition: {
+              duration: 1500,
+            },
+          }"
+          :delay="1000" class="flex flex-col gap-10 w-full">
+        <li class="wb-landing-list">{{ t('about.initial.list.1') }}</li>
+        <li class="wb-landing-list">{{ t('about.initial.list.2') }}</li>
+        <li class="wb-landing-list">{{ t('about.initial.list.3') }}</li>
+        <li class="wb-landing-list">{{ t('about.initial.list.4') }}</li>
+      </ul>
     </div>
   </div>
 </template>

packages/better-write-app/src/components/page/about/AboutPortability.vue

@@ -33,7 +33,7 @@
           duration: 800,
         },
       }"
-      class="text-white font-thin mt-5 text-base lg:text-lg"
+      class="text-white font-bold mt-5 text-base lg:text-lg"
     >
       {{ t('about.portability.description') }}
     </p>
@@ -110,6 +110,7 @@
         class="flex flex-col gap-5"
       >
         <AboutPortabilityItem color="blue"> .DOCX </AboutPortabilityItem>
+        <AboutPortabilityItem color="green"> .EPUB </AboutPortabilityItem>
         <AboutPortabilityItem color="white"> .TXT </AboutPortabilityItem>
         <AboutPortabilityItem color="red"> .PDF </AboutPortabilityItem>
         <AboutPortabilityItem color="orange"> .BW </AboutPortabilityItem>

packages/better-write-app/src/components/page/about/portability/AboutPortabilityItem.vue

@@ -9,8 +9,11 @@
         ? 'from-gray-300 to-gray-400 shadow-lg shadow-gray-400'
         : '',
       color === 'orange'
-        ? 'from-orange-300 to-orange-400 shadow-xl shadow-orange-900'
-        : '',
+      ? 'from-orange-300 to-orange-400 shadow-xl shadow-orange-900'
+      : '',
+      color === 'green'
+      ? 'from-green-400 to-green-600 shadow-xl shadow-green-900'
+      : '',
     ]"
     class="flex font-bold items-center justify-center p-7 md:p-9 rounded-full w-5 h-5 bg-gradient-to-br"
   >
@@ -20,6 +23,6 @@
 
 <script setup lang="ts">
   defineProps<{
-    color: 'red' | 'blue' | 'white' | 'orange'
+    color: 'red' | 'blue' | 'white' | 'orange' | 'green'
   }>()
 </script>

packages/better-write-app/src/pages/About.vue

@@ -1,4 +1,9 @@
 <template>
+  <img
+    class="absolute left-10 sm:left-40 lg:left-100 top-50 w-40 md:w-60 z-0 opacity-10 pointer-events-none"
+    alt="Better Write Logo"
+    src="/logo.png"
+  />
   <div
     class="flex items-center h-screen overflow-y-auto overflow-x-hidden flex-col wb-scroll bg-gradient-to-br from-gray-900 to-gray-700 w-full"
   >

packages/better-write-app/windi.config.ts

@@ -33,7 +33,8 @@ export default defineConfig({
     'wb-drau-icon-active': 'text-theme-icon-hover cursor-pointer w-8 h-8 md:(w-6 h-6)',
     'wb-scroll': 'scrollbar-thin scrollbar-thumb-theme-editor-scrollbar-thumb scrollbar-track-theme-editor-scrollbar-track',
     'wb-screen': 'h-screen wb-scroll overflow-y-auto',
-    'wb-aside-icon': 'wb-icon w-7 h-7 md:(w-6 h-6)'
+    'wb-aside-icon': 'wb-icon w-7 h-7 md:(w-6 h-6)',
+    'wb-landing-list': 'text-white bg-black-opacity border border-black p-4 rounded shadow transition-all hover: shadow-xl'
   },
   theme: {
     fontFamily: {

packages/better-write-languages/src/en-US/about.ts

@@ -3,6 +3,12 @@ export default {
     title: 'Expand your horizons.',
     description:
       'betterwrite.io is designed to extract as much creativity from writers and writing enthusiasts as possible.',
+    list: {
+      1: 'Customization: Make the editor your own without interfering with your documents.',
+      2: 'Tools: Explore a range of possibilities that will directly contribute to your project.',
+      3: 'The Void: Save your projects in the cloud and handle them with ease.',
+      4: 'Portability: Take your favorite editor anywhere.',
+    },
   },
   entity: {
     title: 'Control everything absolutely.',

packages/better-write-languages/src/pt-BR/about.ts

@@ -3,6 +3,12 @@ export default {
     title: 'Expanda seus horizontes.',
     description:
       'betterwrite.io foi projetado para extrair o máximo possível da criatividade de escritores e dos entusiastas da escrita.',
+    list: {
+      1: 'Customização: Deixe o editor com a sua cara sem que isso interfira em seus documentos.',
+      2: 'Ferramentas: Explore uma gama de possibilidades que contribuirão diretamente ao seu projeto.',
+      3: 'O Vazio: Salve seus projetos na nuvem e os manuseie com facilidade.',
+      4: 'Portabilidade: Leve o seu editor favorito para qualquer lugar.',
+    },
   },
   entity: {
     title: 'Controle absolutamente tudo.',