ミニマルギャラリー

1export function GalleryMinimal001() {
2  const works = [
3    {
4      title: "ブランドリニューアル",
5      category: "ブランディング",
6      year: "2024",
7      aspect: "aspect-[3/4]",
8    },
9    {
10      title: "SaaSダッシュボード",
11      category: "プロダクトデザイン",
12      year: "2024",
13      aspect: "aspect-[4/3]",
14    },
15    {
16      title: "エディトリアルサイト",
17      category: "ウェブデザイン",
18      year: "2023",
19      aspect: "aspect-[3/4]",
20    },
21    {
22      title: "モバイルコマース",
23      category: "アプリデザイン",
24      year: "2024",
25      aspect: "aspect-[4/3]",
26    },
27    {
28      title: "ビジュアルアイデンティティ",
29      category: "ブランディング",
30      year: "2023",
31      aspect: "aspect-[4/3]",
32    },
33    {
34      title: "コーポレートサイト",
35      category: "ウェブデザイン",
36      year: "2024",
37      aspect: "aspect-[3/4]",
38    },
39  ];
40
41  return (
42    <section className="bg-background py-28">
43      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
44        {/* ヘッダー */}
45        <div className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
46          <div>
47            <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
48              Works
49            </p>
50            <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
51              厳選された作品
52            </h2>
53          </div>
54          <p className="max-w-xs text-sm font-light leading-relaxed text-muted-foreground">
55            丁寧に向き合ったプロジェクトの中から、特に印象深い作品をご紹介します。
56          </p>
57        </div>
58
59        <div className="mt-4 h-px bg-border/40" />
60
61        {/* 作品リスト */}
62        <div className="mt-14 columns-1 gap-6 space-y-6 sm:columns-2">
63          {works.map((work, i) => (
64            <div key={i} className="group break-inside-avoid">
65              {/* サムネイル */}
66              <div
67                className={`relative ${work.aspect} overflow-hidden border border-border bg-muted`}
68              >
69                <div className="absolute inset-0 bg-gradient-to-br from-foreground/[0.03] to-foreground/[0.08] transition-all duration-500 group-hover:from-foreground/[0.06] group-hover:to-foreground/[0.12]" />
70                <div className="absolute left-4 top-4 h-1.5 w-1.5 rounded-full bg-foreground/20" />
71                <div className="absolute right-4 top-4 h-1.5 w-1.5 rounded-full bg-foreground/20" />
72                {/* 番号 */}
73                <div className="absolute bottom-4 left-4">
74                  <span className="text-[10px] tracking-[0.2em] text-foreground/30">
75                    {String(i + 1).padStart(2, "0")}
76                  </span>
77                </div>
78                {/* ホバーアロー */}
79                <div className="absolute bottom-4 right-4 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
80                  <svg
81                    className="h-4 w-4 text-foreground/40"
82                    fill="none"
83                    stroke="currentColor"
84                    viewBox="0 0 24 24"
85                  >
86                    <path
87                      strokeLinecap="round"
88                      strokeLinejoin="round"
89                      strokeWidth={1.5}
90                      d="M7 17L17 7M17 7H7M17 7v10"
91                    />
92                  </svg>
93                </div>
94              </div>
95
96              {/* テキスト */}
97              <div className="mt-3 flex items-baseline justify-between">
98                <div>
99                  <h3 className="text-sm font-medium tracking-wide text-foreground">
100                    {work.title}
101                  </h3>
102                  <p className="mt-1 text-xs font-light tracking-wide text-muted-foreground/60">
103                    {work.category}
104                  </p>
105                </div>
106                <span className="text-[10px] tracking-[0.2em] text-muted-foreground/40">
107                  {work.year}
108                </span>
109              </div>
110            </div>
111          ))}
112        </div>
113
114        {/* フッター */}
115        <div className="mt-16 flex items-center justify-between border-t border-border pt-6">
116          <p className="text-xs font-light tracking-wide text-muted-foreground/60">
117            全 {works.length} 作品
118          </p>
119          <a
120            href="#"
121            className="group/link flex items-center gap-2 text-xs tracking-[0.15em] text-muted-foreground transition-colors hover:text-foreground"
122          >
123            すべての作品を見る
124            <svg
125              className="h-3 w-3 transition-transform duration-200 group-hover/link:translate-x-0.5"
126              fill="none"
127              stroke="currentColor"
128              viewBox="0 0 24 24"
129            >
130              <path
131                strokeLinecap="round"
132                strokeLinejoin="round"
133                strokeWidth={1.5}
134                d="M17 8l4 4m0 0l-4 4m4-4H3"
135              />
136            </svg>
137          </a>
138        </div>
139      </div>
140    </section>
141  );
142}