エンタープライズ料金表

1export function PricingEnterprise001() {
2  const tiers = [
3    {
4      name: "TEAM",
5      description: "For small to medium teams getting started",
6      price: "$49",
7      period: "user/month",
8      minUsers: "5 users minimum",
9      features: [
10        "Unlimited projects",
11        "Advanced collaboration",
12        "Priority email support",
13        "99.9% uptime SLA",
14        "Basic analytics",
15        "Standard integrations",
16      ],
17      cta: "Start 14-day trial",
18    },
19    {
20      name: "ENTERPRISE",
21      description: "For organizations with advanced needs",
22      price: "Custom",
23      period: "",
24      minUsers: "Contact for pricing",
25      features: [
26        "Everything in Team",
27        "Dedicated success manager",
28        "Custom onboarding",
29        "99.99% uptime SLA",
30        "Advanced security & compliance",
31        "Custom integrations & API",
32        "SSO/SAML authentication",
33        "Audit logs & admin controls",
34      ],
35      cta: "Contact sales",
36      featured: true,
37    },
38  ];
39
40  const stats = [
41    { value: "500+", label: "Enterprise clients" },
42    { value: "99.99%", label: "Uptime guaranteed" },
43    { value: "24/7", label: "Support available" },
44    { value: "SOC2", label: "Certified" },
45  ];
46
47  return (
48    <section className="bg-background py-24">
49      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
50        {/* Header */}
51        <div className="mb-16 text-center">
52          <p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
53            Enterprise Solutions
54          </p>
55          <h2 className="text-3xl font-light tracking-wide text-foreground sm:text-4xl lg:text-5xl">
56            Scale with confidence
57          </h2>
58          <p className="mx-auto mt-4 max-w-xl text-base tracking-wide text-muted-foreground">
59            Flexible solutions designed for growing teams and enterprise organizations
60          </p>
61        </div>
62
63        {/* Trust Stats */}
64        <div className="mb-16 grid grid-cols-2 gap-6 md:grid-cols-4">
65          {stats.map((stat) => (
66            <div key={stat.label} className="text-center">
67              <div className="text-2xl font-light text-foreground sm:text-3xl">{stat.value}</div>
68              <div className="mt-1 text-xs uppercase tracking-[0.2em] text-muted-foreground">
69                {stat.label}
70              </div>
71            </div>
72          ))}
73        </div>
74
75        {/* Pricing Tiers */}
76        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
77          {tiers.map((tier) => (
78            <div
79              key={tier.name}
80              className={`relative p-10 ${
81                tier.featured
82                  ? "border border-border bg-muted/30"
83                  : "border border-border/50"
84              }`}
85            >
86              {/* Corner Decorations */}
87              <div className="absolute top-0 left-0 h-6 w-px bg-foreground/20" />
88              <div className="absolute top-0 left-0 h-px w-6 bg-foreground/20" />
89              <div className="absolute top-0 right-0 h-6 w-px bg-foreground/20" />
90              <div className="absolute top-0 right-0 h-px w-6 bg-foreground/20" />
91              <div className="absolute bottom-0 left-0 h-6 w-px bg-foreground/20" />
92              <div className="absolute bottom-0 left-0 h-px w-6 bg-foreground/20" />
93              <div className="absolute bottom-0 right-0 h-6 w-px bg-foreground/20" />
94              <div className="absolute bottom-0 right-0 h-px w-6 bg-foreground/20" />
95
96              {/* Featured Badge */}
97              {tier.featured && (
98                <div className="absolute -top-3 left-8">
99                  <span className="bg-primary px-4 py-1 text-[10px] font-medium uppercase tracking-[0.2em] text-primary-foreground">
100                    Most Flexible
101                  </span>
102                </div>
103              )}
104
105              {/* Tier Header */}
106              <div className="mb-8">
107                <h3 className="text-xs font-medium uppercase tracking-[0.25em] text-muted-foreground">
108                  {tier.name}
109                </h3>
110                <p className="mt-2 text-sm tracking-wide text-muted-foreground">{tier.description}</p>
111              </div>
112
113              {/* Price */}
114              <div className="mb-2">
115                <span className="text-4xl font-light text-foreground sm:text-5xl">{tier.price}</span>
116                {tier.period && (
117                  <span className="ml-2 text-sm text-muted-foreground">/{tier.period}</span>
118                )}
119              </div>
120              <p className="text-xs tracking-wide text-muted-foreground">{tier.minUsers}</p>
121
122              {/* Divider */}
123              <div className="my-8 h-px bg-border" />
124
125              {/* Features */}
126              <ul className="mb-10 grid grid-cols-1 gap-3 sm:grid-cols-2">
127                {tier.features.map((feature) => (
128                  <li
129                    key={feature}
130                    className="flex items-start gap-3 text-sm tracking-wide text-muted-foreground"
131                  >
132                    <svg
133                      className="mt-0.5 h-4 w-4 flex-shrink-0 text-foreground/40"
134                      fill="none"
135                      viewBox="0 0 24 24"
136                      stroke="currentColor"
137                    >
138                      <path
139                        strokeLinecap="round"
140                        strokeLinejoin="round"
141                        strokeWidth={1.5}
142                        d="M5 13l4 4L19 7"
143                      />
144                    </svg>
145                    {feature}
146                  </li>
147                ))}
148              </ul>
149
150              {/* CTA Button */}
151              <button
152                className={`w-full py-4 text-xs font-medium uppercase tracking-[0.15em] transition-all ${
153                  tier.featured
154                    ? "bg-primary text-primary-foreground hover:bg-primary/90"
155                    : "border border-border text-muted-foreground hover:border-foreground/30 hover:text-foreground"
156                }`}
157              >
158                {tier.cta}
159              </button>
160            </div>
161          ))}
162        </div>
163
164        {/* Bottom CTA */}
165        <div className="mt-16 border border-border p-8 text-center lg:p-12">
166          <div className="mx-auto max-w-xl">
167            <h3 className="text-xl font-light tracking-wide text-foreground">
168              Not sure which plan is right for you?
169            </h3>
170            <p className="mt-3 text-sm tracking-wide text-muted-foreground">
171              Our team can help you find the perfect solution for your organization&apos;s needs.
172            </p>
173            <div className="mt-6 flex flex-col items-center justify-center gap-4 sm:flex-row">
174              <button className="w-full border border-border px-6 py-3 text-xs font-medium uppercase tracking-[0.15em] text-muted-foreground transition-all hover:border-foreground/30 hover:text-foreground sm:w-auto">
175                Schedule a demo
176              </button>
177              <button className="w-full bg-primary px-6 py-3 text-xs font-medium uppercase tracking-[0.15em] text-primary-foreground transition-all hover:bg-primary/90 sm:w-auto">
178                Talk to sales
179              </button>
180            </div>
181          </div>
182        </div>
183      </div>
184    </section>
185  );
186}