All Prompts
All Prompts
featuregallerytravelcardsanimatedresponsivetailwind
Animated Travel Destinations Gallery Section
Секция галереи анимированных направлений для путешествий. Темная полноширинная галерея с карточками, эффектами наведения и анимацией при скролле. Адаптивный дизайн.
Prompt
<body
class="antialiased selection:bg-orange-500/30 selection:text-white overflow-x-hidden min-h-screen text-white bg-[#050505] relative"
data-element-locator="html > body:nth-of-type(1)">
<!-- Background Overlay -->
<div class="fixed z-0 top-0 right-0 bottom-0 left-0 pointer-events-none">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2b5079f4-4ddd-433b-a936-fc8f7dea9df0_3840w.webp" alt="Background" class="w-full h-full object-cover opacity-20 mix-blend-luminosity">
<div class="absolute inset-0 bg-gradient-to-b from-[#050505] via-[#050505]/80 to-[#050505]"></div>
<div
class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-orange-900/10 via-[#050505]/0 to-[#050505]/0">
</div>
</div>
<!-- Vertical Grid Lines with Falling Beams -->
<div
class="fixed inset-0 z-0 pointer-events-none flex w-full max-w-[1800px] mx-auto border-r border-white/5 opacity-40">
<div class="flex-1 border-l border-white/5 h-full relative overflow-hidden">
<span class="absolute bottom-8 left-4 text-white/10 text-xs font-mono">01</span>
</div>
<div class="flex-1 border-l border-white/5 h-full relative overflow-hidden hidden sm:block">
<div
class="absolute top-0 -left-[1px] w-[1px] h-64 bg-gradient-to-b from-transparent via-orange-500/60 to-transparent animate-beam-1">
</div>
<span class="absolute bottom-8 left-4 text-white/10 text-xs font-mono">02</span>
</div>
<div class="flex-1 border-l border-white/5 h-full relative overflow-hidden hidden md:block">
<div
class="absolute top-0 -left-[1px] w-[1px] h-96 bg-gradient-to-b from-transparent via-orange-500/80 to-transparent animate-beam-2">
</div>
<span class="absolute bottom-8 left-4 text-white/10 text-xs font-mono">03</span>
</div>
<div class="flex-1 border-l border-white/5 h-full relative overflow-hidden hidden lg:block">
<div
class="absolute top-0 -left-[1px] w-[1px] h-48 bg-gradient-to-b from-transparent via-orange-500/60 to-transparent animate-beam-3">
</div>
<span class="absolute bottom-8 left-4 text-white/10 text-xs font-mono">04</span>
</div>
<div class="flex-1 border-l border-white/5 h-full relative overflow-hidden hidden xl:block">
<span class="absolute bottom-8 left-4 text-white/10 text-xs font-mono">05</span>
</div>
</div>
<!-- Main Content -->
<main
class="z-10 md:px-8 md:py-12 flex flex-col min-h-screen w-full max-w-[1800px] mr-auto ml-auto pt-8 pr-4 pb-8 pl-4 relative"
data-element-locator="html > body:nth-of-type(1) > main:nth-of-type(1)">
<!-- Navigation -->
<nav class="flex animate-on-scroll mb-24 items-center justify-between"
data-element-locator="html > body:nth-of-type(1) > main:nth-of-type(1) > nav:nth-of-type(1)">
<div class="flex items-center gap-3">
<div
class="flex bg-gradient-to-tr from-orange-500 to-amber-500 w-8 h-8 ring-white/20 ring-1 rounded-full items-center justify-center"
data-element-locator="html > body:nth-of-type(1) > main:nth-of-type(1) > nav:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1)">
<div class="w-2.5 h-2.5 bg-[#050505] rounded-full"></div>
</div>
<span class="text-sm font-semibold tracking-tight uppercase text-white">Travel Gallery</span>
</div>
<div class="flex items-center gap-6">
<a href="#"
class="hidden sm:block text-xs font-medium tracking-widest uppercase hover:text-white transition-colors text-neutral-500">Locations</a>
<a href="#"
class="hidden sm:block text-xs font-medium tracking-widest uppercase hover:text-white transition-colors text-neutral-500">Journal</a>
<button class="button-custom scale-90 hover:scale-95 transition-transform">
<span class="inner">
View All
<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" data-lucide="arrow-right" class="lucide lucide-arrow-right w-3 h-3 ml-1"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</span>
</button>
</div>
</nav>
<!-- Header Section -->
<div class="flex flex-col gap-8 xl:flex-row xl:items-end xl:justify-between mb-20">
<div class="flex flex-col gap-6 max-w-4xl animate-on-scroll" style="animation-delay: 0.1s;">
<div class="inline-flex items-center gap-2 text-orange-500 mb-2">
<span class="flex h-1.5 w-1.5 rounded-full bg-orange-500"></span>
<span class="text-xs font-bold tracking-widest uppercase text-orange-500/80">Curated Selection</span>
</div>
<h1 class="text-5xl md:text-7xl font-medium tracking-tighter text-white">
Featured
<span class="text-transparent bg-clip-text bg-gradient-to-r from-neutral-200 to-neutral-600">Destinations.</span>
</h1>
<p class="text-lg md:text-xl text-neutral-500 leading-relaxed font-normal max-w-xl">
Discover the most loved and followed places of the moment. Explore their latest hidden gems around the world.
</p>
</div>
</div>
<!-- Gallery Grid - 6 columns, 2 rows -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 pb-20">
<!-- Card 1 -->
<div
class="group relative aspect-[4/5] overflow-hidden rounded-2xl border border-white/10 bg-[#111] animate-on-scroll"
style="animation-delay: 0.2s;">
<div
class="absolute -inset-1 bg-gradient-to-b from-transparent to-orange-500/20 opacity-0 group-hover:opacity-100 transition duration-700">
</div>
<img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=800&auto=format&fit=crop" alt="Switzerland" class="card-image h-full w-full object-cover will-change-transform group-hover:scale-110">
<div
class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500">
</div>
<div class="absolute inset-x-0 bottom-0 p-5">
<div
class="card-overlay flex flex-col gap-3 rounded-xl border border-white/10 bg-black/60 p-4 backdrop-blur-md">
<h3 class="text-sm font-medium tracking-wide text-white uppercase">Switzerland</h3>
<div class="flex items-center justify-between">
<span class="text-[10px] text-neutral-400 font-mono">01 — ALP</span>
<button class="group/btn inline-flex items-center justify-center h-6 w-6 rounded-full border border-white/20 bg-white/10 text-white transition-colors hover:bg-orange-500 hover:border-orange-500 hover:text-black">
<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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3 w-3"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div
class="group relative aspect-[4/5] overflow-hidden rounded-2xl border border-white/10 bg-[#111] animate-on-scroll"
style="animation-delay: 0.25s;">
<div
class="absolute -inset-1 bg-gradient-to-b from-transparent to-orange-500/20 opacity-0 group-hover:opacity-100 transition duration-700">
</div>
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="Big Sur" class="card-image h-full w-full object-cover will-change-transform group-hover:scale-110">
<div
class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500">
</div>
<div class="absolute inset-x-0 bottom-0 p-5">
<div
class="card-overlay flex flex-col gap-3 rounded-xl border border-white/10 bg-black/60 p-4 backdrop-blur-md">
<h3 class="text-sm font-medium tracking-wide text-white uppercase">Big Sur</h3>
<div class="flex items-center justify-between">
<span class="text-[10px] text-neutral-400 font-mono">02 — USA</span>
<button class="group/btn inline-flex items-center justify-center h-6 w-6 rounded-full border border-white/20 bg-white/10 text-white transition-colors hover:bg-orange-500 hover:border-orange-500 hover:text-black">
<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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3 w-3"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Card 3 -->
<div
class="group relative aspect-[4/5] overflow-hidden rounded-2xl border border-white/10 bg-[#111] animate-on-scroll"
style="animation-delay: 0.3s;">
<div
class="absolute -inset-1 bg-gradient-to-b from-transparent to-orange-500/20 opacity-0 group-hover:opacity-100 transition duration-700">
</div>
<img src="https://images.unsplash.com/photo-1502602898657-3e91760cbb34?q=80&w=800&auto=format&fit=crop" alt="Paris" class="card-image h-full w-full object-cover will-change-transform group-hover:scale-110">
<div
class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500">
</div>
<div class="absolute inset-x-0 bottom-0 p-5">
<div
class="card-overlay flex flex-col gap-3 rounded-xl border border-white/10 bg-black/60 p-4 backdrop-blur-md">
<h3 class="text-sm font-medium tracking-wide text-white uppercase">Paris</h3>
<div class="flex items-center justify-between">
<span class="text-[10px] text-neutral-400 font-mono">03 — FRA</span>
<button class="group/btn inline-flex items-center justify-center h-6 w-6 rounded-full border border-white/20 bg-white/10 text-white transition-colors hover:bg-orange-500 hover:border-orange-500 hover:text-black">
<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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3 w-3"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Card 4 -->
<div
class="group relative aspect-[4/5] overflow-hidden rounded-2xl border border-white/10 bg-[#111] animate-on-scroll"
style="animation-delay: 0.35s;">
<div
class="absolute -inset-1 bg-gradient-to-b from-transparent to-orange-500/20 opacity-0 group-hover:opacity-100 transition duration-700">
</div>
<img src="https://images.unsplash.com/photo-1507608869274-d3177c8bb4c7?q=80&w=800&auto=format&fit=crop" alt="Cappadocia" class="card-image h-full w-full object-cover will-change-transform group-hover:scale-110">
<div
class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500">
</div>
<div class="absolute inset-x-0 bottom-0 p-5">
<div
class="card-overlay flex flex-col gap-3 rounded-xl border border-white/10 bg-black/60 p-4 backdrop-blur-md">
<h3 class="text-sm font-medium tracking-wide text-white uppercase">Cappadocia</h3>
<div class="flex items-center justify-between">
<span class="text-[10px] text-neutral-400 font-mono">04 — TUR</span>
<button class="group/btn inline-flex items-center justify-center h-6 w-6 rounded-full border border-white/20 bg-white/10 text-white transition-colors hover:bg-orange-500 hover:border-orange-500 hover:text-black">
<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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3 w-3"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Card 5 -->
<div
class="group relative aspect-[4/5] overflow-hidden rounded-2xl border border-white/10 bg-[#111] animate-on-scroll"
style="animation-delay: 0.4s;">
<div
class="absolute -inset-1 bg-gradient-to-b from-transparent to-orange-500/20 opacity-0 group-hover:opacity-100 transition duration-700">
</div>
<img src="https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?q=80&w=800&auto=format&fit=crop" alt="Camping" class="card-image h-full w-full object-cover will-change-transform group-hover:scale-110">
<div
class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500">
</div>
<div class="absolute inset-x-0 bottom-0 p-5">
<div
class="card-overlay flex flex-col gap-3 rounded-xl border border-white/10 bg-black/60 p-4 backdrop-blur-md">
<h3 class="text-sm font-medium tracking-wide text-white uppercase">Camping</h3>
<div class="flex items-center justify-between">
<span class="text-[10px] text-neutral-400 font-mono">05 — ADV</span>
<button class="group/btn inline-flex items-center justify-center h-6 w-6 rounded-full border border-white/20 bg-white/10 text-white transition-colors hover:bg-orange-500 hover:border-orange-500 hover:text-black">
<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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3 w-3"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Card 6 -->
<div
class="group relative aspect-[4/5] overflow-hidden rounded-2xl border border-white/10 bg-[#111] animate-on-scroll"
style="animation-delay: 0.45s;">
<div
class="absolute -inset-1 bg-gradient-to-b from-transparent to-orange-500/20 opacity-0 group-hover:opacity-100 transition duration-700">
</div>
<img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=80&w=800&auto=format&fit=crop" alt="Hiking" class="card-image h-full w-full object-cover will-change-transform group-hover:scale-110">
<div
class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500">
</div>
<div class="absolute inset-x-0 bottom-0 p-5">
<div
class="card-overlay flex flex-col gap-3 rounded-xl border border-white/10 bg-black/60 p-4 backdrop-blur-md">
<h3 class="text-sm font-medium tracking-wide text-white uppercase">Hiking</h3>
<div class="flex items-center justify-between">
<span class="text-[10px] text-neutral-400 font-mono">06 — MOU</span>
<button class="group/btn inline-flex items-center justify-center h-6 w-6 rounded-full border border-white/20 bg-white/10 text-white transition-colors hover:bg-orange-500 hover:border-orange-500 hover:text-black">
<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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3 w-3"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Card 7 -->
<div
class="group relative aspect-[4/5] overflow-hidden rounded-2xl border border-white/10 bg-[#111] animate-on-scroll"
style="animation-delay: 0.5s;">
<div
class="absolute -inset-1 bg-gradient-to-b from-transparent to-orange-500/20 opacity-0 group-hover:opacity-100 transition duration-700">
</div>
<img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=800&auto=format&fit=crop" alt="The Lakes" class="card-image h-full w-full object-cover will-change-transform group-hover:scale-110">
<div
class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500">
</div>
<div class="absolute inset-x-0 bottom-0 p-5">
<div
class="card-overlay flex flex-col gap-3 rounded-xl border border-white/10 bg-black/60 p-4 backdrop-blur-md">
<h3 class="text-sm font-medium tracking-wide text-white uppercase">The Lakes</h3>
<div class="flex items-center justify-between">
<span class="text-[10px] text-neutral-400 font-mono">07 — UK</span>
<button class="group/btn inline-flex items-center justify-center h-6 w-6 rounded-full border border-white/20 bg-white/10 text-white transition-colors hover:bg-orange-500 hover:border-orange-500 hover:text-black">
<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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3 w-3"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Card 8 -->
<div
class="group relative aspect-[4/5] overflow-hidden rounded-2xl border border-white/10 bg-[#111] animate-on-scroll"
style="animation-delay: 0.55s;">
<div
class="absolute -inset-1 bg-gradient-to-b from-transparent to-orange-500/20 opacity-0 group-hover:opacity-100 transition duration-700">
</div>
<img src="https://images.unsplash.com/photo-1516483638261-f4dbaf036963?q=80&w=800&auto=format&fit=crop" alt="Cinque Terre" class="card-image h-full w-full object-cover will-change-transform group-hover:scale-110">
<div
class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500">
</div>
<div class="absolute inset-x-0 bottom-0 p-5">
<div
class="card-overlay flex flex-col gap-3 rounded-xl border border-white/10 bg-black/60 p-4 backdrop-blur-md">
<h3 class="text-sm font-medium tracking-wide text-white uppercase">Cinque Terre</h3>
<div class="flex items-center justify-between">
<span class="text-[10px] text-neutral-400 font-mono">08 — ITA</span>
<button class="group/btn inline-flex items-center justify-center h-6 w-6 rounded-full border border-white/20 bg-white/10 text-white transition-colors hover:bg-orange-500 hover:border-orange-500 hover:text-black">
<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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3 w-3"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Card 9 -->
<div
class="group relative aspect-[4/5] overflow-hidden rounded-2xl border border-white/10 bg-[#111] animate-on-scroll"
style="animation-delay: 0.6s;">
<div
class="absolute -inset-1 bg-gradient-to-b from-transparent to-orange-500/20 opacity-0 group-hover:opacity-100 transition duration-700">
</div>
<img src="https://images.unsplash.com/photo-1523906834658-6e24ef2386f9?q=80&w=800&auto=format&fit=crop" alt="Venice" class="card-image h-full w-full object-cover will-change-transform group-hover:scale-110">
<div
class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500">
</div>
<div class="absolute inset-x-0 bottom-0 p-5">
<div
class="card-overlay flex flex-col gap-3 rounded-xl border border-white/10 bg-black/60 p-4 backdrop-blur-md">
<h3 class="text-sm font-medium tracking-wide text-white uppercase">Venice</h3>
<div class="flex items-center justify-between">
<span class="text-[10px] text-neutral-400 font-mono">09 — ITA</span>
<button class="group/btn inline-flex items-center justify-center h-6 w-6 rounded-full border border-white/20 bg-white/10 text-white transition-colors hover:bg-orange-500 hover:border-orange-500 hover:text-black">
<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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3 w-3"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Card 10 -->
<div
class="group relative aspect-[4/5] overflow-hidden rounded-2xl border border-white/10 bg-[#111] animate-on-scroll"
style="animation-delay: 0.65s;">
<div
class="absolute -inset-1 bg-gradient-to-b from-transparent to-orange-500/20 opacity-0 group-hover:opacity-100 transition duration-700">
</div>
<img src="https://images.unsplash.com/photo-1506012787146-f92b2d7d6d96?q=80&w=800&auto=format&fit=crop" alt="New Zealand" class="card-image h-full w-full object-cover will-change-transform group-hover:scale-110">
<div
class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500">
</div>
<div class="absolute inset-x-0 bottom-0 p-5">
<div
class="card-overlay flex flex-col gap-3 rounded-xl border border-white/10 bg-black/60 p-4 backdrop-blur-md">
<h3 class="text-sm font-medium tracking-wide text-white uppercase">New Zealand</h3>
<div class="flex items-center justify-between">
<span class="text-[10px] text-neutral-400 font-mono">10 — NZL</span>
<button class="group/btn inline-flex items-center justify-center h-6 w-6 rounded-full border border-white/20 bg-white/10 text-white transition-colors hover:bg-orange-500 hover:border-orange-500 hover:text-black">
<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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3 w-3"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Card 11 -->
<div
class="group relative aspect-[4/5] overflow-hidden rounded-2xl border border-white/10 bg-[#111] animate-on-scroll"
style="animation-delay: 0.7s;">
<div
class="absolute -inset-1 bg-gradient-to-b from-transparent to-orange-500/20 opacity-0 group-hover:opacity-100 transition duration-700">
</div>
<img src="https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?q=80&w=800&auto=format&fit=crop" alt="Forest" class="card-image h-full w-full object-cover will-change-transform group-hover:scale-110">
<div
class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500">
</div>
<div class="absolute inset-x-0 bottom-0 p-5">
<div
class="card-overlay flex flex-col gap-3 rounded-xl border border-white/10 bg-black/60 p-4 backdrop-blur-md">
<h3 class="text-sm font-medium tracking-wide text-white uppercase">Forest</h3>
<div class="flex items-center justify-between">
<span class="text-[10px] text-neutral-400 font-mono">11 — NAT</span>
<button class="group/btn inline-flex items-center justify-center h-6 w-6 rounded-full border border-white/20 bg-white/10 text-white transition-colors hover:bg-orange-500 hover:border-orange-500 hover:text-black">
<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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3 w-3"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Card 12 -->
<div
class="group relative aspect-[4/5] overflow-hidden rounded-2xl border border-white/10 bg-[#111] animate-on-scroll"
style="animation-delay: 0.75s;">
<div
class="absolute -inset-1 bg-gradient-to-b from-transparent to-orange-500/20 opacity-0 group-hover:opacity-100 transition duration-700">
</div>
<img src="https://images.unsplash.com/photo-1530789253388-582c481c54b0?q=80&w=800&auto=format&fit=crop" alt="Istanbul" class="card-image h-full w-full object-cover will-change-transform group-hover:scale-110">
<div
class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500">
</div>
<div class="absolute inset-x-0 bottom-0 p-5">
<div
class="card-overlay flex flex-col gap-3 rounded-xl border border-white/10 bg-black/60 p-4 backdrop-blur-md">
<h3 class="text-sm font-medium tracking-wide text-white uppercase">Istanbul</h3>
<div class="flex items-center justify-between">
<span class="text-[10px] text-neutral-400 font-mono">12 — TUR</span>
<button class="group/btn inline-flex items-center justify-center h-6 w-6 rounded-full border border-white/20 bg-white/10 text-white transition-colors hover:bg-orange-500 hover:border-orange-500 hover:text-black">
<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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3 w-3"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
lucide.createIcons({
attrs: {
'stroke-width': 1.5
}
});
(function(){
const once=true;
if(!window.__inViewIO){
window.__inViewIO=new IntersectionObserver((entries)=>{
entries.forEach((entry)=>{
if(entry.isIntersecting){
entry.target.classList.add("animate");
if(once)window.__inViewIO.unobserve(entry.target)
}
})
},{threshold:0.1,rootMargin:"0px 0px -50px 0px"})
}
window.initInViewAnimations=function(selector=".animate-on-scroll"){
document.querySelectorAll(selector).forEach((el)=>{window.__inViewIO.observe(el)})
};
document.addEventListener("DOMContentLoaded",()=>initInViewAnimations())
})();
</script>
<div class="edit-mode-label" data-edit-label="true" style="left: 0px; top: 0px;">
<span class="edit-mode-label-text">body</span><button class="edit-mode-move-btn">↑</button><button class="edit-mode-move-btn" disabled="">↓</button>
</div>
<button class="edit-mode-bottom-btn add-new" data-edit-label="true" title="Add content after element" style="left: 0px; top: 1260.33px;"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus"><path d="M12 5v14" class=""></path><path d="M5 12h14" class=""></path></svg></button><button class="edit-mode-bottom-btn replace" data-edit-label="true" title="Replace element with component" style="left: 30px; top: 1260.33px;"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-repeat"><polyline points="17 1 21 5 17 9" class=""></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14" class=""></path><polyline points="7 23 3 19 7 15" class=""></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3" class=""></path></svg></button><button class="edit-mode-bottom-btn menu" data-edit-label="true" title="Open context menu" style="left: 60px; top: 1260.33px;"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-more-horizontal"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg></button>
</body>