Aimpress/Shumiland
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

fix(locations): use card-pattern-arcs.svg as direct background-image
Some checks are pending
CI / Type Check (push) Waiting to run
Details
CI / Lint (push) Waiting to run
Details
CI / Unit Tests (push) Waiting to run
Details
Deploy / Build & Push Image (push) Waiting to run
Details
Deploy / Deploy to VPS (push) Blocked by required conditions
Details

Browse source 
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>
This commit is contained in:
Vadym Samoilenko 2026-06-10 17:35:21 +01:00
parent cacdb4a2db
commit 6c1471125c
1 changed files with 36 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
src/app/(frontend)/lokatsii/page.tsx
View file

@ -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>