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

1export function FeatureBento001() {
2  return (
3    <section className="bg-zinc-50 py-24 dark:bg-zinc-950">
4      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
5        {/* ヘッダー */}
6        <div className="mb-16 text-center">
7          <h2 className="mb-4 text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-4xl">
8            Everything you need
9          </h2>
10          <p className="mx-auto max-w-2xl text-lg text-zinc-600 dark:text-zinc-400">
11            Powerful features designed to help you build faster and smarter.
12          </p>
13        </div>
14
15        {/* ベントーグリッド */}
16        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 md:grid-rows-2">
17          {/* 大きなカード（左） */}
18          <div className="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-violet-500 to-purple-600 p-6 text-white sm:col-span-2 sm:p-8 md:col-span-1 md:row-span-2">
19            <div className="relative z-10">
20              <div className="mb-4 inline-flex rounded-lg bg-white/20 p-3">
21                <svg
22                  className="h-6 w-6"
23                  fill="none"
24                  viewBox="0 0 24 24"
25                  stroke="currentColor"
26                >
27                  <path
28                    strokeLinecap="round"
29                    strokeLinejoin="round"
30                    strokeWidth={2}
31                    d="M13 10V3L4 14h7v7l9-11h-7z"
32                  />
33                </svg>
34              </div>
35              <h3 className="mb-2 text-xl font-semibold">Lightning Fast</h3>
36              <p className="text-white/80">
37                Optimized for performance with instant load times and smooth
38                interactions.
39              </p>
40            </div>
41            <div className="absolute -bottom-8 -right-8 h-32 w-32 rounded-full bg-white/10 transition-transform group-hover:scale-150" />
42          </div>
43
44          {/* 上段中央 */}
45          <div className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
46            <div className="mb-4 inline-flex rounded-lg bg-cyan-100 p-3 text-cyan-600 dark:bg-cyan-900/30 dark:text-cyan-400">
47              <svg
48                className="h-6 w-6"
49                fill="none"
50                viewBox="0 0 24 24"
51                stroke="currentColor"
52              >
53                <path
54                  strokeLinecap="round"
55                  strokeLinejoin="round"
56                  strokeWidth={2}
57                  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"
58                />
59              </svg>
60            </div>
61            <h3 className="mb-2 font-semibold text-zinc-900 dark:text-zinc-100">
62              Customizable
63            </h3>
64            <p className="text-sm text-zinc-600 dark:text-zinc-400">
65              Tailor every aspect to match your brand perfectly.
66            </p>
67          </div>
68
69          {/* 上段右 */}
70          <div className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
71            <div className="mb-4 inline-flex rounded-lg bg-orange-100 p-3 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400">
72              <svg
73                className="h-6 w-6"
74                fill="none"
75                viewBox="0 0 24 24"
76                stroke="currentColor"
77              >
78                <path
79                  strokeLinecap="round"
80                  strokeLinejoin="round"
81                  strokeWidth={2}
82                  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"
83                />
84              </svg>
85            </div>
86            <h3 className="mb-2 font-semibold text-zinc-900 dark:text-zinc-100">
87              Responsive
88            </h3>
89            <p className="text-sm text-zinc-600 dark:text-zinc-400">
90              Looks great on any device, from mobile to desktop.
91            </p>
92          </div>
93
94          {/* 下段（横長） */}
95          <div className="rounded-2xl bg-zinc-900 p-6 text-white sm:col-span-2 dark:bg-zinc-800">
96            <div className="flex items-start gap-4">
97              <div className="inline-flex shrink-0 rounded-lg bg-white/10 p-3">
98                <svg
99                  className="h-6 w-6"
100                  fill="none"
101                  viewBox="0 0 24 24"
102                  stroke="currentColor"
103                >
104                  <path
105                    strokeLinecap="round"
106                    strokeLinejoin="round"
107                    strokeWidth={2}
108                    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"
109                  />
110                </svg>
111              </div>
112              <div>
113                <h3 className="mb-2 font-semibold">Enterprise Security</h3>
114                <p className="text-sm text-zinc-400">
115                  Bank-grade encryption and security measures to keep your data
116                  safe. SOC 2 compliant and GDPR ready.
117                </p>
118              </div>
119            </div>
120          </div>
121        </div>
122      </div>
123    </section>
124  );
125}