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

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  // コーナードット装飾コンポーネント
49  const CornerDots = ({ highlight = false }: { highlight?: boolean }) => {
50    const dotColor = highlight
51      ? "bg-foreground/60"
52      : "bg-foreground/20";
53    return (
54      <>
55        <div className={`absolute top-4 left-4 h-1 w-1 rounded-full ${dotColor}`} />
56        <div className={`absolute top-4 right-4 h-1 w-1 rounded-full ${dotColor}`} />
57        <div className={`absolute bottom-4 left-4 h-1 w-1 rounded-full ${dotColor}`} />
58        <div className={`absolute bottom-4 right-4 h-1 w-1 rounded-full ${dotColor}`} />
59      </>
60    );
61  };
62
63  return (
64    <section className="relative overflow-hidden bg-background py-24">
65      {/* 背景グラデーション - subtle */}
66      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-foreground/5 via-transparent to-transparent" />
67
68      <div className="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
69        {/* ヘッダー */}
70        <div className="mb-16 text-center">
71          <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
72            Choose Your Plan
73          </p>
74          <h2 className="mb-4 text-3xl font-light tracking-wide text-foreground sm:text-4xl">
75            Simple, transparent pricing
76          </h2>
77          <p className="mx-auto max-w-2xl text-base tracking-wide text-muted-foreground">
78            Choose the plan that fits your needs. No hidden fees.
79          </p>
80        </div>
81
82        {/* 料金カード */}
83        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
84          {plans.map((plan) => (
85            <div
86              key={plan.name}
87              className={`relative rounded-sm p-8 backdrop-blur-sm ${
88                plan.popular
89                  ? "border border-border bg-muted/50"
90                  : "border border-border/50 bg-muted/20"
91              }`}
92            >
93              <CornerDots highlight={plan.popular} />
94
95              {/* 人気バッジ */}
96              {plan.popular && (
97                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
98                  <span className="inline-flex rounded-sm bg-primary px-4 py-1 text-xs font-medium uppercase tracking-[0.15em] text-primary-foreground">
99                    Most Popular
100                  </span>
101                </div>
102              )}
103
104              {/* プラン名 */}
105              <h3 className="mb-2 text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground">
106                {plan.name}
107              </h3>
108
109              {/* 価格 */}
110              <div className="mb-4">
111                <span className="text-4xl font-light tracking-tight text-foreground">
112                  {plan.price}
113                </span>
114                <span className="text-muted-foreground">/month</span>
115              </div>
116
117              {/* 説明 */}
118              <p className="mb-6 text-sm tracking-wide text-muted-foreground">{plan.description}</p>
119
120              {/* Divider */}
121              <div className="mb-6 h-px bg-border" />
122
123              {/* 機能リスト */}
124              <ul className="mb-8 space-y-3">
125                {plan.features.map((feature) => (
126                  <li
127                    key={feature}
128                    className="flex items-center gap-3 text-sm tracking-wide text-muted-foreground"
129                  >
130                    <svg
131                      className="h-4 w-4 text-muted-foreground"
132                      fill="none"
133                      viewBox="0 0 24 24"
134                      stroke="currentColor"
135                    >
136                      <path
137                        strokeLinecap="round"
138                        strokeLinejoin="round"
139                        strokeWidth={1.5}
140                        d="M5 13l4 4L19 7"
141                      />
142                    </svg>
143                    {feature}
144                  </li>
145                ))}
146              </ul>
147
148              {/* CTA ボタン */}
149              <button
150                className={`w-full rounded-sm py-3 text-sm font-medium uppercase tracking-[0.15em] transition-all ${
151                  plan.popular
152                    ? "bg-primary text-primary-foreground hover:bg-primary/90"
153                    : "border border-border text-foreground hover:border-foreground/40 hover:bg-muted"
154                }`}
155              >
156                {plan.cta}
157              </button>
158            </div>
159          ))}
160        </div>
161      </div>
162    </section>
163  );
164}