feat(questions): browsers support

packages/better-write-app/src/components/icons/IconChrome.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg width="1em" height="1em" viewBox="0 0 1792 1792">
+    <path
+      fill="currentColor"
+      d="M893 0q240-2 451 120q232 134 352 372l-742-39q-160-9-294 74.5T475 757L199 333Q327 174 510 87.5T893 0zM146 405l337 663q72 143 211 217t293 45l-230 451q-212-33-385-157.5t-272.5-316T0 896q0-267 146-491zm1586 169q58 150 59.5 310.5t-48.5 306t-153 272t-246 209.5q-230 133-498 119l405-623q88-131 82.5-290.5T1227 600zm-836 20q125 0 213.5 88.5T1198 896t-88.5 213.5T896 1198t-213.5-88.5T594 896t88.5-213.5T896 594z"
+    ></path>
+  </svg>
+</template>

packages/better-write-app/src/components/icons/IconEdge.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg width="1em" height="1em" viewBox="0 0 512 512">
+    <path
+      fill="currentColor"
+      d="M481.92 134.48C440.87 54.18 352.26 8 255.91 8C137.05 8 37.51 91.68 13.47 203.66c26-46.49 86.22-79.14 149.46-79.14c79.27 0 121.09 48.93 122.25 50.18c22 23.8 33 50.39 33 83.1c0 10.4-5.31 25.82-15.11 38.57c-1.57 2-6.39 4.84-6.39 11c0 5.06 3.29 9.92 9.14 14c27.86 19.37 80.37 16.81 80.51 16.81A115.39 115.39 0 0 0 444.94 322a118.92 118.92 0 0 0 58.95-102.44c.5-43.43-15.5-72.3-21.97-85.08ZM212.77 475.67a154.88 154.88 0 0 1-46.64-45c-32.94-47.42-34.24-95.6-20.1-136A155.5 155.5 0 0 1 203 215.75c59-45.2 94.84-5.65 99.06-1a80 80 0 0 0-4.89-10.14c-9.24-15.93-24-36.41-56.56-53.51c-33.72-17.69-70.59-18.59-77.64-18.59c-38.71 0-77.9 13-107.53 35.69C35.68 183.3 12.77 208.72 8.6 243c-1.08 12.31-2.75 62.8 23 118.27a248 248 0 0 0 248.3 141.61c-38.12-6.62-65.85-26.64-67.13-27.21Zm250.72-98.33a7.76 7.76 0 0 0-7.92-.23a181.66 181.66 0 0 1-20.41 9.12a197.54 197.54 0 0 1-69.55 12.52c-91.67 0-171.52-63.06-171.52-144a61.12 61.12 0 0 1 6.52-26.75a168.72 168.72 0 0 0-38.76 50c-14.92 29.37-33 88.13 13.33 151.66c6.51 8.91 23 30 56 47.67c23.57 12.65 49 19.61 71.7 19.61c35.14 0 115.43-33.44 163-108.87a7.75 7.75 0 0 0-2.39-10.73Z"
+    ></path>
+  </svg>
+</template>

packages/better-write-app/src/components/icons/IconFirefox.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg width="1em" height="1em" viewBox="0 0 512 512">
+    <path
+      fill="currentColor"
+      d="M130.22 127.548c.16.01.08.01 0 0Zm351.42 45.35c-10.61-25.5-32.08-53-48.94-61.73c13.72 26.89 21.67 53.88 24.7 74c.005.138.022.275.05.41c-27.58-68.75-74.352-96.47-112.55-156.83c-14.992-23.69-10.924-25.23-13.08-24.66l-.12.07c-46.71 25.953-75.335 78.37-82.58 122.74a127.253 127.253 0 0 0-47.93 12.137a6.524 6.524 0 0 0-3.684 7.288a6.157 6.157 0 0 0 3.006 3.995a6.163 6.163 0 0 0 4.979.45l.52-.21a118.728 118.728 0 0 1 49.53-11.32c62.828-.569 97.157 44.024 107.62 62.29c-13-9.15-36.35-18.19-58.82-14.28c87.74 43.86 64.2 194.536-57.39 189.2c-59.464-2.61-97.07-50.981-100.53-90.8c0 0 11.25-41.95 80.62-41.95c7.5 0 28.93-20.92 29.33-27c-.09-2-42.535-18.876-59.09-35.18c-8.847-8.713-13.052-12.907-16.77-16.06a70.09 70.09 0 0 0-6.31-4.77a113.05 113.05 0 0 1-.691-59.63c-25.06 11.41-44.55 29.45-58.71 45.37h-.12c-9.67-12.25-9-52.65-8.43-61.08c-.12-.53-7.228 3.668-8.15 4.31a168.316 168.316 0 0 0-23.84 20.43c-16.291 16.6-44.132 50.154-55.5 101.23c-4.536 20.383-6.76 44.421-6.76 52.3c0 134.7 109.21 243.89 243.92 243.89c120.64 0 223.019-87.227 240.43-202.62c11.572-76.696-14.71-131.068-14.71-131.99Z"
+    ></path>
+  </svg>
+</template>

