Загрузка...
Адаптивная сетка портфолио с карточками работ. Отображает проекты с иконкой, заголовком, описанием и эффектом при наведении. Идеально для галереи или сайта-портфолио.
<section class="max-w-7xl sm:px-6 sm:mt-20 mt-8 mr-auto mb-8 ml-auto pr-4 pl-4">
<div class="relative overflow-hidden rounded-[40px] border border-white/20 bg-white shadow-[0_8px_30px_rgba(0,0,0,0.08)] shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]">
<div class="absolute inset-0 pointer-events-none">
<div class="absolute inset-0 bg-gradient-to-b from-white/10 via-white/5 to-transparent"></div>
</div>
<div class="relative sm:p-8 pt-6 pr-6 pb-6 pl-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl sm:text-2xl text-gray-900 font-geist tracking-tighter">Recent Work</h2>
<a href="#" class="text-sm text-gray-700 hover:text-gray-900 inline-flex items-center gap-2 bg-gray-100 hover:bg-gray-200 rounded-full px-3 py-1.5 border border-white/20">
<span class="font-geist">View all</span>
<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 w-4 h-4 stroke-1.5"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
<!-- Card 1 -->
<article class="group overflow-hidden bg-white/80 border-black/5 border rounded-xl backdrop-blur-sm">
<div class="relative aspect-[16/10]">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ce4a30c0-92e5-44c5-9ae4-49b73739f76e_800w.jpg" alt="Modern brand identity design" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
<div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent"></div>
</div>
<div class="pt-4 pr-4 pb-4 pl-4">
<div class="flex items-center gap-2 text-xs text-gray-500">
<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-4 h-4 stroke-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"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></svg>
<span class="font-geist">Brand Identity</span>
</div>
<h3 class="mt-2 text-base font-semibold tracking-tight text-gray-900 font-geist">Vertex Brand System</h3>
<p class="text-sm text-gray-600 font-geist mt-1">Complete visual identity for fintech startup.</p>
</div>
</article>
<!-- Card 2 -->
<article class="group rounded-xl overflow-hidden border border-black/5 bg-white/80 backdrop-blur-sm">
<div class="relative aspect-[16/10]">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8a77358e-e157-495a-9eeb-4cbf66ca6511_800w.jpg" alt="Digital product design" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
<div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent"></div>
</div>
<div class="pt-4 pr-4 pb-4 pl-4">
<div class="flex items-center gap-2 text-xs text-gray-500">
<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 w-4 h-4 stroke-1.5"><rect width="20" height="14" x="2" y="3" rx="2"></rect><line x1="8" x2="16" y1="21" y2="21"></line><line x1="12" x2="12" y1="17" y2="21"></line></svg>
<span class="font-geist">Digital Product</span>
</div>
<h3 class="mt-2 text-base font-semibold tracking-tight text-gray-900 font-geist">Atlas Dashboard</h3>
<p class="text-sm text-gray-600 font-geist mt-1">Enterprise SaaS platform redesign.</p>
</div>
</article>
<!-- Card 3 -->
<article class="group rounded-xl overflow-hidden border border-black/5 bg-white/80 backdrop-blur-sm">
<div class="relative aspect-[16/10]">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f45ce15d-81e2-4b65-88ee-bf4636d661cc_1600w.jpg" alt="Website design" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
<div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent"></div>
</div>
<div class="pt-4 pr-4 pb-4 pl-4">
<div class="flex items-center gap-2 text-xs text-gray-500">
<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="globe" class="lucide lucide-globe w-4 h-4 stroke-1.5"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>
<span class="font-geist">Web Design</span>
</div>
<h3 class="mt-2 text-base font-semibold tracking-tight text-gray-900 font-geist">Nexus E-commerce</h3>
<p class="mt-1 text-sm text-gray-600 font-geist">Modern shopping experience for lifestyle brand.</p>
</div>
</article>
</div>
</div>
</div>
</section>