-
Notifications
You must be signed in to change notification settings - Fork 21
/
pricing.vue
69 lines (62 loc) · 1.58 KB
/
pricing.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<script setup lang="ts">
const { data: page } = await useAsyncData('pricing', () => queryContent('/pricing').findOne())
if (!page.value) {
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
useSeoMeta({
title: page.value.title,
ogTitle: page.value.title,
description: page.value.description,
ogDescription: page.value.description
})
defineOgImage({
component: 'Saas',
title: page.value.title,
description: page.value.description
})
const isYearly = ref(false)
</script>
<template>
<div v-if="page">
<UPageHero v-bind="page.hero">
<template #links>
<UPricingToggle
v-model="isYearly"
class="w-48"
/>
</template>
</UPageHero>
<UContainer>
<UPricingGrid>
<UPricingCard
v-for="(plan, index) in page.plans"
:key="index"
v-bind="plan"
:price="isYearly ? plan.price.year : plan.price.month"
:cycle="isYearly ? '/year' : '/month'"
/>
</UPricingGrid>
</UContainer>
<ULandingSection>
<ULandingLogos>
<UIcon
v-for="icon in page.logos.icons"
:key="icon"
:name="icon"
class="w-12 h-12 flex-shrink-0 text-gray-500 dark:text-gray-400"
/>
</ULandingLogos>
</ULandingSection>
<ULandingSection
:title="page.faq.title"
:description="page.faq.description"
>
<ULandingFAQ
:items="page.faq.items"
multiple
default-open
class="max-w-4xl mx-auto"
/>
</ULandingSection>
</div>
</template>