From 6c1471125c0b9daee0dfd7a5c3694f0886b2c60f Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Wed, 10 Jun 2026 17:35:21 +0100
Subject: [PATCH] fix(locations): use card-pattern-arcs.svg as direct
 background-image
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Background-image on the element is always behind content — no overlay div
needed. card-pattern-arcs.svg (360×360 arc circles, #70b030 strokes)
is visible on dark green without opacity tricks.

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

diff --git a/src/app/(frontend)/lokatsii/page.tsx b/src/app/(frontend)/lokatsii/page.tsx
index 5a4ac8b..c2df7f8 100644
--- a/src/app/(frontend)/lokatsii/page.tsx
+++ b/src/app/(frontend)/lokatsii/page.tsx
@@ -124,58 +124,51 @@ export default async function LocationsPage() {
 
                 {/* Text */}
                 <div
-                  className="relative flex flex-1 flex-col justify-center"
-                  style={{ backgroundColor: color }}
+                  className="flex flex-1 flex-col justify-center gap-4 p-10"
+                  style={{
+                    backgroundColor: color,
+                    backgroundImage: `url('/images/figma/card-pattern-arcs.svg')`,
+                    backgroundSize: '360px 360px',
+                    backgroundRepeat: 'repeat',
+                  }}
                 >
-                  <div
-                    aria-hidden="true"
-                    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.28,
-                    }}
-                  />
-                  <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' }}
-                      >
-                        {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>
+                  {loc.tagline && (
                     <p
-                      className="text-[16px] leading-relaxed text-white/80"
+                      className="text-[16px] font-medium text-[#fdcf54] uppercase"
                       style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
                     >
-                      {loc.shortDesc}
+                      {loc.tagline}
                     </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>
-                      )}
+                  )}
+                  <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={`/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]"
+                        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>
-                    </div>
+                    )}
+                    <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>