ベントーグリッドフィーチャー

1// ベントーグリッドフィーチャー - ライト/ダーク両対応
2export function FeatureBento001() {
3  return (
4    <section className="relative bg-background py-32">
5      {/* コーナードット装飾 */}
6      <div className="absolute left-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
7      <div className="absolute right-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
8      <div className="absolute bottom-8 left-8 h-1 w-1 rounded-full bg-foreground/20" />
9      <div className="absolute bottom-8 right-8 h-1 w-1 rounded-full bg-foreground/20" />
10
11      <div className="mx-auto max-w-6xl px-6">
12        {/* ヘッダー */}
13        <div className="mb-20 text-center">
14          <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
15            Core Features
16          </p>
17          <h2 className="text-3xl font-light tracking-tight text-foreground sm:text-4xl">
18            Everything you need
19          </h2>
20          <p className="mx-auto mt-6 max-w-xl text-base font-light leading-relaxed text-muted-foreground">
21            Powerful features designed to help you build faster and smarter.
22          </p>
23        </div>
24
25        {/* ベントーグリッド */}
26        <div className="grid grid-cols-1 gap-px bg-border sm:grid-cols-2 md:grid-cols-3 md:grid-rows-2">
27          {/* 大きなカード（左） */}
28          <div className="relative bg-background p-8 sm:col-span-2 md:col-span-1 md:row-span-2 md:p-10">
29            <div className="absolute right-4 top-4 h-1 w-1 rounded-full bg-foreground/20" />
30            <div className="mb-8">
31              <svg
32                className="h-5 w-5 text-muted-foreground"
33                fill="none"
34                viewBox="0 0 24 24"
35                stroke="currentColor"
36                strokeWidth={1}
37              >
38                <path
39                  strokeLinecap="round"
40                  strokeLinejoin="round"
41                  d="M13 10V3L4 14h7v7l9-11h-7z"
42                />
43              </svg>
44            </div>
45            <h3 className="mb-4 text-lg font-light tracking-wide text-foreground">
46              Lightning Fast
47            </h3>
48            <p className="text-sm font-light leading-relaxed text-muted-foreground">
49              Optimized for performance with instant load times and smooth
50              interactions. Built on the latest technologies.
51            </p>
52          </div>
53
54          {/* 上段中央 */}
55          <div className="relative bg-background p-8">
56            <div className="absolute right-4 top-4 h-1 w-1 rounded-full bg-foreground/20" />
57            <div className="mb-6">
58              <svg
59                className="h-5 w-5 text-muted-foreground"
60                fill="none"
61                viewBox="0 0 24 24"
62                stroke="currentColor"
63                strokeWidth={1}
64              >
65                <path
66                  strokeLinecap="round"
67                  strokeLinejoin="round"
68                  d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
69                />
70              </svg>
71            </div>
72            <h3 className="mb-3 text-base font-light tracking-wide text-foreground">
73              Customizable
74            </h3>
75            <p className="text-sm font-light leading-relaxed text-muted-foreground">
76              Tailor every aspect to match your brand perfectly.
77            </p>
78          </div>
79
80          {/* 上段右 */}
81          <div className="relative bg-background p-8">
82            <div className="absolute right-4 top-4 h-1 w-1 rounded-full bg-foreground/20" />
83            <div className="mb-6">
84              <svg
85                className="h-5 w-5 text-muted-foreground"
86                fill="none"
87                viewBox="0 0 24 24"
88                stroke="currentColor"
89                strokeWidth={1}
90              >
91                <path
92                  strokeLinecap="round"
93                  strokeLinejoin="round"
94                  d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
95                />
96              </svg>
97            </div>
98            <h3 className="mb-3 text-base font-light tracking-wide text-foreground">
99              Responsive
100            </h3>
101            <p className="text-sm font-light leading-relaxed text-muted-foreground">
102              Looks great on any device, from mobile to desktop.
103            </p>
104          </div>
105
106          {/* 下段（横長） */}
107          <div className="relative bg-background p-8 sm:col-span-2">
108            <div className="absolute right-4 top-4 h-1 w-1 rounded-full bg-foreground/20" />
109            <div className="flex items-start gap-6">
110              <div className="shrink-0">
111                <svg
112                  className="h-5 w-5 text-muted-foreground"
113                  fill="none"
114                  viewBox="0 0 24 24"
115                  stroke="currentColor"
116                  strokeWidth={1}
117                >
118                  <path
119                    strokeLinecap="round"
120                    strokeLinejoin="round"
121                    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"
122                  />
123                </svg>
124              </div>
125              <div>
126                <h3 className="mb-3 text-base font-light tracking-wide text-foreground">
127                  Enterprise Security
128                </h3>
129                <p className="text-sm font-light leading-relaxed text-muted-foreground">
130                  Bank-grade encryption and security measures to keep your data
131                  safe. SOC 2 compliant and GDPR ready.
132                </p>
133              </div>
134            </div>
135          </div>
136        </div>
137      </div>
138    </section>
139  );
140}