packages/better-write-app/src/components/icons/IconInternetExplorer.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg width="1em" height="1em" viewBox="0 0 512 512">
+    <path
+      fill="currentColor"
+      d="M483.049 159.706c10.855-24.575 21.424-60.438 21.424-87.871c0-72.722-79.641-98.371-209.673-38.577c-107.632-7.181-211.221 73.67-237.098 186.457c30.852-34.862 78.271-82.298 121.977-101.158C125.404 166.85 79.128 228.002 43.992 291.725C23.246 329.651 0 390.94 0 436.747c0 98.575 92.854 86.5 180.251 42.006c31.423 15.43 66.559 15.573 101.695 15.573c97.124 0 184.249-54.294 216.814-146.022H377.927c-52.509 88.593-196.819 52.996-196.819-47.436H509.9c6.407-43.581-1.655-95.715-26.851-141.162zM64.559 346.877c17.711 51.15 53.703 95.871 100.266 123.304c-88.741 48.94-173.267 29.096-100.266-123.304zm115.977-108.873c2-55.151 50.276-94.871 103.98-94.871c53.418 0 101.981 39.72 103.981 94.871H180.536zm184.536-187.6c21.425-10.287 48.563-22.003 72.558-22.003c31.422 0 54.274 21.717 54.274 53.722c0 20.003-7.427 49.007-14.569 67.867c-26.28-42.292-65.986-81.584-112.263-99.586z"
+    ></path>
+  </svg>
+</template>

packages/better-write-app/src/components/icons/IconOpera.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg width="0.97em" height="1em" viewBox="0 0 496 512">
+    <path
+      fill="currentColor"
+      d="M313.9 32.7c-170.2 0-252.6 223.8-147.5 355.1c36.5 45.4 88.6 75.6 147.5 75.6c36.3 0 70.3-11.1 99.4-30.4c-43.8 39.2-101.9 63-165.3 63c-3.9 0-8 0-11.9-.3C104.6 489.6 0 381.1 0 248C0 111 111 0 248 0h.8c63.1.3 120.7 24.1 164.4 63.1c-29-19.4-63.1-30.4-99.3-30.4zm101.8 397.7c-40.9 24.7-90.7 23.6-132-5.8c56.2-20.5 97.7-91.6 97.7-176.6c0-84.7-41.2-155.8-97.4-176.6c41.8-29.2 91.2-30.3 132.9-5c105.9 98.7 105.5 265.7-1.2 364z"
+    ></path>
+  </svg>
+</template>

packages/better-write-app/src/components/icons/IconSafari.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg width="1em" height="1em" viewBox="0 0 512 512">
+    <path
+      fill="currentColor"
+      d="m274.69 274.69l-37.38-37.38L166 346ZM256 8C119 8 8 119 8 256s111 248 248 248s248-111 248-248S393 8 256 8Zm155.85 174.79l14.78-6.13a8 8 0 0 1 10.45 4.34a8 8 0 0 1-4.33 10.46L418 197.57a8 8 0 0 1-10.45-4.33a8 8 0 0 1 4.3-10.45ZM314.43 94l6.12-14.78a8 8 0 0 1 10.45-4.3a8 8 0 0 1 4.33 10.45l-6.13 14.78a8 8 0 0 1-10.45 4.33A8 8 0 0 1 314.43 94ZM256 60a8 8 0 0 1 8 8v16a8 8 0 0 1-8 8a8 8 0 0 1-8-8V68a8 8 0 0 1 8-8Zm-75 14.92a8 8 0 0 1 10.46 4.33L197.57 94a8 8 0 1 1-14.78 6.12l-6.13-14.78A8 8 0 0 1 181 74.92Zm-63.58 42.49a8 8 0 0 1 11.31 0L140 128.72a8 8 0 0 1 0 11.28a8 8 0 0 1-11.31 0l-11.31-11.31a8 8 0 0 1 .03-11.28ZM60 256a8 8 0 0 1 8-8h16a8 8 0 0 1 8 8a8 8 0 0 1-8 8H68a8 8 0 0 1-8-8Zm40.15 73.21l-14.78 6.13A8 8 0 0 1 74.92 331a8 8 0 0 1 4.33-10.46L94 314.43a8 8 0 0 1 10.45 4.33a8 8 0 0 1-4.3 10.45Zm4.33-136A8 8 0 0 1 94 197.57l-14.78-6.12a8 8 0 0 1-4.3-10.45a8 8 0 0 1 10.45-4.33l14.78 6.13a8 8 0 0 1 4.33 10.44ZM197.57 418l-6.12 14.78a8 8 0 0 1-14.79-6.12l6.13-14.78a8 8 0 1 1 14.78 6.12ZM264 444a8 8 0 0 1-8 8a8 8 0 0 1-8-8v-16a8 8 0 0 1 8-8a8 8 0 0 1 8 8Zm67-6.92a8 8 0 0 1-10.46-4.33L314.43 418a8 8 0 0 1 4.33-10.45a8 8 0 0 1 10.45 4.33l6.13 14.78a8 8 0 0 1-4.34 10.42Zm63.58-42.49a8 8 0 0 1-11.31 0L372 383.28a8 8 0 0 1 0-11.28a8 8 0 0 1 11.31 0l11.31 11.31a8 8 0 0 1-.03 11.28ZM286.25 286.25L110.34 401.66l115.41-175.91l175.91-115.41ZM437.08 331a8 8 0 0 1-10.45 4.33l-14.78-6.13a8 8 0 0 1-4.33-10.45a8 8 0 0 1 10.48-4.32l14.78 6.12a8 8 0 0 1 4.3 10.45Zm6.92-67h-16a8 8 0 0 1-8-8a8 8 0 0 1 8-8h16a8 8 0 0 1 8 8a8 8 0 0 1-8 8Z"
+    ></path>
+  </svg>
+</template>

