プライシングテーブル

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  // コーナードット装飾コンポーネント
54  const CornerDots = ({ highlight = false }: { highlight?: boolean }) => {
55    const dotColor = highlight ? "bg-primary" : "bg-foreground/30";
56    return (
57      <>
58        <div className={`absolute top-3 left-3 h-1 w-1 rounded-full ${dotColor}`} />
59        <div className={`absolute top-3 right-3 h-1 w-1 rounded-full ${dotColor}`} />
60        <div className={`absolute bottom-3 left-3 h-1 w-1 rounded-full ${dotColor}`} />
61        <div className={`absolute bottom-3 right-3 h-1 w-1 rounded-full ${dotColor}`} />
62      </>
63    );
64  };
65
66  return (
67    <section className="bg-background py-24">
68      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
69        {/* Header */}
70        <div className="mx-auto max-w-2xl text-center">
71          <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
72            Pricing
73          </p>
74          <h2 className="text-3xl font-light tracking-wide text-foreground sm:text-4xl">
75            Simple, transparent pricing
76          </h2>
77          <p className="mt-4 text-base tracking-wide text-muted-foreground">
78            Choose the plan that&apos;s right for you
79          </p>
80        </div>
81
82        {/* Pricing Cards */}
83        <div className="mt-16 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
84          {plans.map((plan) => (
85            <div
86              key={plan.name}
87              className={`relative rounded-sm p-8 ${
88                plan.popular
89                  ? "border border-border bg-muted/50"
90                  : "border border-border/50 bg-transparent"
91              }`}
92            >
93              <CornerDots highlight={plan.popular} />
94
95              {/* Popular Badge */}
96              {plan.popular && (
97                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
98                  <span className="rounded-sm bg-primary px-4 py-1 text-xs font-medium uppercase tracking-[0.2em] text-primary-foreground">
99                    Most Popular
100                  </span>
101                </div>
102              )}
103
104              {/* Plan Info */}
105              <div className="text-center">
106                <h3 className="text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground">
107                  {plan.name}
108                </h3>
109                <p className="mt-2 text-sm tracking-wide text-muted-foreground">
110                  {plan.description}
111                </p>
112                <div className="mt-6">
113                  <span className="text-5xl font-light tracking-tight text-foreground">
114                    {plan.price}
115                  </span>
116                  <span className="text-muted-foreground">/{plan.period}</span>
117                </div>
118              </div>
119
120              {/* Divider */}
121              <div className="my-8 h-px bg-border" />
122
123              {/* Features */}
124              <ul className="space-y-4">
125                {plan.features.map((feature) => (
126                  <li key={feature.name} className="flex items-center gap-3">
127                    {feature.included ? (
128                      <svg
129                        className="h-4 w-4 flex-shrink-0 text-foreground/70"
130                        fill="none"
131                        stroke="currentColor"
132                        viewBox="0 0 24 24"
133                      >
134                        <path
135                          strokeLinecap="round"
136                          strokeLinejoin="round"
137                          strokeWidth={1.5}
138                          d="M5 13l4 4L19 7"
139                        />
140                      </svg>
141                    ) : (
142                      <svg
143                        className="h-4 w-4 flex-shrink-0 text-muted-foreground/50"
144                        fill="none"
145                        stroke="currentColor"
146                        viewBox="0 0 24 24"
147                      >
148                        <path
149                          strokeLinecap="round"
150                          strokeLinejoin="round"
151                          strokeWidth={1.5}
152                          d="M6 18L18 6M6 6l12 12"
153                        />
154                      </svg>
155                    )}
156                    <span
157                      className={`text-sm tracking-wide ${
158                        feature.included ? "text-foreground/70" : "text-muted-foreground/50"
159                      }`}
160                    >
161                      {feature.name}
162                    </span>
163                  </li>
164                ))}
165              </ul>
166
167              {/* CTA Button */}
168              <button
169                className={`mt-8 w-full rounded-sm px-6 py-3 text-sm font-medium uppercase tracking-[0.15em] transition-all ${
170                  plan.popular
171                    ? "bg-primary text-primary-foreground hover:bg-primary/90"
172                    : "border border-border text-foreground hover:border-foreground/40 hover:bg-muted"
173                }`}
174              >
175                {plan.cta}
176              </button>
177            </div>
178          ))}
179        </div>
180      </div>
181    </section>
182  );
183}