fix(dinopage|gallery|birthday): hero bg z-index, gallery padding, altanka image

- DinoPageContent: add isolation:isolate to .hero so z-index:-1 hero-bg
  is visible (was painted behind the page background color)
- Gallery: pad CMS images with static fallbacks when fewer than 9 entries,
  so the slider always shows a full set even if CMS only has 2 photos
- Birthday page: replace null altanka image with gallery-shumi-6.webp placeholder

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-06-08 13:45:16 +01:00
parent 3a44b986bc
commit 9a2ebd8cc0
3 changed files with 23 additions and 11 deletions

View file

@ -59,7 +59,7 @@ const FALLBACK_EXTRA_ITEMS = [
title: 'Затишну альтанку',
description:
'простір для смачного частування гостей та дорослих розмов, поки діти на повну занурені у квести, розваги та атракціони.',
image: null,
image: '/images/figma/gallery-shumi-6.webp',
},
]

View file

@ -50,6 +50,7 @@ export interface DinoPageContentProps {
statLabel?: string
features?: string[]
heroImageUrl?: string | null
heroBgUrl?: string | null
dinos?: DinoSpec[]
galleryImages?: string[]
activitiesTitle?: string
@ -293,7 +294,8 @@ const DYNO_CSS = `
.dino-page .btn-block{width:100%;}
/* HERO */
.dino-page .hero{position:relative;overflow:hidden;padding-top:60px;}
.dino-page .hero{position:relative;overflow:hidden;padding-top:60px;isolation:isolate;}
.dino-page .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-1;pointer-events:none;}
.dino-page .hero .wrap{position:relative;}
.dino-page .hero-dino{
position:absolute;top:0;bottom:0;right:-60px;height:100%;width:auto;max-width:none;
@ -619,6 +621,7 @@ export function DinoPageContent({
statLabel = 'унікальних експонатів',
features = ['Повнорозмірні анімовані динозаври', 'Реалістичні рухи та звуки'],
heroImageUrl,
heroBgUrl,
dinos,
galleryImages,
activitiesTitle = 'Додаткові розваги у ДиноПарку',
@ -1002,13 +1005,17 @@ export function DinoPageContent({
<div className="dino-page">
{/* ── HERO ── */}
<section className="hero">
<img
className="hero-dino"
src={heroImageUrl ?? '/images/figma/dyno-hero.webp'}
alt=""
aria-hidden="true"
loading="eager"
/>
{heroBgUrl ? (
<img className="hero-bg" src={heroBgUrl} alt="" aria-hidden="true" loading="eager" />
) : (
<img
className="hero-dino"
src={heroImageUrl ?? '/images/figma/dyno-hero.webp'}
alt=""
aria-hidden="true"
loading="eager"
/>
)}
<div className="wrap">
<div className="hero-text">
<h1>{heroTitle}</h1>

View file

@ -30,7 +30,7 @@ interface GalleryProps {
}
export function Gallery({ images, title }: GalleryProps) {
const items: CoverflowSlide[] =
const cmsItems: CoverflowSlide[] =
images && images.length > 0
? images.map((img, i) => ({
src:
@ -39,7 +39,12 @@ export function Gallery({ images, title }: GalleryProps) {
'/images/figma/gallery-shumi-1.webp',
alt: img.alt ?? `Шуміленд — фото ${i + 1}`,
}))
: STATIC_IMAGES
: []
const items: CoverflowSlide[] =
cmsItems.length >= STATIC_IMAGES.length
? cmsItems
: [...cmsItems, ...STATIC_IMAGES.slice(cmsItems.length)]
const [lbIdx, setLbIdx] = useState<number | null>(null)
const n = items.length