packages/better-write-app/src/components/page/questions/QuestionsBlock.vue

@@ -1,9 +1,24 @@
 <template>
-  <div class="flex flex-col gap-3 w-full wb-text">
-    <h2 class="font-bold text-xl font-poppins"><slot name="title" /></h2>
+  <div class="flex flex-col gap-3 w-full wb-text my-20">
+    <div
+      class="flex w-full items-center justify-between cursor-pointer"
+      @click.prevent.stop="toggle()"
+    >
+      <h2 class="font-bold text-xl font-poppins"><slot name="title" /></h2>
+      <IconArrowRight
+        class="transform h-9 w-9 wb-icon"
+        :class="[value ? 'rotate-90' : '']"
+      />
+    </div>
     <p class="text-lg mt-5"><slot name="description" /></p>
-    <div class="w-full break-words">
+    <div v-if="value" class="w-full break-words">
       <slot />
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+  import { useToggle } from '@vueuse/core'
+
+  const [value, toggle] = useToggle()
+</script>

packages/better-write-app/src/components/page/questions/navigator/QuestionsNavigatorSupport.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="flex flex-wrap bg-theme-background-3 flex-col w-full">
+    <div
+      class="flex items-center flex-1 w-full p-2 hover:bg-theme-background-1"
+    >
+      <IconInternetExplorer class="flex-1 w-7 h-7 wb-text" />
+      <IconEdge class="flex-1 w-7 h-7 wb-text" />
+      <IconChrome class="flex-1 w-7 h-7 wb-text" />
+      <IconFirefox class="flex-1 w-7 h-7 wb-text" />
+      <IconSafari class="flex-1 w-7 h-7 wb-text" />
+      <IconOpera class="flex-1 w-7 h-7 wb-text" />
+    </div>
+    <div
+      class="flex items-center flex-1 w-full p-2 hover:bg-theme-background-1"
+    >
+      <IconError class="flex-1 w-7 h-7 wb-text" />
+      <IconYes class="flex-1 w-7 h-7 wb-text" />
+      <IconYes class="flex-1 w-7 h-7 wb-text" />
+      <IconLine class="flex-1 w-7 h-7 wb-text" />
+      <IconLine class="flex-1 w-7 h-7 wb-text" />
+      <IconLine class="flex-1 w-7 h-7 wb-text" />
+    </div>
+  </div>
+</template>

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

@@ -11,6 +11,15 @@
     <p class="wb-text text-lg mt-10 mb-20">
       {{ t('questions.default.description') }}
     </p>
+    <QuestionsBlock>
+      <template #title>
+        {{ t('questions.navigatorSupport.title') }}
+      </template>
+      <template #description>
+        {{ t('questions.navigatorSupport.description') }}
+      </template>
+      <QuestionsNavigatorSupport />
+    </QuestionsBlock>
     <QuestionsBlock>
       <template #title>
         {{ t('questions.generatorSupport.title') }}

packages/better-write-localisation/src/en-US/questions.ts

@@ -3,6 +3,11 @@ export default {
     description:
       'Here are several answers to common questions about betterwrite.io:',
   },
+  navigatorSupport: {
+    title: 'What browsers are supported?',
+    description:
+      'betterwrite.io depends on certain features that are not supported by all browsers. Check out the recommended browsers below:',
+  },
   generatorSupport: {
     title: `Why don't generators have the same support as (.PDF)?`,
     description:

packages/better-write-localisation/src/pt-BR/questions.ts

@@ -3,6 +3,11 @@ export default {
     description:
       'Confira a seguir diversas respostas a perguntas comuns sobre o betterwrite.io:',
   },
+  navigatorSupport: {
+    title: 'Quais navegadores são suportados?',
+    description:
+      'betterwrite.io depende de certos recursos que não são suportados por todos os navegadores. Confira a seguir os navegadores recomendados:',
+  },
   generatorSupport: {
     title: 'Por quê os geradores não possuem o mesmo suporte do (.PDF)?',
     description: