feat(about): initia implementation

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

@@ -0,0 +1,124 @@
+<template>
+  <div
+    id="about-1"
+    class="flex flex-col items-center w-full md:w-3/4 border border-gray-900 shadow-xl shadow-gray-900 p-15"
+  >
+    <h2
+      v-motion
+      :initial="{
+        opacity: 0,
+        y: -50,
+      }"
+      :visible="{
+        opacity: 1,
+        y: 0,
+        transition: {
+          duration: 800,
+        },
+      }"
+      class="text-white text-center font-bold text-xl md:text-3xl font-poppins mt-5"
+    >
+      {{ t('about.entity.title') }}
+    </h2>
+    <p
+      v-motion
+      :initial="{
+        opacity: 0,
+        y: -50,
+      }"
+      :visible="{
+        opacity: 1,
+        y: 0,
+        transition: {
+          duration: 800,
+        },
+      }"
+      class="text-white font-thin my-10 text-lg"
+    >
+      {{ t('about.entity.description') }}
+    </p>
+    <AboutEntityBlock
+      v-motion
+      :initial="{
+        opacity: 0,
+        y: 60,
+      }"
+      :visible="{
+        opacity: 1,
+        y: 0,
+        transition: {
+          duration: 500,
+        },
+      }"
+      :delay="500"
+      :content="
+        t('editor.project.control.title', {
+          suffix: PROJECT.totalPagesCreated + 1,
+        })
+      "
+      type="heading-one"
+    />
+    <AboutEntityBlock
+      v-motion
+      :initial="{
+        opacity: 0,
+        y: 60,
+      }"
+      :visible="{
+        opacity: 1,
+        y: 0,
+        transition: {
+          duration: 500,
+        },
+      }"
+      :delay="500 * 2"
+      :content="populate.debug().names().paragraph()"
+      type="paragraph"
+    />
+    <AboutEntityBlock
+      v-motion
+      :initial="{
+        opacity: 0,
+        y: 60,
+      }"
+      :visible="{
+        opacity: 1,
+        y: 0,
+        transition: {
+          duration: 500,
+        },
+      }"
+      :delay="500 * 3"
+      :content="populate.debug().names().paragraph()"
+      type="paragraph"
+    />
+    <AboutEntityBlock
+      v-motion
+      :initial="{
+        opacity: 0,
+        y: 60,
+      }"
+      :visible="{
+        opacity: 1,
+        y: 0,
+        transition: {
+          duration: 500,
+        },
+      }"
+      :delay="500 * 4"
+      content="/logo_default.svg"
+      type="image"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useProjectStore } from '@/store/project'
+  import { usePopulate } from '@/use/populate'
+  import { useI18n } from 'vue-i18n'
+
+  const PROJECT = useProjectStore()
+
+  const { t } = useI18n()
+  const populate = usePopulate()
+</script>

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

@@ -0,0 +1,50 @@
+<template>
+  <div
+    id="about-3"
+    alt="https://www.artstation.com/rigdhi_gamernoob"
+    style="background-image: url('/src/assets/png/about2.png')"
+    class="flex bg-cover text-white min-h-screen justify-center items-center gap-20 flex-col w-full pt-10 py-30"
+  >
+    <div
+      v-motion
+      :initial="{
+        opacity: 0,
+        x: 150,
+      }"
+      :visible="{
+        opacity: 1,
+        x: 0,
+        transition: {
+          duration: 750,
+        },
+      }"
+    >
+      <AboutFinishLogo />
+    </div>
+    <h2
+      v-motion
+      :initial="{
+        opacity: 0,
+        x: -150,
+      }"
+      :visible="{
+        opacity: 1,
+        x: 0,
+        transition: {
+          duration: 750,
+        },
+      }"
+      :delay="750"
+      class="font-bold text-lg md:text-3xl font-poppins text-center"
+    >
+      {{ t('about.finish.title') }}
+    </h2>
+    <AboutFinishTo />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n'
+
+  const { t } = useI18n()
+</script>

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

