16 lines
1.0 KiB
Plaintext
16 lines
1.0 KiB
Plaintext
component PricingPlanCard {
|
|
props {
|
|
class = ""
|
|
name = "Starter"
|
|
description = ""
|
|
price = "₹0"
|
|
period = "/month"
|
|
featured = false
|
|
ctaLabel = "Choose plan"
|
|
ctaHref = "#"
|
|
}
|
|
view {
|
|
<article class="relative flex h-full flex-col rounded-3xl border p-6 shadow-sm {featured ? 'border-violet-500 bg-violet-50/50 ring-2 ring-violet-500 dark:bg-violet-950/20' : 'border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900'} {class}"><Badge data-show="featured" label="Most popular" variant="brand" /><h3 class="mt-4 text-xl font-bold">{name}</h3><p class="mt-2 text-sm text-slate-500">{description}</p><div class="mt-6"><span class="text-4xl font-black">{price}</span><span class="text-slate-500">{period}</span></div><div class="mt-6 flex-1"><slot /></div><a href="{ctaHref}" class="mt-6 inline-flex min-h-12 items-center justify-center rounded-xl font-semibold transition {featured ? 'bg-violet-600 text-white hover:bg-violet-700' : 'border border-slate-300 hover:bg-slate-50 dark:border-slate-700'}">{ctaLabel}</a></article>
|
|
}
|
|
}
|