Template
58 lines
3.0 KiB
TypeScript
58 lines
3.0 KiB
TypeScript
import Link from 'next/link';
|
|
import { Check } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
|
|
|
export type PricingProps = {
|
|
heading?: string;
|
|
description?: string;
|
|
billingNote?: string;
|
|
plans?: Array<{
|
|
name: string;
|
|
price: string;
|
|
period: string;
|
|
description: string;
|
|
features: string;
|
|
ctaLabel: string;
|
|
ctaUrl: string;
|
|
badge?: string;
|
|
highlighted?: 'yes' | 'no';
|
|
}>;
|
|
};
|
|
|
|
export default function Pricing({ heading = '', description = '', billingNote = '', plans = [] }: PricingProps) {
|
|
return (
|
|
<section id="pricing" className="scroll-mt-20 bg-background py-20 sm:py-28">
|
|
<div className="section-shell">
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<h2 className="text-4xl font-normal leading-[0.98] tracking-[-0.04em] sm:text-5xl lg:text-6xl">{heading}</h2>
|
|
{description && <p className="mt-4 text-base leading-7 text-muted-foreground">{description}</p>}
|
|
{billingNote && <p className="mt-3 text-sm text-muted-foreground">{billingNote}</p>}
|
|
</div>
|
|
<div className={`mx-auto mt-12 grid max-w-6xl gap-8 ${plans.length > 2 ? 'lg:grid-cols-3' : 'md:grid-cols-2'}`}>
|
|
{plans.map((plan, index) => (
|
|
<article key={`${plan.name}-${index}`} className="h-full">
|
|
<Card className={`h-full gap-0 bg-background py-0 shadow-none ${plan.highlighted === 'yes' ? 'border-brand ring-1 ring-brand/15' : ''}`}>
|
|
<CardHeader className="p-7 pb-0">
|
|
<CardTitle><h3 className="text-xl font-medium">{plan.name}</h3></CardTitle>
|
|
{plan.badge && <CardAction><span className="rounded-full bg-background px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-brand">{plan.badge}</span></CardAction>}
|
|
<div className="col-span-full mt-5 flex items-end gap-1.5"><span className="text-5xl font-medium tracking-[-0.05em]">{plan.price}</span><span className="pb-1 text-sm text-muted-foreground">{plan.period}</span></div>
|
|
<CardDescription className="col-span-full mt-3 min-h-12 leading-6">{plan.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 px-7 pt-8">
|
|
<ul className="space-y-3">
|
|
{plan.features.split('\n').map((feature) => feature.trim()).filter(Boolean).map((feature) => <li key={feature} className="flex gap-2.5 text-sm"><Check className="mt-0.5 size-4 shrink-0 text-brand" aria-hidden="true" />{feature}</li>)}
|
|
</ul>
|
|
</CardContent>
|
|
<CardFooter className="p-7 pt-9">
|
|
<Button asChild variant={plan.highlighted === 'yes' ? 'default' : 'outline'} size="lg" className="w-full"><Link href={plan.ctaUrl}>{plan.ctaLabel}</Link></Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|