交互配置フィーチャー

1// 交互レイアウトフィーチャー - ライト/ダーク両対応
2export function FeatureAlternating001() {
3  const features = [
4    {
5      number: "01",
6      title: "Streamlined Workflow",
7      description:
8        "Automate repetitive tasks and focus on what matters most. Our intelligent system learns your patterns and suggests optimizations for maximum efficiency.",
9      tags: ["Automation", "AI-Powered"],
10    },
11    {
12      number: "02",
13      title: "Real-time Collaboration",
14      description:
15        "Work together seamlessly with your team. See changes instantly, leave comments, and never lose track of who did what in your projects.",
16      tags: ["Team", "Real-time"],
17    },
18    {
19      number: "03",
20      title: "Powerful Analytics",
21      description:
22        "Get deep insights into your data with beautiful dashboards and customizable reports. Make informed decisions backed by comprehensive data.",
23      tags: ["Analytics", "Reports"],
24    },
25  ];
26
27  return (
28    <section className="relative bg-background py-32">
29      {/* コーナードット装飾 */}
30      <div className="absolute left-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
31      <div className="absolute right-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
32      <div className="absolute bottom-8 left-8 h-1 w-1 rounded-full bg-foreground/20" />
33      <div className="absolute bottom-8 right-8 h-1 w-1 rounded-full bg-foreground/20" />
34
35      <div className="mx-auto max-w-5xl px-6">
36        {/* Header */}
37        <div className="mb-24 text-center">
38          <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
39            Features
40          </p>
41          <h2 className="text-3xl font-light tracking-tight text-foreground sm:text-4xl">
42            Everything you need to scale
43          </h2>
44          <p className="mx-auto mt-6 max-w-xl text-base font-light leading-relaxed text-muted-foreground">
45            Powerful tools designed to help teams work better together
46          </p>
47        </div>
48
49        {/* Feature Items */}
50        <div className="space-y-px bg-border">
51          {features.map((feature, index) => (
52            <div
53              key={index}
54              className={`flex flex-col bg-background lg:flex-row ${
55                index % 2 === 1 ? "lg:flex-row-reverse" : ""
56              }`}
57            >
58              {/* Number / Visual */}
59              <div className="flex items-center justify-center border-b border-border p-12 lg:w-1/3 lg:border-b-0 lg:border-r">
60                <span className="text-6xl font-extralight tracking-tight text-foreground/20">
61                  {feature.number}
62                </span>
63              </div>
64
65              {/* Content */}
66              <div className="relative p-10 lg:w-2/3 lg:p-12">
67                <div className="absolute right-4 top-4 h-1 w-1 rounded-full bg-foreground/20" />
68
69                {/* Tags */}
70                <div className="mb-6 flex flex-wrap gap-3">
71                  {feature.tags.map((tag) => (
72                    <span
73                      key={tag}
74                      className="border border-border px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground"
75                    >
76                      {tag}
77                    </span>
78                  ))}
79                </div>
80
81                <h3 className="mb-4 text-xl font-light tracking-wide text-foreground sm:text-2xl">
82                  {feature.title}
83                </h3>
84
85                <p className="mb-8 text-sm font-light leading-relaxed text-muted-foreground">
86                  {feature.description}
87                </p>
88
89                <a
90                  href="#"
91                  className="inline-flex items-center gap-3 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground transition-colors hover:text-foreground"
92                >
93                  Learn more
94                  <svg
95                    className="h-3 w-3"
96                    fill="none"
97                    stroke="currentColor"
98                    viewBox="0 0 24 24"
99                  >
100                    <path
101                      strokeLinecap="round"
102                      strokeLinejoin="round"
103                      strokeWidth={1}
104                      d="M14 5l7 7m0 0l-7 7m7-7H3"
105                    />
106                  </svg>
107                </a>
108              </div>
109            </div>
110          ))}
111        </div>
112      </div>
113    </section>
114  );
115}