70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Check } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { homepage } from "@/marketing/content/homepage";
|
|
|
|
export function Pricing() {
|
|
return (
|
|
<section id="pricing" className="w-full py-16 md:py-24">
|
|
<div className="container mx-auto px-6">
|
|
<div className="mx-auto max-w-[980px] space-y-12">
|
|
<div className="text-center space-y-4">
|
|
<h2 className="text-3xl font-bold tracking-tight md:text-5xl">
|
|
{homepage.pricing.title}
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground md:text-xl">
|
|
{homepage.pricing.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-8 md:grid-cols-3 pt-8">
|
|
{homepage.pricing.tiers.map((tier) => (
|
|
<Card
|
|
key={tier.name}
|
|
className={`flex flex-col ${
|
|
tier.highlighted
|
|
? "border-primary shadow-lg scale-105"
|
|
: ""
|
|
}`}
|
|
>
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">{tier.name}</CardTitle>
|
|
<CardDescription className="text-base">
|
|
{tier.description}
|
|
</CardDescription>
|
|
<div className="pt-4">
|
|
<span className="text-4xl font-bold">{tier.price}</span>
|
|
{tier.price !== "Free" && (
|
|
<span className="text-muted-foreground">/month</span>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 space-y-4">
|
|
<ul className="space-y-3">
|
|
{tier.features.map((feature, index) => (
|
|
<li key={index} className="flex items-start gap-3">
|
|
<Check className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
|
|
<span className="text-sm">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Link href="/auth" className="block pt-4">
|
|
<Button
|
|
className="w-full"
|
|
variant={tier.highlighted ? "default" : "outline"}
|
|
>
|
|
{tier.price === "Free" ? "Start Free" : "Get Started"}
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|