fix: price page

Cap-go · Aug 21, 2023 · aecfca5 · aecfca5
1 parent 1299c8b
commit aecfca5
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/src/vue-pages/pricing.vue b/src/vue-pages/pricing.vue
@@ -13,11 +13,11 @@ const config = useRuntimeConfig()
 const yearly = ref(false)
 const plansAll = ref<Database['public']['Tables']['plans']['Row'][]>([])
 await fetch(`${config.public.baseApiUrl}/plans`)
-  .then((r) => r.json() as Promise<Array<Database['public']['Tables']['plans']['Row']>>)
-  .then((res) => plansAll.value.push(...res))
+  .then(r => r.json() as Promise<Array<Database['public']['Tables']['plans']['Row']>>)
+  .then(res => plansAll.value.push(...res))
 
-const plans = computed(() => (plansAll.value.length ? plansAll.value.filter((p) => p.name !== 'Pay as you go') : []))
-const payg = computed(() => (plansAll.value.length ? plansAll.value.filter((p) => p.name === 'Pay as you go')[0] : undefined))
+const plans = computed(() => (plansAll.value.length ? plansAll.value.filter(p => p.name !== 'Pay as you go') : []))
+const payg = computed(() => (plansAll.value.length ? plansAll.value.filter(p => p.name === 'Pay as you go')[0] : undefined))
 
 function scrollToId(id: string) {
   window.scrollTo({
@@ -49,8 +49,12 @@ const payg_units = computed(() =>
   <section class="py-12 bg-gray-50 sm:py-16 lg:py-20">
     <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
       <div class="mx-auto text-center">
-        <h1 class="text-3xl font-bold text-gray-900 sm:text-4xl xl:text-6xl font-pj">Plans that scale with your business</h1>
-        <p class="mt-6 text-xl font-normal text-gray-600 font-pj">Enterprise-grade cloud that enhance Capacitor application functionality and security.</p>
+        <h1 class="text-3xl font-bold text-gray-900 sm:text-4xl xl:text-6xl font-pj">
+          Plans that scale with your business
+        </h1>
+        <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">
@@ -67,7 +71,7 @@ const payg_units = computed(() =>
             name="pricing-plans"
             class="w-4 h-4 text-blue-600 border border-gray-200 focus:ring-1 focus:outline-none focus:ring-blue-600"
             :checked="!yearly"
-          />
+          >
           <label for="monthly" class="block ml-3 text-sm font-medium text-gray-900 sm:text-base"> Monthly Plan </label>
         </div>
 
@@ -78,12 +82,12 @@ const payg_units = computed(() =>
             name="pricing-plans"
             class="w-4 h-4 text-blue-600 border border-gray-200 focus:ring-1 focus:outline-none focus:ring-blue-600"
             :checked="yearly"
-          />
+          >
           <label for="yearly" class="block ml-3 text-sm font-medium text-gray-900 sm:text-base"> Yearly Plan </label>
           <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" />
+      <Plans v-if="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" />
 
@@ -97,7 +101,7 @@ const payg_units = computed(() =>
       />
 
       <p class="max-w-md mx-auto text-base text-center text-gray-500 md:mt-16 font-pj mb-8">
-        We don’t bill you automatically until your confirmation.<br />
+        We don’t bill you automatically until your confirmation.<br>
         We don’t store or sell your data to anyone.
       </p>
     </div>