89 lines
3.2 KiB
Vue
89 lines
3.2 KiB
Vue
<script setup>
|
|
useSeoMeta({
|
|
title: 'Pricing — IDconvert',
|
|
description: 'Simple credit-based pricing. Start with 1 free conversion. No subscription required.',
|
|
})
|
|
|
|
const ui = useUiStore()
|
|
const auth = useAuthStore()
|
|
|
|
const packs = [
|
|
{ id: 'starter', name: 'Starter', price: '$19', credits: 5, perCredit: '$3.80', popular: false },
|
|
{ id: 'studio', name: 'Studio', price: '$59', credits: 20, perCredit: '$2.95', popular: true },
|
|
{ id: 'agency', name: 'Agency', price: '$149', credits: 60, perCredit: '$2.48', popular: false },
|
|
]
|
|
|
|
const features = [
|
|
'1 free conversion included for new accounts',
|
|
'Pre-conversion scan report',
|
|
'Font detection and install guide',
|
|
'Layout preserved via linked text boxes',
|
|
'Images, tables and hyperlinks included',
|
|
'Files deleted after 1 hour',
|
|
'Email support',
|
|
]
|
|
|
|
function handleGetPack() {
|
|
if (!auth.isLoggedIn) { ui.openAuthModal('register'); return }
|
|
ui.openPurchaseModal()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-[calc(100vh-60px)] bg-gray-100 px-4 py-16">
|
|
<div class="max-w-4xl mx-auto">
|
|
|
|
<h1 class="text-4xl font-bold text-gray-900 text-center mb-3">Choose your plan</h1>
|
|
<p class="text-center text-gray-500 mb-10">Simple credit pricing. No subscription. Credits never expire.</p>
|
|
|
|
<!-- Free conversion banner -->
|
|
<div v-if="!auth.isLoggedIn || !auth.freeUsed"
|
|
class="bg-green-50 border border-green-400 rounded-lg px-5 py-4 flex items-center gap-3 mb-8 max-w-2xl mx-auto">
|
|
<span class="text-green-500 font-bold text-lg flex-shrink-0">✓</span>
|
|
<p class="text-sm text-gray-800">
|
|
Every account includes <strong>1 free conversion</strong> to try IDconvert before purchasing credits.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Pack cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
|
<div
|
|
v-for="pack in packs"
|
|
:key="pack.id"
|
|
:class="[
|
|
'relative bg-white rounded-xl p-7 flex flex-col gap-4',
|
|
pack.popular ? 'border-2 border-[#1a56db] shadow-md' : 'border border-gray-200',
|
|
]"
|
|
>
|
|
<span v-if="pack.popular"
|
|
class="absolute -top-3.5 right-5 bg-[#1a56db] text-white text-xs font-semibold px-3 py-0.5 rounded-full">
|
|
Popular
|
|
</span>
|
|
|
|
<h2 class="text-lg font-bold text-gray-900">{{ pack.name }}</h2>
|
|
<div>
|
|
<span class="text-4xl font-bold text-gray-900">{{ pack.price }}</span>
|
|
</div>
|
|
<div class="text-sm text-gray-500">{{ pack.credits }} credits</div>
|
|
<div class="text-xs text-gray-400">{{ pack.perCredit }} per conversion</div>
|
|
|
|
<ul class="space-y-2 flex-1 my-2">
|
|
<li v-for="f in features" :key="f" class="flex items-start gap-2 text-xs text-gray-600">
|
|
<span class="text-green-500 flex-shrink-0 mt-0.5">✓</span>
|
|
{{ f }}
|
|
</li>
|
|
</ul>
|
|
|
|
<BaseButton variant="primary" full-width @click="handleGetPack">
|
|
Get {{ pack.name }}
|
|
</BaseButton>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-xs text-gray-400 text-center">
|
|
Credits never expire. Use them at your own pace.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|