Загрузка...
Адаптивная секция портфолио с анимированной сеткой проектов на Tailwind CSS. Отображает карточки с изображениями, тегами и ссылками. Идеально для личных и агентских сайтов.
<section
class="md:px-6 lg:pb-16 xl:pb-20 sm:mt-16 md:mt-20 sm:py-12 bg-neutral-50/5 max-w-7xl border-neutral-50/10 border rounded-3xl mt-16 mr-auto ml-auto pt-8 pr-4 pb-16 pl-4"
data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(5)">
<div class="sm:p-8 md:p-10 sm:rounded-3xl border-0 rounded-2xl pt-6 pr-6 pb-6 pl-6 blur-in backdrop-blur-sm"
style="animation-play-state: running;">
<div class="mb-6 sm:mb-8">
<div
class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-2 text-xs text-white/80 backdrop-blur mb-4 slide-in-up"
style="animation-play-state: running;">
<span class="inline-flex items-center justify-center text-[#ffffff] bg-stone-50/20 w-6 h-6 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" class=""></path><circle cx="12" cy="12" r="4" class=""></circle></svg>
</span>
Core Values
</div>
<h2 class="text-2xl sm:text-3xl md:text-4xl font-semibold tracking-tight slide-in-up animate-delay-200"
style="animation-play-state: running;">
How We
<span class="bg-clip-text font-light italic text-transparent font-playfair bg-[#ffffff]/60 px-2">Deliver</span>
</h2>
<p class="mt-2 text-white/70 text-sm sm:text-base slide-in-up animate-delay-400"
style="animation-play-state: running;">Three principles that guide every project we take on.</p>
</div>
<div
class="overflow-hidden sm:rounded-3xl sm:pt-8 sm:pr-8 sm:pb-8 sm:pl-8 max-w-7xl max-h-fit border-stone-50 rounded-2xl pt-6 pr-6 pb-6 pl-6 relative saturate-100"
style="background-color: #0f0f14; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 16px 16px; background-position: 0 0, 8px 8px; border: 1px solid rgba(255, 255, 255, 0.08);">
<!-- Edge highlight lines (sit exactly on the container border edge) -->
<div aria-hidden="true"
class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/40 to-transparent">
</div>
<div aria-hidden="true"
class="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent">
</div>
<!-- Animated specular flares on the top edge -->
<div aria-hidden="true"
class="pointer-events-none absolute top-0 left-0 h-px bg-gradient-to-r from-transparent via-blue-400/80 to-purple-500/70 w-60 transition-all duration-1000 ease-in-out"
id="top-flare" style="animation: moveTopFlare 4s linear infinite;"></div>
<div aria-hidden="true"
class="pointer-events-none absolute top-0 left-0 bg-gradient-to-r from-transparent via-blue-400/30 to-purple-500/30 w-60 h-2 rounded-full blur-sm transition-all duration-1000 ease-in-out"
id="top-flare-glow" style="animation: moveTopFlare 4s linear infinite;"></div>
<!-- Animated specular flares on the bottom edge -->
<div aria-hidden="true"
class="pointer-events-none absolute bottom-0 right-0 h-px bg-gradient-to-l from-transparent via-cyan-400/80 to-teal-500/70 w-60 transition-all duration-1000 ease-in-out"
id="bottom-flare" style="animation: moveBottomFlare 4s linear infinite;"></div>
<div aria-hidden="true"
class="pointer-events-none absolute bottom-0 right-0 bg-gradient-to-l from-transparent via-cyan-400/30 to-teal-500/30 w-60 h-2 rounded-full blur-sm transition-all duration-1000 ease-in-out"
id="bottom-flare-glow" style="animation: moveBottomFlare 4s linear infinite;"></div>
<!-- Left gradient fade -->
<div aria-hidden="true"
class="pointer-events-none absolute inset-y-0 left-0 w-20 bg-gradient-to-r from-[#0f0f14] via-[#0f0f14]/80 to-transparent z-10">
</div>
<!-- Right gradient fade -->
<div aria-hidden="true"
class="pointer-events-none absolute inset-y-0 right-0 w-20 bg-gradient-to-l from-[#0f0f14] via-[#0f0f14]/80 to-transparent z-10">
</div>
<!-- Scrolling container -->
<div class="scroll-container flex max-h-fit gap-x-6 gap-y-6" style="animation: scrollLeft 20s linear infinite;">
<div class="slide-in-up animate-delay-600 flex-none max-h-fit shadow-sm backdrop-blur-sm"
style="animation-play-state: running; width: 280px;">
<div
class="relative sm:rounded-2xl sm:p-6 bg-neutral-50/5 border-white/10 border rounded-xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-none">
<div class="flex items-start justify-between mb-4">
<div
class="inline-flex sm:h-12 sm:w-12 sm:rounded-xl text-[#ffffff] bg-[#ffffff]/20 w-10 h-10 border-[#ffffff]/30 border rounded-lg items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="sm:h-6 sm:w-6 w-[20px] h-[20px]">
<circle cx="18" cy="5" r="3" class=""></circle>
<circle cx="6" cy="12" r="3" class=""></circle>
<circle cx="18" cy="19" r="3" class=""></circle>
<line x1="8.59" x2="15.42" y1="13.51" y2="17.49" class=""></line>
<line x1="15.41" x2="8.59" y1="6.51" y2="10.49" class=""></line>
</svg>
</div>
<span class="rounded-full border border-white/20 bg-white/10 px-2 sm:px-3 py-1 text-xs text-white/80">01</span>
</div>
<h3 class="text-lg sm:text-xl font-semibold tracking-tight mb-2">Vision First</h3>
<p class="text-sm sm:text-base text-white/70 leading-relaxed">
We start with your big picture goals and work backwards to create solutions that truly matter. Every
design decision serves the larger vision.
</p>
</div>
</div>
<div class="slide-in-up animate-delay-600 flex-none max-h-fit shadow-sm backdrop-blur-sm"
style="animation-play-state: running; width: 280px;">
<div
class="relative sm:rounded-2xl sm:p-6 bg-neutral-50/5 border-white/10 border rounded-xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-none">
<div class="flex items-start justify-between mb-4">
<div
class="inline-flex sm:h-12 sm:w-12 sm:rounded-xl text-[#ffffff] bg-[#ffffff]/20 w-10 h-10 border-[#ffffff]/30 border rounded-lg items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-5 w-5 sm:h-6 sm:w-6">
<path d="M12 2L2 7l10 5 10-5-10-5z" class=""></path>
<path d="m2 17 10 5 10-5" class=""></path>
<path d="m2 12 10 5 10-5" class=""></path>
</svg>
</div>
<span class="rounded-full border border-white/20 bg-white/10 px-2 sm:px-3 py-1 text-xs text-white/80">02</span>
</div>
<h3 class="text-lg sm:text-xl font-semibold tracking-tight mb-2">Built to Scale</h3>
<p class="text-sm sm:text-base text-white/70 leading-relaxed">
Our architecture and design systems grow with your business. We build foundations that handle today's
needs and tomorrow's ambitions.
</p>
</div>
</div>
<div class="slide-in-up animate-delay-600 flex-none max-h-fit shadow-sm backdrop-blur-sm"
style="animation-play-state: running; width: 280px;">
<div
class="relative sm:rounded-2xl sm:p-6 bg-neutral-50/5 border-white/10 border rounded-xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-none">
<div class="flex items-start justify-between mb-4">
<div
class="inline-flex sm:h-12 sm:w-12 sm:rounded-xl text-[#ffffff] bg-[#ffffff]/20 w-10 h-10 border-[#ffffff]/30 border rounded-lg items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-5 w-5 sm:h-6 sm:w-6">
<path d="M12 2v20" class=""></path>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
</svg>
</div>
<span class="rounded-full border border-white/20 bg-white/10 px-2 sm:px-3 py-1 text-xs text-white/80">03</span>
</div>
<h3 class="text-lg sm:text-xl font-semibold tracking-tight mb-2">Speed & Quality</h3>
<p class="text-sm sm:text-base text-white/70 leading-relaxed">
We move fast without breaking things. Our proven processes and skilled team deliver exceptional results on
ambitious timelines.
</p>
</div>
</div>
<div class="slide-in-up animate-delay-600 flex-none max-h-fit shadow-sm backdrop-blur-sm"
style="animation-play-state: running; width: 280px;">
<div
class="relative sm:rounded-2xl sm:p-6 bg-neutral-50/5 border-white/10 border rounded-xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-none">
<div class="flex items-start justify-between mb-4">
<div
class="inline-flex sm:h-12 sm:w-12 sm:rounded-xl text-[#ffffff] bg-[#ffffff]/20 w-10 h-10 border-[#ffffff]/30 border rounded-lg items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-5 w-5 sm:h-6 sm:w-6">
<path d="M9 12l2 2 4-4" class=""></path>
<path d="M21 12c-1 0-3-1-3-3s2-3 3-3 3 1 3 3-2 3-3 3" class=""></path>
<path d="M3 12c1 0 3-1 3-3s-2-3-3-3-3 1-3 3 2 3 3 3" class=""></path>
</svg>
</div>
<span class="rounded-full border border-white/20 bg-white/10 px-2 sm:px-3 py-1 text-xs text-white/80">04</span>
</div>
<h3 class="text-lg sm:text-xl font-semibold tracking-tight mb-2">User Tested</h3>
<p class="text-sm sm:text-base text-white/70 leading-relaxed">
Every feature is validated with real users through research and testing. We create experiences based on
data, not assumptions.
</p>
</div>
</div>
<div class="slide-in-up animate-delay-600 shadow-sm backdrop-blur-sm flex-none"
style="animation-play-state: paused; width: 280px;">
<div
class="relative sm:rounded-2xl sm:p-6 bg-neutral-50/5 border-white/10 border rounded-xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-none">
<div class="flex items-start justify-between mb-4">
<div
class="inline-flex sm:h-12 sm:w-12 sm:rounded-xl text-[#ffffff] bg-[#ffffff]/20 w-10 h-10 border-[#ffffff]/30 border rounded-lg items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-5 w-5 sm:h-6 sm:w-6">
<path d="M14 9V5a3 3 0 0 0-6 0v4" class=""></path>
<rect x="2" y="9" width="20" height="11" rx="2" ry="2" class=""></rect>
</svg>
</div>
<span class="rounded-full border border-white/20 bg-white/10 px-2 sm:px-3 py-1 text-xs text-white/80">05</span>
</div>
<h3 class="text-lg sm:text-xl font-semibold tracking-tight mb-2">Security First</h3>
<p class="text-sm sm:text-base text-white/70 leading-relaxed">
Built with security in mind from day one. We implement industry best practices to protect your data and
your users.
</p>
</div>
</div>
</div>
<style>
@keyframes scrollLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@keyframes moveTopFlare {
0% {
left: -240px;
}
100% {
left: calc(100% + 0px);
}
}
@keyframes moveBottomFlare {
0% {
right: -240px;
}
100% {
right: calc(100% + 0px);
}
}
.scroll-container:hover {
animation-play-state: paused;
}
.scroll-container {
will-change: transform;
}
</style>
</div>
</div>
</section>