アイコンフィーチャー

1// アイコン付きフィーチャー - ライト/ダーク両対応
2export function FeatureIcons001() {
3  const features = [
4    {
5      icon: (
6        <svg
7          className="h-6 w-6"
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="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
17          />
18        </svg>
19      ),
20      title: "Global Infrastructure",
21      description:
22        "Deploy to 50+ regions worldwide with automatic failover and load balancing.",
23    },
24    {
25      icon: (
26        <svg
27          className="h-6 w-6"
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="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"
37          />
38        </svg>
39      ),
40      title: "Security First",
41      description:
42        "End-to-end encryption with SOC 2 compliance and regular security audits.",
43    },
44    {
45      icon: (
46        <svg
47          className="h-6 w-6"
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="M13 10V3L4 14h7v7l9-11h-7z"
57          />
58        </svg>
59      ),
60      title: "Instant Performance",
61      description:
62        "Edge computing and smart caching for sub-100ms response times globally.",
63    },
64    {
65      icon: (
66        <svg
67          className="h-6 w-6"
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="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
77          />
78        </svg>
79      ),
80      title: "Managed Database",
81      description:
82        "Automatic backups, scaling, and zero-downtime migrations included.",
83    },
84  ];
85
86  return (
87    <section className="relative bg-background py-32">
88      {/* コーナードット装飾 */}
89      <div className="absolute left-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
90      <div className="absolute right-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
91      <div className="absolute bottom-8 left-8 h-1 w-1 rounded-full bg-foreground/20" />
92      <div className="absolute bottom-8 right-8 h-1 w-1 rounded-full bg-foreground/20" />
93
94      <div className="mx-auto max-w-6xl px-6">
95        {/* Header */}
96        <div className="mb-20 text-center">
97          <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
98            Platform
99          </p>
100          <h2 className="text-3xl font-light tracking-tight text-foreground sm:text-4xl">
101            Enterprise-grade infrastructure
102          </h2>
103          <p className="mx-auto mt-6 max-w-xl text-base font-light leading-relaxed text-muted-foreground">
104            Built on the same technology that powers the world&apos;s leading companies
105          </p>
106        </div>
107
108        {/* Features */}
109        <div className="grid grid-cols-1 gap-12 md:grid-cols-2">
110          {features.map((feature, index) => (
111            <div
112              key={index}
113              className="group relative border-l border-border pl-8"
114            >
115              {/* ドット */}
116              <div className="absolute -left-[3px] top-0 h-1.5 w-1.5 rounded-full bg-foreground/30 transition-colors group-hover:bg-foreground/60" />
117
118              {/* Icon */}
119              <div className="mb-6 text-muted-foreground transition-colors group-hover:text-foreground/60">
120                {feature.icon}
121              </div>
122
123              <h3 className="mb-3 text-lg font-light tracking-wide text-foreground">
124                {feature.title}
125              </h3>
126              <p className="text-sm font-light leading-relaxed text-muted-foreground">
127                {feature.description}
128              </p>
129            </div>
130          ))}
131        </div>
132
133        {/* CTA */}
134        <div className="mt-20 text-center">
135          <a
136            href="#"
137            className="inline-flex items-center gap-3 border border-border px-8 py-4 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground"
138          >
139            View Documentation
140            <svg
141              className="h-3 w-3"
142              fill="none"
143              stroke="currentColor"
144              viewBox="0 0 24 24"
145            >
146              <path
147                strokeLinecap="round"
148                strokeLinejoin="round"
149                strokeWidth={1}
150                d="M14 5l7 7m0 0l-7 7m7-7H3"
151              />
152            </svg>
153          </a>
154        </div>
155      </div>
156    </section>
157  );
158}