Загрузка...
Адаптивный раздел портфолио с галереей проектов, анимациями и CTA. Идеально для лендингов, чтобы показать креативные работы. Tailwind CSS.
<section class="relative z-10 sm:p-8 animate-scaleIn animation-delay-300 bg-zinc-950/10 w-full max-w-7xl border-white/10 border rounded-3xl mt-24 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 backdrop-blur">
<!-- Header -->
<div class="flex gap-6 sm:px-0 pr-1 pl-1 items-center animate-fadeInUp">
<span class="inline-flex items-center gap-2 text-sm">
<span class="text-4xl font-medium text-white">Portfolio</span>
</span>
<span aria-hidden="true" role="separator" aria-orientation="vertical" class="w-px h-10 bg-white/10"></span>
<span class="text-sm text-neutral-300">featured work</span>
</div>
<div class="h-px bg-white/10 mt-4 animate-fadeIn animation-delay-100"></div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 sm:gap-10 items-start relative z-10 mt-6 sm:mt-8">
<!-- Left copy -->
<div class="flex flex-col min-h-full justify-between lg:col-span-5 animate-fadeInLeft animation-delay-200">
<div class="">
<h2 class="text-[44px] sm:text-6xl md:text-7xl leading-[1.05] font-light text-zinc-100 tracking-tighter">
Creative solutions that make impact.
</h2>
<!-- Divider -->
<div class="h-px bg-white/10 mt-6 animate-fadeIn animation-delay-300"></div>
<!-- Skills -->
<div class="mt-6 animate-fadeInUp animation-delay-400">
<p class="text-sm font-medium text-white tracking-tight">Skills & Expertise</p>
<div class="mt-3 flex flex-wrap gap-2 stagger-animation">
<span class="inline-flex items-center gap-2 text-xs text-neutral-200 bg-white/5 border-white/10 border rounded-full py-1.5 px-3 hover:bg-white/10 transition-colors duration-200">
<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="code" class="lucide lucide-code w-3.5 h-3.5" style="stroke-width:1.5"><path d="m16 18 6-6-6-6" class=""></path><path d="m8 6-6 6 6 6" class=""></path></svg>
Frontend Development
</span>
<span class="inline-flex items-center gap-2 text-xs text-neutral-200 bg-white/5 border-white/10 border rounded-full py-1.5 px-3 hover:bg-white/10 transition-colors duration-200">
<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>
UI/UX Design
</span>
<span class="inline-flex items-center gap-2 text-xs text-neutral-200 bg-white/5 border-white/10 border rounded-full py-1.5 px-3 hover:bg-white/10 transition-colors duration-200">
<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="camera" class="lucide lucide-camera w-3.5 h-3.5" style="stroke-width:1.5"><path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" class=""></path><circle cx="12" cy="13" r="3" class=""></circle></svg>
Photography
</span>
<span class="inline-flex items-center gap-2 text-xs text-neutral-200 bg-white/5 border-white/10 border rounded-full py-1.5 px-3 hover:bg-white/10 transition-colors duration-200">
<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="layers" class="lucide lucide-layers w-3.5 h-3.5" style="stroke-width:1.5"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" class=""></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path></svg>
Brand Identity
</span>
</div>
</div>
<!-- Stats -->
<div class="mt-6 grid grid-cols-3 gap-4 stagger-animation">
<div class="hover-lift">
<div class="text-2xl font-semibold text-white">50+</div>
<div class="text-xs text-neutral-400">Projects</div>
</div>
<div class="hover-lift">
<div class="text-2xl font-semibold text-white">5</div>
<div class="text-xs text-neutral-400">Years</div>
</div>
<div class="hover-lift">
<div class="text-2xl font-semibold text-white">100%</div>
<div class="text-xs text-neutral-400">Satisfaction</div>
</div>
</div>
</div>
<div class="w-full mt-10 animate-fadeInUp animation-delay-500">
<div class="">
<p class="text-sm font-medium text-white tracking-tight">Available for projects</p>
<p class="text-sm text-neutral-300 max-w-sm mt-1">
Crafting digital experiences with clean code, thoughtful design, and user-first approach.
</p>
<div class="flex gap-6 animate-fadeInUp animation-delay-500 mt-5 items-center"><a href="#work" style="align-items: center; background-image: linear-gradient(144deg, rgb(175, 64, 255), rgb(91, 66, 243) 50%, rgb(0, 221, 235)); border: 0px; border-radius: 8px; box-shadow: rgba(151, 65, 252, 0.2) 0px 15px 30px -5px; box-sizing: border-box; color: rgb(255, 255, 255); display: inline-flex; font-size: 14px; justify-content: center; line-height: 1em; max-width: 100%; min-width: auto; padding: 3px; text-decoration: none; user-select: none; touch-action: manipulation; white-space: nowrap; cursor: pointer; height: 50px; margin-top: 1rem; transform: scale(1); width: auto;" onmouseover="this.querySelector('span').style.background='none'" onmouseout="this.querySelector('span').style.backgroundColor='rgb(5, 6, 45)'" onmousedown="this.style.transform='scale(0.9)'" onmouseup="this.style.transform='scale(1)'" class="">
<span style="background: none rgb(5, 6, 45); padding: 16px 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 0.5rem;" class="">View portfolio</span>
</a>
<a href="#pricing" style="align-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; box-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px inset; box-sizing: border-box; color: rgb(255, 255, 255); display: inline-flex; font-size: 14px; justify-content: center; line-height: 1em; max-width: 100%; min-width: auto; padding: 3px; text-decoration: none; user-select: none; touch-action: manipulation; white-space: nowrap; cursor: pointer; height: 50px; margin-top: 1rem; transform: scale(1); width: auto;" onmouseover="this.style.backgroundColor='rgba(255, 255, 255, 0.1)'" onmouseout="this.style.backgroundColor='rgba(255, 255, 255, 0.05)'" onmousedown="this.style.transform='scale(0.9)'" onmouseup="this.style.transform='scale(1)'" class="">
<span style="padding: 16px 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 0.5rem;" class="">Start project<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" style="width: 16px; height: 16px;"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg></span>
</a>
</div>
</div>
</div>
</div>
<!-- Right: Creative Work Gallery -->
<div class="lg:col-span-7 animate-fadeInRight animation-delay-300">
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 stagger-animation">
<!-- 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>
</div>
</div>
</section>