Загрузка...
Адаптивная галерея яхт в стиле Masonry с эффектом hover. Отображает списки яхт, фильтры, зум изображений, рейтинги и CTA. Идеально для чартера и e-commerce.
<section class="relative w-full sm:py-24 pt-16 pb-16">
<div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4">
<div class="text-center max-w-3xl mx-auto">
<p class="text-xs tracking-wider text-neutral-300/90">Discover Our Fleet</p>
<h2 class="mt-2 text-3xl sm:text-4xl lg:text-5xl tracking-tight font-semibold">Luxury Yacht Gallery</h2>
<p class="mt-4 text-base sm:text-lg text-white/70">Experience the elegance and sophistication of our world-class yacht collection</p>
</div>
<div class="mt-12 columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
<!-- Gallery Item 1 -->
<div class="group relative overflow-hidden rounded-2xl bg-white/5 border border-white/10 hover:border-white/20 transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-cyan-400/10 break-inside-avoid">
<div class="relative h-64 overflow-hidden">
<img src="https://cdn.midjourney.com/adf6329f-dd23-4764-9aff-11dd8b32f4c7/0_0.png?w=800&q=80" alt="Luxury superyacht at sunset" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" style="">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500"></div>
<div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
<button class="h-10 w-10 rounded-full bg-white/20 backdrop-blur-md hover:bg-white/30 flex items-center justify-center transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="maximize-2" class="lucide lucide-maximize-2 h-5 w-5"><path d="M15 3h6v6" class=""></path><path d="m21 3-7 7" class=""></path><path d="m3 21 7-7" class=""></path><path d="M9 21H3v-6" class=""></path></svg>
</button>
</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between">
<div class="">
<h3 class="text-lg font-semibold tracking-tight">Azure Dream</h3>
<p class="text-sm text-white/70">180ft Motor Yacht</p>
</div>
<div class="flex items-center gap-1 text-cyan-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star h-4 w-4 fill-current"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
<span class="text-sm font-medium">4.9</span>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center gap-4 text-xs text-white/60">
<span class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users h-4 w-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
12 guests
</span>
</div>
<a href="#" class="inline-flex items-center gap-1 text-xs text-cyan-400 hover:text-cyan-300 transition-colors duration-300">
View Details
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-3 w-3 transition-transform duration-300 group-hover:translate-x-1"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</a>
</div>
</div>
</div>
<!-- Gallery Item 2 - Taller -->
<div class="group relative overflow-hidden rounded-2xl bg-white/5 border border-white/10 hover:border-white/20 transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-cyan-400/10 break-inside-avoid">
<div class="relative h-80 overflow-hidden">
<img src="https://cdn.midjourney.com/a459afc0-a071-4146-82c1-f92a8bc6a7a8/0_0.png?w=800&q=80" alt="Elegant sailing yacht" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" style="">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500"></div>
<div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
<button class="h-10 w-10 rounded-full bg-white/20 backdrop-blur-md hover:bg-white/30 flex items-center justify-center transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="maximize-2" class="lucide lucide-maximize-2 h-5 w-5"><path d="M15 3h6v6" class=""></path><path d="m21 3-7 7" class=""></path><path d="m3 21 7-7" class=""></path><path d="M9 21H3v-6" class=""></path></svg>
</button>
</div>
<div class="absolute top-4 left-4">
<span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-cyan-400/90 text-black text-xs font-medium">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="award" class="lucide lucide-award h-3 w-3"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" class=""></path><circle cx="12" cy="8" r="6" class=""></circle></svg>
Featured
</span>
</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between">
<div class="">
<h3 class="text-lg font-semibold tracking-tight">Ocean Serenity</h3>
<p class="text-sm text-white/70">120ft Sailing Yacht</p>
</div>
<div class="flex items-center gap-1 text-cyan-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star h-4 w-4 fill-current"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
<span class="text-sm font-medium">5.0</span>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center gap-4 text-xs text-white/60">
<span class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users h-4 w-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
8 guests
</span>
<span class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bed" class="lucide lucide-bed h-4 w-4"><path d="M2 4v16" class=""></path><path d="M2 8h18a2 2 0 0 1 2 2v10" class=""></path><path d="M2 17h20" class=""></path><path d="M6 8v9" class=""></path></svg>
4 cabins
</span>
</div>
<a href="#" class="inline-flex items-center gap-1 text-xs text-cyan-400 hover:text-cyan-300 transition-colors duration-300">
View Details
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-3 w-3 transition-transform duration-300 group-hover:translate-x-1"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</a>
</div>
<div class="mt-4 p-3 rounded-lg bg-white/[0.02] border border-white/5">
<p class="text-xs text-white/60 mb-2">Special Features</p>
<div class="flex flex-wrap gap-1">
<span class="px-2 py-1 text-xs bg-cyan-400/10 text-cyan-400 rounded-full border border-cyan-400/20">Eco-Friendly</span>
<span class="px-2 py-1 text-xs bg-cyan-400/10 text-cyan-400 rounded-full border border-cyan-400/20">Spa</span>
</div>
</div>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="group relative overflow-hidden rounded-2xl bg-white/5 border border-white/10 hover:border-white/20 transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-cyan-400/10 break-inside-avoid">
<div class="relative h-56 overflow-hidden">
<img src="https://cdn.midjourney.com/192c2ec2-9b81-40b8-aba4-4c4a2cecec68/0_0.png?w=800&q=80" alt="Modern superyacht interior" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" style="">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500"></div>
<div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
<button class="h-10 w-10 rounded-full bg-white/20 backdrop-blur-md hover:bg-white/30 flex items-center justify-center transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="maximize-2" class="lucide lucide-maximize-2 h-5 w-5"><path d="M15 3h6v6" class=""></path><path d="m21 3-7 7" class=""></path><path d="m3 21 7-7" class=""></path><path d="M9 21H3v-6" class=""></path></svg>
</button>
</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between">
<div>
<h3 class="text-lg font-semibold tracking-tight">Platinum Elite</h3>
<p class="text-sm text-white/70">250ft Superyacht</p>
</div>
<div class="flex items-center gap-1 text-cyan-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star h-4 w-4 fill-current"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
<span class="text-sm font-medium">4.8</span>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center gap-4 text-xs text-white/60">
<span class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users h-4 w-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
20 guests
</span>
<span class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bed" class="lucide lucide-bed h-4 w-4"><path d="M2 4v16" class=""></path><path d="M2 8h18a2 2 0 0 1 2 2v10" class=""></path><path d="M2 17h20" class=""></path><path d="M6 8v9" class=""></path></svg>
10 cabins
</span>
</div>
<a href="#" class="inline-flex items-center gap-1 text-xs text-cyan-400 hover:text-cyan-300 transition-colors duration-300">
View Details
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-3 w-3 transition-transform duration-300 group-hover:translate-x-1"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</a>
</div>
</div>
</div>
<!-- Gallery Item 4 - Taller -->
<div class="group relative overflow-hidden rounded-2xl bg-white/5 border border-white/10 hover:border-white/20 transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-cyan-400/10 break-inside-avoid">
<div class="relative h-72 overflow-hidden">
<img src="https://cdn.midjourney.com/2a523b1f-28ae-4b5c-a477-0b785fe65900/0_0.png?w=800&q=80" alt="Luxury yacht deck" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" style="">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500"></div>
<div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
<button class="h-10 w-10 rounded-full bg-white/20 backdrop-blur-md hover:bg-white/30 flex items-center justify-center transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="maximize-2" class="lucide lucide-maximize-2 h-5 w-5"><path d="M15 3h6v6" class=""></path><path d="m21 3-7 7" class=""></path><path d="m3 21 7-7" class=""></path><path d="M9 21H3v-6" class=""></path></svg>
</button>
</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between">
<div>
<h3 class="text-lg font-semibold tracking-tight">Marina Prestige</h3>
<p class="text-sm text-white/70">95ft Motor Yacht</p>
</div>
<div class="flex items-center gap-1 text-cyan-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star h-4 w-4 fill-current"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
<span class="text-sm font-medium">4.7</span>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center gap-4 text-xs text-white/60">
<span class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users h-4 w-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
10 guests
</span>
<span class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bed" class="lucide lucide-bed h-4 w-4"><path d="M2 4v16" class=""></path><path d="M2 8h18a2 2 0 0 1 2 2v10" class=""></path><path d="M2 17h20" class=""></path><path d="M6 8v9" class=""></path></svg>
5 cabins
</span>
</div>
<a href="#" class="inline-flex items-center gap-1 text-xs text-cyan-400 hover:text-cyan-300 transition-colors duration-300">
View Details
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-3 w-3 transition-transform duration-300 group-hover:translate-x-1"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</a>
</div>
<div class="mt-4 p-3 rounded-lg bg-white/[0.02] border border-white/5">
<p class="text-xs text-white/60 mb-2">Available Now</p>
<div class="text-xs text-cyan-400">Next available: Oct 25, 2024</div>
</div>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="group relative overflow-hidden rounded-2xl bg-white/5 border border-white/10 hover:border-white/20 transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-cyan-400/10 break-inside-avoid">
<div class="relative h-60 overflow-hidden">
<img src="https://cdn.midjourney.com/09a42b28-c955-4ed1-b65f-a19653a84faa/0_0.png?w=800&q=80" alt="Catamaran sailing yacht" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500"></div>
<div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
<button class="h-10 w-10 rounded-full bg-white/20 backdrop-blur-md hover:bg-white/30 flex items-center justify-center transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="maximize-2" class="lucide lucide-maximize-2 h-5 w-5"><path d="M15 3h6v6" class=""></path><path d="m21 3-7 7" class=""></path><path d="m3 21 7-7" class=""></path><path d="M9 21H3v-6" class=""></path></svg>
</button>
</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between">
<div class="">
<h3 class="text-lg font-semibold tracking-tight">Twin Horizons</h3>
<p class="text-sm text-white/70">78ft Catamaran</p>
</div>
<div class="flex items-center gap-1 text-cyan-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star h-4 w-4 fill-current"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
<span class="text-sm font-medium">4.6</span>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center gap-4 text-xs text-white/60">
<span class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users h-4 w-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
14 guests
</span>
<span class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bed" class="lucide lucide-bed h-4 w-4"><path d="M2 4v16" class=""></path><path d="M2 8h18a2 2 0 0 1 2 2v10" class=""></path><path d="M2 17h20" class=""></path><path d="M6 8v9" class=""></path></svg>
7 cabins
</span>
</div>
<a href="#" class="inline-flex items-center gap-1 text-xs text-cyan-400 hover:text-cyan-300 transition-colors duration-300">
View Details
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-3 w-3 transition-transform duration-300 group-hover:translate-x-1"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</a>
</div>
</div>
</div>
<!-- Gallery Item 6 - Tall with extra content -->
<div class="group relative overflow-hidden rounded-2xl bg-white/5 border border-white/10 hover:border-white/20 transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-cyan-400/10 break-inside-avoid">
<div class="relative h-64 overflow-hidden">
<img src="https://cdn.midjourney.com/10eaf679-8fe2-4a6f-b585-c39529a80312/0_0.png?w=800&q=80" alt="Classic luxury yacht" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500"></div>
<div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
<button class="h-10 w-10 rounded-full bg-white/20 backdrop-blur-md hover:bg-white/30 flex items-center justify-center transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="maximize-2" class="lucide lucide-maximize-2 h-5 w-5"><path d="M15 3h6v6" class=""></path><path d="m21 3-7 7" class=""></path><path d="m3 21 7-7" class=""></path><path d="M9 21H3v-6" class=""></path></svg>
</button>
</div>
<div class="absolute top-4 left-4">
<span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-amber-400/90 text-black text-xs font-medium">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="crown" class="lucide lucide-crown h-3 w-3"><path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z" class=""></path><path d="M5 21h14" class=""></path></svg>
Classic
</span>
</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between">
<div>
<h3 class="text-lg font-semibold tracking-tight">Royal Heritage</h3>
<p class="text-sm text-white/70">150ft Classic Yacht</p>
</div>
<div class="flex items-center gap-1 text-cyan-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star h-4 w-4 fill-current"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
<span class="text-sm font-medium">4.9</span>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center gap-4 text-xs text-white/60">
<span class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users h-4 w-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
16 guests
</span>
<span class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bed" class="lucide lucide-bed h-4 w-4"><path d="M2 4v16" class=""></path><path d="M2 8h18a2 2 0 0 1 2 2v10" class=""></path><path d="M2 17h20" class=""></path><path d="M6 8v9" class=""></path></svg>
8 cabins
</span>
</div>
<a href="#" class="inline-flex items-center gap-1 text-xs text-cyan-400 hover:text-cyan-300 transition-colors duration-300">
View Details
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-3 w-3 transition-transform duration-300 group-hover:translate-x-1"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</a>
</div>
<div class="mt-4 p-3 rounded-lg bg-white/[0.02] border border-white/5">
<p class="text-xs text-white/60 mb-2">Heritage Collection</p>
<p class="text-xs text-white/50">Restored 1960s classic with modern amenities. Award-winning restoration preserves original craftsmanship.</p>
<div class="flex flex-wrap gap-1 mt-2">
<span class="px-2 py-1 text-xs bg-amber-400/10 text-amber-400 rounded-full border border-amber-400/20">Vintage</span>
<span class="px-2 py-1 text-xs bg-amber-400/10 text-amber-400 rounded-full border border-amber-400/20">Restored</span>
</div>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<div class="inline-flex items-center gap-4">
<a href="#" class="inline-flex items-center gap-2 rounded-full bg-cyan-400/90 hover:bg-cyan-400 text-black px-6 py-3 text-sm font-medium transition-all duration-300 hover:shadow-lg hover:shadow-cyan-400/25">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="grid-3x3" class="lucide lucide-grid-3x3 h-4 w-4"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M3 9h18" class=""></path><path d="M3 15h18" class=""></path><path d="M9 3v18" class=""></path><path d="M15 3v18" class=""></path></svg>
View Full Fleet
</a>
<a href="#" class="inline-flex items-center gap-2 rounded-full bg-white/10 hover:bg-white/20 px-6 py-3 text-sm font-medium transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="filter" class="lucide lucide-filter h-4 w-4 text-slate-300"><path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" class=""></path></svg>
Filter Yachts
</a>
</div>
</div>
</div><div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/[0.01] to-transparent pointer-events-none"></div>
</section>