フィーチャーリスト

1// フィーチャーリスト - ライト/ダーク両対応
2export function FeatureList001() {
3  const features = [
4    {
5      icon: (
6        <svg
7          className="h-5 w-5"
8          fill="none"
9          stroke="currentColor"
10          viewBox="0 0 24 24"
11          strokeWidth={1}
12        >
13          <path
14            strokeLinecap="round"
15            strokeLinejoin="round"
16            d="M13 10V3L4 14h7v7l9-11h-7z"
17          />
18        </svg>
19      ),
20      title: "Lightning Fast",
21      description:
22        "Built for speed with optimized performance. Experience instant load times and smooth interactions.",
23    },
24    {
25      icon: (
26        <svg
27          className="h-5 w-5"
28          fill="none"
29          stroke="currentColor"
30          viewBox="0 0 24 24"
31          strokeWidth={1}
32        >
33          <path
34            strokeLinecap="round"
35            strokeLinejoin="round"
36            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"
37          />
38        </svg>
39      ),
40      title: "Enterprise Security",
41      description:
42        "Bank-level encryption and security protocols keep your data safe and compliant.",
43    },
44    {
45      icon: (
46        <svg
47          className="h-5 w-5"
48          fill="none"
49          stroke="currentColor"
50          viewBox="0 0 24 24"
51          strokeWidth={1}
52        >
53          <path
54            strokeLinecap="round"
55            strokeLinejoin="round"
56            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"
57          />
58        </svg>
59      ),
60      title: "Flexible Layout",
61      description:
62        "Customize every aspect of your workspace with drag-and-drop simplicity.",
63    },
64    {
65      icon: (
66        <svg
67          className="h-5 w-5"
68          fill="none"
69          stroke="currentColor"
70          viewBox="0 0 24 24"
71          strokeWidth={1}
72        >
73          <path
74            strokeLinecap="round"
75            strokeLinejoin="round"
76            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"
77          />
78        </svg>
79      ),
80      title: "Team Collaboration",
81      description:
82        "Work together seamlessly with real-time collaboration and commenting features.",
83    },
84    {
85      icon: (
86        <svg
87          className="h-5 w-5"
88          fill="none"
89          stroke="currentColor"
90          viewBox="0 0 24 24"
91          strokeWidth={1}
92        >
93          <path
94            strokeLinecap="round"
95            strokeLinejoin="round"
96            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"
97          />
98        </svg>
99      ),
100      title: "Advanced Analytics",
101      description:
102        "Get deep insights with comprehensive analytics and customizable dashboards.",
103    },
104    {
105      icon: (
106        <svg
107          className="h-5 w-5"
108          fill="none"
109          stroke="currentColor"
110          viewBox="0 0 24 24"
111          strokeWidth={1}
112        >
113          <path
114            strokeLinecap="round"
115            strokeLinejoin="round"
116            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"
117          />
118        </svg>
119      ),
120      title: "Easy Integrations",
121      description:
122        "Connect with 100+ popular tools and services with just a few clicks.",
123    },
124  ];
125
126  return (
127    <section className="relative bg-background py-32">
128      {/* コーナードット装飾 */}
129      <div className="absolute left-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
130      <div className="absolute right-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
131      <div className="absolute bottom-8 left-8 h-1 w-1 rounded-full bg-foreground/20" />
132      <div className="absolute bottom-8 right-8 h-1 w-1 rounded-full bg-foreground/20" />
133
134      <div className="mx-auto max-w-6xl px-6">
135        {/* Header */}
136        <div className="mb-20 text-center">
137          <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
138            Features
139          </p>
140          <h2 className="text-3xl font-light tracking-tight text-foreground sm:text-4xl">
141            Everything you need to succeed
142          </h2>
143          <p className="mx-auto mt-6 max-w-xl text-base font-light leading-relaxed text-muted-foreground">
144            Powerful features designed to help you build better products faster
145          </p>
146        </div>
147
148        {/* Feature Grid */}
149        <div className="grid grid-cols-1 gap-px bg-border sm:grid-cols-2 lg:grid-cols-3">
150          {features.map((feature, index) => (
151            <div key={index} className="group relative bg-background p-8">
152              {/* コーナードット */}
153              <div className="absolute right-4 top-4 h-1 w-1 rounded-full bg-foreground/20" />
154
155              {/* Icon */}
156              <div className="mb-6 text-muted-foreground transition-colors group-hover:text-foreground/60">
157                {feature.icon}
158              </div>
159
160              {/* Content */}
161              <h3 className="mb-3 text-base font-light tracking-wide text-foreground">
162                {feature.title}
163              </h3>
164              <p className="text-sm font-light leading-relaxed text-muted-foreground">
165                {feature.description}
166              </p>
167
168              {/* Hover line */}
169              <div className="absolute bottom-0 left-0 h-px w-0 bg-foreground/20 transition-all duration-500 group-hover:w-full" />
170            </div>
171          ))}
172        </div>
173      </div>
174    </section>
175  );
176}