|
| 1 | +import { Heart, Download, MapPin, Eye } from "lucide-react"; |
| 2 | + |
| 3 | +export const photos = [ |
| 4 | + { |
| 5 | + title: "Mountain Lake at Dawn", |
| 6 | + author: "Elena Vasquez", |
| 7 | + location: "Patagonia, Argentina", |
| 8 | + gradient: "from-sky-400 via-blue-500 to-indigo-600", |
| 9 | + height: "h-64", |
| 10 | + likes: 2847, |
| 11 | + }, |
| 12 | + { |
| 13 | + title: "Urban Geometry", |
| 14 | + author: "Kenji Tanaka", |
| 15 | + location: "Tokyo, Japan", |
| 16 | + gradient: "from-slate-400 via-zinc-500 to-gray-700", |
| 17 | + height: "h-48", |
| 18 | + likes: 1523, |
| 19 | + }, |
| 20 | + { |
| 21 | + title: "Desert Sunset Bloom", |
| 22 | + author: "Amara Osei", |
| 23 | + location: "Sahara, Morocco", |
| 24 | + gradient: "from-amber-400 via-orange-500 to-red-600", |
| 25 | + height: "h-72", |
| 26 | + likes: 4102, |
| 27 | + }, |
| 28 | + { |
| 29 | + title: "Emerald Canopy", |
| 30 | + author: "Liam Brennan", |
| 31 | + location: "Olympic NP, USA", |
| 32 | + gradient: "from-emerald-400 via-green-500 to-teal-600", |
| 33 | + height: "h-56", |
| 34 | + likes: 987, |
| 35 | + }, |
| 36 | + { |
| 37 | + title: "Coastal Fog", |
| 38 | + author: "Sofia Lindgren", |
| 39 | + location: "Lofoten, Norway", |
| 40 | + gradient: "from-gray-300 via-slate-400 to-blue-500", |
| 41 | + height: "h-60", |
| 42 | + likes: 3215, |
| 43 | + }, |
| 44 | + { |
| 45 | + title: "Neon Reflections", |
| 46 | + author: "Kenji Tanaka", |
| 47 | + location: "Osaka, Japan", |
| 48 | + gradient: "from-pink-500 via-fuchsia-500 to-purple-600", |
| 49 | + height: "h-52", |
| 50 | + likes: 5673, |
| 51 | + }, |
| 52 | + { |
| 53 | + title: "Lavender Fields Forever", |
| 54 | + author: "Claire Dubois", |
| 55 | + location: "Provence, France", |
| 56 | + gradient: "from-violet-400 via-purple-400 to-indigo-500", |
| 57 | + height: "h-64", |
| 58 | + likes: 2341, |
| 59 | + }, |
| 60 | + { |
| 61 | + title: "Glacial Blue", |
| 62 | + author: "Erik Johansson", |
| 63 | + location: "Jokulsarlon, Iceland", |
| 64 | + gradient: "from-cyan-300 via-sky-400 to-blue-600", |
| 65 | + height: "h-48", |
| 66 | + likes: 1892, |
| 67 | + }, |
| 68 | + { |
| 69 | + title: "Autumn in the Valley", |
| 70 | + author: "Mia Chen", |
| 71 | + location: "Yosemite, USA", |
| 72 | + gradient: "from-yellow-400 via-orange-400 to-red-500", |
| 73 | + height: "h-72", |
| 74 | + likes: 6120, |
| 75 | + }, |
| 76 | + { |
| 77 | + title: "Midnight Architecture", |
| 78 | + author: "Aleksei Petrov", |
| 79 | + location: "St. Petersburg, Russia", |
| 80 | + gradient: "from-indigo-600 via-blue-700 to-slate-800", |
| 81 | + height: "h-56", |
| 82 | + likes: 1445, |
| 83 | + }, |
| 84 | + { |
| 85 | + title: "Tropical Horizon", |
| 86 | + author: "Isabella Moreno", |
| 87 | + location: "Bali, Indonesia", |
| 88 | + gradient: "from-teal-400 via-emerald-400 to-cyan-500", |
| 89 | + height: "h-60", |
| 90 | + likes: 3789, |
| 91 | + }, |
| 92 | + { |
| 93 | + title: "Cherry Blossom Path", |
| 94 | + author: "Yuki Sato", |
| 95 | + location: "Kyoto, Japan", |
| 96 | + gradient: "from-pink-300 via-rose-400 to-pink-500", |
| 97 | + height: "h-52", |
| 98 | + likes: 7234, |
| 99 | + }, |
| 100 | + { |
| 101 | + title: "Storm Over the Plains", |
| 102 | + author: "Marcus Webb", |
| 103 | + location: "Kansas, USA", |
| 104 | + gradient: "from-gray-500 via-slate-600 to-zinc-700", |
| 105 | + height: "h-64", |
| 106 | + likes: 892, |
| 107 | + }, |
| 108 | + { |
| 109 | + title: "Golden Hour Dunes", |
| 110 | + author: "Fatima Al-Rashid", |
| 111 | + location: "Namib Desert", |
| 112 | + gradient: "from-amber-300 via-yellow-400 to-orange-500", |
| 113 | + height: "h-48", |
| 114 | + likes: 4567, |
| 115 | + }, |
| 116 | +]; |
| 117 | + |
| 118 | +export function formatLikes(n: number) { |
| 119 | + return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n); |
| 120 | +} |
| 121 | + |
| 122 | +export function PhotoGallery() { |
| 123 | + return ( |
| 124 | + <div className="mx-auto max-w-5xl px-4 sm:px-6 pt-6"> |
| 125 | + <div className="columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4"> |
| 126 | + {photos.map((photo, i) => ( |
| 127 | + <div |
| 128 | + key={i} |
| 129 | + className="group relative break-inside-avoid rounded-2xl overflow-hidden" |
| 130 | + > |
| 131 | + {/* Gradient background with subtle texture overlay */} |
| 132 | + <div |
| 133 | + className={`relative w-full ${photo.height} bg-gradient-to-br ${photo.gradient}`} |
| 134 | + > |
| 135 | + {/* Texture overlay for depth */} |
| 136 | + <div |
| 137 | + className="absolute inset-0 opacity-[0.07]" |
| 138 | + style={{ |
| 139 | + backgroundImage: |
| 140 | + "url(\"data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-opacity='1'%3E%3Ccircle cx='1' cy='1' r='0.6'/%3E%3C/g%3E%3C/svg%3E\")", |
| 141 | + }} |
| 142 | + /> |
| 143 | + {/* Subtle light leak effect */} |
| 144 | + <div className="absolute top-0 right-0 w-1/2 h-1/2 bg-gradient-to-bl from-white/10 to-transparent rounded-bl-full" /> |
| 145 | + </div> |
| 146 | + |
| 147 | + {/* Hover overlay with smoother gradient */} |
| 148 | + <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500 ease-out" /> |
| 149 | + |
| 150 | + {/* Bottom info with smoother entrance */} |
| 151 | + <div className="absolute bottom-0 left-0 right-0 p-4 translate-y-3 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 ease-out"> |
| 152 | + <h3 className="text-sm font-semibold text-white leading-tight"> |
| 153 | + {photo.title} |
| 154 | + </h3> |
| 155 | + <p className="mt-1 text-xs text-white/70">by {photo.author}</p> |
| 156 | + <div className="mt-1.5 flex items-center gap-1 text-xs text-white/60"> |
| 157 | + <MapPin className="size-3" /> |
| 158 | + {photo.location} |
| 159 | + </div> |
| 160 | + </div> |
| 161 | + |
| 162 | + {/* Top-right action buttons */} |
| 163 | + <div className="absolute top-3 right-3 flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-all duration-500 ease-out translate-y-1 group-hover:translate-y-0"> |
| 164 | + <button |
| 165 | + type="button" |
| 166 | + className="flex items-center justify-center size-8 rounded-xl bg-white/90 backdrop-blur-sm text-gray-700 hover:bg-white hover:text-red-500 transition-colors shadow-sm cursor-pointer" |
| 167 | + aria-label="Like" |
| 168 | + > |
| 169 | + <Heart className="size-4" /> |
| 170 | + </button> |
| 171 | + <button |
| 172 | + type="button" |
| 173 | + className="flex items-center justify-center size-8 rounded-xl bg-white/90 backdrop-blur-sm text-gray-700 hover:bg-white hover:text-gray-900 transition-colors shadow-sm cursor-pointer" |
| 174 | + aria-label="Download" |
| 175 | + > |
| 176 | + <Download className="size-4" /> |
| 177 | + </button> |
| 178 | + </div> |
| 179 | + |
| 180 | + {/* Bottom-right like count + views */} |
| 181 | + <div className="absolute bottom-3 right-3 flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-all duration-500 ease-out"> |
| 182 | + <span className="flex items-center gap-1 rounded-lg bg-black/40 px-2 py-1 text-xs text-white/80 backdrop-blur-sm"> |
| 183 | + <Eye className="size-3" /> |
| 184 | + {formatLikes(photo.likes * 3)} |
| 185 | + </span> |
| 186 | + <span className="flex items-center gap-1 rounded-lg bg-black/40 px-2 py-1 text-xs text-white/80 backdrop-blur-sm"> |
| 187 | + <Heart className="size-3" /> |
| 188 | + {formatLikes(photo.likes)} |
| 189 | + </span> |
| 190 | + </div> |
| 191 | + </div> |
| 192 | + ))} |
| 193 | + </div> |
| 194 | + </div> |
| 195 | + ); |
| 196 | +} |
0 commit comments