水平ストリップ料金表

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