Pricing Section

1"use client"
2
3import { PricingSection, type PricingPlan } from "@/components/ui/pricing-section"
4import { Lightning, RocketLaunch } from "@phosphor-icons/react"
5
6const plans: PricingPlan[] = [
7  {
8    id: "starter",
9    name: "Starter",
10    description: "Everything you need to ship your first project.",
11    price: { monthly: 0, annually: 0 },
12    accent: "#3b5bff",
13    cta: { label: "Get started", href: "/signup" },
14    features: [{ label: "3 projects", icon: <RocketLaunch weight="fill" /> }],
15  },
16  {
17    id: "pro",
18    name: "Pro",
19    description: "For teams that ship every day.",
20    price: { monthly: 29, annually: 24 },
21    accent: "#b4b4bb",
22    featured: true,
23    badge: "Popular",
24    cta: { label: "Start free trial", href: "/signup?plan=pro" },
25    features: [{ label: "Unlimited projects", icon: <Lightning weight="fill" /> }],
26  },
27]
28
29export function Pricing() {
30  return (
31    <PricingSection
32      title="Simple pricing"
33      plans={plans}
34      onBillingChange={(billing) => console.log(billing)}
35    />
36  )
37}