タイムラインフィーチャー

1export function FeatureTimeline001() {
2  const features = [
3    {
4      year: "Phase 01",
5      title: "基盤構築",
6      description:
7        "堅牢なインフラストラクチャと自動化されたデプロイメントパイプラインを整備。チーム全員が同じ環境で開発可能に。",
8      details: ["CI/CD パイプライン", "インフラ自動化", "開発環境統一"],
9    },
10    {
11      year: "Phase 02",
12      title: "プロダクト開発",
13      description:
14        "ユーザーリサーチに基づいた機能設計と、高速なイテレーションサイクルでプロダクトを磨き上げる。",
15      details: ["ユーザーリサーチ", "プロトタイピング", "A/Bテスト基盤"],
16    },
17    {
18      year: "Phase 03",
19      title: "スケーリング",
20      description:
21        "グローバル展開に向けたアーキテクチャの最適化と、パフォーマンスモニタリングの高度化。",
22      details: ["エッジ配信", "パフォーマンス最適化", "グローバル対応"],
23    },
24    {
25      year: "Phase 04",
26      title: "エコシステム拡張",
27      description:
28        "API公開とパートナー連携により、プラットフォームとしての価値を拡大。外部開発者のエコシステムを育成。",
29      details: ["API公開", "パートナー連携", "開発者ポータル"],
30    },
31  ];
32
33  return (
34    <section className="relative bg-background py-32">
35      <div className="absolute left-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
36      <div className="absolute right-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
37
38      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
39        <div className="flex items-center gap-4">
40          <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
41          <div className="h-px w-12 bg-border/40" />
42        </div>
43
44        <p className="mt-6 text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
45          Roadmap
46        </p>
47
48        <h2 className="mt-4 text-3xl font-medium leading-snug tracking-wide text-foreground sm:text-4xl">
49          段階的に、
50          <br />
51          確実に前進する。
52        </h2>
53
54        <p className="mt-6 max-w-lg text-sm font-light leading-relaxed text-muted-foreground">
55          プロダクトの成長に合わせた段階的なアプローチで、
56          持続可能なスケーリングを実現します。
57        </p>
58
59        <div className="mt-20 space-y-0">
60          {features.map((feature, index) => (
61            <div
62              key={feature.year}
63              className="group relative grid grid-cols-1 gap-6 border-t border-border py-10 sm:grid-cols-12 sm:gap-8"
64            >
65              <div className="sm:col-span-3">
66                <span className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60">
67                  {feature.year}
68                </span>
69              </div>
70
71              <div className="sm:col-span-5">
72                <h3 className="text-lg font-medium tracking-wide text-foreground">
73                  {feature.title}
74                </h3>
75                <p className="mt-3 text-sm font-light leading-relaxed text-muted-foreground">
76                  {feature.description}
77                </p>
78              </div>
79
80              <div className="sm:col-span-4">
81                <div className="space-y-2.5">
82                  {feature.details.map((detail) => (
83                    <div key={detail} className="flex items-center gap-3">
84                      <div className="h-px w-3 bg-foreground/20" />
85                      <span className="text-xs font-light tracking-wide text-foreground/70">
86                        {detail}
87                      </span>
88                    </div>
89                  ))}
90                </div>
91              </div>
92
93              {index === features.length - 1 && (
94                <div className="col-span-full h-px bg-border" />
95              )}
96            </div>
97          ))}
98        </div>
99
100        <div className="mt-12 text-center">
101          <a
102            href="#"
103            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"
104          >
105            詳細を見る
106            <div className="h-px w-4 bg-current" />
107          </a>
108        </div>
109      </div>
110    </section>
111  );
112}