タイムラインテスティモニアル

1export function TestimonialTimeline001() {
2  const testimonials = [
3    {
4      quote:
5        "プロジェクトの本質を深く理解し、期待を超えるアウトプットを提供していただきました。",
6      author: "田中 美咲",
7      role: "CEO",
8      company: "テックスタート株式会社",
9      year: "2025",
10    },
11    {
12      quote:
13        "デザインシステムの構築からUIの実装まで、一貫した品質で仕上げていただきました。",
14      author: "佐藤 健一",
15      role: "プロダクトマネージャー",
16      company: "クラウドベース株式会社",
17      year: "2024",
18    },
19    {
20      quote:
21        "緻密なリサーチに基づいた提案で、ユーザー体験が大幅に改善されました。",
22      author: "鈴木 あかり",
23      role: "デザインディレクター",
24      company: "デジタルクラフト株式会社",
25      year: "2024",
26    },
27    {
28      quote:
29        "スピードと品質の両立。短期間でこれほどの成果を上げられるチームは稀有です。",
30      author: "高橋 涼太",
31      role: "CTO",
32      company: "イノベーションラボ株式会社",
33      year: "2023",
34    },
35  ];
36
37  return (
38    <section className="bg-background py-28 border-t border-border">
39      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
40        {/* ヘッダー */}
41        <div className="text-center">
42          <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
43            Client Voices
44          </p>
45          <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
46            お客様の声
47          </h2>
48          <p className="mx-auto mt-4 max-w-md text-sm font-light leading-relaxed text-muted-foreground">
49            これまでご一緒させていただいたクライアントからの評価をご紹介します。
50          </p>
51        </div>
52
53        <div className="mt-6 flex justify-center">
54          <div className="h-px w-12 bg-border/40" />
55        </div>
56
57        {/* タイムライン */}
58        <div className="relative mt-16">
59          {/* 中央線 */}
60          <div className="absolute left-4 top-0 bottom-0 w-px bg-border/40 sm:left-1/2 sm:-translate-x-px" />
61
62          <div className="space-y-12 sm:space-y-16">
63            {testimonials.map((item, index) => {
64              const isLeft = index % 2 === 0;
65
66              return (
67                <div key={index} className="relative">
68                  {/* ドットインジケーター */}
69                  <div className="absolute left-4 top-1 z-10 -translate-x-1/2 sm:left-1/2">
70                    <div className="flex h-3 w-3 items-center justify-center rounded-full border border-border bg-background">
71                      <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
72                    </div>
73                  </div>
74
75                  {/* コンテンツ */}
76                  <div
77                    className={`pl-10 sm:w-1/2 sm:pl-0 ${
78                      isLeft
79                        ? "sm:pr-12 sm:text-right"
80                        : "sm:ml-auto sm:pl-12"
81                    }`}
82                  >
83                    {/* 年 */}
84                    <span className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground/50">
85                      {item.year}
86                    </span>
87
88                    {/* 引用 */}
89                    <p className="mt-3 text-base font-light leading-relaxed tracking-wide text-foreground/90 sm:text-lg">
90                      &ldquo;{item.quote}&rdquo;
91                    </p>
92
93                    {/* 著者情報 */}
94                    <div
95                      className={`mt-4 flex items-center gap-3 ${
96                        isLeft ? "sm:justify-end" : ""
97                      }`}
98                    >
99                      <span className="h-px w-6 bg-border/60" />
100                      <div>
101                        <p className="text-sm tracking-wide text-foreground">
102                          {item.author}
103                        </p>
104                        <p className="mt-0.5 text-xs tracking-wide text-muted-foreground/70">
105                          {item.role} — {item.company}
106                        </p>
107                      </div>
108                    </div>
109                  </div>
110                </div>
111              );
112            })}
113          </div>
114        </div>
115
116        {/* ボトムアクセント */}
117        <div className="mt-20 flex justify-center">
118          <div className="flex items-center gap-2">
119            <div className="h-1 w-1 rounded-full bg-muted-foreground/30" />
120            <div className="h-1 w-1 rounded-full bg-muted-foreground/30" />
121            <div className="h-1 w-1 rounded-full bg-muted-foreground/30" />
122          </div>
123        </div>
124      </div>
125    </section>
126  );
127}