From 9a2ebd8cc0d2c613f22ce94a16e24a5cf86a1a4b Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Mon, 8 Jun 2026 13:45:16 +0100
Subject: [PATCH] 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>
---
 src/app/(frontend)/dni-narodzhennia/page.tsx |  2 +-
 src/components/sections/DinoPageContent.tsx  | 23 +++++++++++++-------
 src/components/sections/Gallery.tsx          |  9 ++++++--
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/app/(frontend)/dni-narodzhennia/page.tsx b/src/app/(frontend)/dni-narodzhennia/page.tsx
index 53c72d9..1186348 100644
--- a/src/app/(frontend)/dni-narodzhennia/page.tsx
+++ b/src/app/(frontend)/dni-narodzhennia/page.tsx
@@ -59,7 +59,7 @@ const FALLBACK_EXTRA_ITEMS = [
     title: 'Затишну альтанку',
     description:
       'простір для смачного частування гостей та дорослих розмов, поки діти на повну занурені у квести, розваги та атракціони.',
-    image: null,
+    image: '/images/figma/gallery-shumi-6.webp',
   },
 ]
 
diff --git a/src/components/sections/DinoPageContent.tsx b/src/components/sections/DinoPageContent.tsx
index 8afa502..87fe7f6 100644
--- a/src/components/sections/DinoPageContent.tsx
+++ b/src/components/sections/DinoPageContent.tsx
@@ -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>
diff --git a/src/components/sections/Gallery.tsx b/src/components/sections/Gallery.tsx
index 65b68a6..62b1181 100644
--- a/src/components/sections/Gallery.tsx
+++ b/src/components/sections/Gallery.tsx
@@ -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