ミニマル料金表

1export function PricingMinimal001() {
2  const plans = [
3    {
4      name: "FREE",
5      price: "$0",
6      period: "forever",
7      description: "For individuals exploring the platform",
8      features: ["1 project", "Basic features", "Community support"],
9      cta: "Get Started",
10      highlight: false,
11    },
12    {
13      name: "PRO",
14      price: "$19",
15      period: "month",
16      description: "For professionals who need more power",
17      features: [
18        "Unlimited projects",
19        "Advanced features",
20        "Priority support",
21        "API access",
22      ],
23      cta: "Start Trial",
24      highlight: true,
25    },
26    {
27      name: "TEAM",
28      price: "$49",
29      period: "month",
30      description: "For teams working together",
31      features: [
32        "Everything in Pro",
33        "Team collaboration",
34        "Admin controls",
35        "Custom branding",
36      ],
37      cta: "Contact Us",
38      highlight: false,
39    },
40  ];
41
42  return (
43    <section className="bg-background py-24">
44      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
45        {/* Header */}
46        <div className="mb-20 text-center">
47          <h2 className="text-4xl font-light tracking-wide text-foreground sm:text-5xl">
48            Pricing
49          </h2>
50          <div className="mx-auto mt-6 h-px w-12 bg-foreground/20" />
51        </div>
52
53        {/* Pricing Grid */}
54        <div className="grid grid-cols-1 gap-px bg-border sm:grid-cols-3">
55          {plans.map((plan) => (
56            <div
57              key={plan.name}
58              className={`relative p-10 ${
59                plan.highlight ? "bg-muted/50" : "bg-background"
60              }`}
61            >
62              {/* Corner Dots */}
63              <div className="absolute top-3 left-3 h-0.5 w-0.5 rounded-full bg-foreground/30" />
64              <div className="absolute top-3 right-3 h-0.5 w-0.5 rounded-full bg-foreground/30" />
65
66              {/* Plan Name */}
67              <p className="text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
68                {plan.name}
69              </p>
70
71              {/* Price */}
72              <div className="mt-6">
73                <span className="text-4xl font-light text-foreground">{plan.price}</span>
74                <span className="ml-1 text-sm text-muted-foreground">/{plan.period}</span>
75              </div>
76
77              {/* Description */}
78              <p className="mt-4 text-sm leading-relaxed tracking-wide text-muted-foreground">
79                {plan.description}
80              </p>
81
82              {/* Features */}
83              <ul className="mt-8 space-y-3">
84                {plan.features.map((feature) => (
85                  <li
86                    key={feature}
87                    className="flex items-start gap-3 text-sm tracking-wide text-muted-foreground"
88                  >
89                    <span className="mt-1.5 h-1 w-1 rounded-full bg-foreground/40" />
90                    {feature}
91                  </li>
92                ))}
93              </ul>
94
95              {/* CTA */}
96              <button
97                className={`mt-10 w-full py-3 text-xs font-medium uppercase tracking-[0.2em] transition-all ${
98                  plan.highlight
99                    ? "bg-primary text-primary-foreground hover:bg-primary/90"
100                    : "border border-border text-foreground/70 hover:border-foreground/40 hover:text-foreground"
101                }`}
102              >
103                {plan.cta}
104              </button>
105            </div>
106          ))}
107        </div>
108      </div>
109    </section>
110  );
111}