フィーチャーリスト

1export function FeatureList001() {
2  const features = [
3    {
4      icon: (
5        <svg
6          className="h-6 w-6"
7          fill="none"
8          stroke="currentColor"
9          viewBox="0 0 24 24"
10        >
11          <path
12            strokeLinecap="round"
13            strokeLinejoin="round"
14            strokeWidth={2}
15            d="M13 10V3L4 14h7v7l9-11h-7z"
16          />
17        </svg>
18      ),
19      title: "Lightning Fast",
20      description:
21        "Built for speed with optimized performance. Experience instant load times and smooth interactions.",
22    },
23    {
24      icon: (
25        <svg
26          className="h-6 w-6"
27          fill="none"
28          stroke="currentColor"
29          viewBox="0 0 24 24"
30        >
31          <path
32            strokeLinecap="round"
33            strokeLinejoin="round"
34            strokeWidth={2}
35            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"
36          />
37        </svg>
38      ),
39      title: "Enterprise Security",
40      description:
41        "Bank-level encryption and security protocols keep your data safe and compliant.",
42    },
43    {
44      icon: (
45        <svg
46          className="h-6 w-6"
47          fill="none"
48          stroke="currentColor"
49          viewBox="0 0 24 24"
50        >
51          <path
52            strokeLinecap="round"
53            strokeLinejoin="round"
54            strokeWidth={2}
55            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"
56          />
57        </svg>
58      ),
59      title: "Flexible Layout",
60      description:
61        "Customize every aspect of your workspace with drag-and-drop simplicity.",
62    },
63    {
64      icon: (
65        <svg
66          className="h-6 w-6"
67          fill="none"
68          stroke="currentColor"
69          viewBox="0 0 24 24"
70        >
71          <path
72            strokeLinecap="round"
73            strokeLinejoin="round"
74            strokeWidth={2}
75            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
76          />
77        </svg>
78      ),
79      title: "Team Collaboration",
80      description:
81        "Work together seamlessly with real-time collaboration and commenting features.",
82    },
83    {
84      icon: (
85        <svg
86          className="h-6 w-6"
87          fill="none"
88          stroke="currentColor"
89          viewBox="0 0 24 24"
90        >
91          <path
92            strokeLinecap="round"
93            strokeLinejoin="round"
94            strokeWidth={2}
95            d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
96          />
97        </svg>
98      ),
99      title: "Advanced Analytics",
100      description:
101        "Get deep insights with comprehensive analytics and customizable dashboards.",
102    },
103    {
104      icon: (
105        <svg
106          className="h-6 w-6"
107          fill="none"
108          stroke="currentColor"
109          viewBox="0 0 24 24"
110        >
111          <path
112            strokeLinecap="round"
113            strokeLinejoin="round"
114            strokeWidth={2}
115            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"
116          />
117        </svg>
118      ),
119      title: "Easy Integrations",
120      description:
121        "Connect with 100+ popular tools and services with just a few clicks.",
122    },
123  ];
124
125  return (
126    <section className="bg-white py-24 dark:bg-zinc-950">
127      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
128        {/* Header */}
129        <div className="mx-auto max-w-2xl text-center">
130          <span className="text-sm font-semibold uppercase tracking-wide text-indigo-600 dark:text-indigo-400">
131            Features
132          </span>
133          <h2 className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
134            Everything you need to succeed
135          </h2>
136          <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
137            Powerful features designed to help you build better products faster
138          </p>
139        </div>
140
141        {/* Feature Grid */}
142        <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
143          {features.map((feature, index) => (
144            <div
145              key={index}
146              className="group relative rounded-2xl border border-gray-200 bg-white p-8 transition-all hover:border-indigo-200 hover:shadow-lg dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-indigo-900"
147            >
148              {/* Icon */}
149              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-100 text-indigo-600 transition-colors group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-900/30 dark:text-indigo-400 dark:group-hover:bg-indigo-600 dark:group-hover:text-white">
150                {feature.icon}
151              </div>
152
153              {/* Content */}
154              <h3 className="mt-6 text-lg font-semibold text-gray-900 dark:text-white">
155                {feature.title}
156              </h3>
157              <p className="mt-2 text-gray-600 dark:text-gray-400">
158                {feature.description}
159              </p>
160
161              {/* Learn More Link */}
162              <a
163                href="#"
164                className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-indigo-600 opacity-0 transition-opacity group-hover:opacity-100 dark:text-indigo-400"
165              >
166                Learn more
167                <svg
168                  className="h-4 w-4"
169                  fill="none"
170                  stroke="currentColor"
171                  viewBox="0 0 24 24"
172                >
173                  <path
174                    strokeLinecap="round"
175                    strokeLinejoin="round"
176                    strokeWidth={2}
177                    d="M9 5l7 7-7 7"
178                  />
179                </svg>
180              </a>
181            </div>
182          ))}
183        </div>
184      </div>
185    </section>
186  );
187}