36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { plans } from "../data/pricing-data";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
export default function Pricing() {
|
|
return (
|
|
<div className="max-w-4xl text-center">
|
|
<h2 id="pricing" className="mb-6 text-3xl font-bold">Pricing Plans</h2>
|
|
<p className="mb-6 text-gray-600">
|
|
Prices are subject to change. These estimates help guide your decision.
|
|
</p>
|
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{plans.map((plan, index) => (
|
|
<Card key={index} className="p-4">
|
|
<CardHeader>
|
|
<CardTitle>{plan.title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="mb-4 text-xl font-semibold">{plan.price}</p>
|
|
<p className="mb-4 text-gray-600">{plan.description}</p>
|
|
<ul className="mb-4 text-left">
|
|
{plan.features.map((feature, i) => (
|
|
<li key={i} className="list-inside list-disc text-sm">
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Button>Choose Plan</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|