Pricing Block

1import { Check } from "lucide-react";
2 
3import { Badge } from "@/components/ui/atoms/badge";
4import { Button } from "@/components/ui/atoms/button";
5import {
6  Card,
7  CardContent,
8  CardDescription,
9  CardFooter,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/atoms/card";
13 
14export interface PricingPlan {
15  name: string;
16  price: string;
17  description: string;
18  features: string[];
19  featured?: boolean;
20}
21 
22export const pricingPlans: PricingPlan[] = [
23  {
24    name: "Starter",
25    price: "$0",
26    description: "For personal projects.",
27    features: ["3 projects", "Community support", "Core blocks"],
28  },
29  {
30    name: "Pro",
31    price: "$29",
32    description: "For product teams.",
33    features: ["Unlimited projects", "Priority support", "All registry blocks"],
34    featured: true,
35  },
36  {
37    name: "Scale",
38    price: "$99",
39    description: "For organizations.",
40    features: ["Everything in Pro", "SSO", "Design system review"],
41  },
42];
43 
44function PricingBlock({ plans = pricingPlans }: { plans?: PricingPlan[] }) {
45  return (
46    <section data-slot="pricing-block" className="@container/pricing px-3 py-10 @sm/pricing:px-6">
47      <div className="mx-auto max-w-5xl">
48        <div className="mx-auto mb-8 max-w-xl text-center">
49          <Badge variant="outline">Pricing</Badge>
50          <h2 className="mt-3 text-2xl font-semibold">Plans that grow with your product</h2>
51          <p className="mt-2 text-sm text-muted-foreground">
52            Clear limits, source-owned components, no runtime lock-in.
53          </p>
54        </div>
55        <div className="grid gap-4 @lg/pricing:grid-cols-3">
56          {plans.map((plan) => (
57            <Card
58              key={plan.name}
59              variant={plan.featured ? "glass" : "default"}
60              className={plan.featured ? "border-primary/30" : undefined}
61            >
62              <CardHeader>
63                <div>
64                  <CardTitle>{plan.name}</CardTitle>
65                  <CardDescription>{plan.description}</CardDescription>
66                </div>
67                {plan.featured && <Badge>Popular</Badge>}
68              </CardHeader>
69              <CardContent className="flex-1">
70                <p className="mb-5 text-3xl font-semibold">
71                  {plan.price}
72                  <span className="text-sm font-normal text-muted-foreground"> / month</span>
73                </p>
74                <ul className="space-y-2">
75                  {plan.features.map((feature) => (
76// … truncated