104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
import * as React from "react";
|
|
import { Button } from "@relume_io/relume-ui";
|
|
import type { ButtonProps } from "@relume_io/relume-ui";
|
|
import { BiCheck } from "react-icons/bi";
|
|
|
|
type PricingPlan = {
|
|
planName: string;
|
|
monthlyPrice: string;
|
|
yearlyPrice: string;
|
|
features: string[];
|
|
button: ButtonProps;
|
|
};
|
|
|
|
type Props = {
|
|
tagline: string;
|
|
heading: string;
|
|
description: string;
|
|
pricingPlans: PricingPlan[];
|
|
};
|
|
|
|
export type Pricing18Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
|
|
|
|
export const Pricing18 = (props: Pricing18Props) => {
|
|
const { tagline, heading, description, pricingPlans } = {
|
|
...Pricing18Defaults,
|
|
...props,
|
|
};
|
|
return (
|
|
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
|
|
<div className="container">
|
|
<div className="mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
|
|
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
|
|
<h2 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
|
|
{heading}
|
|
</h2>
|
|
<p className="md:text-md">{description}</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
|
|
{pricingPlans.map((plan, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex h-full flex-col justify-between border border-border-primary px-6 py-8 md:p-8"
|
|
>
|
|
<div>
|
|
<div className="rb-6 mb-6 text-center md:mb-8">
|
|
<h6 className="text-md font-bold md:text-xl">{plan.planName}</h6>
|
|
<h1 className="my-2 text-6xl font-bold md:text-9xl lg:text-10xl">
|
|
{plan.monthlyPrice}
|
|
<span className="text-2xl font-bold md:text-3xl lg:text-4xl">/mo</span>
|
|
</h1>
|
|
<p>or {plan.yearlyPrice} yearly</p>
|
|
</div>
|
|
<div className="mb-8 grid grid-cols-1 gap-4 py-2">
|
|
{plan.features.map((feature, index) => (
|
|
<div key={index} className="flex self-start">
|
|
<div className="mr-4 flex-none self-start">
|
|
<BiCheck className="size-6" />
|
|
</div>
|
|
<p>{feature}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Button {...plan.button} className="w-full">
|
|
{plan.button.title}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export const Pricing18Defaults: Props = {
|
|
tagline: "Tagline",
|
|
heading: "Pricing plan",
|
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
|
pricingPlans: [
|
|
{
|
|
planName: "Basic plan",
|
|
monthlyPrice: "$19",
|
|
yearlyPrice: "$199",
|
|
features: ["Feature text goes here", "Feature text goes here", "Feature text goes here"],
|
|
button: { title: "Get started" },
|
|
},
|
|
{
|
|
planName: "Business plan",
|
|
monthlyPrice: "$29",
|
|
yearlyPrice: "$299",
|
|
features: ["Feature text goes here", "Feature text goes here", "Feature text goes here", "Feature text goes here"],
|
|
button: { title: "Get started" },
|
|
},
|
|
{
|
|
planName: "Enterprise plan",
|
|
monthlyPrice: "$49",
|
|
yearlyPrice: "$499",
|
|
features: ["Feature text goes here", "Feature text goes here", "Feature text goes here", "Feature text goes here", "Feature text goes here"],
|
|
button: { title: "Get started" },
|
|
},
|
|
],
|
|
}; |