Pricing 01

1import { ArrowUpRight, Check } from "lucide-react";
2 
3const plans = [
4  {
5    name: "Starter",
6    price: "$0",
7    cadence: "/month",
8    description:
9      "For personal projects and early ideas that need a polished place to begin.",
10    features: [
11      "Up to 3 active projects",
12      "Core analytics",
13      "Community support",
14      "Unlimited collaborators",
15    ],
16    hoverNote: "Start building. No card needed.",
17  },
18  {
19    name: "Studio",
20    price: "$29",
21    cadence: "/month",
22    description:
23      "For small teams shipping client work and growing products every week.",
24    features: [
25      "Unlimited active projects",
26      "Advanced analytics",
27      "Priority email support",
28      "Custom domains",
29    ],
30    hoverNote: "Everything your team needs to move.",
31    highlighted: true,
32  },
33  {
34    name: "Scale",
35    price: "$99",
36    cadence: "/month",
37    description:
38      "For established teams that need more control, support, and room to grow.",
39    features: [
40      "Everything in Studio",
41      "Single sign-on",
42      "Dedicated onboarding",
43      "Custom usage limits",
44    ],
45    hoverNote: "More control, without more complexity.",
46  },
47];
48 
49export function Pricing01() {
50  return (
51    <section className="bg-background px-4 py-20 text-foreground sm:px-6 lg:px-8 lg:py-28">
52      <div className="mx-auto max-w-6xl">
53        <div className="grid gap-6 md:grid-cols-12 md:items-end">
54          <div className="md:col-span-5">
55            <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
56              Pricing
57            </p>
58            <h2 className="mt-3 max-w-md text-3xl font-medium leading-tight tracking-[-0.04em] sm:text-4xl">
59              A plan for every stage.
60            </h2>
61          </div>
62          <p className="max-w-md text-sm leading-6 text-muted-foreground md:col-span-5 md:col-start-8">
63            Start for free, then move up when your work needs more room. Every
64            plan includes the essentials to ship something great.
65          </p>
66        </div>
67 
68        <div className="mt-10 grid gap-3 lg:grid-cols-3">
69          {plans.map((plan) => (
70            <a
71              key={plan.name}
72              href="#"
73              className="group relative block min-h-full pt-10"
74            >
75// … truncated