タイムライン統計

1export function StatsTimeline001() {
2  const milestones = [
3    {
4      year: "2020",
5      value: "10K",
6      label: "ユーザー数",
7      description: "サービス提供開始。初年度で1万ユーザーを突破。",
8    },
9    {
10      year: "2022",
11      value: "250K",
12      label: "ユーザー数",
13      description: "グローバル展開を開始し、急速にユーザー基盤を拡大。",
14    },
15    {
16      year: "2024",
17      value: "1.2M",
18      label: "ユーザー数",
19      description: "エンタープライズ向けプランを追加。導入企業数が500社を超える。",
20    },
21    {
22      year: "2026",
23      value: "5M+",
24      label: "ユーザー数",
25      description: "次世代プラットフォームへの移行完了。さらなる成長へ。",
26    },
27  ];
28
29  return (
30    <section className="relative bg-background py-28">
31      <div className="absolute left-6 top-6 h-1.5 w-1.5 rounded-full bg-foreground/20" />
32      <div className="absolute right-6 top-6 h-1.5 w-1.5 rounded-full bg-foreground/20" />
33      <div className="absolute bottom-6 left-6 h-1.5 w-1.5 rounded-full bg-foreground/20" />
34      <div className="absolute bottom-6 right-6 h-1.5 w-1.5 rounded-full bg-foreground/20" />
35
36      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
37        {/* ヘッダー */}
38        <div className="mb-20">
39          <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
40            Milestones
41          </p>
42          <div className="mt-4 h-px w-12 bg-border/40" />
43          <h2 className="mt-6 text-2xl font-light tracking-wide text-foreground sm:text-3xl">
44            成長の軌跡
45          </h2>
46          <p className="mt-4 max-w-lg text-sm font-light leading-relaxed text-muted-foreground">
47            サービス開始から現在まで、着実な成長を続けています。
48          </p>
49        </div>
50
51        {/* タイムライン */}
52        <div className="relative">
53          {/* 縦線 */}
54          <div className="absolute left-[23px] top-2 bottom-2 w-px bg-border/30 sm:left-[39px]" />
55
56          <div className="space-y-12">
57            {milestones.map((milestone, index) => (
58              <div key={milestone.year} className="group relative flex gap-6 sm:gap-10">
59                {/* ドット */}
60                <div className="relative z-10 flex h-12 w-12 shrink-0 items-center justify-center sm:h-20 sm:w-20">
61                  <div className="flex h-12 w-12 items-center justify-center rounded-full border border-border/40 bg-background transition-colors duration-300 group-hover:border-foreground/20">
62                    <span className="text-[10px] font-medium uppercase tracking-[0.15em] text-muted-foreground transition-colors duration-300 group-hover:text-foreground sm:text-xs">
63                      {milestone.year}
64                    </span>
65                  </div>
66                </div>
67
68                {/* コンテンツ */}
69                <div className="flex-1 pb-2 pt-2 sm:pt-3">
70                  <div className="flex flex-col gap-1 sm:flex-row sm:items-baseline sm:gap-4">
71                    <p className="text-2xl font-light tracking-wider text-foreground sm:text-3xl">
72                      {milestone.value}
73                    </p>
74                    <p className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/50">
75                      {milestone.label}
76                    </p>
77                  </div>
78                  <p className="mt-3 text-sm font-light leading-relaxed text-muted-foreground">
79                    {milestone.description}
80                  </p>
81                  {index < milestones.length - 1 && (
82                    <div className="mt-6 h-px w-full bg-border/15" />
83                  )}
84                </div>
85
86                {/* インデックス番号 */}
87                <div className="hidden items-start pt-4 sm:flex">
88                  <span className="text-[10px] tabular-nums tracking-[0.15em] text-muted-foreground/30">
89                    {String(index + 1).padStart(2, "0")}
90                  </span>
91                </div>
92              </div>
93            ))}
94          </div>
95        </div>
96      </div>
97    </section>
98  );
99}