ミニマルフィーチャー

1// 超ミニマルフィーチャー - ライト/ダーク両対応
2export function FeatureMinimal001() {
3  const features = [
4    "Instant deployments",
5    "Edge network",
6    "Serverless functions",
7    "Database integration",
8    "Custom domains",
9    "SSL certificates",
10    "Analytics dashboard",
11    "Team collaboration",
12  ];
13
14  return (
15    <section className="relative bg-background py-32">
16      {/* コーナードット装飾 */}
17      <div className="absolute left-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
18      <div className="absolute right-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
19      <div className="absolute bottom-8 left-8 h-1 w-1 rounded-full bg-foreground/20" />
20      <div className="absolute bottom-8 right-8 h-1 w-1 rounded-full bg-foreground/20" />
21
22      <div className="mx-auto max-w-4xl px-6">
23        {/* Header */}
24        <div className="mb-16 text-center">
25          <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
26            Included
27          </p>
28          <h2 className="text-3xl font-light tracking-tight text-foreground sm:text-4xl">
29            Everything built in
30          </h2>
31        </div>
32
33        {/* Feature List */}
34        <div className="grid grid-cols-1 gap-0 sm:grid-cols-2">
35          {features.map((feature, index) => (
36            <div
37              key={index}
38              className="group flex items-center gap-4 border-b border-border py-5 transition-colors hover:bg-muted/50"
39            >
40              {/* Check */}
41              <div className="flex h-5 w-5 shrink-0 items-center justify-center">
42                <div className="h-1 w-1 rounded-full bg-muted-foreground transition-colors group-hover:bg-foreground/60" />
43              </div>
44
45              {/* Text */}
46              <span className="text-sm font-light tracking-wide text-foreground/70 transition-colors group-hover:text-foreground">
47                {feature}
48              </span>
49            </div>
50          ))}
51        </div>
52
53        {/* Footer */}
54        <div className="mt-16 text-center">
55          <p className="mb-6 text-sm font-light text-muted-foreground">
56            No hidden fees. No surprises.
57          </p>
58          <a
59            href="#"
60            className="inline-flex items-center gap-3 border border-border px-8 py-4 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground"
61          >
62            View Pricing
63          </a>
64        </div>
65      </div>
66    </section>
67  );
68}