マソンリーギャラリー

1import Image from "next/image";
2
3export function GalleryMasonry001() {
4  const images = [
5    {
6      src: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=600&h=800&fit=crop",
7      alt: "Abstract art 1",
8      title: "Geometric Flow",
9      category: "Abstract",
10      span: "row-span-2",
11    },
12    {
13      src: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=400&fit=crop",
14      alt: "Architecture 1",
15      title: "Urban Lines",
16      category: "Architecture",
17      span: "",
18    },
19    {
20      src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop",
21      alt: "Nature 1",
22      title: "Mountain Peak",
23      category: "Nature",
24      span: "",
25    },
26    {
27      src: "https://images.unsplash.com/photo-1579762715118-a6f1d4b934f1?w=600&h=400&fit=crop",
28      alt: "Abstract art 2",
29      title: "Color Burst",
30      category: "Abstract",
31      span: "",
32    },
33    {
34      src: "https://images.unsplash.com/photo-1486325212027-8081e485255e?w=600&h=800&fit=crop",
35      alt: "Architecture 2",
36      title: "Sky Tower",
37      category: "Architecture",
38      span: "row-span-2",
39    },
40    {
41      src: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=600&h=400&fit=crop",
42      alt: "Nature 2",
43      title: "Forest Mist",
44      category: "Nature",
45      span: "",
46    },
47  ];
48
49  return (
50    <section className="bg-zinc-950 py-24 border-t border-zinc-800/50">
51      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
52        {/* Header */}
53        <div className="text-center">
54          <h2 className="text-2xl font-semibold tracking-wide text-white sm:text-3xl md:text-4xl">
55            Our Portfolio
56          </h2>
57          <p className="mt-4 text-base tracking-wide text-zinc-500">
58            A collection of our best work across different categories
59          </p>
60        </div>
61
62        {/* Filter Tabs */}
63        <div className="mt-12 flex flex-wrap justify-center gap-3">
64          {["All", "Abstract", "Architecture", "Nature"].map((filter) => (
65            <button
66              key={filter}
67              className={`rounded-full px-5 py-2 text-xs font-medium uppercase tracking-widest transition-all duration-200 ${
68                filter === "All"
69                  ? "border border-zinc-700 bg-white text-zinc-900"
70                  : "border border-zinc-800 bg-zinc-900 text-zinc-400 hover:border-zinc-700 hover:text-white"
71              }`}
72            >
73              {filter}
74            </button>
75          ))}
76        </div>
77
78        {/* Masonry Grid */}
79        <div className="mt-14 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
80          {images.map((image, index) => (
81            <div
82              key={index}
83              className={`group relative overflow-hidden rounded-xl border border-zinc-800/50 ${image.span}`}
84            >
85              <div className="relative aspect-[3/4]">
86                <Image
87                  src={image.src}
88                  alt={image.alt}
89                  fill
90                  className="object-cover transition-transform duration-500 group-hover:scale-105"
91                />
92              </div>
93
94              {/* Overlay */}
95              <div className="absolute inset-0 bg-gradient-to-t from-zinc-950/90 via-zinc-950/0 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
96
97              {/* Content */}
98              <div className="absolute inset-x-0 bottom-0 p-6 translate-y-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
99                <span className="text-xs font-medium uppercase tracking-widest text-zinc-400">
100                  {image.category}
101                </span>
102                <h3 className="mt-2 text-lg font-medium tracking-wide text-white">
103                  {image.title}
104                </h3>
105              </div>
106
107              {/* View Button */}
108              <div className="absolute right-4 top-4 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
109                <button className="flex h-10 w-10 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/90 text-white backdrop-blur transition-all duration-200 hover:bg-white hover:text-zinc-900">
110                  <svg
111                    className="h-5 w-5"
112                    fill="none"
113                    stroke="currentColor"
114                    viewBox="0 0 24 24"
115                  >
116                    <path
117                      strokeLinecap="round"
118                      strokeLinejoin="round"
119                      strokeWidth={1.5}
120                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"
121                    />
122                  </svg>
123                </button>
124              </div>
125            </div>
126          ))}
127        </div>
128
129        {/* Load More */}
130        <div className="mt-14 text-center">
131          <button className="rounded-full border border-zinc-800 bg-zinc-900 px-8 py-3 text-sm font-medium tracking-wide text-white transition-all duration-200 hover:border-zinc-700 hover:bg-zinc-800">
132            Load More Projects
133          </button>
134        </div>
135      </div>
136    </section>
137  );
138}