Загрузка...
Адаптивная галерея портфолио в стиле masonry. Отображает проекты с изображениями, заголовками и категориями. Идеально для дизайнеров и агентств.
<section id="work" class="max-w-7xl sm:px-8 mx-auto px-6">
<div class="mb-5 sm:mb-6 flex items-center gap-2 text-xs sm:text-sm text-black/60">
<span class="font-medium">Featured work</span>
<span class="text-black/40">·</span>
<span>2019–2025</span>
</div>
<div class="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
<!-- Card 1 -->
<a href="#" class="group break-inside-avoid block rounded-2xl overflow-hidden border border-black/10 bg-white hover:shadow-xl hover:shadow-black/5 transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c9813581-8cf0-47a3-8e50-7b6313139c4b_1600w.jpg" alt="3D composition" class="w-full h-64 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent pointer-events-none"></div>
</div>
<div class="p-4 sm:p-5">
<div class="flex items-start justify-between gap-3">
<div>
<p class="text-sm font-medium text-black">Orbit Forms</p>
<p class="text-sm text-black/50">Visual Identity</p>
</div>
<div class="shrink-0">
<span class="inline-flex items-center gap-1 text-xs text-black/60 group-hover:text-black transition">
Case study
<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-up-right" class="lucide lucide-arrow-up-right h-3.5 w-3.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</span>
</div>
</div>
</div>
</a>
<!-- Card 2 -->
<a href="#" class="group break-inside-avoid block rounded-2xl overflow-hidden border border-black/10 bg-white hover:shadow-xl hover:shadow-black/5 transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9adad571-6e24-46b9-ba1a-306ebeedb73a_800w.jpg" alt="Blue abstract render" class="w-full h-80 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent pointer-events-none"></div>
</div>
<div class="p-4 sm:p-5">
<div class="flex items-start justify-between gap-3">
<div>
<p class="text-sm font-medium text-black">Nexa Commerce</p>
<p class="text-sm text-black/50">Design System</p>
</div>
<div class="shrink-0">
<span class="inline-flex items-center gap-1 text-xs text-black/60 group-hover:text-black transition">
Case study
<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-up-right" class="lucide lucide-arrow-up-right h-3.5 w-3.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</span>
</div>
</div>
</div>
</a>
<!-- Card 3 -->
<a href="#" class="group break-inside-avoid block rounded-2xl overflow-hidden border border-black/10 bg-white hover:shadow-xl hover:shadow-black/5 transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7a1ec0f4-f0c4-4620-b551-2cf2ec6832e4_1600w.jpg" alt="Mountain minimal" class="w-full h-72 object-cover" style="">
<div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent pointer-events-none"></div>
</div>
<div class="p-4 sm:p-5">
<div class="flex items-start justify-between gap-3">
<div class="">
<p class="text-sm font-medium text-black">Peak OS</p>
<p class="text-sm text-black/50">Product Design</p>
</div>
<div class="shrink-0">
<span class="inline-flex items-center gap-1 text-xs text-black/60 group-hover:text-black transition">
Case study
<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-up-right" class="lucide lucide-arrow-up-right h-3.5 w-3.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</span>
</div>
</div>
</div>
</a>
<!-- Card 4 -->
<a href="#" class="group break-inside-avoid block overflow-hidden hover:shadow-xl hover:shadow-black/5 transition bg-white border-black/10 border rounded-2xl">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/608f5480-5a5a-48f2-ba16-38b548c291c0_1600w.jpg" alt="Minimal desk" class="w-full h-96 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent pointer-events-none"></div>
</div>
<div class="sm:p-5 pt-4 pr-4 pb-4 pl-4">
<div class="flex items-start justify-between gap-3">
<div>
<p class="text-sm font-medium text-black">Yara Bank</p>
<p class="text-sm text-black/50">Web Experience</p>
</div>
<div class="shrink-0">
<span class="inline-flex items-center gap-1 text-xs text-black/60 group-hover:text-black transition">
Case study
<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-up-right" class="lucide lucide-arrow-up-right h-3.5 w-3.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</span>
</div>
</div>
</div>
</a>
<!-- Card 5 -->
<a href="#" class="group break-inside-avoid block rounded-2xl overflow-hidden border border-black/10 bg-white hover:shadow-xl hover:shadow-black/5 transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8216c433-6c3e-43c1-9707-d087db50041b_800w.jpg" alt="Mobile interface design" class="w-full h-56 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent pointer-events-none"></div>
</div>
<div class="p-4 sm:p-5">
<div class="flex items-start justify-between gap-3">
<div>
<p class="text-sm font-medium text-black">Flux Mobile</p>
<p class="text-sm text-black/50">Mobile App Design</p>
</div>
<div class="shrink-0">
<span class="inline-flex items-center gap-1 text-xs text-black/60 group-hover:text-black transition">
Case study
<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-up-right" class="lucide lucide-arrow-up-right h-3.5 w-3.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</span>
</div>
</div>
</div>
</a>
<!-- Card 6 -->
<a href="#" class="group break-inside-avoid block rounded-2xl overflow-hidden border border-black/10 bg-white hover:shadow-xl hover:shadow-black/5 transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a8292b1c-6443-4655-9c27-bf83487a8f60_800w.jpg" alt="Dashboard design" class="w-full h-88 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent pointer-events-none"></div>
</div>
<div class="p-4 sm:p-5">
<div class="flex items-start justify-between gap-3">
<div>
<p class="text-sm font-medium text-black">Analytics Pro</p>
<p class="text-sm text-black/50">Dashboard Interface</p>
</div>
<div class="shrink-0">
<span class="inline-flex items-center gap-1 text-xs text-black/60 group-hover:text-black transition">
Case study
<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-up-right" class="lucide lucide-arrow-up-right h-3.5 w-3.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</span>
</div>
</div>
</div>
</a>
<!-- Card 7 -->
<a href="#" class="group break-inside-avoid block rounded-2xl overflow-hidden border border-black/10 bg-white hover:shadow-xl hover:shadow-black/5 transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a774b7b9-d59a-46c5-a670-b4492ffa2eb2_800w.jpg" alt="Brand identity project" class="w-full h-60 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent pointer-events-none"></div>
</div>
<div class="p-4 sm:p-5">
<div class="flex items-start justify-between gap-3">
<div>
<p class="text-sm font-medium text-black">Verde Studio</p>
<p class="text-sm text-black/50">Brand Identity</p>
</div>
<div class="shrink-0">
<span class="inline-flex items-center gap-1 text-xs text-black/60 group-hover:text-black transition">
Case study
<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-up-right" class="lucide lucide-arrow-up-right h-3.5 w-3.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</span>
</div>
</div>
</div>
</a>
<!-- Card 8 -->
<a href="#" class="group break-inside-avoid block rounded-2xl overflow-hidden border border-black/10 bg-white hover:shadow-xl hover:shadow-black/5 transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6e72f6e9-772c-4e9d-b7ac-e97f39caef29_800w.jpg" alt="E-commerce platform" class="w-full h-76 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent pointer-events-none"></div>
</div>
<div class="p-4 sm:p-5">
<div class="flex items-start justify-between gap-3">
<div>
<p class="text-sm font-medium text-black">Marketplace UI</p>
<p class="text-sm text-black/50">E-commerce Platform</p>
</div>
<div class="shrink-0">
<span class="inline-flex items-center gap-1 text-xs text-black/60 group-hover:text-black transition">
Case study
<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-up-right" class="lucide lucide-arrow-up-right h-3.5 w-3.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</span>
</div>
</div>
</div>
</a>
<!-- Card 9 -->
<a href="#" class="group break-inside-avoid block rounded-2xl overflow-hidden border border-black/10 bg-white hover:shadow-xl hover:shadow-black/5 transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f2219a17-4bc8-4945-94dc-fc1de7a4dc30_800w.jpg" alt="SaaS dashboard" class="w-full h-68 object-cover" style="">
<div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent pointer-events-none"></div>
</div>
<div class="p-4 sm:p-5">
<div class="flex items-start justify-between gap-3">
<div>
<p class="text-sm font-medium text-black">CloudSync</p>
<p class="text-sm text-black/50">SaaS Interface</p>
</div>
<div class="shrink-0">
<span class="inline-flex items-center gap-1 text-xs text-black/60 group-hover:text-black transition">
Case study
<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-up-right" class="lucide lucide-arrow-up-right h-3.5 w-3.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</span>
</div>
</div>
</div>
</a>
</div>
</section>