ホバーリビールギャラリー

1export function GalleryHover001() {
2  const projects = [
3    {
4      title: "ブランドリニューアル",
5      category: "ブランディング",
6      year: "2025",
7      label: "01",
8    },
9    {
10      title: "SaaSプロダクト設計",
11      category: "プロダクトデザイン",
12      year: "2025",
13      label: "02",
14    },
15    {
16      title: "コーポレートサイト",
17      category: "ウェブデザイン",
18      year: "2024",
19      label: "03",
20    },
21    {
22      title: "モバイルアプリUI",
23      category: "アプリデザイン",
24      year: "2024",
25      label: "04",
26    },
27    {
28      title: "ECプラットフォーム",
29      category: "プロダクトデザイン",
30      year: "2025",
31      label: "05",
32    },
33    {
34      title: "ビジュアルアイデンティティ",
35      category: "ブランディング",
36      year: "2024",
37      label: "06",
38    },
39  ];
40
41  return (
42    <section className="bg-background py-28 border-t border-border">
43      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
44        {/* ヘッダー */}
45        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
46          <div>
47            <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
48              Portfolio
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-sm 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-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
63          {projects.map((project) => (
64            <div key={project.label} className="group">
65              <div className="relative aspect-[4/3] overflow-hidden rounded-lg border border-border bg-muted">
66                {/* 背景グラデーション */}
67                <div className="absolute inset-0 bg-gradient-to-br from-foreground/5 to-foreground/10 transition-all duration-500 group-hover:from-foreground/12 group-hover:to-foreground/20" />
68
69                {/* コーナードット */}
70                <div className="absolute left-3 top-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
71                <div className="absolute right-3 top-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
72                <div className="absolute bottom-3 left-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
73                <div className="absolute bottom-3 right-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
74
75                {/* 番号（常時表示） */}
76                <div className="absolute left-4 top-4">
77                  <span className="text-[10px] tracking-[0.2em] text-foreground/30">
78                    {project.label}
79                  </span>
80                </div>
81
82                {/* ホバー時オーバーレイ */}
83                <div className="absolute inset-0 flex flex-col justify-end p-5 opacity-0 transition-opacity duration-500 group-hover:opacity-100">
84                  <div className="translate-y-3 transition-transform duration-500 group-hover:translate-y-0">
85                    <div className="mb-3 h-px w-8 bg-foreground/30" />
86                    <h3 className="text-sm font-medium tracking-wide text-foreground">
87                      {project.title}
88                    </h3>
89                    <div className="mt-2 flex items-center gap-3">
90                      <span className="text-xs tracking-wide text-muted-foreground/70">
91                        {project.category}
92                      </span>
93                      <span className="text-[10px] tracking-[0.2em] text-muted-foreground/50">
94                        {project.year}
95                      </span>
96                    </div>
97                  </div>
98                </div>
99
100                {/* ホバー時の矢印 */}
101                <div className="absolute right-4 top-4 opacity-0 transition-all duration-300 group-hover:opacity-100">
102                  <div className="flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background/90 backdrop-blur">
103                    <svg
104                      className="h-3.5 w-3.5 text-foreground"
105                      fill="none"
106                      stroke="currentColor"
107                      viewBox="0 0 24 24"
108                    >
109                      <path
110                        strokeLinecap="round"
111                        strokeLinejoin="round"
112                        strokeWidth={1.5}
113                        d="M7 17L17 7M17 7H7M17 7v10"
114                      />
115                    </svg>
116                  </div>
117                </div>
118              </div>
119            </div>
120          ))}
121        </div>
122
123        {/* フッター */}
124        <div className="mt-14 flex items-center justify-between">
125          <div className="flex items-center gap-2">
126            <div className="h-1 w-1 rounded-full bg-muted-foreground/30" />
127            <div className="h-1 w-1 rounded-full bg-muted-foreground/30" />
128            <div className="h-1 w-1 rounded-full bg-muted-foreground/30" />
129          </div>
130          <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground/50">
131            {projects.length} Projects
132          </p>
133        </div>
134      </div>
135    </section>
136  );
137}