fix(locations): fix pattern overlay z-index and increase opacity
Some checks are pending
CI / Type Check (push) Waiting to run
CI / Lint (push) Waiting to run
CI / Unit Tests (push) Waiting to run
Deploy / Build & Push Image (push) Waiting to run
Deploy / Deploy to VPS (push) Blocked by required conditions

Overlay was painting above static content (buttons, text).
Fix: z-0 on overlay + z-10 on content wrapper, opacity 0.18→0.28.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-06-10 17:32:56 +01:00
parent 0cb4f9e5dc
commit cacdb4a2db

View file

@ -124,56 +124,58 @@ export default async function LocationsPage() {
{/* Text */}
<div
className="relative flex flex-1 flex-col justify-center gap-4 p-10"
className="relative flex flex-1 flex-col justify-center"
style={{ backgroundColor: color }}
>
<div
aria-hidden="true"
className="pointer-events-none absolute inset-0"
className="pointer-events-none absolute inset-0 z-0"
style={{
backgroundImage: `url('/images/figma/card-wave-green.svg')`,
backgroundSize: '280px auto',
backgroundRepeat: 'repeat',
opacity: 0.18,
opacity: 0.28,
}}
/>
{loc.tagline && (
<p
className="text-[16px] font-medium text-[#fdcf54] uppercase"
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
>
{loc.tagline}
</p>
)}
<h2
className="text-[36px] leading-tight font-bold text-white uppercase"
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
>
{loc.name}
</h2>
<p
className="text-[16px] leading-relaxed text-white/80"
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
>
{loc.shortDesc}
</p>
<div className="mt-2 flex flex-wrap gap-3">
{detailHref && (
<Link
href={detailHref}
className="inline-flex items-center rounded-[64px] border-2 border-white/60 px-7 py-[10px] text-[15px] font-bold text-white transition-all hover:border-white hover:bg-white/10"
<div className="relative z-10 flex flex-col gap-4 p-10">
{loc.tagline && (
<p
className="text-[16px] font-medium text-[#fdcf54] uppercase"
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
>
Детальніше
</Link>
{loc.tagline}
</p>
)}
<Link
href={`/kvytky?category=${slug}`}
className="inline-flex items-center rounded-[64px] bg-[#f28b4a] px-7 py-[10px] text-[15px] font-bold text-white transition-shadow hover:shadow-[0_0_20px_0_#f28b4a]"
<h2
className="text-[36px] leading-tight font-bold text-white uppercase"
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
>
Купити квиток
</Link>
{loc.name}
</h2>
<p
className="text-[16px] leading-relaxed text-white/80"
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
>
{loc.shortDesc}
</p>
<div className="mt-2 flex flex-wrap gap-3">
{detailHref && (
<Link
href={detailHref}
className="inline-flex items-center rounded-[64px] border-2 border-white/60 px-7 py-[10px] text-[15px] font-bold text-white transition-all hover:border-white hover:bg-white/10"
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
>
Детальніше
</Link>
)}
<Link
href={`/kvytky?category=${slug}`}
className="inline-flex items-center rounded-[64px] bg-[#f28b4a] px-7 py-[10px] text-[15px] font-bold text-white transition-shadow hover:shadow-[0_0_20px_0_#f28b4a]"
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
>
Купити квиток
</Link>
</div>
</div>
</div>
</div>