フィーチャーグリッド

1// シンプルなグリッドレイアウトフィーチャー - ライト/ダーク両対応
2export function FeatureGrid001() {
3  const features = [
4    {
5      title: "Performance",
6      description: "Optimized for speed with instant load times.",
7    },
8    {
9      title: "Security",
10      description: "Enterprise-grade protection for your data.",
11    },
12    {
13      title: "Scalability",
14      description: "Grows seamlessly with your business needs.",
15    },
16    {
17      title: "Integration",
18      description: "Connect with your favorite tools easily.",
19    },
20    {
21      title: "Analytics",
22      description: "Deep insights into your operations.",
23    },
24    {
25      title: "Support",
26      description: "24/7 dedicated customer assistance.",
27    },
28  ];
29
30  return (
31    <section className="relative bg-background py-32">
32      {/* コーナードット装飾 */}
33      <div className="absolute left-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
34      <div className="absolute right-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
35      <div className="absolute bottom-8 left-8 h-1 w-1 rounded-full bg-foreground/20" />
36      <div className="absolute bottom-8 right-8 h-1 w-1 rounded-full bg-foreground/20" />
37
38      <div className="mx-auto max-w-5xl px-6">
39        {/* Header */}
40        <div className="mb-20">
41          <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
42            Why Choose Us
43          </p>
44          <div className="flex flex-col justify-between gap-6 lg:flex-row lg:items-end">
45            <h2 className="max-w-lg text-3xl font-light tracking-tight text-foreground sm:text-4xl">
46              Built for modern teams
47            </h2>
48            <p className="max-w-sm text-sm font-light leading-relaxed text-muted-foreground">
49              Everything you need to build, deploy, and scale your applications.
50            </p>
51          </div>
52        </div>
53
54        {/* Grid */}
55        <div className="grid grid-cols-1 gap-px bg-border sm:grid-cols-2 lg:grid-cols-3">
56          {features.map((feature, index) => (
57            <div key={index} className="group relative bg-background p-8">
58              {/* 番号 */}
59              <span className="mb-6 block text-xs font-medium tracking-[0.2em] text-foreground/20">
60                0{index + 1}
61              </span>
62
63              <h3 className="mb-3 text-base font-light tracking-wide text-foreground">
64                {feature.title}
65              </h3>
66              <p className="text-sm font-light leading-relaxed text-muted-foreground">
67                {feature.description}
68              </p>
69
70              {/* ホバーライン */}
71              <div className="absolute bottom-0 left-0 h-px w-0 bg-foreground/30 transition-all duration-500 group-hover:w-full" />
72            </div>
73          ))}
74        </div>
75      </div>
76    </section>
77  );
78}