fix: plan page and FAQ

src/components/pricing/Plans.vue

@@ -61,15 +61,15 @@ function descToEmoji(desc: string) {
 
 <template>
   <section id="plans">
-    <div class="grid grid-cols-1 mt-6 lg:grid-cols-3 lg:gap-8 sm:mt-8 lg:mt-10">
+    <div class="grid grid-cols-1 mt-6 lg:grid-cols-3 lg:gap-8 sm:mt-8 lg:mt-10 space-y-14 sm:space-y-0">
       <div
         v-for="plan in props.pricing"
         :key="plan.name"
         :class="{
           'border-blue-600 divide-blue-200': plan.name === 'Maker',
           'border-gray-200 divide-gray-200': plan.name !== 'Maker',
         }"
-        class="mt-6 relative shadow-xl bg-white border divide-y divide-gray-200 rounded-2xl sm:rounded-3xl lg:mt-0"
+        class="relative shadow-xl bg-white border divide-y divide-gray-200 rounded-2xl sm:rounded-3xl"
       >
         <div v-if="plan.name === 'Maker'" class="absolute top-0 right-0 flex items-start -mt-8">
           <svg class="w-auto h-16 text-blue-600" viewBox="0 0 83 64" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

src/content/docs/docs/faq.mdx

@@ -309,3 +309,15 @@ The privacy rules are enforced by Apple and Google, and are not enforced by Capg
 
 Device ID will not be listed in your device list until they get they first patch installed.
 
+# Why my device number is different than my MAU?[](https://capgo.app/docs/faq/#why-my-device-number-is-different-than-my-mau "Direct link to Why my device number is different than my MAU?")
+
+Currently, the device list is not updated as often as the MAU.
+
+The device list is updated only when a device installs an update.
+
+While the MAU is updated at every app launch. This is a current limitation of the platform. Our Analytics platform do not support raw updates so we use conventional database for Devices list.
+
+To limit the number of database queries, we do update row only on app update.
+
+This limitation will be removed in the future.
+

src/vue-pages/pricing.vue

@@ -53,13 +53,14 @@ const payg_units = computed(() =>
         <p class="mt-6 text-xl font-normal text-gray-600 font-pj">Enterprise-grade cloud that enhance Capacitor application functionality and security.</p>
       </div>
 
-      <p class="mt-5 text-center">
+      <p class="mt-5 sm:mb-14 text-center">
         <button class="font-medium text-black border-b-1 border-blue-600 border-blue-600 hover:text-blue-600 focus:text-blue-600" @click="scrollToId('calculator')">
           Calculate your usage
         </button>
       </p>
+      <Plans v-if="plans && plans.length > 0" :yearly="yearly" :pricing="plans" :payg-base="payg_base" :payg-units="payg_units" />
 
-      <div class="flex items-center justify-center mt-6 space-x-6 sm:mt-10">
+      <div class="flex items-center justify-center space-x-6 mt-8 pb-12 sm:pb-16 lg:pb-20 xl:pb-24">
         <div class="flex items-center" @click="yearly = false">
           <input
             id="monthly"
@@ -83,7 +84,6 @@ const payg_units = computed(() =>
           <span class="ml-1 text-sm font-medium text-blue-600"> (Save 20%) </span>
         </div>
       </div>
-      <Plans v-if="plans && plans.length > 0" class="pb-12 sm:pb-16 lg:pb-20 xl:pb-24" :yearly="yearly" :pricing="plans" :payg-base="payg_base" :payg-units="payg_units" />
 
       <PayAsYouGo v-if="payg_base" :yearly="yearly" :payg="payg" />