フィーチャーカード

1// カード形式フィーチャー - ライト/ダーク両対応
2export function FeatureCards001() {
3  const features = [
4    {
5      tag: "Development",
6      title: "Build with Confidence",
7      description:
8        "TypeScript-first APIs with full type safety. Catch errors before they reach production.",
9      stats: "99.9% uptime",
10    },
11    {
12      tag: "Deployment",
13      title: "Ship Faster",
14      description:
15        "Preview deployments for every pull request. Collaborate and iterate in real-time.",
16      stats: "< 50ms deploys",
17    },
18    {
19      tag: "Monitoring",
20      title: "Stay Informed",
21      description:
22        "Real-time logs, metrics, and alerts. Know exactly what is happening at all times.",
23      stats: "Zero blind spots",
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-6xl px-6">
36        {/* Header */}
37        <div className="mb-20">
38          <div className="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
39            <div>
40              <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
41                Capabilities
42              </p>
43              <h2 className="max-w-md text-3xl font-light tracking-tight text-foreground sm:text-4xl">
44                The complete platform for modern apps
45              </h2>
46            </div>
47            <a
48              href="#"
49              className="inline-flex items-center gap-3 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground transition-colors hover:text-foreground"
50            >
51              All Features
52              <svg
53                className="h-3 w-3"
54                fill="none"
55                stroke="currentColor"
56                viewBox="0 0 24 24"
57              >
58                <path
59                  strokeLinecap="round"
60                  strokeLinejoin="round"
61                  strokeWidth={1}
62                  d="M14 5l7 7m0 0l-7 7m7-7H3"
63                />
64              </svg>
65            </a>
66          </div>
67        </div>
68
69        {/* Cards */}
70        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
71          {features.map((feature, index) => (
72            <div
73              key={index}
74              className="group relative border border-border bg-background p-8 transition-colors hover:border-foreground/20"
75            >
76              {/* コーナードット */}
77              <div className="absolute right-4 top-4 h-1 w-1 rounded-full bg-foreground/20" />
78
79              {/* Tag */}
80              <span className="mb-8 inline-block text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
81                {feature.tag}
82              </span>
83
84              {/* Content */}
85              <h3 className="mb-4 text-xl font-light tracking-wide text-foreground">
86                {feature.title}
87              </h3>
88              <p className="mb-8 text-sm font-light leading-relaxed text-muted-foreground">
89                {feature.description}
90              </p>
91
92              {/* Stats */}
93              <div className="border-t border-border pt-6">
94                <span className="text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
95                  {feature.stats}
96                </span>
97              </div>
98
99              {/* Hover line */}
100              <div className="absolute bottom-0 left-0 h-0.5 w-0 bg-foreground/20 transition-all duration-500 group-hover:w-full" />
101            </div>
102          ))}
103        </div>
104      </div>
105    </section>
106  );
107}