99 lines
4.4 KiB
Plaintext
99 lines
4.4 KiB
Plaintext
---
|
|
import { Icon } from "astro-icon/components";
|
|
import CTA from "~/components/ui/CTA.astro";
|
|
import Headline from "~/components/ui/Headline.astro";
|
|
import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
|
|
import type { Pricing } from "~/types";
|
|
|
|
const {
|
|
title = "",
|
|
subtitle = "",
|
|
tagline = "",
|
|
prices = [],
|
|
|
|
id,
|
|
isDark = false,
|
|
classes = {},
|
|
bg = await Astro.slots.render("bg"),
|
|
} = Astro.props as Pricing;
|
|
---
|
|
|
|
<WidgetWrapper
|
|
id={id}
|
|
isDark={isDark}
|
|
containerClass={`max-w-6xl mx-auto ${classes?.container ?? ""}`}
|
|
bg={bg}
|
|
>
|
|
<Headline title={title} subtitle={subtitle} tagline={tagline} />
|
|
<div class="flex items-stretch justify-center">
|
|
<div
|
|
class="grid grid-cols-3 gap-3 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"
|
|
>
|
|
{
|
|
prices &&
|
|
prices.map(
|
|
({
|
|
title,
|
|
price,
|
|
period,
|
|
items,
|
|
callToAction,
|
|
hasRibbon = false,
|
|
ribbonTitle,
|
|
}) => (
|
|
<div class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1">
|
|
<div class="rounded-md border-gray-200 bg-white px-6 pt-10 pb-8 shadow-xl transition duration-300 ease-in-out dark:border dark:border-slate-800 dark:bg-slate-900 relative flex w-full max-w-sm flex-col justify-between text-center">
|
|
{hasRibbon && ribbonTitle && (
|
|
<div class="absolute right-[-5px] top-[-5px] z-[1] h-[100px] w-[100px] overflow-hidden text-right">
|
|
<span class="absolute top-[19px] right-[-21px] block w-full rotate-45 bg-green-700 text-center text-[10px] font-bold uppercase leading-5 text-white shadow-[0_3px_10px_-5px_rgba(0,0,0,0.3)] before:absolute before:left-0 before:top-full before:z-[-1] before:border-[3px] before:border-r-transparent before:border-b-transparent before:border-l-green-800 before:border-t-green-800 before:content-[''] after:absolute after:right-0 after:top-full after:z-[-1] after:border-[3px] after:border-l-transparent after:border-b-transparent after:border-r-green-800 after:border-t-green-800 after:content-['']">
|
|
{ribbonTitle}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<ul class="px-2 py-0">
|
|
<li class="text-center text-xl font-medium uppercase leading-6 tracking-wider text-gray-800 dark:text-slate-400">
|
|
{title}
|
|
</li>
|
|
<li class="mt-5 mb-2.5 flex items-center justify-center text-center font-semibold">
|
|
<span class="text-5xl">$</span>
|
|
<span class="text-6xl">{price}</span>
|
|
</li>
|
|
<li class="mb-7 text-center text-base font-medium capitalize leading-6 text-gray-600 dark:text-slate-400">
|
|
{period}
|
|
</li>
|
|
{items &&
|
|
items.map(({ description, icon }) => (
|
|
<li class="mb-1.5 flex items-start text-left text-base leading-7">
|
|
<div class="mt-1.5 mr-1.5 flex h-4 w-4 items-center justify-center rounded-full border-2 border-primary bg-primary">
|
|
{icon && (
|
|
<Icon
|
|
name={icon}
|
|
class="w-5 h-5 font-bold text-white"
|
|
/>
|
|
)}
|
|
</div>
|
|
{description}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{callToAction && (
|
|
<div class="flex justify-center">
|
|
<CTA
|
|
callToAction={callToAction}
|
|
class={`mt-8 ${
|
|
hasRibbon
|
|
? "border-primary-600 bg-primary-600 font-semibold text-white hover:border-primary-800 hover:bg-primary-800 hover:text-white dark:border-primary-700 dark:bg-primary-700 dark:text-white dark:hover:border-primary-900 dark:hover:bg-primary-900"
|
|
: ""
|
|
}`}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</WidgetWrapper>
|