プライシングテーブル

1export function PricingTable001() {
2  const plans = [
3    {
4      name: "Starter",
5      description: "Perfect for getting started",
6      price: "$9",
7      period: "month",
8      features: [
9        { name: "Up to 5 projects", included: true },
10        { name: "Basic analytics", included: true },
11        { name: "24/7 Support", included: true },
12        { name: "Custom domains", included: false },
13        { name: "Advanced security", included: false },
14        { name: "Dedicated support", included: false },
15      ],
16      cta: "Start free trial",
17      popular: false,
18    },
19    {
20      name: "Professional",
21      description: "Best for growing teams",
22      price: "$29",
23      period: "month",
24      features: [
25        { name: "Unlimited projects", included: true },
26        { name: "Advanced analytics", included: true },
27        { name: "24/7 Support", included: true },
28        { name: "Custom domains", included: true },
29        { name: "Advanced security", included: true },
30        { name: "Dedicated support", included: false },
31      ],
32      cta: "Start free trial",
33      popular: true,
34    },
35    {
36      name: "Enterprise",
37      description: "For large organizations",
38      price: "$99",
39      period: "month",
40      features: [
41        { name: "Unlimited projects", included: true },
42        { name: "Advanced analytics", included: true },
43        { name: "24/7 Support", included: true },
44        { name: "Custom domains", included: true },
45        { name: "Advanced security", included: true },
46        { name: "Dedicated support", included: true },
47      ],
48      cta: "Contact sales",
49      popular: false,
50    },
51  ];
52
53  return (
54    <section className="bg-white py-24 dark:bg-zinc-950">
55      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
56        {/* Header */}
57        <div className="mx-auto max-w-2xl text-center">
58          <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
59            Simple, transparent pricing
60          </h2>
61          <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
62            Choose the plan that&apos;s right for you
63          </p>
64        </div>
65
66        {/* Pricing Cards */}
67        <div className="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
68          {plans.map((plan) => (
69            <div
70              key={plan.name}
71              className={`relative rounded-2xl p-8 ${
72                plan.popular
73                  ? "border-2 border-indigo-600 shadow-xl"
74                  : "border border-gray-200 dark:border-zinc-800"
75              }`}
76            >
77              {/* Popular Badge */}
78              {plan.popular && (
79                <div className="absolute -top-4 left-1/2 -translate-x-1/2">
80                  <span className="rounded-full bg-indigo-600 px-4 py-1 text-sm font-medium text-white">
81                    Most Popular
82                  </span>
83                </div>
84              )}
85
86              {/* Plan Info */}
87              <div className="text-center">
88                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
89                  {plan.name}
90                </h3>
91                <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
92                  {plan.description}
93                </p>
94                <div className="mt-6">
95                  <span className="text-5xl font-bold text-gray-900 dark:text-white">
96                    {plan.price}
97                  </span>
98                  <span className="text-gray-500 dark:text-gray-400">
99                    /{plan.period}
100                  </span>
101                </div>
102              </div>
103
104              {/* Features */}
105              <ul className="mt-8 space-y-4">
106                {plan.features.map((feature) => (
107                  <li key={feature.name} className="flex items-center gap-3">
108                    {feature.included ? (
109                      <svg
110                        className="h-5 w-5 flex-shrink-0 text-indigo-600 dark:text-indigo-400"
111                        fill="none"
112                        stroke="currentColor"
113                        viewBox="0 0 24 24"
114                      >
115                        <path
116                          strokeLinecap="round"
117                          strokeLinejoin="round"
118                          strokeWidth={2}
119                          d="M5 13l4 4L19 7"
120                        />
121                      </svg>
122                    ) : (
123                      <svg
124                        className="h-5 w-5 flex-shrink-0 text-gray-300 dark:text-gray-600"
125                        fill="none"
126                        stroke="currentColor"
127                        viewBox="0 0 24 24"
128                      >
129                        <path
130                          strokeLinecap="round"
131                          strokeLinejoin="round"
132                          strokeWidth={2}
133                          d="M6 18L18 6M6 6l12 12"
134                        />
135                      </svg>
136                    )}
137                    <span
138                      className={
139                        feature.included
140                          ? "text-gray-700 dark:text-gray-300"
141                          : "text-gray-400 dark:text-gray-500"
142                      }
143                    >
144                      {feature.name}
145                    </span>
146                  </li>
147                ))}
148              </ul>
149
150              {/* CTA Button */}
151              <button
152                className={`mt-8 w-full rounded-lg px-6 py-3 font-medium transition-all ${
153                  plan.popular
154                    ? "bg-indigo-600 text-white shadow-lg shadow-indigo-500/30 hover:bg-indigo-700 hover:shadow-xl hover:shadow-indigo-500/40"
155                    : "border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white dark:hover:bg-zinc-800"
156                }`}
157              >
158                {plan.cta}
159              </button>
160            </div>
161          ))}
162        </div>
163      </div>
164    </section>
165  );
166}