交互配置フィーチャー

1import Image from "next/image";
2import Link from "next/link";
3
4export function FeatureAlternating001() {
5  const features = [
6    {
7      title: "Streamlined Workflow",
8      description:
9        "Automate repetitive tasks and focus on what matters most. Our intelligent system learns your patterns and suggests optimizations.",
10      image:
11        "https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=600&fit=crop",
12      badges: ["Automation", "AI-Powered"],
13    },
14    {
15      title: "Real-time Collaboration",
16      description:
17        "Work together seamlessly with your team. See changes instantly, leave comments, and never lose track of who did what.",
18      image:
19        "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=600&fit=crop",
20      badges: ["Team", "Real-time"],
21    },
22    {
23      title: "Powerful Analytics",
24      description:
25        "Get deep insights into your data with beautiful dashboards and customizable reports. Make informed decisions backed by data.",
26      image:
27        "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop",
28      badges: ["Analytics", "Reports"],
29    },
30  ];
31
32  return (
33    <section className="bg-gray-50 py-24 dark:bg-zinc-950">
34      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
35        {/* Header */}
36        <div className="mx-auto max-w-2xl text-center">
37          <span className="text-sm font-semibold uppercase tracking-wide text-indigo-600 dark:text-indigo-400">
38            Features
39          </span>
40          <h2 className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
41            Everything you need to scale
42          </h2>
43          <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
44            Powerful tools designed to help teams work better together
45          </p>
46        </div>
47
48        {/* Feature Items */}
49        <div className="mt-20 space-y-24">
50          {features.map((feature, index) => (
51            <div
52              key={index}
53              className={`flex flex-col items-center gap-12 lg:flex-row ${
54                index % 2 === 1 ? "lg:flex-row-reverse" : ""
55              }`}
56            >
57              {/* Image */}
58              <div className="w-full lg:w-1/2">
59                <div className="relative aspect-[4/3] overflow-hidden rounded-2xl shadow-2xl">
60                  <Image
61                    src={feature.image}
62                    alt={feature.title}
63                    fill
64                    className="object-cover"
65                  />
66                </div>
67              </div>
68
69              {/* Content */}
70              <div className="w-full lg:w-1/2">
71                {/* Badges */}
72                <div className="mb-4 flex flex-wrap gap-2">
73                  {feature.badges.map((badge) => (
74                    <span
75                      key={badge}
76                      className="rounded-full bg-indigo-100 px-3 py-1 text-sm font-medium text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
77                    >
78                      {badge}
79                    </span>
80                  ))}
81                </div>
82
83                <h3 className="text-xl font-bold text-gray-900 sm:text-2xl md:text-3xl dark:text-white">
84                  {feature.title}
85                </h3>
86
87                <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
88                  {feature.description}
89                </p>
90
91                <Link
92                  href="#"
93                  className="mt-6 inline-flex items-center gap-2 font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400"
94                >
95                  Learn more
96                  <svg
97                    className="h-4 w-4"
98                    fill="none"
99                    stroke="currentColor"
100                    viewBox="0 0 24 24"
101                  >
102                    <path
103                      strokeLinecap="round"
104                      strokeLinejoin="round"
105                      strokeWidth={2}
106                      d="M14 5l7 7m0 0l-7 7m7-7H3"
107                    />
108                  </svg>
109                </Link>
110              </div>
111            </div>
112          ))}
113        </div>
114      </div>
115    </section>
116  );
117}