Загрузка...
Адаптивная галерея проектов в виде сетки Tailwind. Отображает карточки проектов с оверлеями, бейджами категорий и анимацией при наведении. Идеально для портфолио.
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 stagger-animation max-w-5xl">
<!-- Large featured project -->
<div
class="md:col-span-2 relative overflow-hidden rounded-2xl border border-white/10 bg-neutral-900 group hover:border-white/20 transition-all duration-300 hover-lift">
<div class="aspect-[16/10] relative overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d7050fd5-9b66-45d7-a30a-569d8f5e9017_800w.jpg" alt="Creative web design project" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-2 backdrop-blur">
<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="monitor" class="lucide lucide-monitor h-3.5 w-3.5" style="stroke-width:1.5"><rect width="20" height="14" x="2" y="3" rx="2" class=""></rect><line x1="8" x2="16" y1="21" y2="21" class=""></line><line x1="12" x2="12" y1="17" y2="21" class=""></line></svg>
Web Design
</span>
</div>
<button class="absolute top-3 right-3 inline-flex items-center justify-center h-8 w-8 rounded-full bg-black/40 hover:bg-black/60 backdrop-blur opacity-0 group-hover:opacity-100 transition-all duration-300 hover:scale-110">
<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="external-link" class="lucide lucide-external-link w-4 h-4 text-white" style="stroke-width:1.5"><path d="M15 3h6v6" class=""></path><path d="M10 14 21 3" class=""></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" class=""></path></svg>
</button>
</div>
<div class="p-4">
<h3 class="text-base font-medium text-white tracking-tight">E-commerce Platform</h3>
<p class="text-sm text-neutral-400 mt-1">Modern marketplace with seamless UX</p>
</div>
</div>
<!-- Mobile app project -->
<div
class="relative overflow-hidden rounded-2xl border border-white/10 bg-neutral-900 group hover:border-white/20 transition-all duration-300 hover-lift">
<div class="aspect-square relative overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fb6b509f-d7d6-4c5a-ab4e-9cc3661e184b_800w.jpg" alt="Mobile app design" class="group-hover:scale-105 transition-transform duration-500 w-full h-full object-cover" style="">
<div
class="aspect-square relative overflow-hidden bg-gradient-to-br from-blue-500/20 to-cyan-600/20 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fb6b509f-d7d6-4c5a-ab4e-9cc3661e184b_800w.jpg)] bg-cover">
</div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-2 backdrop-blur">
<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="smartphone" class="lucide lucide-smartphone w-3.5 h-3.5" style="stroke-width:1.5"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" class=""></rect><path d="M12 18h.01" class=""></path></svg>
</span>
</div>
</div>
<div class="p-3">
<h3 class="text-sm font-medium text-white tracking-tight">Banking App</h3>
<p class="text-xs text-neutral-400 mt-1">Fintech mobile solution</p>
</div>
</div>
<!-- Brand identity project -->
<div
class="relative overflow-hidden group hover:border-white/20 transition-all duration-300 bg-neutral-900 border-white/10 border rounded-2xl hover-lift">
<div class="aspect-square relative overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c987757e-3c22-4afb-8315-50113caa4754_800w.jpg" alt="Brand identity design" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" style="">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-2 backdrop-blur">
<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="palette" class="lucide lucide-palette w-3.5 h-3.5" style="stroke-width:1.5"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" class=""></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle></svg>
</span>
</div>
</div>
<div class="p-3">
<h3 class="text-sm font-medium text-white tracking-tight">Brand Identity</h3>
<p class="text-xs text-neutral-400 mt-1">Complete visual system</p>
</div>
</div>
<!-- Dashboard project -->
<div
class="relative overflow-hidden group hover:border-white/20 transition-all duration-300 bg-neutral-900 border-white/10 border rounded-2xl hover-lift">
<div class="aspect-square relative overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6739d5c9-2ec9-43c0-94be-ec961704a2e0_800w.jpg" alt="Brand identity design" class="group-hover:scale-105 transition-transform duration-500 w-full h-full object-cover" style="">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-2 backdrop-blur">
<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="palette" class="lucide lucide-palette w-3.5 h-3.5" style="stroke-width:1.5"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" class=""></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle></svg>
</span>
</div>
</div>
<div class="p-3">
<h3 class="text-sm font-medium text-white tracking-tight">Brand Identity</h3>
<p class="text-xs text-neutral-400 mt-1">Complete visual system</p>
</div>
</div>
<!-- Video project -->
<div
class="relative overflow-hidden rounded-2xl border border-white/10 bg-neutral-900 group hover:border-white/20 transition-all duration-300 hover-lift">
<div class="aspect-square relative overflow-hidden bg-gradient-to-br from-amber-500/20 to-orange-600/20">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-2 backdrop-blur">
<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="play" class="lucide lucide-play h-3.5 w-3.5" style="stroke-width:1.5"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
</span>
</div>
<!-- Play button overlay -->
<div
class="absolute inset-0 flex bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dcb7f82e-bf8a-4d5c-8c36-ce765f8a2932_800w.jpg)] bg-cover items-center justify-center">
<div
class="h-12 w-12 rounded-full bg-white/20 backdrop-blur flex items-center justify-center group-hover:scale-110 transition-transform 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="play"
class="lucide lucide-play h-6 w-6 text-white ml-1" style="stroke-width:1.5">
<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class="">
</path>
</svg>
</div>
</div>
</div>
<div class="p-3">
<h3 class="text-sm font-medium text-white tracking-tight">Video Platform</h3>
<p class="text-xs text-neutral-400 mt-1">Streaming interface</p>
</div>
</div>
</div>