シンプル料金表

1export function PricingSimple001() {
2  return (
3    <section className="bg-background py-24">
4      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
5        {/* Header */}
6        <div className="mb-16 text-center">
7          <p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
8            Simple Pricing
9          </p>
10          <h2 className="text-3xl font-light tracking-wide text-foreground sm:text-4xl lg:text-5xl">
11            One plan. Everything included.
12          </h2>
13          <p className="mx-auto mt-4 max-w-lg text-base tracking-wide text-muted-foreground">
14            No tiers. No hidden fees. Just everything you need to get started.
15          </p>
16        </div>
17
18        {/* Main Pricing Card */}
19        <div className="relative border border-border p-10 lg:p-16">
20          {/* Corner Dots */}
21          <div className="absolute top-4 left-4 h-1 w-1 rounded-full bg-foreground/30" />
22          <div className="absolute top-4 right-4 h-1 w-1 rounded-full bg-foreground/30" />
23          <div className="absolute bottom-4 left-4 h-1 w-1 rounded-full bg-foreground/30" />
24          <div className="absolute bottom-4 right-4 h-1 w-1 rounded-full bg-foreground/30" />
25
26          <div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
27            {/* Left Side - Price */}
28            <div>
29              <p className="text-xs font-medium uppercase tracking-[0.25em] text-muted-foreground">
30                ALL-IN-ONE
31              </p>
32
33              <div className="mt-6">
34                <span className="text-6xl font-light text-foreground lg:text-7xl">$29</span>
35                <span className="ml-2 text-lg text-muted-foreground">/month</span>
36              </div>
37
38              <p className="mt-4 text-sm tracking-wide text-muted-foreground">
39                Billed monthly. Cancel anytime.
40              </p>
41
42              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
43                <button className="bg-primary px-8 py-4 text-xs font-medium uppercase tracking-[0.15em] text-primary-foreground transition-all hover:bg-primary/90">
44                  Start 14-day trial
45                </button>
46                <button className="border border-border px-8 py-4 text-xs font-medium uppercase tracking-[0.15em] text-muted-foreground transition-all hover:border-foreground/30 hover:text-foreground">
47                  Book a demo
48                </button>
49              </div>
50
51              <p className="mt-6 text-xs tracking-wide text-muted-foreground">
52                No credit card required for trial
53              </p>
54            </div>
55
56            {/* Right Side - Features */}
57            <div className="lg:border-l lg:border-border lg:pl-12">
58              <p className="text-xs font-medium uppercase tracking-[0.25em] text-muted-foreground">
59                WHAT&apos;S INCLUDED
60              </p>
61
62              <ul className="mt-6 space-y-4">
63                {[
64                  "Unlimited projects",
65                  "Unlimited team members",
66                  "50GB storage",
67                  "Advanced analytics",
68                  "Priority support",
69                  "Custom domains",
70                  "API access",
71                  "Integrations",
72                ].map((feature) => (
73                  <li
74                    key={feature}
75                    className="flex items-center gap-3 text-sm tracking-wide text-muted-foreground"
76                  >
77                    <svg
78                      className="h-4 w-4 flex-shrink-0 text-foreground/40"
79                      fill="none"
80                      viewBox="0 0 24 24"
81                      stroke="currentColor"
82                    >
83                      <path
84                        strokeLinecap="round"
85                        strokeLinejoin="round"
86                        strokeWidth={1.5}
87                        d="M5 13l4 4L19 7"
88                      />
89                    </svg>
90                    {feature}
91                  </li>
92                ))}
93              </ul>
94            </div>
95          </div>
96        </div>
97
98        {/* Bottom FAQ Teaser */}
99        <div className="mt-12 text-center">
100          <div className="inline-flex items-center gap-3 text-sm tracking-wide text-muted-foreground">
101            <span>Have questions?</span>
102            <div className="h-px w-8 bg-foreground/20" />
103            <a
104              href="#faq"
105              className="text-foreground/60 underline underline-offset-4 transition-colors hover:text-foreground"
106            >
107              Check our FAQ
108            </a>
109          </div>
110        </div>
111
112        {/* Trust Badges */}
113        <div className="mt-16 border-t border-border pt-12">
114          <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
115            {[
116              { icon: "shield", text: "SOC2 Compliant" },
117              { icon: "lock", text: "Bank-level security" },
118              { icon: "clock", text: "99.9% uptime" },
119              { icon: "users", text: "10K+ customers" },
120            ].map((badge) => (
121              <div key={badge.text} className="flex flex-col items-center gap-2 text-center">
122                <div className="flex h-10 w-10 items-center justify-center rounded-full border border-border">
123                  {badge.icon === "shield" && (
124                    <svg className="h-4 w-4 text-foreground/40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
125                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
126                    </svg>
127                  )}
128                  {badge.icon === "lock" && (
129                    <svg className="h-4 w-4 text-foreground/40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
130                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
131                    </svg>
132                  )}
133                  {badge.icon === "clock" && (
134                    <svg className="h-4 w-4 text-foreground/40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
135                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
136                    </svg>
137                  )}
138                  {badge.icon === "users" && (
139                    <svg className="h-4 w-4 text-foreground/40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
140                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
141                    </svg>
142                  )}
143                </div>
144                <span className="text-xs tracking-wide text-muted-foreground">{badge.text}</span>
145              </div>
146            ))}
147          </div>
148        </div>
149      </div>
150    </section>
151  );
152}