Загрузка...
UI компонент: галерея изображений с ручной прокруткой влево/вправо. Адаптивный, для секций портфолио и лендингов.
<body class="antialiased selection:bg-neutral-200 selection:text-black text-slate-50">
<div class="absolute top-0 w-full h-[700px] -z-10 mix-blend-normal brightness-75 bg-cover bg-center saturate-200"
style="background-image: url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f95c905b-1752-46ea-84de-2f50298f43ba_3840w.jpg");; mask-image: linear-gradient(to bottom, transparent, black 0%, black 100%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 100%, transparent)"
data-alpha-mask="100"></div>
<!-- Background (image) added by Aura -->
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 border-b backdrop-blur-md border-white/5 bg-black/50" style="">
<div class="flex h-16 max-w-5xl mr-auto ml-auto pr-6 pl-6 items-center justify-between">
<div class="flex items-center gap-2 group cursor-pointer">
<span class="hidden sm:block text-sm font-medium text-neutral-50 tracking-tight scale-100">Pavlo Koval</span>
</div>
<div class="flex gap-6 text-xs font-medium tracking-wide scale-150 gap-x-6 gap-y-6 items-center">
<a href="#work" class="transition-colors hover:text-white">WORK</a>
<a href="#gear" class="transition-colors hover:text-white">KIT</a>
<a href="#contact" class="transition-colors hover:text-white">CONTACT</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="sm:pt-40 sm:pb-32 pt-32 pr-6 pb-20 pl-6 brightness-200">
<div class="max-w-3xl mx-auto">
<div class="flex items-center gap-3 mb-6">
</div>
<h1 class="sm:text-5xl md:text-6xl leading-[1.1] text-4xl font-medium text-white tracking-tight mb-8" style="">
Pavlo Koval</h1>
<p class="sm:text-xl leading-relaxed text-lg font-light text-neutral-50 max-w-xl mb-10">Production Sound Mixer
based in New York. Specializing in sound recording for feature films, episodic television, and commercial
productions.</p>
<div class="flex flex-wrap gap-4">
<button class="group flex items-center gap-2 px-5 py-2.5 rounded text-sm font-medium transition-colors bg-white text-black hover:bg-neutral-200">
<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" data-lucide="download" class="lucide lucide-download"><path d="M12 15V3" class=""></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="m7 10 5 5 5-5" class=""></path></svg>
<span class="cursor-pointer" onclick="window.location.href='/cv';window.location.href='/<iframe src="https://drive.google.com/file/d/16zmfWaWCEPKOnPeDs2_egz39G7g3GM_I/preview" width="640" height="480"></iframe>';window.location.href='/<iframe src="https://drive.google.com/file/d/16zmfWaWCEPKOnPeDs2_egz39G7g3GM_I/preview" width="640" height="480"></iframe>';window.location.href='/<iframe src="https://drive.google.com/file/d/16zmfWaWCEPKOnPeDs2_egz39G7g3GM_I/preview" width="640" height="480"></iframe>';window.location.href='/<iframe src="https://drive.google.com/file/d/16zmfWaWCEPKOnPeDs2_egz39G7g3GM_I/preview" width="640" height="480"></iframe>';window.location.href='/cv'" role="button">Download CV</span>
</button>
<button class="flex items-center gap-2 border px-5 py-2.5 rounded text-sm font-medium transition-colors bg-neutral-900 border-neutral-800 text-white hover:border-neutral-600" style="">
<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" data-lucide="mail" class="lucide lucide-mail"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect></svg>
<span class="">Get in Touch</span>
</button>
</div>
</div>
</header>
<!-- Technical Dashboard / Visualizer -->
<div class="border-y bg-white/[0.02] border-white/5" style="">
<div class="max-w-5xl mx-auto px-6 py-12">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Stat 1 -->
<div class="flex flex-col gap-2">
<div class="text-xs font-medium uppercase tracking-widest text-neutral-500" style="">Experience</div>
<div class="text-3xl font-medium tracking-tight text-white" style="">10 Years</div>
<div class="text-sm text-neutral-500" style="">On-set production sound</div>
</div>
<!-- Stat 2 -->
<div class="flex flex-col gap-2">
</div>
<!-- Active Visualization -->
<div class="flex flex-col justify-between gap-2">
<div class="flex justify-between items-end h-10 gap-1 opacity-80">
<!-- Simulated Audio Meters -->
<div class="w-1 bg-indigo-500 h-full rounded-sm audio-bar" style="animation-delay: 0.1s;"></div>
<div class="w-1 bg-indigo-500 h-[80%] rounded-sm audio-bar" style="animation-delay: 0.3s;"></div>
<div class="w-1 bg-indigo-500 h-[60%] rounded-sm audio-bar" style="animation-delay: 0.2s;"></div>
<div class="w-1 bg-indigo-500 h-[90%] rounded-sm audio-bar" style="animation-delay: 0.5s;"></div>
<div class="w-1 bg-cyan-500 h-[95%] rounded-sm audio-bar" style="animation-delay: 0.1s;"></div>
<div class="w-1 bg-indigo-500 h-[70%] rounded-sm audio-bar" style="animation-delay: 0.4s;"></div>
<div class="w-1 bg-indigo-500 h-[50%] rounded-sm audio-bar" style="animation-delay: 0.2s;"></div>
<div class="w-1 bg-indigo-500 h-[85%] rounded-sm audio-bar" style="animation-delay: 0.6s;"></div>
<div class="w-1 bg-indigo-500 h-[65%] rounded-sm audio-bar" style="animation-delay: 0.3s;"></div>
<div class="w-1 bg-indigo-500 h-[40%] rounded-sm audio-bar" style="animation-delay: 0.5s;"></div>
<div class="w-1 bg-indigo-500 h-[75%] rounded-sm audio-bar" style="animation-delay: 0.2s;"></div>
<div class="w-1 bg-indigo-500 h-[55%] rounded-sm audio-bar" style="animation-delay: 0.4s;"></div>
</div>
<div class="flex justify-between text-[10px] font-mono pt-2 border-t text-neutral-600 border-neutral-800"
style="">
<span>-60</span>
<span class="">-40</span>
<span>-20</span>
<span class="">-12</span>
<span>-6</span>
<span>0</span>
</div>
</div>
</div>
</div>
</div>
<!-- Selected Credits -->
<section class="max-w-5xl mr-auto ml-auto pt-24 pr-6 pb-24 pl-6" id="work">
<div class="flex items-center justify-between mb-12">
<h2 class="text-xl font-medium tracking-tight text-white" style="">Selected Credits</h2>
<a href="https://www.imdb.com/name/nm11645432/"
class="transition-colors flex items-center gap-1 hover:text-white text-sm text-neutral-500">
IMDb <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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">
<path d="M7 7h10v10" class=""></path>
<path d="M7 17 17 7" class=""></path>
</svg>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Project Card 1 -->
<div
class="group relative border rounded-xl p-6 transition-all duration-300 bg-neutral-900/30 border-white/5 hover:border-white/10 hover:bg-neutral-900/50"
style="">
<div class="flex justify-between items-start mb-4">
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-neutral-800 text-white" style="">
<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"
data-lucide="clapperboard"
class="lucide lucide-clapperboard group-hover:text-white transition-colors text-neutral-50" style="">
<path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z" class=""></path>
<path d="m6.2 5.3 3.1 3.9" class=""></path>
<path d="m12.4 3.4 3.1 4" class=""></path>
<path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" class=""></path>
</svg>
</div>
<span class="text-xs font-mono text-neutral-600" style="">2023</span>
</div>
<h3 class="text-lg font-medium mb-1 group-hover:text-indigo-400 transition-colors text-white" style="">The Pale
Blue Eye</h3>
<p class="text-sm mb-4 text-neutral-50" style="">Feature Film • Netflix</p>
<div class="flex gap-2">
<span class="text-[10px] px-2 py-1 rounded border bg-white/5 border-white/5 text-neutral-50" style="">Production Mixer</span>
<span class="text-[10px] px-2 py-1 rounded border bg-white/5 border-white/5 text-neutral-50" style="">Dolby Atmos</span>
</div>
</div>
<!-- Project Card 2 -->
<div
class="group relative border rounded-xl p-6 transition-all duration-300 bg-neutral-900/30 border-white/5 hover:border-white/10 hover:bg-neutral-900/50"
style="">
<div class="flex justify-between items-start mb-4">
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-neutral-800 text-white" style="">
<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" data-lucide="tv"
class="lucide lucide-tv group-hover:text-white transition-colors text-neutral-50" style="">
<path d="m17 2-5 5-5-5" class=""></path>
<rect width="20" height="15" x="2" y="7" rx="2" class=""></rect>
</svg>
</div>
<span class="text-xs font-mono text-neutral-600" style="">2022</span>
</div>
<h3 class="text-lg font-medium mb-1 group-hover:text-indigo-400 transition-colors text-white" style="">Severance
(S1)</h3>
<p class="text-sm mb-4 text-neutral-50" style="">Series • Apple TV+</p>
<div class="flex gap-2">
<span class="text-[10px] px-2 py-1 rounded border bg-white/5 border-white/5 text-neutral-50" style="">Sound Mixer (2nd Unit)</span>
</div>
</div>
<!-- Project Card 3 -->
<div
class="group relative border rounded-xl p-6 transition-all duration-300 bg-neutral-900/30 border-white/5 hover:border-white/10 hover:bg-neutral-900/50"
style="">
<div class="flex justify-between items-start mb-4">
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-neutral-800 text-white" style="">
<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" data-lucide="film"
class="lucide lucide-film group-hover:text-white transition-colors text-neutral-50" style="">
<rect width="18" height="18" x="3" y="3" rx="2" class=""></rect>
<path d="M7 3v18" class=""></path>
<path d="M3 7.5h4" class=""></path>
<path d="M3 12h18" class=""></path>
<path d="M3 16.5h4" class=""></path>
<path d="M17 3v18" class=""></path>
<path d="M17 7.5h4" class=""></path>
<path d="M17 16.5h4" class=""></path>
</svg>
</div>
<span class="text-xs font-mono text-neutral-600" style="">2022</span>
</div>
<h3 class="text-lg font-medium mb-1 group-hover:text-indigo-400 transition-colors text-white" style="">Echoes of
Silence</h3>
<p class="text-sm mb-4 text-neutral-50" style="">Indie Feature • A24</p>
<div class="flex gap-2">
<span class="text-[10px] px-2 py-1 rounded border bg-white/5 border-white/5 text-neutral-50" style="">Production Mixer</span>
</div>
</div>
<!-- Project Card 4 -->
<div
class="group relative border rounded-xl p-6 transition-all duration-300 bg-neutral-900/30 border-white/5 hover:border-white/10 hover:bg-neutral-900/50"
style="">
<div class="flex justify-between items-start mb-4">
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-neutral-800 text-white" style="">
<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" data-lucide="mic-2"
class="lucide lucide-mic-2 group-hover:text-white transition-colors text-neutral-50" style="">
<path d="m11 7.601-5.994 8.19a1 1 0 0 0 .1 1.298l.817.818a1 1 0 0 0 1.314.087L15.09 12" class=""></path>
<path d="M16.5 21.174C15.5 20.5 14.372 20 13 20c-2.058 0-3.928 2.356-6 2-2.072-.356-2.775-3.369-1.5-4.5"
class=""></path>
<circle cx="16" cy="7" r="5" class=""></circle>
</svg>
</div>
<span class="text-xs font-mono text-neutral-600" style="">2021</span>
</div>
<h3 class="text-lg font-medium mb-1 group-hover:text-indigo-400 transition-colors text-white" style="">Nike
"Run"</h3>
<p class="text-sm mb-4 text-neutral-50" style="">Commercial • National</p>
<div class="flex gap-2">
<span class="text-[10px] px-2 py-1 rounded border bg-white/5 border-white/5 text-neutral-50" style="">Sound Recordist</span>
</div>
</div>
</div>
</section>
<!-- Gear / Kit Section -->
<section id="gear" class="border-t border-white/5 bg-neutral-950" style="">
<div class="max-w-5xl mx-auto px-6 py-24">
<div class="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-4">
<div class="">
<h2 class="text-xl font-medium tracking-tight mb-2 text-white" style="">Equipment Locker</h2>
<p class="text-sm text-neutral-500 max-w-md" style="">Professional grade audio capture systems maintained for
redundancy and reliability.</p>
</div>
<button class="text-xs font-medium border px-4 py-2 rounded transition-all border-neutral-800 bg-neutral-900 text-neutral-300 hover:text-white hover:border-neutral-600">
Download Gear List PDF
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Category 1 -->
<div class="space-y-4">
<div class="flex items-center gap-2 font-medium text-sm border-b pb-3 text-white border-white/10" style="">
<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"
data-lucide="hard-drive" class="lucide lucide-hard-drive text-neutral-500" style="">
<line x1="22" x2="2" y1="12" y2="12" class=""></line>
<path
d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
class=""></path>
<line x1="6" x2="6.01" y1="16" y2="16" class=""></line>
<line x1="10" x2="10.01" y1="16" y2="16" class=""></line>
</svg>
Recording & Mixing
</div>
<ul class="space-y-3 text-sm">
<li class="flex justify-between items-center group">
<span class="group-hover:text-neutral-200 transition-colors text-neutral-50" style="">Sound Devices Scorpio</span>
<span class="text-xs font-mono text-neutral-600" style="">32-CH</span>
</li>
<li class="flex justify-between items-center group">
<span class="group-hover:text-neutral-200 transition-colors text-neutral-50" style="">Sound Devices 888</span>
<span class="text-xs font-mono text-neutral-600" style="">BACKUP</span>
</li>
<li class="flex justify-between items-center group">
<span class="group-hover:text-neutral-200 transition-colors text-neutral-50" style="">CL-16 Control Surface</span>
<span class="text-xs font-mono text-neutral-600" style="">LINEAR</span>
</li>
<li class="flex justify-between items-center group">
<span class="group-hover:text-neutral-200 transition-colors text-neutral-50" style="">Icon Platform M+</span>
<span class="text-xs font-mono text-neutral-600" style="">CART</span>
</li>
</ul>
</div>
<!-- Category 2 -->
<div class="space-y-4">
<div class="flex items-center gap-2 font-medium text-sm border-b pb-3 text-white border-white/10" style="">
<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" data-lucide="radio"
class="lucide lucide-radio text-neutral-500" style="">
<path d="M16.247 7.761a6 6 0 0 1 0 8.478" class=""></path>
<path d="M19.075 4.933a10 10 0 0 1 0 14.134" class=""></path>
<path d="M4.925 19.067a10 10 0 0 1 0-14.134" class=""></path>
<path d="M7.753 16.239a6 6 0 0 1 0-8.478" class=""></path>
<circle cx="12" cy="12" r="2" class=""></circle>
</svg>
Wireless Systems
</div>
<ul class="space-y-3 text-sm">
<li class="flex justify-between items-center group">
<span class="group-hover:text-neutral-200 transition-colors text-neutral-50" style="">Lectrosonics DSQD</span>
<span class="text-xs font-mono text-neutral-600" style="">4-CH RX</span>
</li>
<li class="flex justify-between items-center group">
<span class="group-hover:text-neutral-200 transition-colors text-neutral-50" style="">Lectrosonics SSM</span>
<span class="text-xs font-mono text-neutral-600" style="">x8</span>
</li>
<li class="flex justify-between items-center group">
<span class="group-hover:text-neutral-200 transition-colors text-neutral-50" style="">Wisycom MCR54</span>
<span class="text-xs font-mono text-neutral-600" style="">QUAD</span>
</li>
<li class="flex justify-between items-center group">
<span class="group-hover:text-neutral-200 transition-colors text-neutral-50" style="">Betso Bowtie Antenna</span>
<span class="text-xs font-mono text-neutral-600" style="">WIDE</span>
</li>
</ul>
</div>
<!-- Category 3 -->
<div class="space-y-4">
<div class="flex items-center gap-2 font-medium text-sm border-b pb-3 text-white border-white/10" style="">
<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" data-lucide="mic"
class="lucide lucide-mic text-neutral-500" style="">
<path d="M12 19v3" class=""></path>
<path d="M19 10v2a7 7 0 0 1-14 0v-2" class=""></path>
<rect x="9" y="2" width="6" height="13" rx="3" class=""></rect>
</svg>
Microphones
</div>
<ul class="space-y-3 text-sm">
<li class="flex justify-between items-center group">
<span class="group-hover:text-neutral-200 transition-colors text-neutral-50" style="">Schoeps CMIT 5U</span>
<span class="text-xs font-mono text-neutral-600" style="">BOOM A</span>
</li>
<li class="flex justify-between items-center group">
<span class="group-hover:text-neutral-200 transition-colors text-neutral-50" style="">Sennheiser MKH 50</span>
<span class="text-xs font-mono text-neutral-600" style="">BOOM B</span>
</li>
<li class="flex justify-between items-center group">
<span class="group-hover:text-neutral-200 transition-colors text-neutral-50" style="">DPA 4060 Core</span>
<span class="text-xs font-mono text-neutral-600" style="">LAVS</span>
</li>
<li class="flex justify-between items-center group">
<span class="group-hover:text-neutral-200 transition-colors text-neutral-50" style="">Sanken CS-3e</span>
<span class="text-xs font-mono text-neutral-600" style="">LONG</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="mb-32" id="backstage">
<style class="">
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.animate-marquee {
animation: marquee 120s linear infinite;
}
.animate-marquee:hover {
animation-play-state: paused;
}
</style>
<div class="max-w-5xl mx-auto px-6 mb-8 flex items-end justify-between">
<div class="">
<h2 class="text-2xl font-semibold text-white tracking-tight mb-2">Backstage</h2>
<p class="text-sm text-neutral-500">Behind the scenes on recent productions.</p>
</div>
</div>
<!-- Auto Scrolling Marquee Container -->
<div class="group w-full pb-4 relative" id="backstage-component">
<!-- Navigation Controls -->
<div class="absolute -top-14 left-0 w-full h-10 pointer-events-none z-20">
<div class="max-w-5xl mx-auto px-6 h-full flex items-end justify-end">
<div class="flex gap-2 pointer-events-auto">
<button onclick="document.getElementById('backstage-scroller').scrollBy({left: -320, behavior: 'smooth'})" class="h-8 w-8 rounded-full border border-neutral-800 bg-neutral-900/80 text-neutral-400 hover:text-white hover:border-neutral-600 hover:bg-neutral-800 backdrop-blur-md flex items-center justify-center transition-all duration-200 shadow-sm active:scale-95" aria-label="Scroll Left">
<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="chevron-left" class="lucide lucide-chevron-left w-4 h-4"><path d="m15 18-6-6 6-6" class=""></path></svg>
</button>
<button onclick="document.getElementById('backstage-scroller').scrollBy({left: 320, behavior: 'smooth'})" class="h-8 w-8 rounded-full border border-neutral-800 bg-neutral-900/80 text-neutral-400 hover:text-white hover:border-neutral-600 hover:bg-neutral-800 backdrop-blur-md flex items-center justify-center transition-all duration-200 shadow-sm active:scale-95" aria-label="Scroll Right">
<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="chevron-right" class="lucide lucide-chevron-right w-[16px] h-[16px]" data-icon-replaced="true" style="color: rgb(253, 253, 253); width: 16px; height: 16px"><path d="m9 18 6-6-6-6" class=""></path></svg>
</button>
</div>
</div>
</div>
<!-- Scrollable Container -->
<div id="backstage-scroller"
class="overflow-x-auto w-full scrollbar-hide mask-image-gradient cursor-grab active:cursor-grabbing"
style="scrollbar-width: none; -ms-overflow-style: none;">
<!-- Inner Track: Adjusted padding to pl-4 pr-4 to match gap-4 (16px) for seamless loop -->
<div class="flex gap-4 w-max pl-4 pr-4" id="backstage-track">
<!-- SET 1 -->
<!-- Item 1 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/438c8b22-ac00-41a1-85f0-1a8e8b5e6fc3_800w.jpg" alt="Backstage 1" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="clapperboard" class="lucide lucide-clapperboard w-3 h-3"><path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z" class=""></path><path d="m6.2 5.3 3.1 3.9" class=""></path><path d="m12.4 3.4 3.1 4" class=""></path><path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" class=""></path></svg> On Set
</span>
</div>
</div>
<!-- Item 2 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4f1c0517-d5d5-4e8f-b125-a9106a459404_800w.png" alt="Backstage 2" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="settings-2" class="lucide lucide-settings-2 w-3 h-3"><path d="M14 17H5" class=""></path><path d="M19 7h-9" class=""></path><circle cx="17" cy="17" r="3" class=""></circle><circle cx="7" cy="7" r="3" class=""></circle></svg> Equipment Setup
</span>
</div>
</div>
<!-- Item 3 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/026b7379-a871-4ca2-ab5c-a39262a51d4a_3840w.jpg?w=800&q=80" alt="Backstage 3" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="mic" class="lucide lucide-mic w-3 h-3"><path d="M12 19v3" class=""></path><path d="M19 10v2a7 7 0 0 1-14 0v-2" class=""></path><rect x="9" y="2" width="6" height="13" rx="3" class=""></rect></svg> Boom Operation
</span>
</div>
</div>
<!-- Item 4 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2a45cc8a-7f82-409f-9ccf-560eb553f0dd_3840w.jpg" alt="Backstage 4" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="film" class="lucide lucide-film w-3 h-3"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M7 3v18" class=""></path><path d="M3 7.5h4" class=""></path><path d="M3 12h18" class=""></path><path d="M3 16.5h4" class=""></path><path d="M17 3v18" class=""></path><path d="M17 7.5h4" class=""></path><path d="M17 16.5h4" class=""></path></svg> Exterior Night Shoot
</span>
</div>
</div>
<!-- Item 5 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/71b47075-ab03-4553-b825-b8430750e80e_800w.jpg" alt="Backstage 5" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="headphones" class="lucide lucide-headphones w-3 h-3"><path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3" class=""></path></svg> Studio Recording
</span>
</div>
</div>
<!-- Item 6 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1629946832022-c327f74956e0?w=2160&q=80" alt="Backstage 6" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="sliders" class="lucide lucide-sliders w-3 h-3"><path d="M10 8h4" class=""></path><path d="M12 21v-9" class=""></path><path d="M12 8V3" class=""></path><path d="M17 16h4" class=""></path><path d="M19 12V3" class=""></path><path d="M19 21v-5" class=""></path><path d="M3 14h4" class=""></path><path d="M5 10V3" class=""></path><path d="M5 21v-7" class=""></path></svg> Sound Mixing
</span>
</div>
</div>
<!-- Item 7 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1724525647065-f948fc102e68?w=2160&q=80" alt="Backstage 7" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="activity" class="lucide lucide-activity w-3 h-3"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" class=""></path></svg> Field Recording
</span>
</div>
</div>
<!-- Item 8 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="Backstage 8" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="map-pin" class="lucide lucide-map-pin w-3 h-3"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" class=""></path><circle cx="12" cy="10" r="3" class=""></circle></svg> Location Scouting
</span>
</div>
</div>
<!-- Item 9 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4734259a-bad7-422f-981e-ce01e79184f2_1600w.jpg" alt="Backstage 9" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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-play" class="lucide lucide-monitor-play w-3 h-3"><path d="M15.033 9.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56V7.648a.645.645 0 0 1 .967-.56z" class=""></path><path d="M12 17v4" class=""></path><path d="M8 21h8" class=""></path><rect x="2" y="3" width="20" height="14" rx="2" class=""></rect></svg> Post Production
</span>
</div>
</div>
<!-- Item 10 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c543a9e1-f226-4ced-80b0-feb8445a75b9_1600w.jpg" alt="Backstage 10" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="volume-2" class="lucide lucide-volume-2 w-3 h-3"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" class=""></path><path d="M16 9a5 5 0 0 1 0 6" class=""></path><path d="M19.364 18.364a9 9 0 0 0 0-12.728" class=""></path></svg> Sound Check
</span>
</div>
</div>
<!-- Item 11 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=1000&auto=format&fit=crop" alt="Backstage 11" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="video" class="lucide lucide-video w-3 h-3"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" class=""></path><rect x="2" y="6" width="14" height="12" rx="2" class=""></rect></svg> Interview Setup
</span>
</div>
</div>
<!-- Item 12 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5bab247f-35d9-400d-a82b-fd87cfe913d2_1600w.webp" alt="Backstage 12" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="check-circle" class="lucide lucide-check-circle w-3 h-3"><path d="M21.801 10A10 10 0 1 1 17 3.335" class=""></path><path d="m9 11 3 3L22 4" class=""></path></svg> Final Mix
</span>
</div>
</div>
<!-- SET 2 (DUPLICATE FOR INFINITE SCROLL) -->
<!-- Item 1 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/438c8b22-ac00-41a1-85f0-1a8e8b5e6fc3_800w.jpg" alt="Backstage 1" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="clapperboard" class="lucide lucide-clapperboard w-3 h-3"><path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z" class=""></path><path d="m6.2 5.3 3.1 3.9" class=""></path><path d="m12.4 3.4 3.1 4" class=""></path><path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" class=""></path></svg> On Set
</span>
</div>
</div>
<!-- Item 2 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4f1c0517-d5d5-4e8f-b125-a9106a459404_800w.png" alt="Backstage 2" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="settings-2" class="lucide lucide-settings-2 w-3 h-3"><path d="M14 17H5" class=""></path><path d="M19 7h-9" class=""></path><circle cx="17" cy="17" r="3" class=""></circle><circle cx="7" cy="7" r="3" class=""></circle></svg> Equipment Setup
</span>
</div>
</div>
<!-- Item 3 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/026b7379-a871-4ca2-ab5c-a39262a51d4a_3840w.jpg?w=800&q=80" alt="Backstage 3" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="mic" class="lucide lucide-mic w-3 h-3"><path d="M12 19v3" class=""></path><path d="M19 10v2a7 7 0 0 1-14 0v-2" class=""></path><rect x="9" y="2" width="6" height="13" rx="3" class=""></rect></svg> Boom Operation
</span>
</div>
</div>
<!-- Item 4 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2a45cc8a-7f82-409f-9ccf-560eb553f0dd_3840w.jpg" alt="Backstage 4" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="film" class="lucide lucide-film w-3 h-3"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M7 3v18" class=""></path><path d="M3 7.5h4" class=""></path><path d="M3 12h18" class=""></path><path d="M3 16.5h4" class=""></path><path d="M17 3v18" class=""></path><path d="M17 7.5h4" class=""></path><path d="M17 16.5h4" class=""></path></svg> Exterior Night Shoot
</span>
</div>
</div>
<!-- Item 5 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/71b47075-ab03-4553-b825-b8430750e80e_800w.jpg" alt="Backstage 5" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="headphones" class="lucide lucide-headphones w-3 h-3"><path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3" class=""></path></svg> Studio Recording
</span>
</div>
</div>
<!-- Item 6 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1629946832022-c327f74956e0?w=2160&q=80" alt="Backstage 6" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="sliders" class="lucide lucide-sliders w-3 h-3"><path d="M10 8h4" class=""></path><path d="M12 21v-9" class=""></path><path d="M12 8V3" class=""></path><path d="M17 16h4" class=""></path><path d="M19 12V3" class=""></path><path d="M19 21v-5" class=""></path><path d="M3 14h4" class=""></path><path d="M5 10V3" class=""></path><path d="M5 21v-7" class=""></path></svg> Sound Mixing
</span>
</div>
</div>
<!-- Item 7 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1724525647065-f948fc102e68?w=2160&q=80" alt="Backstage 7" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="activity" class="lucide lucide-activity w-3 h-3"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" class=""></path></svg> Field Recording
</span>
</div>
</div>
<!-- Item 8 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="Backstage 8" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="map-pin" class="lucide lucide-map-pin w-3 h-3"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" class=""></path><circle cx="12" cy="10" r="3" class=""></circle></svg> Location Scouting
</span>
</div>
</div>
<!-- Item 9 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4734259a-bad7-422f-981e-ce01e79184f2_1600w.jpg" alt="Backstage 9" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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-play" class="lucide lucide-monitor-play w-3 h-3"><path d="M15.033 9.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56V7.648a.645.645 0 0 1 .967-.56z" class=""></path><path d="M12 17v4" class=""></path><path d="M8 21h8" class=""></path><rect x="2" y="3" width="20" height="14" rx="2" class=""></rect></svg> Post Production
</span>
</div>
</div>
<!-- Item 10 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c543a9e1-f226-4ced-80b0-feb8445a75b9_1600w.jpg" alt="Backstage 10" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="volume-2" class="lucide lucide-volume-2 w-3 h-3"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" class=""></path><path d="M16 9a5 5 0 0 1 0 6" class=""></path><path d="M19.364 18.364a9 9 0 0 0 0-12.728" class=""></path></svg> Sound Check
</span>
</div>
</div>
<!-- Item 11 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=1000&auto=format&fit=crop" alt="Backstage 11" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="video" class="lucide lucide-video w-3 h-3"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" class=""></path><rect x="2" y="6" width="14" height="12" rx="2" class=""></rect></svg> Interview Setup
</span>
</div>
</div>
<!-- Item 12 -->
<div
class="shrink-0 w-[85vw] sm:w-[400px] group/item relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5bab247f-35d9-400d-a82b-fd87cfe913d2_1600w.webp" alt="Backstage 12" class="w-full h-full object-cover transition-transform duration-700 group-hover/item:scale-110">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-normal text-white flex items-center gap-1">
<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="check-circle" class="lucide lucide-check-circle w-3 h-3"><path d="M21.801 10A10 10 0 1 1 17 3.335" class=""></path><path d="m9 11 3 3L22 4" class=""></path></svg> Final Mix
</span>
</div>
</div>
</div>
</div>
<!-- Styles & Logic -->
<style>
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.mask-image-gradient {
mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
</style>
<script>
(function() {
const component = document.getElementById('backstage-component');
const scroller = document.getElementById('backstage-scroller');
const track = document.getElementById('backstage-track');
if (!scroller || !track) return;
let isHovering = false;
let autoScrollSpeed = 0.5;
let animationId;
// Calculate the width of one set of items (12 items) to know when to loop
function getResetWidth() {
if (!track.children.length) return 0;
// Measure the first item and the gap
const firstItem = track.children[0];
const itemWidth = firstItem.offsetWidth;
const style = window.getComputedStyle(track);
const gap = parseFloat(style.gap) || 16;
// We have 12 items in the first set, so 1 set width = 12 * (item + gap)
return (itemWidth + gap) * 12;
}
function step() {
if (!isHovering) {
scroller.scrollLeft += autoScrollSpeed;
}
const resetWidth = getResetWidth();
// If we've scrolled past the first set, subtract that width to loop seamlessly
if (resetWidth > 0 && scroller.scrollLeft >= resetWidth) {
scroller.scrollLeft -= resetWidth;
}
animationId = requestAnimationFrame(step);
}
// Event Listeners for Pause - attached to the main component so navigation controls also pause it
if (component) {
component.addEventListener('mouseenter', () => isHovering = true);
component.addEventListener('mouseleave', () => isHovering = false);
component.addEventListener('touchstart', () => isHovering = true, {passive: true});
component.addEventListener('touchend', () => setTimeout(() => isHovering = false, 1000));
}
// Initialize
animationId = requestAnimationFrame(step);
if (window.lucide) window.lucide.createIcons();
})();
</script>
</div>
</section>
<section class="max-w-5xl mr-auto ml-auto pt-24 pr-6 pb-24 pl-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div class="">
<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="quote"
class="lucide lucide-quote mb-6 w-8 h-8 text-neutral-700">
<path
d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"
class=""></path>
<path
d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"
class=""></path>
</svg>
<p class="leading-relaxed text-lg font-light mb-6 text-neutral-300" style="">"Pavlo is not just a sound mixer;
he is a storyteller. His ability to anticipate the needs of the scene and capture pristine dialogue in the
most challenging environments is unmatched."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-neutral-800"></div>
<div class="">
<div class="text-sm font-medium text-white" style="">Sarah Jenkins</div>
<div class="text-neutral-500 text-xs" style="">Director, "The Pale Blue Eye"</div>
</div>
</div>
</div>
<div
class="hidden md:flex flex-col justify-center items-center border border-dashed rounded-xl p-8 text-center border-neutral-800 bg-neutral-900/20">
<h3 class="font-medium mb-2 text-white" style="">Sound Reports</h3>
<p class="text-neutral-500 text-xs mb-4 max-w-xs" style="">Detailed sound reports delivered daily via Sound
Reports Writer or PDF.</p>
<div class="flex gap-2">
<div class="w-8 h-10 border rounded-sm border-neutral-700 bg-neutral-800"></div>
<div class="w-8 h-10 border rounded-sm translate-y-2 border-neutral-700 bg-neutral-800"></div>
<div class="w-8 h-10 border rounded-sm border-neutral-700 bg-neutral-800"></div>
</div>
</div>
</div>
</section>
<!-- Footer / Contact -->
<footer class="bg-black border-white/5 border-t pt-20 pb-12" id="contact">
<div class="max-w-5xl mr-auto ml-auto pr-6 pl-6">
<div class="flex flex-col md:flex-row md:items-center gap-8 gap-x-8 gap-y-8 items-start justify-between">
<div class="">
<h2 class="text-2xl font-medium tracking-tight mb-2 text-white" style="">Let's make some noise.</h2>
<p class="text-neutral-500 text-sm" style="">Available for booking worldwide.</p>
</div>
<div class="flex gap-4">
<a href="#"
class="w-10 h-10 rounded border flex items-center justify-center transition-all border-neutral-800 hover:text-white hover:border-neutral-600 text-neutral-50"
style="">
<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"
data-lucide="instagram" class="lucide lucide-instagram">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line>
</svg>
</a>
<a href="#"
class="w-10 h-10 rounded border flex items-center justify-center transition-all border-neutral-800 hover:text-white hover:border-neutral-600 text-neutral-50"
style="">
<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"
data-lucide="linkedin" class="lucide lucide-linkedin">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" class=""></path>
<rect width="4" height="12" x="2" y="9" class=""></rect>
<circle cx="4" cy="4" r="2" class=""></circle>
</svg>
</a>
<a href="mailto:hello@example.com"
class="h-10 px-6 rounded border flex items-center justify-center text-sm font-medium transition-all border-neutral-800 bg-white text-black hover:bg-neutral-200">
hello@elenavoss.com
</a>
</div>
</div>
<div
class="mt-20 pt-8 border-t flex flex-col md:flex-row justify-between items-center text-xs gap-4 border-neutral-900 text-neutral-600"
style="">
<p>© 2023 Elena Voss Sound. All rights reserved.</p>
<div class="flex gap-6">
<a href="#" class="transition-colors hover:text-neutral-400">Privacy</a>
<a href="#" class="transition-colors hover:text-neutral-400">Terms</a>
<a href="#" class="transition-colors hover:text-neutral-400">Sitemap</a>
</div>
</div>
</div>
</footer>
<script>
lucide.createIcons();
</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: 3202px;"><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: 3202px;"><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: 3202px;"><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>
<div class="edit-mode-label" data-edit-label="true" style="left: 0px; top: 1920px; position: absolute;">section</div>
<div class="edit-mode-label" data-edit-label="true" style="left: 849px; top: 2013px; position: absolute;">img</div>
</body>