プライシングカード

1export function PricingCards001() {
2  const plans = [
3    {
4      name: "BASIC",
5      price: "$12",
6      period: "month",
7      description: "Essential features for small teams",
8      features: [
9        { text: "5 team members", available: true },
10        { text: "10GB storage", available: true },
11        { text: "Basic support", available: true },
12        { text: "Analytics", available: false },
13        { text: "Custom domain", available: false },
14      ],
15      cta: "Get Started",
16      featured: false,
17    },
18    {
19      name: "PROFESSIONAL",
20      price: "$39",
21      period: "month",
22      description: "Advanced tools for growing businesses",
23      features: [
24        { text: "Unlimited members", available: true },
25        { text: "100GB storage", available: true },
26        { text: "Priority support", available: true },
27        { text: "Advanced analytics", available: true },
28        { text: "Custom domain", available: true },
29      ],
30      cta: "Start Free Trial",
31      featured: true,
32    },
33    {
34      name: "BUSINESS",
35      price: "$79",
36      period: "month",
37      description: "Complete solution for enterprises",
38      features: [
39        { text: "Unlimited everything", available: true },
40        { text: "Unlimited storage", available: true },
41        { text: "24/7 dedicated support", available: true },
42        { text: "Custom analytics", available: true },
43        { text: "White-label solution", available: true },
44      ],
45      cta: "Contact Sales",
46      featured: false,
47    },
48  ];
49
50  // コーナードット装飾
51  const CornerDecorations = ({ featured = false }: { featured?: boolean }) => {
52    const lineColor = featured ? "bg-foreground/40" : "bg-foreground/15";
53    return (
54      <>
55        {/* Top left corner */}
56        <div className={`absolute top-0 left-0 h-4 w-px ${lineColor}`} />
57        <div className={`absolute top-0 left-0 h-px w-4 ${lineColor}`} />
58        {/* Top right corner */}
59        <div className={`absolute top-0 right-0 h-4 w-px ${lineColor}`} />
60        <div className={`absolute top-0 right-0 h-px w-4 ${lineColor}`} />
61        {/* Bottom left corner */}
62        <div className={`absolute bottom-0 left-0 h-4 w-px ${lineColor}`} />
63        <div className={`absolute bottom-0 left-0 h-px w-4 ${lineColor}`} />
64        {/* Bottom right corner */}
65        <div className={`absolute bottom-0 right-0 h-4 w-px ${lineColor}`} />
66        <div className={`absolute bottom-0 right-0 h-px w-4 ${lineColor}`} />
67      </>
68    );
69  };
70
71  return (
72    <section className="bg-background py-24">
73      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
74        {/* Header */}
75        <div className="mx-auto mb-16 max-w-2xl text-center">
76          <p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
77            Pricing Plans
78          </p>
79          <h2 className="text-3xl font-light tracking-wide text-foreground sm:text-4xl lg:text-5xl">
80            Choose your plan
81          </h2>
82          <p className="mt-4 text-base tracking-wide text-muted-foreground">
83            Flexible pricing for teams of all sizes
84          </p>
85        </div>
86
87        {/* Cards Grid */}
88        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
89          {plans.map((plan) => (
90            <div
91              key={plan.name}
92              className={`relative p-8 ${
93                plan.featured
94                  ? "bg-muted/50 lg:-my-4 lg:py-12"
95                  : "bg-transparent"
96              }`}
97            >
98              <CornerDecorations featured={plan.featured} />
99
100              {/* Featured Badge */}
101              {plan.featured && (
102                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
103                  <span className="bg-primary px-5 py-1.5 text-[10px] font-medium uppercase tracking-[0.2em] text-primary-foreground">
104                    Recommended
105                  </span>
106                </div>
107              )}
108
109              {/* Plan Header */}
110              <div className="mb-8">
111                <h3 className="text-xs font-medium uppercase tracking-[0.25em] text-muted-foreground">
112                  {plan.name}
113                </h3>
114                <div className="mt-4 flex items-baseline">
115                  <span className="text-5xl font-light text-foreground">{plan.price}</span>
116                  <span className="ml-2 text-sm text-muted-foreground">/{plan.period}</span>
117                </div>
118                <p className="mt-3 text-sm tracking-wide text-muted-foreground">
119                  {plan.description}
120                </p>
121              </div>
122
123              {/* Divider */}
124              <div className="h-px bg-border" />
125
126              {/* Features */}
127              <ul className="my-8 space-y-4">
128                {plan.features.map((feature) => (
129                  <li
130                    key={feature.text}
131                    className="flex items-center gap-3"
132                  >
133                    {feature.available ? (
134                      <svg
135                        className="h-4 w-4 text-foreground/60"
136                        fill="none"
137                        viewBox="0 0 24 24"
138                        stroke="currentColor"
139                      >
140                        <path
141                          strokeLinecap="round"
142                          strokeLinejoin="round"
143                          strokeWidth={1.5}
144                          d="M5 13l4 4L19 7"
145                        />
146                      </svg>
147                    ) : (
148                      <svg
149                        className="h-4 w-4 text-muted-foreground/40"
150                        fill="none"
151                        viewBox="0 0 24 24"
152                        stroke="currentColor"
153                      >
154                        <path
155                          strokeLinecap="round"
156                          strokeLinejoin="round"
157                          strokeWidth={1.5}
158                          d="M18 12H6"
159                        />
160                      </svg>
161                    )}
162                    <span
163                      className={`text-sm tracking-wide ${
164                        feature.available ? "text-foreground/60" : "text-muted-foreground/50"
165                      }`}
166                    >
167                      {feature.text}
168                    </span>
169                  </li>
170                ))}
171              </ul>
172
173              {/* CTA Button */}
174              <button
175                className={`w-full py-3.5 text-xs font-medium uppercase tracking-[0.2em] transition-all ${
176                  plan.featured
177                    ? "bg-primary text-primary-foreground hover:bg-primary/90"
178                    : "border border-border text-foreground/70 hover:border-foreground/30 hover:text-foreground"
179                }`}
180              >
181                {plan.cta}
182              </button>
183            </div>
184          ))}
185        </div>
186
187        {/* Footer Note */}
188        <div className="mt-16 text-center">
189          <p className="text-xs tracking-wide text-muted-foreground">
190            All plans include a 14-day free trial. No credit card required.
191          </p>
192        </div>
193      </div>
194    </section>
195  );
196}