ティアード料金表

1export function PricingTiered001() {
2  const tiers = [
3    {
4      label: "STARTER",
5      price: "¥0",
6      period: "月額",
7      description: "個人プロジェクトや学習目的に最適なプラン",
8      features: ["プロジェクト3件まで", "基本分析機能", "コミュニティサポート"],
9      highlighted: false,
10    },
11    {
12      label: "PROFESSIONAL",
13      price: "¥2,980",
14      period: "月額",
15      description: "本格的なプロダクト開発に必要な機能を網羅",
16      features: [
17        "プロジェクト無制限",
18        "高度な分析・レポート",
19        "優先サポート",
20        "API アクセス",
21        "カスタムドメイン",
22      ],
23      highlighted: true,
24    },
25    {
26      label: "ENTERPRISE",
27      price: "要相談",
28      period: "",
29      description: "大規模チーム向けのカスタマイズ可能なプラン",
30      features: [
31        "Professional の全機能",
32        "専任サポート担当",
33        "SLA 保証",
34        "SSO / SAML 認証",
35        "オンプレミス対応",
36      ],
37      highlighted: false,
38    },
39  ];
40
41  return (
42    <section className="bg-background py-28">
43      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
44        {/* ヘッダー */}
45        <div className="mb-20">
46          <p className="text-[10px] font-medium uppercase tracking-[0.3em] text-muted-foreground">
47            Pricing
48          </p>
49          <h2 className="mt-4 text-3xl font-light tracking-wide text-foreground sm:text-4xl">
50            シンプルな料金体系
51          </h2>
52          <p className="mt-4 max-w-md text-sm font-light leading-relaxed text-muted-foreground">
53            必要な機能に合わせて、最適なプランをお選びください。
54            いつでもアップグレード可能です。
55          </p>
56        </div>
57
58        {/* ティアリスト */}
59        <div className="space-y-0">
60          {tiers.map((tier, index) => (
61            <div key={tier.label}>
62              {/* 区切り線 */}
63              {index === 0 && <div className="h-px bg-border/40" />}
64
65              <div
66                className={`relative py-10 sm:py-12 ${
67                  tier.highlighted ? "bg-muted/30" : ""
68                }`}
69              >
70                {/* コーナードット（ハイライト時） */}
71                {tier.highlighted && (
72                  <>
73                    <div className="absolute left-3 top-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
74                    <div className="absolute right-3 top-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
75                    <div className="absolute bottom-3 left-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
76                    <div className="absolute bottom-3 right-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
77                  </>
78                )}
79
80                <div className="grid grid-cols-1 gap-8 sm:grid-cols-[200px_1fr_180px] sm:items-start">
81                  {/* プラン名と価格 */}
82                  <div className={tier.highlighted ? "px-6" : ""}>
83                    <p className="text-[10px] font-medium uppercase tracking-[0.3em] text-muted-foreground">
84                      {tier.label}
85                    </p>
86                    <div className="mt-3">
87                      <span className="text-2xl font-light text-foreground">
88                        {tier.price}
89                      </span>
90                      {tier.period && (
91                        <span className="ml-1 text-xs text-muted-foreground">
92                          / {tier.period}
93                        </span>
94                      )}
95                    </div>
96                  </div>
97
98                  {/* 説明と機能リスト */}
99                  <div className={tier.highlighted ? "px-6" : ""}>
100                    <p className="text-sm font-light leading-relaxed text-muted-foreground">
101                      {tier.description}
102                    </p>
103                    <ul className="mt-4 space-y-2">
104                      {tier.features.map((feature) => (
105                        <li
106                          key={feature}
107                          className="flex items-center gap-3 text-sm tracking-wide text-foreground/70"
108                        >
109                          <span className="h-1 w-1 shrink-0 rounded-full bg-foreground/40" />
110                          <span className="font-light">{feature}</span>
111                        </li>
112                      ))}
113                    </ul>
114                  </div>
115
116                  {/* CTA */}
117                  <div
118                    className={`flex items-start ${tier.highlighted ? "px-6" : ""}`}
119                  >
120                    <button
121                      className={`w-full py-3 text-[10px] font-medium uppercase tracking-[0.2em] transition-all ${
122                        tier.highlighted
123                          ? "bg-primary text-primary-foreground hover:bg-primary/90"
124                          : "border border-border text-foreground/60 hover:border-foreground/30 hover:text-foreground"
125                      }`}
126                    >
127                      {tier.highlighted ? "今すぐ始める" : tier.price === "要相談" ? "お問い合わせ" : "無料で始める"}
128                    </button>
129                  </div>
130                </div>
131              </div>
132
133              <div className="h-px bg-border/40" />
134            </div>
135          ))}
136        </div>
137
138        {/* フッター */}
139        <div className="mt-14 text-center">
140          <p className="text-xs font-light tracking-wide text-muted-foreground">
141            全プラン14日間の無料トライアル付き。クレジットカード不要。
142          </p>
143        </div>
144      </div>
145    </section>
146  );
147}