From 0cb4f9e5dcf03129302267bb2279de48331837b0 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Wed, 10 Jun 2026 17:22:23 +0100
Subject: [PATCH] fix(locations): use overlay div for wave pattern (opacity
 0.18) like DinoTickets

backgroundImage on inline style rendered same-color paths invisible;
absolute overlay div with opacity matches proven DinoTickets pattern.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/(frontend)/lokatsii/page.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/app/(frontend)/lokatsii/page.tsx b/src/app/(frontend)/lokatsii/page.tsx
index af98dd4..190de12 100644
--- a/src/app/(frontend)/lokatsii/page.tsx
+++ b/src/app/(frontend)/lokatsii/page.tsx
@@ -124,14 +124,19 @@ export default async function LocationsPage() {
 
                 {/* Text */}
                 <div
-                  className="flex flex-1 flex-col justify-center gap-4 p-10"
-                  style={{
-                    backgroundColor: color,
-                    backgroundImage: `url('/images/figma/card-wave-green.svg')`,
-                    backgroundSize: '280px auto',
-                    backgroundRepeat: 'repeat',
-                  }}
+                  className="relative flex flex-1 flex-col justify-center gap-4 p-10"
+                  style={{ backgroundColor: color }}
                 >
+                  <div
+                    aria-hidden="true"
+                    className="pointer-events-none absolute inset-0"
+                    style={{
+                      backgroundImage: `url('/images/figma/card-wave-green.svg')`,
+                      backgroundSize: '280px auto',
+                      backgroundRepeat: 'repeat',
+                      opacity: 0.18,
+                    }}
+                  />
                   {loc.tagline && (
                     <p
                       className="text-[16px] font-medium text-[#fdcf54] uppercase"