ナンバードフィーチャー

1// 番号付きリストフィーチャー - ライト/ダーク両対応
2export function FeatureNumbered001() {
3  const features = [
4    {
5      number: "01",
6      title: "Define Your Goals",
7      description:
8        "Start by outlining your objectives. Our platform adapts to your specific needs and scales with your ambitions.",
9    },
10    {
11      number: "02",
12      title: "Configure Your Workflow",
13      description:
14        "Set up automated pipelines with our intuitive interface. No coding required, just drag, drop, and deploy.",
15    },
16    {
17      number: "03",
18      title: "Monitor & Iterate",
19      description:
20        "Track performance in real-time with comprehensive dashboards. Make data-driven decisions effortlessly.",
21    },
22    {
23      number: "04",
24      title: "Scale Infinitely",
25      description:
26        "As your needs grow, our infrastructure scales automatically. Focus on building, not managing servers.",
27    },
28  ];
29
30  return (
31    <section className="relative bg-background py-32">
32      {/* コーナードット装飾 */}
33      <div className="absolute left-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
34      <div className="absolute right-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
35      <div className="absolute bottom-8 left-8 h-1 w-1 rounded-full bg-foreground/20" />
36      <div className="absolute bottom-8 right-8 h-1 w-1 rounded-full bg-foreground/20" />
37
38      <div className="mx-auto max-w-5xl px-6">
39        {/* Header */}
40        <div className="mb-20 lg:mb-24">
41          <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
42            How It Works
43          </p>
44          <h2 className="max-w-2xl text-3xl font-light tracking-tight text-foreground sm:text-4xl">
45            Four steps to transform your workflow
46          </h2>
47        </div>
48
49        {/* Numbered List */}
50        <div className="space-y-0">
51          {features.map((feature, index) => (
52            <div
53              key={index}
54              className="group border-t border-border py-10 first:border-t-0 lg:py-12"
55            >
56              <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:gap-16">
57                {/* Number */}
58                <div className="shrink-0">
59                  <span className="text-5xl font-extralight tracking-tight text-foreground/10 transition-colors group-hover:text-foreground/20 lg:text-6xl">
60                    {feature.number}
61                  </span>
62                </div>
63
64                {/* Content */}
65                <div className="flex-1">
66                  <h3 className="mb-4 text-xl font-light tracking-wide text-foreground lg:text-2xl">
67                    {feature.title}
68                  </h3>
69                  <p className="max-w-xl text-sm font-light leading-relaxed text-muted-foreground">
70                    {feature.description}
71                  </p>
72                </div>
73
74                {/* Arrow */}
75                <div className="hidden shrink-0 text-foreground/20 transition-colors group-hover:text-foreground/40 lg:block">
76                  <svg
77                    className="h-5 w-5"
78                    fill="none"
79                    stroke="currentColor"
80                    viewBox="0 0 24 24"
81                  >
82                    <path
83                      strokeLinecap="round"
84                      strokeLinejoin="round"
85                      strokeWidth={1}
86                      d="M14 5l7 7m0 0l-7 7m7-7H3"
87                    />
88                  </svg>
89                </div>
90              </div>
91            </div>
92          ))}
93        </div>
94
95        {/* CTA */}
96        <div className="mt-16 border-t border-border pt-12">
97          <a
98            href="#"
99            className="inline-flex items-center gap-3 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground transition-colors hover:text-foreground"
100          >
101            Get Started Today
102            <svg
103              className="h-3 w-3"
104              fill="none"
105              stroke="currentColor"
106              viewBox="0 0 24 24"
107            >
108              <path
109                strokeLinecap="round"
110                strokeLinejoin="round"
111                strokeWidth={1}
112                d="M14 5l7 7m0 0l-7 7m7-7H3"
113              />
114            </svg>
115          </a>
116        </div>
117      </div>
118    </section>
119  );
120}