@@ -0,0 +1,71 @@
+<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
+        v-motion
+        :initial="{
+          opacity: 0,
+          x: 150,
+        }"
+        :enter="{
+          opacity: 1,
+          x: 0,
+          transition: {
+            duration: 1000,
+          },
+        }"
+        class="text-white text-center font-bold text-xl md:text-3xl font-poppins mt-5"
+      >
+        {{ t('about.initial.title') }}
+      </h1>
+      <v-typical
+        v-motion
+        :initial="{
+          opacity: 0,
+          x: -150,
+        }"
+        :enter="{
+          opacity: 1,
+          x: 0,
+          transition: {
+            duration: 1000,
+          },
+        }"
+        :delay="350"
+        class="text-white font-thin text-base md:text-lg text-center"
+        :steps="[
+          t('about.initial.description'),
+          10000,
+          t('about.initial.description'),
+        ]"
+        :loop="Infinity"
+        :wrapper="'p'"
+      />
+      <img
+        v-motion
+        :initial="{
+          opacity: 0,
+          x: 150,
+        }"
+        :enter="{
+          opacity: 1,
+          x: 0,
+          transition: {
+            duration: 1000,
+          },
+        }"
+        :delay="700"
+        class="bg-cover"
+        alt="betterwrite.io landing image"
+        src="@/assets/png/about1.png"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n'
+  import VTypical from 'vue-typical'
+
+  const { t } = useI18n()
+</script>

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

@@ -0,0 +1,121 @@
+<template>
+  <div
+    id="about-2"
+    class="flex items-center flex-col w-full md:w-2/4 py-20 px-5 pointer-events-none"
+  >
+    <h2
+      v-motion
+      :initial="{
+        opacity: 0,
+        y: -50,
+      }"
+      :visible="{
+        opacity: 1,
+        y: 0,
+        transition: {
+          duration: 800,
+        },
+      }"
+      class="text-white text-center font-bold text-xl md:text-3xl font-poppins mt-5"
+    >
+      {{ t('about.portability.title') }}
+    </h2>
+    <p
+      v-motion
+      :initial="{
+        opacity: 0,
+        y: -50,
+      }"
+      :visible="{
+        opacity: 1,
+        y: 0,
+        transition: {
+          duration: 800,
+        },
+      }"
+      class="text-white font-thin mt-5 text-lg"
+    >
+      {{ t('about.portability.description') }}
+    </p>
+    <div
+      v-motion
+      :initial="{
+        opacity: 0,
+      }"
+      :visible="{
+        opacity: 1,
+        transition: {
+          duration: 800,
+        },
+      }"
+      :delay="500"
+      class="flex items-center justify-around w-full py-20"
+    >
+      <div
+        v-motion
+        :initial="{
+          y: -10,
+        }"
+        :visible="{
+          y: 0,
+          transition: {
+            duration: 1200,
+            repeat: Infinity,
+            repeatType: 'mirror',
+          },
+        }"
+        class="flex flex-col gap-5"
+      >
+        <AboutPortabilityItem color="blue"> .DOCX </AboutPortabilityItem>
+        <AboutPortabilityItem color="white"> .TXT </AboutPortabilityItem>
+        <AboutPortabilityItem color="orange"> .BW </AboutPortabilityItem>
+      </div>
+      <div
+        v-motion
+        :initial="{
+          y: 10,
+        }"
+        :visible="{
+          y: 0,
+          transition: {
+            duration: 1200,
+            repeat: Infinity,
+            repeatType: 'mirror',
+          },
+        }"
+        :delay="500"
+        class="flex justify-center gap-20 items-center w-full"
+      >
+        <IconArrowTo class="text-white h-12 w-12 transform -rotate-90" />
+        <img alt="BW Logo" src="/logo.png" width="100" />
+        <IconArrowTo class="text-white h-12 w-12 transform -rotate-90" />
+      </div>
+      <div
+        v-motion
+        :initial="{
+          y: 10,
+        }"
+        :visible="{
+          y: 0,
+          transition: {
+            duration: 1200,
+            repeat: Infinity,
+            repeatType: 'mirror',
+          },
+        }"
+        class="flex flex-col gap-5"
+      >
+        <AboutPortabilityItem color="blue"> .DOCX </AboutPortabilityItem>
+        <AboutPortabilityItem color="white"> .TXT </AboutPortabilityItem>
+        <AboutPortabilityItem color="red"> .PDF </AboutPortabilityItem>
+        <AboutPortabilityItem color="orange"> .BW </AboutPortabilityItem>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n'
+
+  const { t } = useI18n()
+</script>

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

@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="flex items-center justify-center w-full bg-gray-900 text-gray-200 py-2 px-5 my-2"
+  >
+    <p v-if="type === 'paragraph'" :contenteditable="true" :spellcheck="true">
+      {{ content }}
+    </p>
+    <h1
+      v-if="type === 'heading-one'"
+      class="font-bold text-2xl"
+      :contenteditable="true"
+      :spellcheck="true"
+    >
+      {{ content }}
+    </h1>
+    <img v-if="type === 'image'" :src="content" width="30" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { EntityType } from 'better-write-types'
+
+  defineProps<{
+    type: EntityType
+    content: string
+  }>()
+</script>