46 lines
1.3 KiB
Plaintext
46 lines
1.3 KiB
Plaintext
---
|
|
import { Tick } from "@/components/ui/icons";
|
|
import Link from "@/components/ui/link.astro";
|
|
|
|
const { plan } = Astro.props;
|
|
---
|
|
|
|
<div>
|
|
<div
|
|
class="flex flex-col w-full order-first lg:order-none border-2 border-[#D8DEE9] border-opacity-50 py-5 px-6 rounded-md">
|
|
<div class="text-center">
|
|
<h4 class="text-lg font-medium text-gray-400">{plan.name}</h4><p
|
|
class="mt-3 text-4xl font-bold text-black md:text-4xl">
|
|
{
|
|
plan.price && typeof plan.price === "object"
|
|
? plan.price.monthly
|
|
: plan.price
|
|
}
|
|
</p>
|
|
<!-- {
|
|
plan.price.original && (
|
|
<p class="mt-1 text-xl font-medium text-gray-400 line-through md:text-2xl">
|
|
{plan.price.original}
|
|
</p>
|
|
)
|
|
} -->
|
|
</div><ul class="grid mt-8 text-left gap-y-4">
|
|
{
|
|
plan.features.map((item) => (
|
|
<li class="flex items-start gap-3 text-gray-800">
|
|
<Tick class="w-6 h-6" />
|
|
<span>{item}</span>
|
|
</li>
|
|
))
|
|
}
|
|
</ul><div class="flex mt-8">
|
|
<Link
|
|
href={plan.button.link || "#"}
|
|
block
|
|
style={plan.popular ? "primary" : "outline"}>
|
|
{plan.button.text || "Get Started"}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|