Pricing Plans

const plans = [
  {
    name: "ライト",
    price: "10",
    desc: "名刺代わりの小規模サイトに。",
    features: ["5ページまで", "スマホ対応", "お問い合わせフォーム"],
    featured: false,
  },
  {
    name: "スタンダード",
    price: "30",
    desc: "集客を意識した本格サイトに。",
    features: ["10ページまで", "CMS導入", "基本SEO設定", "公開後1ヶ月サポート"],
    featured: true,
  },
  {
    name: "プレミアム",
    price: "50",
    desc: "戦略から伴走する制作に。",
    features: ["ページ数無制限", "LP・ブログ機能", "アクセス解析設定", "月額保守プラン"],
    featured: false,
  },
];

return function PricingPlans() {
  return (
    <div className="grid w-full max-w-3xl gap-5 sm:grid-cols-3">
      {plans.map((plan) => (
        <div
          key={plan.name}
          className={`relative flex flex-col rounded-2xl border bg-white p-6 ${
            plan.featured
              ? "border-amber-300 shadow-md ring-1 ring-amber-200"
              : "border-gray-200 shadow-sm"
          }`}
        >
          {plan.featured && (
            <span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-amber-600 px-3 py-1 text-xs font-semibold text-white">
              おすすめ
            </span>
          )}
          <h3 className="text-sm font-bold text-gray-900">{plan.name}</h3>
          <p className="mt-3 flex items-baseline gap-1">
            <span className="text-sm font-medium text-gray-500">¥</span>
            <span className="text-3xl font-bold tracking-tight text-gray-900">{plan.price}</span>
            <span className="text-sm font-medium text-gray-500">万〜</span>
          </p>
          <p className="mt-2 text-xs leading-relaxed text-gray-500">{plan.desc}</p>
          <ul className="mt-5 flex-1 space-y-2.5">
            {plan.features.map((feature) => (
              <li key={feature} className="flex items-start gap-2 text-xs text-gray-600">
                <svg className="mt-0.5 size-3.5 shrink-0 text-amber-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fillRule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0Z" clipRule="evenodd" />
                </svg>
                {feature}
              </li>
            ))}
          </ul>
          <a
            href="#"
            className={`mt-6 rounded-lg px-4 py-2.5 text-center text-sm font-semibold transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 ${
              plan.featured
                ? "bg-amber-600 text-white hover:bg-amber-700"
                : "border border-gray-300 bg-white text-gray-800 hover:bg-gray-50"
            }`}
          >
            相談する
          </a>
        </div>
      ))}
    </div>
  );
}