タイムラインギャラリー

1export function GalleryTimeline001() {
2  const projects = [
3    {
4      year: "2024",
5      items: [
6        {
7          title: "ブランドリニューアル",
8          category: "ブランディング",
9          description:
10            "企業の新しいビジョンを反映したビジュアルアイデンティティの再構築",
11        },
12        {
13          title: "SaaSダッシュボード",
14          category: "プロダクトデザイン",
15          description:
16            "データ分析プラットフォームのためのインターフェース設計",
17        },
18      ],
19    },
20    {
21      year: "2023",
22      items: [
23        {
24          title: "ECサイトリデザイン",
25          category: "ウェブデザイン",
26          description:
27            "購買体験を最適化するためのUI/UX改善プロジェクト",
28        },
29        {
30          title: "モバイルアプリ設計",
31          category: "アプリデザイン",
32          description:
33            "直感的な操作性を追求したネイティブアプリのデザインシステム",
34        },
35        {
36          title: "コーポレートサイト",
37          category: "ウェブデザイン",
38          description:
39            "洗練されたミニマルデザインによる企業サイトの構築",
40        },
41      ],
42    },
43    {
44      year: "2022",
45      items: [
46        {
47          title: "デザインシステム構築",
48          category: "プロダクト",
49          description:
50            "大規模プロダクトのための統一的なコンポーネントライブラリ",
51        },
52      ],
53    },
54  ];
55
56  return (
57    <section className="bg-background py-28 border-t border-border">
58      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
59        {/* ヘッダー */}
60        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
61          <div>
62            <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
63              Project Archive
64            </p>
65            <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
66              プロジェクト年表
67            </h2>
68          </div>
69          <p className="max-w-sm text-sm font-light leading-relaxed text-muted-foreground">
70            これまでに手がけたプロジェクトを時系列で振り返ります。
71          </p>
72        </div>
73
74        <div className="mt-4 h-px bg-border/40" />
75
76        {/* タイムライン */}
77        <div className="mt-16 space-y-16">
78          {projects.map((group) => (
79            <div key={group.year} className="relative">
80              {/* 年ラベル */}
81              <div className="mb-8 flex items-center gap-4">
82                <span className="text-3xl font-light tracking-wider text-foreground/30">
83                  {group.year}
84                </span>
85                <div className="h-px flex-1 bg-border/40" />
86                <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
87              </div>
88
89              {/* プロジェクト一覧 */}
90              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
91                {group.items.map((item) => (
92                  <div key={item.title} className="group">
93                    {/* サムネイルプレースホルダー */}
94                    <div className="relative aspect-[4/3] overflow-hidden rounded-lg border border-border bg-muted">
95                      <div className="absolute inset-0 bg-gradient-to-br from-foreground/5 to-foreground/10 transition-all duration-500 group-hover:from-foreground/10 group-hover:to-foreground/15" />
96                      {/* コーナードット */}
97                      <div className="absolute left-3 top-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
98                      <div className="absolute right-3 top-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
99                      <div className="absolute bottom-3 left-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
100                      <div className="absolute bottom-3 right-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
101                      {/* 中央アイコン */}
102                      <div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
103                        <div className="flex h-10 w-10 items-center justify-center rounded-full border border-border bg-background/90 backdrop-blur">
104                          <svg
105                            className="h-4 w-4 text-foreground"
106                            fill="none"
107                            stroke="currentColor"
108                            viewBox="0 0 24 24"
109                          >
110                            <path
111                              strokeLinecap="round"
112                              strokeLinejoin="round"
113                              strokeWidth={1.5}
114                              d="M17 8l4 4m0 0l-4 4m4-4H3"
115                            />
116                          </svg>
117                        </div>
118                      </div>
119                    </div>
120
121                    {/* テキスト情報 */}
122                    <div className="mt-4">
123                      <p className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60">
124                        {item.category}
125                      </p>
126                      <h3 className="mt-1.5 text-sm font-medium tracking-wide text-foreground transition-colors duration-200 group-hover:text-muted-foreground">
127                        {item.title}
128                      </h3>
129                      <p className="mt-2 text-xs font-light leading-relaxed text-muted-foreground">
130                        {item.description}
131                      </p>
132                    </div>
133                  </div>
134                ))}
135              </div>
136            </div>
137          ))}
138        </div>
139      </div>
140    </section>
141  );
142}