グリッドギャラリー

1import Image from "next/image";
2import Link from "next/link";
3
4export function GalleryGrid001() {
5  const projects = [
6    {
7      title: "Brand Identity",
8      client: "Acme Corp",
9      category: "Branding",
10      image: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&h=600&fit=crop",
11    },
12    {
13      title: "Website Redesign",
14      client: "TechStart",
15      category: "Web Design",
16      image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=600&fit=crop",
17    },
18    {
19      title: "Mobile App",
20      client: "FinanceFlow",
21      category: "UI/UX",
22      image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop",
23    },
24    {
25      title: "E-commerce Platform",
26      client: "StyleHub",
27      category: "Web Design",
28      image: "https://images.unsplash.com/photo-1579762715118-a6f1d4b934f1?w=800&h=600&fit=crop",
29    },
30    {
31      title: "Dashboard Design",
32      client: "DataViz",
33      category: "UI/UX",
34      image: "https://images.unsplash.com/photo-1486325212027-8081e485255e?w=800&h=600&fit=crop",
35    },
36    {
37      title: "Marketing Campaign",
38      client: "GrowthLab",
39      category: "Branding",
40      image: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&h=600&fit=crop",
41    },
42  ];
43
44  return (
45    <section className="bg-background py-24 border-t border-border">
46      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
47        {/* Header */}
48        <div className="flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-end">
49          <div>
50            <h2 className="text-2xl font-semibold tracking-wide text-foreground sm:text-3xl">
51              Selected Work
52            </h2>
53            <p className="mt-3 text-sm tracking-wide text-muted-foreground">
54              A showcase of our recent projects and collaborations
55            </p>
56          </div>
57          <Link
58            href="#"
59            className="text-sm tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
60          >
61            View all projects
62          </Link>
63        </div>
64
65        {/* Grid */}
66        <div className="mt-14 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
67          {projects.map((project) => (
68            <Link
69              key={project.title}
70              href="#"
71              className="group relative overflow-hidden rounded-xl border border-border"
72            >
73              {/* Image */}
74              <div className="relative aspect-[4/3] overflow-hidden">
75                <Image
76                  src={project.image}
77                  alt={project.title}
78                  fill
79                  className="object-cover transition-transform duration-500 group-hover:scale-105"
80                />
81                {/* Overlay */}
82                <div className="absolute inset-0 bg-background/60 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
83              </div>
84
85              {/* Content */}
86              <div className="absolute inset-x-0 bottom-0 p-6 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
87                <span className="text-xs font-medium uppercase tracking-[0.15em] text-muted-foreground">
88                  {project.category}
89                </span>
90                <h3 className="mt-2 text-lg font-medium tracking-wide text-foreground">
91                  {project.title}
92                </h3>
93                <p className="mt-1 text-sm tracking-wide text-muted-foreground">
94                  {project.client}
95                </p>
96              </div>
97
98              {/* Always visible label */}
99              <div className="absolute left-0 right-0 bottom-0 bg-gradient-to-t from-background/90 to-transparent p-6 transition-opacity duration-300 group-hover:opacity-0">
100                <h3 className="text-base font-medium tracking-wide text-foreground">
101                  {project.title}
102                </h3>
103              </div>
104            </Link>
105          ))}
106        </div>
107      </div>
108    </section>
109  );
110}