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:
parent
3a44b986bc
commit
9a2ebd8cc0
3 changed files with 23 additions and 11 deletions
|
|
@ -59,7 +59,7 @@ const FALLBACK_EXTRA_ITEMS = [
|
|||
title: 'Затишну альтанку',
|
||||
description:
|
||||
'простір для смачного частування гостей та дорослих розмов, поки діти на повну занурені у квести, розваги та атракціони.',
|
||||
image: null,
|
||||
image: '/images/figma/gallery-shumi-6.webp',
|
||||
},
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue