All Prompts
All Prompts
gallerygridfiltertoolbartailwindresponsiveinteractivehoversection
Responsive Photo Gallery Grid with Scrollable Filters
Адаптивная галерея изображений с прокручиваемыми фильтрами. Отображает карточки с деталями и кнопкой загрузки при наведении. Идеально для портфолио и библиотек.
Prompt
<div
class="max-w-7xl mt-0 mr-auto mb-0 ml-auto pr-0 pl-0 space-y-6 gap-x-y-0 gap-y-0 sm:gap-y-0 sm:pl-0 sm:pr-0 sm:mb-0">
<section class="sm:pl-0 sm:pr-0 max-w-7xl mr-auto mb-24 ml-auto pr-0 pl-0"></section>
<!-- Top Nav -->
<header
class="sticky top-0 z-40 -mx-2 mb-6 bg-neutral-950/80 backdrop-blur supports-[backdrop-filter]:bg-neutral-950/60">
</header>
<!-- Toolbar: Search + Sort + Actions -->
<section class="mb-5">
<div
class="ring-inset xl:pt-3 xl:pb-3 xl:pl-3 xl:pr-3 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll bg-neutral-950/60 rounded-2xl ring-neutral-800 ring-1 pt-3 pr-3 pb-3 pl-3">
<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<!-- Left: Filter pill (h-10) -->
<div class="flex items-center gap-3">
<button class="inline-flex flex-none items-center whitespace-nowrap gap-2 h-10 px-3 text-sm font-medium font-geist text-neutral-200 bg-neutral-900 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
<line x1="21" y1="4" x2="14" y2="4" class=""></line>
<line x1="10" y1="4" x2="3" y2="4" class=""></line>
<line x1="21" y1="12" x2="12" y2="12" class=""></line>
<line x1="8" y1="12" x2="3" y2="12" class=""></line>
<line x1="21" y1="20" x2="16" y2="20" class=""></line>
<line x1="12" y1="20" x2="3" y2="20" class=""></line>
<circle cx="12" cy="4" r="2" class=""></circle>
<circle cx="8" cy="12" r="2" class=""></circle>
<circle cx="16" cy="20" r="2" class=""></circle>
</svg>
Filter
</button>
</div>
<!-- Center: Chip scroller with same control height -->
<div class="flex items-center justify-between gap-2 min-w-0">
<!-- Prev -->
<button id="btn-left" class="flex-none inline-flex items-center justify-center w-10 h-10 rounded-lg bg-neutral-900 text-neutral-300 ring-1 ring-inset ring-neutral-800 hover:text-white hover:ring-neutral-700 transition disabled:opacity-50 disabled:cursor-not-allowed" disabled="">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[16px] h-[16px]">
<path d="m15 18-6-6 6-6" class=""></path>
</svg>
</button>
<!-- Chips -->
<div id="menu-track" class="flex overflow-x-auto scrollbar-none min-w-0 pr-2 pl-2 gap-x-2 gap-y-2"
style="scrollbar-width:none; mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); scroll-behavior: smooth;">
<button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900 text-white ring-1 ring-inset ring-neutral-700 rounded-xl transition">
All Photos
</button>
<button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
Nature
</button>
<button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
Business
</button>
<button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
Technology
</button>
<button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
Portrait
</button>
<button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
Architecture
</button>
<button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
Food
</button>
<button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
Travel
</button>
<button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
Animals
</button>
<button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
Abstract
</button>
<button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
Lifestyle
</button>
</div>
<!-- Next -->
<button id="btn-right" class="flex-none inline-flex items-center justify-center w-10 h-10 rounded-lg bg-neutral-900 text-neutral-300 ring-1 ring-inset ring-neutral-800 hover:text-white hover:ring-neutral-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[16px] h-[16px]">
<path d="m9 18 6-6-6-6" class=""></path>
</svg>
</button>
</div>
<!-- Right: Sort (same h-10) -->
<div class="flex items-center gap-3">
<button class="inline-flex flex-none items-center whitespace-nowrap gap-2 h-10 px-3 text-sm font-medium font-geist text-neutral-200 bg-neutral-900 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
<path d="m6 8 6 6 6-6" class=""></path>
</svg>
Recommended
</button>
</div>
</div>
<script>
(function() {
const btnLeft = document.getElementById('btn-left');
const btnRight = document.getElementById('btn-right');
const menuTrack = document.getElementById('menu-track');
const scrollAmount = 250;
function updateButtons() {
const atStart = menuTrack.scrollLeft <= 0;
const atEnd = menuTrack.scrollLeft + menuTrack.clientWidth >= menuTrack.scrollWidth - 1;
btnLeft.disabled = atStart;
btnRight.disabled = atEnd;
}
btnLeft.addEventListener('click', function() {
menuTrack.scrollLeft -= scrollAmount;
setTimeout(updateButtons, 300);
});
btnRight.addEventListener('click', function() {
menuTrack.scrollLeft += scrollAmount;
setTimeout(updateButtons, 300);
});
menuTrack.addEventListener('scroll', updateButtons);
updateButtons();
})();
</script>
</div>
</section>
<!-- Filter Chips -->
<section class="mb-6"></section>
<!-- Grid -->
<main
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:pb-24 [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll pb-24 gap-x-4 gap-y-4">
<!-- Card 1 -->
<article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ef749f82-a7d0-4319-97df-75365c533bc7_1600w.webp" alt="Mountain Landscape at Sunset" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
<div
class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div
class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
<h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
Mountain Landscape at Sunset
</h4>
<div class="flex items-center justify-between">
<div class="flex gap-2 items-center">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3e3e1091-f8e8-4022-a02a-fa37a35c59a5_320w.jpg" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
<div class="flex flex-col leading-tight">
<span class="text-base font-medium text-neutral-200 font-geist" style="">
Benjamin Boulanger
</span>
<span class="text-sm text-neutral-400 font-geist" style="">
5 years of experience
</span>
</div>
</div>
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
</button>
</div>
</div>
</div>
</article>
<!-- Card 2 -->
<article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7f78131e-65e9-49b2-aa1f-ccc33e28df9f_1600w.webp" alt="Modern Office Workspace" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
<div
class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div
class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
<h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
Modern Office Workspace
</h4>
<div class="flex items-center justify-between">
<div class="flex gap-2 items-center">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dc0337fb-ed78-4515-a35d-9bf52d6af946_320w.webp" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
<div class="flex flex-col leading-tight">
<span class="text-base font-medium text-neutral-200 font-geist" style="">
Benny To
</span>
<span class="text-sm text-neutral-400 font-geist" style="">
5 years of experience
</span>
</div>
</div>
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
</button>
</div>
</div>
</div>
</article>
<!-- Card 3 -->
<article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7356ff87-92cc-4a91-a88b-3ad9a28041bf_1600w.webp" alt="Urban City Street at Night" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
<div
class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div
class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
<h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
Urban City Street at Night
</h4>
<div class="flex items-center justify-between">
<div class="flex gap-2 items-center">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3e3e1091-f8e8-4022-a02a-fa37a35c59a5_320w.jpg" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
<div class="flex flex-col leading-tight">
<span class="text-base font-medium text-neutral-200 font-geist" style="">
Benjamin Boulanger
</span>
<span class="text-sm text-neutral-400 font-geist" style="">
5 years of experience
</span>
</div>
</div>
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
</button>
</div>
</div>
</div>
</article>
<!-- Card 4 -->
<article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7969202b-d159-47e3-badd-ce3ff5efef3a_1600w.webp" alt="Professional Portrait Photography" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
<div
class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div
class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
<h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
Professional Portrait Photography
</h4>
<div class="flex items-center justify-between">
<div class="flex gap-2 items-center">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dc0337fb-ed78-4515-a35d-9bf52d6af946_320w.webp" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
<div class="flex flex-col leading-tight">
<span class="text-base font-medium text-neutral-200 font-geist" style="">
Benny To
</span>
<span class="text-sm text-neutral-400 font-geist" style="">
5 years of experience
</span>
</div>
</div>
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
</button>
</div>
</div>
</div>
</article>
<!-- Card 5 -->
<article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b5d711f2-c1d8-4a6c-80aa-a69b42a33e00_1600w.jpg" alt="Tropical Beach Paradise" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
<div
class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div
class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
<h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
Tropical Beach Paradise
</h4>
<div class="flex items-center justify-between">
<div class="flex gap-2 items-center">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dc0337fb-ed78-4515-a35d-9bf52d6af946_320w.webp" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
<div class="flex flex-col leading-tight">
<span class="text-base font-medium text-neutral-200 font-geist" style="">
Benny To
</span>
<span class="text-sm text-neutral-400 font-geist" style="">
5 years of experience
</span>
</div>
</div>
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
</button>
</div>
</div>
</div>
</article>
<!-- Card 6 -->
<article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cc78b114-8d82-4b45-b756-25d0697fe629_1600w.jpg" alt="Fresh Food and Ingredients" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
<div
class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div
class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
<h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
Fresh Food and Ingredients
</h4>
<div class="flex items-center justify-between">
<div class="flex gap-2 items-center">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8a90d32f-809f-4383-b71f-6a9c50621b69_320w.jpg" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
<div class="flex flex-col leading-tight">
<span class="text-base font-medium text-neutral-200 font-geist" style="">
Megan Lyn
</span>
<span class="text-sm text-neutral-400 font-geist" style="">
5 years of experience
</span>
</div>
</div>
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
</button>
</div>
</div>
</div>
</article>
<!-- Card 7 -->
<article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8dbdc665-9457-4d9e-8802-35ee5a13090e_1600w.webp" alt="Abstract Art and Patterns" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
<div
class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div
class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
<h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
Abstract Art and Patterns
</h4>
<div class="flex items-center justify-between">
<div class="flex gap-2 items-center">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b476201e-4ebc-447a-b9b9-0c7e4e8302a0_320w.jpg" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
<div class="flex flex-col leading-tight">
<span class="text-base font-medium text-neutral-200 font-geist" style="">
Meng To
</span>
<span class="text-sm text-neutral-400 font-geist" style="">
5 years of experience
</span>
</div>
</div>
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
</button>
</div>
</div>
</div>
</article>
<!-- Card 8 -->
<article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/82781526-4ef8-4653-8d37-243d7194d6e5_800w.webp" alt="Technology and Innovation" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
<div
class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div
class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
<h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
Technology and Innovation
</h4>
<div class="flex items-center justify-between">
<div class="flex gap-2 items-center">
<img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=200&auto=format&fit=crop" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
<div class="flex flex-col leading-tight">
<span class="text-base font-medium text-neutral-200 font-geist" style="">
Meng To
</span>
<span class="text-sm text-neutral-400 font-geist" style="">
5 years of experience
</span>
</div>
</div>
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
</button>
</div>
</div>
</div>
</article>
<!-- Card 9 -->
<article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/aedb2425-6c2b-48a3-8ba5-01ea63f19cf5_1600w.webp" alt="Wildlife and Nature Photography" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
<div
class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div
class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
<h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
Wildlife and Nature Photography
</h4>
<div class="flex items-center justify-between">
<div class="flex gap-2 items-center">
<img src="https://images.unsplash.com/photo-1621619856624-42fd193a0661?w=1080&q=80" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
<div class="flex flex-col leading-tight">
<span class="text-base font-medium text-neutral-200 font-geist" style="">
Sourany Phomphone
</span>
<span class="text-sm text-neutral-400 font-geist" style="">
5 years of experience
</span>
</div>
</div>
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
</button>
</div>
</div>
</div>
</article>
<!-- Card 10 -->
<article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2974da65-b519-45e9-a413-b9d7b00099a5_1600w.jpg" alt="Minimalist Architecture" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
<div
class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div
class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
<h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
Minimalist Architecture
</h4>
<div class="flex items-center justify-between">
<div class="flex gap-2 items-center">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/24f664fd-07a7-45e6-9553-ed03aa0c764f_320w.jpg" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
<div class="flex flex-col leading-tight">
<span class="text-base font-medium text-neutral-200 font-geist" style="">
Meng To
</span>
<span class="text-sm text-neutral-400 font-geist" style="">
5 years of experience
</span>
</div>
</div>
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
</button>
</div>
</div>
</div>
</article>
<!-- Card 11 -->
<article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a8a18478-d20b-4c5f-9811-5e3a92a55aa1_1600w.webp" alt="Sunset Over the Ocean" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
<div
class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div
class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
<h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
Sunset Over the Ocean
</h4>
<div class="flex items-center justify-between">
<div class="flex gap-2 items-center">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/24f664fd-07a7-45e6-9553-ed03aa0c764f_320w.jpg" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
<div class="flex flex-col leading-tight">
<span class="text-base font-medium text-neutral-200 font-geist" style="">
Meng To
</span>
<span class="text-sm text-neutral-400 font-geist" style="">
5 years of experience
</span>
</div>
</div>
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
</button>
</div>
</div>
</div>
</article>
<!-- Card 12 -->
<article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e1cdcac4-b146-4843-a403-1e0e749b5e24_1600w.webp" alt="Cozy Interior Design" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
<div
class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div
class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
<h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
Cozy Interior Design
</h4>
<div class="flex items-center justify-between">
<div class="flex gap-2 items-center">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/24f664fd-07a7-45e6-9553-ed03aa0c764f_320w.jpg" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
<div class="flex flex-col leading-tight">
<span class="text-base font-medium text-neutral-200 font-geist" style="">
Meng To
</span>
<span class="text-sm text-neutral-400 font-geist" style="">
5 years of experience
</span>
</div>
</div>
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
</button>
</div>
</div>
</div>
</article>
</main>
<!-- Pagination Footer -->
</div>