將任何設計變成 可出貨的代碼

1import { CheckIcon } from 'lucide-react'
2
3export function PricingCard() {
4  return (
5    <div className="rounded-2xl border border-zinc-200 bg-white p-8 shadow-sm">
6      <h3 className="text-sm font-medium text-zinc-500">Pro</h3>
7      <div className="mt-3 flex items-baseline gap-1">
8        <span className="text-4xl font-semibold tracking-tight">$29</span>
9        <span className="text-zinc-500">/mo</span>
10      </div>
11      <p className="mt-3 text-sm text-zinc-600">
12        Everything you need to ship production UIs, faster.
13      </p>
14      <button className="mt-6 w-full rounded-lg bg-zinc-900 py-2.5 text-sm font-medium text-white hover:bg-zinc-800">
15        Start free trial
16      </button>
17      <ul className="mt-6 space-y-2 text-sm text-zinc-700">
18        {['Unlimited projects', '6 framework targets', 'Priority support'].map((f) => (
19          <li key={f} className="flex items-center gap-2">
20            <CheckIcon className="h-4 w-4 text-emerald-500" />
21            {f}
22          </li>
23        ))}
24      </ul>
25    </div>
26  )
27}