ガラスモーフィズム料金表

1export function PricingGlass001() {
2  const plans = [
3    {
4      name: "Starter",
5      price: "$9",
6      description: "Perfect for individuals and small projects",
7      features: [
8        "Up to 5 projects",
9        "Basic analytics",
10        "24/7 support",
11        "1GB storage",
12      ],
13      cta: "Get Started",
14      popular: false,
15    },
16    {
17      name: "Pro",
18      price: "$29",
19      description: "Best for growing teams and businesses",
20      features: [
21        "Unlimited projects",
22        "Advanced analytics",
23        "Priority support",
24        "10GB storage",
25        "Custom domains",
26        "API access",
27      ],
28      cta: "Start Free Trial",
29      popular: true,
30    },
31    {
32      name: "Enterprise",
33      price: "$99",
34      description: "For large organizations with custom needs",
35      features: [
36        "Everything in Pro",
37        "Unlimited storage",
38        "Dedicated support",
39        "Custom integrations",
40        "SLA guarantee",
41        "SSO & SAML",
42      ],
43      cta: "Contact Sales",
44      popular: false,
45    },
46  ];
47
48  return (
49    <section className="relative overflow-hidden bg-zinc-900 py-24">
50      {/* 背景グラデーション */}
51      <div className="absolute inset-0 bg-gradient-to-br from-violet-500/10 via-transparent to-cyan-500/10" />
52
53      <div className="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
54        {/* ヘッダー */}
55        <div className="mb-16 text-center">
56          <h2 className="mb-4 text-2xl font-bold tracking-tight text-white sm:text-3xl md:text-4xl">
57            Simple, transparent pricing
58          </h2>
59          <p className="mx-auto max-w-2xl text-lg text-zinc-400">
60            Choose the plan that fits your needs. No hidden fees.
61          </p>
62        </div>
63
64        {/* 料金カード */}
65        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3">
66          {plans.map((plan) => (
67            <div
68              key={plan.name}
69              className={`relative rounded-2xl border p-8 backdrop-blur-sm ${
70                plan.popular
71                  ? "border-violet-500/50 bg-white/10"
72                  : "border-white/10 bg-white/5"
73              }`}
74            >
75              {/* 人気バッジ */}
76              {plan.popular && (
77                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
78                  <span className="inline-flex rounded-full bg-gradient-to-r from-violet-500 to-cyan-500 px-4 py-1 text-xs font-semibold text-white">
79                    Most Popular
80                  </span>
81                </div>
82              )}
83
84              {/* プラン名 */}
85              <h3 className="mb-2 text-xl font-semibold text-white">
86                {plan.name}
87              </h3>
88
89              {/* 価格 */}
90              <div className="mb-4">
91                <span className="text-4xl font-bold text-white">
92                  {plan.price}
93                </span>
94                <span className="text-zinc-400">/month</span>
95              </div>
96
97              {/* 説明 */}
98              <p className="mb-6 text-sm text-zinc-400">{plan.description}</p>
99
100              {/* 機能リスト */}
101              <ul className="mb-8 space-y-3">
102                {plan.features.map((feature) => (
103                  <li
104                    key={feature}
105                    className="flex items-center gap-2 text-sm text-zinc-300"
106                  >
107                    <svg
108                      className="h-4 w-4 text-cyan-400"
109                      fill="none"
110                      viewBox="0 0 24 24"
111                      stroke="currentColor"
112                    >
113                      <path
114                        strokeLinecap="round"
115                        strokeLinejoin="round"
116                        strokeWidth={2}
117                        d="M5 13l4 4L19 7"
118                      />
119                    </svg>
120                    {feature}
121                  </li>
122                ))}
123              </ul>
124
125              {/* CTA ボタン */}
126              <button
127                className={`w-full rounded-lg py-3 font-medium transition-all ${
128                  plan.popular
129                    ? "bg-gradient-to-r from-violet-500 to-cyan-500 text-white hover:opacity-90"
130                    : "border border-white/20 text-white hover:bg-white/10"
131                }`}
132              >
133                {plan.cta}
134              </button>
135            </div>
136          ))}
137        </div>
138      </div>
139    </section>
140  );
141}