a841a7c900
Consolidate pricing onto a single source. Pro is deferred from launch (left dormant: no Stripe price, no card), so the offered set is 3 tiers. - Extract the pricing grid and footer into shared components (PricingGrid.vue, landing/SiteFooter.vue); add a /pricing route rendering Pricing.vue; remove the pricing section from Home - Repoint every upgrade link to the /pricing route (LandingNav and SiteFooter via RouterLink, UpsellBanner CTA) — no more #pricing anchors - Bump Smart (plus) SMS daily limit 1 -> 3 (PlanSeeder + PlanFactory), update PlanFeaturesTest assertion - Rewrite /pricing card bullets to match real entitlements (drop unbuilt promises: multi-location tracking, 14-day trend, supermarket anchor) - Fix stale "1/day" SMS references in notifications.md, tiers.md, docs/tiers.md - Delete unused resources/views/components/pricing-card.blade.php Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
53 lines
2.2 KiB
Vue
53 lines
2.2 KiB
Vue
<template>
|
|
<div
|
|
v-if="!isPaidTier"
|
|
class="relative overflow-hidden rounded-2xl border border-accent/30 bg-gradient-to-r from-accent/10 via-accent/5 to-transparent p-5 sm:p-6"
|
|
>
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="flex items-start gap-4">
|
|
<div class="shrink-0 w-11 h-11 rounded-2xl bg-accent text-white flex items-center justify-center shadow-md">
|
|
<iconify-icon class="text-xl" icon="lucide:sparkles"></iconify-icon>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<h3 class="text-lg sm:text-xl font-black text-zinc-800 leading-tight">
|
|
Stop guessing. Get a buy-or-wait alert before every fill-up.
|
|
</h3>
|
|
<p class="text-sm text-zinc-500">
|
|
14-day predictions + daily price-drop alerts across
|
|
<span class="font-bold text-zinc-800">{{ stationCountLabel }}</span> UK stations.
|
|
From <span class="font-bold text-zinc-800">£0.99/mo</span>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<a
|
|
:href="ctaHref"
|
|
class="shrink-0 inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-accent text-white text-sm font-black shadow-lg hover:bg-accent-content transition-colors"
|
|
>
|
|
{{ ctaLabel }}
|
|
<iconify-icon class="text-base" icon="lucide:arrow-right"></iconify-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useAuth } from '../composables/useAuth.js'
|
|
|
|
const props = defineProps({
|
|
stationCount: { type: Number, default: null },
|
|
})
|
|
|
|
const { isAuthenticated, isPaidTier } = useAuth()
|
|
|
|
const stationCountLabel = computed(() => {
|
|
if (!props.stationCount) {
|
|
return '14,500+'
|
|
}
|
|
return new Intl.NumberFormat('en-GB').format(props.stationCount)
|
|
})
|
|
|
|
const ctaHref = computed(() => isAuthenticated.value ? '/pricing' : '/register?tier=plus&cadence=monthly')
|
|
const ctaLabel = computed(() => isAuthenticated.value ? 'See plans' : 'Start saving')
|
|
</script>
|