Pricing

1import * as React from "react";
2import { Check, Sparkles } from "lucide-react";
3 
4import { Badge } from "@/components/ui/badge";
5import { Button } from "@/components/ui/button";
6import { cn } from "@/lib/utils";
7 
8const plans = [
9  {
10    name: "Starter",
11    price: "$0",
12    description: "For experiments and personal projects.",
13    features: ["3 projects", "Community support", "Core components"],
14  },
15  {
16    name: "Pro",
17    price: "$24",
18    description: "For makers shipping real products.",
19    features: [
20      "Unlimited projects",
21      "All blocks and templates",
22      "Priority support",
23    ],
24    featured: true,
25  },
26  {
27    name: "Studio",
28    price: "$79",
29    description: "For teams building together.",
30    features: ["Everything in Pro", "10 team seats", "Shared presets"],
31  },
32];
33 
34function Pricing01({ className, ...props }: React.ComponentProps<"section">) {
35  return (
36    <section
37      className={cn(
38        "rounded-[2rem] border border-foreground/10 bg-background px-6 py-16 sm:px-10",
39        className,
40      )}
41      {...props}
42    >
43      <div className="mx-auto max-w-2xl text-center">
44        <Badge variant="outline">
45          <Sparkles /> Simple pricing
46        </Badge>
47        <h1 className="mt-5 text-4xl font-semibold tracking-[-.05em] sm:text-5xl">
48          Choose room to grow.
49        </h1>
50        <p className="mt-4 text-muted-foreground">
51          Start free. Upgrade when your product and team need more.
52        </p>
53      </div>
54      <div className="mx-auto mt-12 grid max-w-5xl gap-5 lg:grid-cols-3">
55        {plans.map((plan) => (
56          <div
57            className={cn(
58              "relative flex flex-col rounded-3xl border p-7",
59              plan.featured
60                ? "border-primary/35 bg-primary/[.055] shadow-[0_28px_80px_-48px_var(--primary)]"
61                : "border-foreground/10 bg-foreground/[.025]",
62            )}
63            key={plan.name}
64          >
65            {plan.featured && (
66              <Badge className="absolute right-5 top-5">Popular</Badge>
67            )}
68            <p className="text-sm font-semibold">{plan.name}</p>
69            <div className="mt-5 flex items-end gap-1">
70              <span className="text-4xl font-semibold tracking-[-.05em]">
71                {plan.price}
72              </span>
73              <span className="pb-1 text-sm text-muted-foreground">/month</span>
74            </div>
75            <p className="mt-3 min-h-12 text-sm leading-relaxed text-muted-foreground">
76// … truncated