プロジェクトショーケース

1export function GalleryShowcase001() {
2  const projects = [
3    {
4      title: "ブランドアイデンティティ",
5      category: "ブランディング",
6      year: "2024",
7    },
8    {
9      title: "ECプラットフォーム",
10      category: "ウェブデザイン",
11      year: "2024",
12    },
13    {
14      title: "モバイルアプリUI",
15      category: "アプリデザイン",
16      year: "2023",
17    },
18    {
19      title: "コーポレートサイト",
20      category: "ウェブデザイン",
21      year: "2023",
22    },
23    {
24      title: "ダッシュボード設計",
25      category: "プロダクト",
26      year: "2024",
27    },
28    {
29      title: "ビジュアルキャンペーン",
30      category: "ブランディング",
31      year: "2023",
32    },
33  ];
34
35  return (
36    <section className="bg-background py-28 border-t border-border">
37      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
38        {/* ヘッダー */}
39        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
40          <div>
41            <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
42              Selected Works
43            </p>
44            <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
45              プロジェクト
46            </h2>
47          </div>
48          <p className="max-w-sm text-sm font-light leading-relaxed text-muted-foreground">
49            厳選されたプロジェクトをご紹介します。各プロジェクトはクライアントの課題に真摯に向き合い、最適な解決策をデザインしました。
50          </p>
51        </div>
52
53        <div className="mt-4 h-px bg-border/40" />
54
55        {/* プロジェクト一覧 */}
56        <div className="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
57          {projects.map((project) => (
58            <div key={project.title} className="group">
59              {/* サムネイルプレースホルダー */}
60              <div className="relative aspect-[4/3] overflow-hidden rounded-lg border border-border bg-muted">
61                <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" />
62                {/* コーナードット */}
63                <div className="absolute left-3 top-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
64                <div className="absolute right-3 top-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
65                <div className="absolute bottom-3 left-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
66                <div className="absolute bottom-3 right-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
67                {/* 中央アイコン */}
68                <div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
69                  <div className="flex h-10 w-10 items-center justify-center rounded-full border border-border bg-background/90 backdrop-blur">
70                    <svg
71                      className="h-4 w-4 text-foreground"
72                      fill="none"
73                      stroke="currentColor"
74                      viewBox="0 0 24 24"
75                    >
76                      <path
77                        strokeLinecap="round"
78                        strokeLinejoin="round"
79                        strokeWidth={1.5}
80                        d="M17 8l4 4m0 0l-4 4m4-4H3"
81                      />
82                    </svg>
83                  </div>
84                </div>
85              </div>
86
87              {/* テキスト情報 */}
88              <div className="mt-4 flex items-start justify-between">
89                <div>
90                  <h3 className="text-sm font-medium tracking-wide text-foreground transition-colors duration-200 group-hover:text-muted-foreground">
91                    {project.title}
92                  </h3>
93                  <p className="mt-1 text-xs tracking-wide text-muted-foreground/70">
94                    {project.category}
95                  </p>
96                </div>
97                <span className="text-[10px] tracking-[0.2em] text-muted-foreground/50">
98                  {project.year}
99                </span>
100              </div>
101            </div>
102          ))}
103        </div>
104      </div>
105    </section>
106  );
107}