- {hasWarning && (
-
- Ціни можуть бути застарілими — сервіс ezy.com.ua тимчасово недоступний.
-
- )}
-
-
- {tariffs.length === 0 ? (
-
-
- Квитки тимчасово недоступні. Спробуйте пізніше або зателефонуйте нам.
-
-
- Зателефонувати
-
-
- ) : (
- Object.entries(grouped).map(([category, items]) => (
-
-
- {categoryLabelsMap[category] ?? category}
-
-
- {items.map((tariff) => (
-
-
- ))
- )}
-
- {birthdayPackages.length > 0 && (
-
-
- {pageData?.sectionTitleBirthday ?? 'Дні народження'}
-
-
- {birthdayPackages.map((pkg) => (
-
-
-
- {pkg.name}
-
- {pkg.features && pkg.features.length > 0 && (
-
- {pkg.features
- .slice(0, 3)
- .map((f: { text: string }) => f.text)
- .join(' · ')}
-
- )}
-
-
- {pkg.ctaLabel ?? 'Дізнатися ціну'}
-
-
- ))}
-
-
- )}
-
- {groupVisitsData?.groups && groupVisitsData.groups.length > 0 && (
-
-
- {pageData?.sectionTitleGroups ?? 'Групові відвідування'}
-
-
- {groupVisitsData.groups.map(
- (grp: {
- title: string
- description: string
- minPeople: string
- discount: string
- }) => (
-
-
-
- {grp.title}
-
-
- Від {grp.minPeople} · Знижка {grp.discount}
-
-
-
- Дізнатися ціну
-
-
- )
- )}
-
-
- )}
+ {/* ── WORKING HOURS BANNER ── */}
+
+
+
+ Час роботи
+
+
+ пʼятниця-субота-неділя з 11:00 до 20:00
+
+
+ {/* ── WARNING BANNER ── */}
+ {hasWarning && (
+
+
+ Ціни можуть бути застарілими — сервіс ezy.com.ua тимчасово недоступний.
+
+
+ )}
+
+ {/* ── INDIVIDUAL TICKETS (CLIENT component for cart interactivity) ── */}
+
+
+ {/* ── COMBO TICKETS SECTION ── */}
+
+
+ {/* ── BIRTHDAY PACKAGES ── */}
+
0 ? birthdayPackages : undefined}
+ title={pageData?.sectionTitleBirthday ?? 'День Народження в Шуміленді'}
+ />
+
+ {/* ── BENEFITS & CONDITIONS ── */}
+
)
}
+
+// ─────────────────────────────────────────────
+// HERO SECTION
+// ─────────────────────────────────────────────
+function HeroSection({ title, subtitle }: { title: string; subtitle: string }) {
+ return (
+
+
+
+
+
+ {title}
+
+
+ {subtitle}
+
+
+
+ )
+}
+
+// ─────────────────────────────────────────────
+// COMBO TICKETS SECTION
+// ─────────────────────────────────────────────
+
+const COMBO_CARDS_STATIC = [
+ {
+ id: 'combo-1',
+ name: 'Комбо 1',
+ subtitle: null as string | null,
+ price: '600 ₴',
+ description: 'Індивідуальний квиток для повного занурення в атмосферу парку.',
+ featured: false,
+ badge: null as string | null,
+ locations: ['Динопарк', 'Топіарні фігури', 'Дзеркальний лабіринт'],
+ },
+ {
+ id: 'combo-family-3',
+ name: 'Комбо Сімейний',
+ subtitle: '(3 ос.)' as string | null,
+ price: '1500 ₴',
+ description: 'Оптимальний вибір для батьків та дитини (віком до 14 років).',
+ featured: true,
+ badge: 'Найпопулярніший' as string | null,
+ locations: ['Динопарк', 'Топіарні фігури', 'Дзеркальний лабіринт'],
+ },
+ {
+ id: 'combo-family-4',
+ name: 'Комбо Сімейний',
+ subtitle: '(4 ос.)' as string | null,
+ price: '1800 ₴',
+ description: 'Універсальний сімейний пакет розваг для компанії з 4 людей.',
+ featured: false,
+ badge: null as string | null,
+ locations: ['Динопарк', 'Топіарні фігури', 'Дзеркальний лабіринт'],
+ },
+ {
+ id: 'combo-family-5',
+ name: 'Комбо Сімейний',
+ subtitle: '(5 ос.)' as string | null,
+ price: '2000 ₴',
+ description: 'Максимальний та найвигідніший пакет для великої родини.',
+ featured: false,
+ badge: null as string | null,
+ locations: ['Динопарк', 'Топіарні фігури', 'Дзеркальний лабіринт'],
+ },
+]
+
+function ComboTicketsSection({ tariffs }: { tariffs: Tariff[] }) {
+ const comboFromApi = tariffs.filter((t) => t.categoryTag === 'combo')
+ const cards =
+ comboFromApi.length > 0
+ ? comboFromApi.map((t, i) => ({
+ id: String(t.id),
+ name: t.name,
+ subtitle: null as string | null,
+ price: `${t.price} ₴`,
+ description: '',
+ featured: i === 1,
+ badge: i === 1 ? 'Найпопулярніший' : (null as string | null),
+ locations: ['Динопарк', 'Топіарні фігури', 'Дзеркальний лабіринт'],
+ }))
+ : COMBO_CARDS_STATIC
+
+ return (
+
+
+
+ Комбо-квитки
+
+
+ {cards.map((card) => (
+
+
+ )
+}
+
+interface ComboCardData {
+ name: string
+ subtitle: string | null
+ price: string
+ description: string
+ featured: boolean
+ badge: string | null
+ locations: string[]
+}
+
+function ComboCard({ card }: { card: ComboCardData }) {
+ const { name, subtitle, price, description, featured, badge, locations } = card
+ return (
+
+ {/* Badge desktop */}
+ {featured && badge && (
+
+ {badge}
+
+ )}
+ {/* Badge mobile */}
+ {featured && badge && (
+
+ {badge}
+
+ )}
+
+
+ {/* Header: name + divider + price */}
+
+
+ {name}
+ {subtitle && (
+ <>
+ {subtitle}
+
+ )}
+
+
+
+ {price}
+
+
+
+ {/* Description */}
+ {description && (
+
+ {description}
+
+ )}
+
+ {/* Locations list */}
+
+
+ Включає 3 локації:
+
+
+ {locations.map((loc) => (
+
+
+ {loc}
+
+
+ ))}
+
+
+
+
+ )
+}
+
+// ─────────────────────────────────────────────
+// BENEFITS & CONDITIONS SECTION
+// ─────────────────────────────────────────────
+
+const FREE_ENTRY_ITEMS = [
+ 'Діти військовослужбовців',
+ 'Діти до 3-х років включно',
+ 'Діти з інвалідністю до 18 років',
+ 'Діти-сироти до 14 років',
+ 'Учасники бойових дій (УБД)',
+]
+
+const DISCOUNT_ITEMS = [
+ "Багатодітні сім'ї",
+ 'Люди з інвалідністю І та ІІ групи',
+ 'Пенсіонери',
+ 'Групові візити та школи',
+]
+
+function BenefitItem({ text }: { text: string }) {
+ return (
+
+ )
+}
+
+function BenefitsSection() {
+ return (
+
+
+
+ Пільги та умови
+
+
+
+
+ {/* Free entry card */}
+
+
+
+
+ Вхід безкоштовний
+
+
+ 0 грн
+
+
+
+
+
+ {FREE_ENTRY_ITEMS.map((item) => (
+
+
+
+ {/* Discounts card */}
+
+
+
+
+ Спеціальні знижки
+
+
+ -30%
+
+
+
+
+
+ {DISCOUNT_ITEMS.map((item) => (
+
+
+
+
+ {/* Footnote */}
+
+
+ *Знижки та пільги поширюються виключно на індивідуальне відвідування 3 основних
+ локацій (Динопарк, Зона топіарних фігур, Дзеркальний лабіринт) та не сумуються з
+ тарифами категорії «КОМБО».
+
+
+
+
+ )
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 25fcfc4..3ab2416 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -25,6 +25,46 @@
--shadow-brand: 0px 4px 60px rgba(242, 139, 74, 0.25);
}
+/* Wave pattern via ::before — uses PNG (362×568px RGBA, lighter green #70b030 on transparent) */
+/* No position:relative here — parent divs use Tailwind 'absolute' as containing block */
+.wave-bg-green::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image: url('/images/figma/card-pattern-light.png');
+ background-size: 362px auto;
+ background-repeat: repeat;
+ opacity: 0.2;
+ border-radius: inherit;
+ pointer-events: none;
+}
+
+.wave-bg-green-card::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image: url('/images/figma/card-pattern-light.png');
+ background-size: 100% auto;
+ background-repeat: repeat-y;
+ opacity: 0.2;
+ border-radius: inherit;
+ pointer-events: none;
+}
+
+/* Exact Figma wave contour pattern — cropped from Figma render (657×868px) */
+/* Used on pricing/green sections that match the Figma wave design exactly */
+.wave-bg-pricing::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image: url('/images/figma/wave-tile-correct.png');
+ background-size: 657px 868px;
+ background-repeat: repeat-x;
+ background-position: center top;
+ border-radius: inherit;
+ pointer-events: none;
+}
+
@keyframes progress-fill {
from {
width: 0%;
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 3cef659..5edaf63 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -20,7 +20,7 @@ const DEFAULT_NAV: NavLinkItem[] = [
label: 'Локації',
href: '/lokatsii',
children: [
- { label: 'ДиноПарк', href: '/lokatsii#dynopark' },
+ { label: 'ДиноПарк', href: '/lokatsii/dynozavry' },
{ label: 'Диво Ліс', href: '/lokatsii/dyvolis' },
{ label: 'Дзеркальний Лабіринт', href: '/lokatsii#maze' },
{ label: 'Тир з призами', href: '/lokatsii#tir' },
@@ -62,12 +62,18 @@ export async function Header() {
if (l.autoChildrenFrom === 'locations' && menuLocations.length > 0) {
item.children = menuLocations.map((loc) => ({
label: loc.name,
- href: loc.href ?? `/lokatsii#${loc.slug}`,
+ href:
+ loc.href ??
+ (loc.showDetailPage ? `/lokatsii/${loc.slug}` : `/lokatsii#${loc.slug}`),
}))
} else if (l.children && l.children.length > 0) {
item.children = l.children
.filter((c) => c.label && c.href)
.map((c) => ({ label: c.label!, href: c.href! }))
+ } else {
+ // CMS item has no children — inherit from DEFAULT_NAV by href
+ const defaultItem = DEFAULT_NAV.find((d) => d.href === item.href)
+ if (defaultItem?.children) item.children = defaultItem.children
}
return item
diff --git a/src/components/layout/HeaderClient.tsx b/src/components/layout/HeaderClient.tsx
index 97f113a..6806444 100644
--- a/src/components/layout/HeaderClient.tsx
+++ b/src/components/layout/HeaderClient.tsx
@@ -5,7 +5,6 @@ import Image from 'next/image'
import Link from 'next/link'
import { useState } from 'react'
import { NavLink } from '@/components/ui/NavLink'
-import { BtnPrimary } from '@/components/ui/BtnPrimary'
import { CartIcon } from '@/components/ui/CartIcon'
export interface NavLinkItem {
@@ -23,26 +22,20 @@ interface HeaderClientProps {
}
/**
- * Liquid-glass header.
- * - sits over the hero (page uses `-mt-[120px]` on hero so header overlays it)
- * - max width 1204 (Figma frame is 1204 inside 1920 viewport, centered)
- * - height 120 desktop / 60 mobile
- * - rounded bottom corners 20px
- * - real backdrop-filter blur + saturate + a subtle dark-green tint
- * so the foliage behind shows through but text stays readable
+ * Figma header — orange→yellow→orange gradient pill, dark text, purple CTA button.
+ * Positioned at top-0, sits over the hero (hero uses -mt-[120px] to slide under).
*/
export function HeaderClient({ navLinks, ctaLabel, ctaHref, logo }: HeaderClientProps) {
const [menuOpen, setMenuOpen] = useState(false)
return (
+ {/* ── Desktop / tablet bar ── */}
+ {/* overflow-visible so dropdown menus escape the pill container */}
@@ -52,8 +45,8 @@ export function HeaderClient({ navLinks, ctaLabel, ctaHref, logo }: HeaderClient
) : (
@@ -70,15 +63,35 @@ export function HeaderClient({ navLinks, ctaLabel, ctaHref, logo }: HeaderClient
{navLinks.map((link) => (
- {link.label}
+
+
+ {link.label}
+
+ {link.children && (
+
+
+ )}
+
{link.children && (
- /* Outer wrapper: pt-2 bridges the gap so hover is never lost */
{ctaLabel}
+ {/* Figma: CTA button is purple #403997 inside the gradient header */}
+
{/* Hamburger — mobile */}
setMenuOpen((v) => !v)}
- className="-mr-2 p-2 text-white lg:hidden"
+ className="-mr-2 p-2 text-[#272727] lg:hidden"
aria-label={menuOpen ? 'Закрити меню' : 'Відкрити меню'}
aria-expanded={menuOpen}
>
@@ -120,14 +143,14 @@ export function HeaderClient({ navLinks, ctaLabel, ctaHref, logo }: HeaderClient
{menuOpen ? (
+
+
+
+
+
+ {/* Outer ring border */}
+
+ )
+}
+
+// ── Main component ─────────────────────────────────────────────────────────
export function DinoWheel({ dinos }: DinoWheelProps) {
const items = dinos && dinos.length > 0 ? dinos : FALLBACK
const n = items.length
const [active, setActive] = useState(0)
const [visible, setVisible] = useState(true)
- const timer = useRef | null>(null)
- const goTo = useCallback((i: number) => {
- setVisible(false)
- setTimeout(() => {
- setActive(i)
- setVisible(true)
- }, 220)
- }, [])
+ // Track the wheel's CSS rotation angle continuously to avoid back-spinning
+ const [wheelAngle, setWheelAngle] = useState(() => {
+ // Place item 0 at bottom (270°). SVG 0° = right, 90° = down.
+ // Item 0 starts at angle 0° → need to rotate wheel so 0° aligns to 270° (bottom)
+ return 270
+ })
+ const activeRef = useRef(0)
+ const timerRef = useRef | null>(null)
- const resetTimer = useCallback(
- (next: number) => {
- if (timer.current) clearInterval(timer.current)
- timer.current = setInterval(() => {
- setVisible(false)
- setTimeout(() => {
- setActive((p) => {
- const nx = (p + 1) % n
- return nx
- })
- setVisible(true)
- }, 220)
- }, 4000)
- goTo(next)
+ // ── Compute target wheel rotation to put item i at bottom (270°) ──
+ const angleForItem = useCallback(
+ (i: number) => {
+ // Item i natural angle = (i/n)*360
+ // We want it at 270°, so wheel rotation needed = 270 - (i/n)*360
+ return 270 - (i / n) * 360
},
- [n, goTo]
+ [n]
)
- useEffect(() => {
- timer.current = setInterval(() => {
+ // ── Rotate to item i, going shortest path from current angle ──
+ const goTo = useCallback(
+ (nextIdx: number) => {
setVisible(false)
+
+ const target = angleForItem(nextIdx)
+ // Compute current "base" angle (normalized)
+ setWheelAngle((current) => {
+ const currentNorm = ((current % 360) + 360) % 360
+ const targetNorm = ((target % 360) + 360) % 360
+ let diff = targetNorm - currentNorm
+ // Pick shortest arc
+ if (diff > 180) diff -= 360
+ if (diff < -180) diff += 360
+ return current + diff
+ })
+
setTimeout(() => {
- setActive((p) => (p + 1) % n)
+ setActive(nextIdx)
+ activeRef.current = nextIdx
setVisible(true)
- }, 220)
- }, 4000)
+ }, 240)
+ },
+ [angleForItem]
+ )
+
+ // ── Auto-advance timer ──
+ const startTimer = useCallback(() => {
+ if (timerRef.current) clearInterval(timerRef.current)
+ timerRef.current = setInterval(() => {
+ const next = (activeRef.current + 1) % n
+ goTo(next)
+ }, 4500)
+ }, [n, goTo])
+
+ useEffect(() => {
+ startTimer()
return () => {
- if (timer.current) clearInterval(timer.current)
+ if (timerRef.current) clearInterval(timerRef.current)
}
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [n])
+ function handleSelect(i: number) {
+ if (timerRef.current) clearInterval(timerRef.current)
+ goTo(i)
+ // Resume auto-advance after pause
+ setTimeout(startTimer, 8000)
+ }
+
const current = items[active]!
- // Arc positions: center at (50%, 80%) of wheel container, radius ~42%
- // Angles from 200° to 340° (CSS coords: 0=right, 90=down)
- // Items placed in a "smile" arc below center
- const getArcPos = (i: number) => {
- const startDeg = 200
- const spanDeg = 140
- const deg = startDeg + (i / Math.max(n - 1, 1)) * spanDeg
- const rad = (deg * Math.PI) / 180
- // Percentage offset from center
- const cx = 50 // %
- const cy = 32 // % from top — center of the circle
- const r = 38 // % radius
- const x = cx + r * Math.cos(rad)
- const y = cy + r * Math.sin(rad)
- return { x, y }
- }
+ // ── Layout sizing ──
+ // Wheel is a circle. We show only the TOP half (semicircle) above the info panel.
+ // Container height = wheelSize/2 so the bottom half is clipped.
+ const WHEEL_SIZE = 560 // overall circle diameter in px
+ const DINO_RADIUS = WHEEL_SIZE * 0.37 // radius at which dino icons sit
+ const DINO_ACTIVE_SIZE = 88
+ const DINO_INACTIVE_SIZE = 56
+
+ // Each dino's position on the rotating wheel:
+ // Natural angle of item i = (i/n)*360 deg (measured from SVG 0° = right)
+ // Since wheel rotates by wheelAngle, the screen angle of item i = (i/n)*360 + wheelAngle
+ // We want the ACTIVE item at screen angle 270° (bottom) — that's enforced by wheelAngle.
+ // For rendering the dino overlay images, we place them at their natural SVG angles
+ // (relative to the wheel) and let the wheel rotation carry them.
+ // But we counter-rotate each dino image so it always faces upright.
return (
-
-
- {/* Desktop: two-column layout */}
-
- {/* Left: info card */}
-
+
+ {/* Topographic wave background */}
+
+
+
+ {/* ── Section heading ── */}
+
+ Мешканці динопарку
+
+
+ {/* ── Wheel + Info layout ── */}
+
+ {/* ── Rotating wheel (semicircle — top half visible) ── */}
+
+ {/* Full-size circle container — positioned so center is at bottom of box */}
-
- Мешканець парку
-
-
- {current.name}
-
+ {/* SVG wheel (rotates to show active dino at bottom / 6-o'clock) */}
+
- {/* Stats */}
-
- {current.epoch &&
-
- {/* Navigation dots */}
-
- {items.map((_, i) => (
- resetTimer(i)}
- className="h-2.5 w-2.5 rounded-full transition-all duration-300"
- style={{ background: i === active ? '#396817' : '#c8e6b0' }}
- aria-label={items[i]!.name}
- aria-current={i === active ? true : undefined}
- />
- ))}
-
-
-
-
- {/* Right: wheel */}
-
- {/* Circular wheel container */}
-
- {/* Outer ring decoration */}
-
-
-
- {/* Center: active dino image */}
-
- {current.imageUrl ? (
-
- ) : (
-
- {DINO_EMOJIS[active % DINO_EMOJIS.length]}
-
- )}
-
-
- {/* Arc thumbnails */}
+ {/* Dino icons placed around the ring, counter-rotated to stay upright */}
{items.map((dino, i) => {
- const { x, y } = getArcPos(i)
+ // Each segment occupies 360/n degrees.
+ // Item i natural angle (SVG convention) = (i/n)*360
+ const naturalDeg = (i / n) * 360
+ // The icon is at radius DINO_RADIUS from center.
+ // It rotates with the wheel (+wheelAngle) but we apply the natural offset.
+ // Total rotation of icon on screen: naturalDeg + wheelAngle
+ // We counter-rotate the inner image element so the dino faces upright.
const isActive = i === active
+
return (
resetTimer(i)}
+ onClick={() => handleSelect(i)}
aria-label={dino.name}
aria-current={isActive ? true : undefined}
style={{
position: 'absolute',
- left: `${x}%`,
- top: `${y}%`,
- transform: 'translate(-50%, -50%)',
- width: isActive ? 'clamp(52px, 8vw, 72px)' : 'clamp(40px, 6vw, 56px)',
- height: isActive ? 'clamp(52px, 8vw, 72px)' : 'clamp(40px, 6vw, 56px)',
- borderRadius: '50%',
- overflow: 'hidden',
- border: isActive ? '3px solid #f5c842' : '2px solid rgba(255,255,255,0.25)',
- boxShadow: isActive
- ? '0 0 0 3px rgba(245,200,66,0.4), 0 4px 16px rgba(0,0,0,0.4)'
- : '0 2px 8px rgba(0,0,0,0.3)',
- transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
- background: '#1e3610',
+ // Positioned at center of circle
+ left: WHEEL_SIZE / 2,
+ top: WHEEL_SIZE / 2,
+ width: 0,
+ height: 0,
+ border: 'none',
+ background: 'none',
+ padding: 0,
cursor: 'pointer',
- zIndex: isActive ? 10 : 5,
+ zIndex: isActive ? 20 : 10,
+ // Arm extends to DINO_RADIUS. We rotate by the wheel's natural item angle.
+ // The SVG is at wheelAngle, so we also add that to keep icon on same segment.
+ transform: `rotate(${naturalDeg + wheelAngle}deg)`,
+ transformOrigin: '0 0',
+ transition: 'transform 0.72s cubic-bezier(0.4, 0, 0.2, 1)',
+ willChange: 'transform',
}}
>
- {dino.thumbnailUrl ? (
-
- {DINO_EMOJIS[i % DINO_EMOJIS.length]}
-
- )}
+ {/* The actual icon: translate up by DINO_RADIUS, then counter-rotate */}
+
+ {dino.thumbnailUrl || dino.imageUrl ? (
+
+ ) : (
+
+ {DINO_EMOJIS[i % DINO_EMOJIS.length]}
+
+ )}
+
)
})}
-
- {/* Mobile: dino name below wheel */}
-
- {current.name}
-
+
+ {/* ── Info panel — to the right on desktop, below on mobile ── */}
+
+ {/* Dino name & subtitle */}
+
+
+ {current.name}
+
+ {current.latinName && (
+
+ ({current.latinName})
+
+ )}
+
+
+ {/* Stats table */}
+
+ {current.length && (
+
+ Довжина
+ {current.length}
+
+ )}
+ {current.height && (
+
+ Висота
+ {current.height}
+
+ )}
+
+
+ {/* Prev / Next buttons */}
+
+
handleSelect((active - 1 + n) % n)}
+ className="flex h-10 w-10 items-center justify-center rounded-full transition-colors"
+ style={{ border: '1px solid rgba(255,255,255,0.28)', color: '#fff' }}
+ aria-label="Попередній динозавр"
+ >
+
+
+
+
+ {/* Dot indicators */}
+
+ {items.map((_, i) => (
+ handleSelect(i)}
+ aria-label={items[i]!.name}
+ aria-current={i === active ? true : undefined}
+ style={{
+ width: i === active ? 20 : 8,
+ height: 8,
+ borderRadius: 4,
+ background: i === active ? '#fdcf54' : 'rgba(255,255,255,0.28)',
+ border: 'none',
+ padding: 0,
+ cursor: 'pointer',
+ transition: 'width 0.3s ease, background 0.3s ease',
+ }}
+ />
+ ))}
+
+
+
handleSelect((active + 1) % n)}
+ className="flex h-10 w-10 items-center justify-center rounded-full transition-colors"
+ style={{ border: '1px solid rgba(255,255,255,0.28)', color: '#fff' }}
+ aria-label="Наступний динозавр"
+ >
+
+
+
+
+
+
+
+ {/* ── Mobile grid — always shown, compact name list ── */}
+
+ {items.map((dino, i) => (
+ handleSelect(i)}
+ className="flex items-center gap-2 rounded-[10px] px-3 py-2 text-left text-[12px] font-semibold transition-all"
+ style={{
+ background: i === active ? 'rgba(253,207,84,0.18)' : 'rgba(255,255,255,0.06)',
+ color: i === active ? '#fdcf54' : 'rgba(255,255,255,0.65)',
+ border: i === active ? '1px solid #fdcf54' : '1px solid transparent',
+ ...FONT_MONT,
+ }}
+ aria-current={i === active ? true : undefined}
+ >
+
+ {DINO_EMOJIS[i % DINO_EMOJIS.length]}
+
+ {dino.name}
+
+ ))}
+
+
+
+ {[
+ { src: '/images/figma/dyno-gallery-1.jpg', alt: 'Динопарк фото 1' },
+ { src: '/images/figma/dyno-gallery-2.jpg', alt: 'Динопарк фото 2' },
+ { src: '/images/figma/dyno-gallery-3.jpg', alt: 'Динопарк фото 3' },
+ { src: '/images/figma/dyno-gallery-4.jpg', alt: 'Динопарк фото 4' },
+ ].map((photo, i) => (
+
+
+
+ ))}
)
}
-
-function StatRow({ label, value }: { label: string; value: string }) {
- return (
-
-
- {label}
-
-
- {value}
-
-
- )
-}
diff --git a/src/components/sections/HeroSlider.tsx b/src/components/sections/HeroSlider.tsx
new file mode 100644
index 0000000..abfb2f4
--- /dev/null
+++ b/src/components/sections/HeroSlider.tsx
@@ -0,0 +1,261 @@
+'use client'
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { BtnPrimary } from '@/components/ui/BtnPrimary'
+
+type SlideType = 'brand' | 'location'
+
+interface SlideData {
+ img: string
+ type: SlideType
+ title: string
+ subtitle: string
+ ctaLabel: string
+ ctaHref: string
+}
+
+// Odd slides (1,3,5) = brand message; Even slides (2,4,6) = ДивоЛіс location
+const SLIDES: SlideData[] = [
+ {
+ img: '/images/figma/hero-slide-1.webp',
+ type: 'brand',
+ title: 'Започаткуйте\nтрадицію:',
+ subtitle: 'щороку фотографуйтесь біля улюбленого динозавра',
+ ctaLabel: 'Купити квиток',
+ ctaHref: '/kvytky',
+ },
+ {
+ img: '/images/figma/hero-slide-2.webp',
+ type: 'location',
+ title: 'ДивоЛіс',
+ subtitle:
+ 'Це простір, де ви разом із дитиною створюєте власний магічний світ, вчитеся помічати дива у звичайних речах та розвиваєте творчу уяву через спільну гру. Хто знає, можлива саме ця прогулянка спонукає вже дорослу дитину написати казкову історію, яка стане бестселером.',
+ ctaLabel: 'Купити квиток',
+ ctaHref: '/kvytky',
+ },
+ {
+ img: '/images/figma/hero-slide-3.webp',
+ type: 'brand',
+ title: 'Започаткуйте\nтрадицію:',
+ subtitle: 'щороку фотографуйтесь біля улюбленого динозавра',
+ ctaLabel: 'Купити квиток',
+ ctaHref: '/kvytky',
+ },
+ {
+ img: '/images/figma/hero-slide-4.webp',
+ type: 'location',
+ title: 'ДивоЛіс',
+ subtitle:
+ 'Це простір, де ви разом із дитиною створюєте власний магічний світ, вчитеся помічати дива у звичайних речах та розвиваєте творчу уяву через спільну гру. Хто знає, можлива саме ця прогулянка спонукає вже дорослу дитину написати казкову історію, яка стане бестселером.',
+ ctaLabel: 'Купити квиток',
+ ctaHref: '/kvytky',
+ },
+ {
+ img: '/images/figma/hero-slide-5.webp',
+ type: 'brand',
+ title: 'Започаткуйте\nтрадицію:',
+ subtitle: 'щороку фотографуйтесь біля улюбленого динозавра',
+ ctaLabel: 'Купити квиток',
+ ctaHref: '/kvytky',
+ },
+ {
+ img: '/images/figma/hero-slide-6.webp',
+ type: 'location',
+ title: 'ДивоЛіс',
+ subtitle:
+ 'Це простір, де ви разом із дитиною створюєте власний магічний світ, вчитеся помічати дива у звичайних речах та розвиваєте творчу уяву через спільну гру. Хто знає, можлива саме ця прогулянка спонукає вже дорослу дитину написати казкову історію, яка стане бестселером.',
+ ctaLabel: 'Купити квиток',
+ ctaHref: '/kvytky',
+ },
+]
+
+const INTERVAL = 5000
+
+export function HeroSlider() {
+ const [current, setCurrent] = useState(0)
+ const [textVisible, setTextVisible] = useState(true)
+ const [paused, setPaused] = useState(false)
+ const timerRef = useRef
| null>(null)
+
+ const goTo = useCallback((idx: number) => {
+ setTextVisible(false)
+ setTimeout(() => {
+ setCurrent((idx + SLIDES.length) % SLIDES.length)
+ setTextVisible(true)
+ }, 280)
+ }, [])
+
+ const next = useCallback(() => goTo(current + 1), [current, goTo])
+
+ useEffect(() => {
+ if (paused) return
+ timerRef.current = setInterval(next, INTERVAL)
+ return () => {
+ if (timerRef.current) clearInterval(timerRef.current)
+ }
+ }, [next, paused])
+
+ const slide = SLIDES[current]!
+ const isBrand = slide.type === 'brand'
+
+ return (
+ setPaused(true)}
+ onMouseLeave={() => setPaused(false)}
+ >
+ {/* ── Slides track — vertical ── */}
+
+ {SLIDES.map((s, i) => (
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+ ))}
+
+
+
+ {/* ── Text content ── */}
+
+
+
+ {/* Title */}
+
+ {slide.title}
+
+
+ {/* Subtitle */}
+ {isBrand ? (
+ /* Brand slide: large bold subtitle, same as original Hero */
+
+ {slide.subtitle}
+
+ ) : (
+ /* Location slide: paragraph description */
+
+ {slide.subtitle}
+
+ )}
+
+
+ {slide.ctaLabel}
+
+
+
+
+ {SLIDES.map((_, i) => (
+ goTo(i)}
+ className="flex h-8 w-8 items-center justify-center"
+ >
+
+ ))}
+
+
+ {/* ── Mobile dots (bottom) ── */}
+
+ {SLIDES.map((_, i) => (
+ goTo(i)}
+ className="flex h-6 w-6 items-center justify-center"
+ >
+
+ ))}
+
+
+ )
+}
diff --git a/src/components/sections/KvytkyTicketsClient.tsx b/src/components/sections/KvytkyTicketsClient.tsx
new file mode 100644
index 0000000..19bd400
--- /dev/null
+++ b/src/components/sections/KvytkyTicketsClient.tsx
@@ -0,0 +1,310 @@
+'use client'
+
+import { useState } from 'react'
+import { useCart } from '@/context/CartContext'
+
+const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
+
+interface Tariff {
+ id: number
+ name: string
+ price: number
+ categoryTag: string
+ sort: number
+ icon?: string | null
+}
+
+interface KvytkyTicketsClientProps {
+ serverTariffs: Tariff[]
+ categoryLabelsMap: Record
+}
+
+// Photo mapping: tariff name → image path
+const TICKET_PHOTOS: Record = {
+ 'Вхід до Динопарку': '/images/figma/ticket-dinopark.jpg',
+ Динопарк: '/images/figma/ticket-dinopark.jpg',
+ ДивоЛіс: '/images/figma/ticket-divo-lis.jpg',
+ 'Дзеркальний лабіринт': '/images/figma/ticket-maze.jpg',
+ ДиноРодо: '/images/figma/ticket-dynarodeo.jpg',
+ Автомістечко: '/images/figma/ticket-autodrom.jpg',
+ 'XD Кінотеатр': '/images/figma/ticket-cinema.jpg',
+ 'VR (Віртуальна реальність)': '/images/figma/ticket-divo-lis.jpg',
+ 'Тир звичайний': '/images/figma/ticket-tir1.jpg',
+ 'Тир призовий': '/images/figma/ticket-tir2.jpg',
+ Потяг: '/images/figma/ticket-train.jpg',
+ 'Звичайна екскурсія': '/images/figma/ticket-dinopark.jpg',
+ 'Палеонтологічна екскурсія': '/images/figma/ticket-dinopark.jpg',
+}
+
+// Fallback photos by category
+const CATEGORY_FALLBACK_PHOTOS: Record = {
+ dyno: '/images/figma/ticket-dinopark.jpg',
+ zone: '/images/figma/ticket-divo-lis.jpg',
+ attraction: '/images/figma/ticket-cinema.jpg',
+ program: '/images/figma/ticket-dinopark.jpg',
+ dyvolis: '/images/figma/ticket-divo-lis.jpg',
+ other: '/images/figma/ticket-dinopark.jpg',
+}
+
+// Category badge styles from Figma node 4006:847
+const CATEGORY_COLORS: Record = {
+ zone: { bg: '#b9e995', label: 'Зона' },
+ attraction: { bg: '#fce2d2', label: 'Атракціон' },
+ program: { bg: '#fee194', label: 'Екскурсія' },
+ dyno: { bg: '#b9e995', label: 'Зона' },
+ dyvolis: { bg: '#b9e995', label: 'Зона' },
+ combo: { bg: '#b9e995', label: 'Комбо' },
+ other: { bg: '#fee194', label: 'Інше' },
+}
+
+// Descriptions mapped from Figma design
+const TICKET_DESCRIPTIONS: Record = {
+ 'Вхід до Динопарку': 'Вхід на локацію, де розташовані 23 живі рухомі фігури динозаврів',
+ Динопарк: 'Вхід на локацію, де розташовані 23 живі рухомі фігури динозаврів',
+ ДивоЛіс: 'Зона казкових топіарних фігур. Затишний зелений простір та фотозони',
+ 'Дзеркальний лабіринт': 'Захоплюючий світ оптичних ілюзій, світлових ефектів та відображень',
+ ДиноРодо: 'Захоплюючий атракціон для юних верхівців — прокатися верхи на дино',
+ Автомістечко: 'Безпечний міні-трек для найменших водіїв',
+ 'XD Кінотеатр': "Динамічний фільм з об'ємним звуком та спецефектами",
+ 'VR (Віртуальна реальність)': 'Дивовижні цифрові 3D світи та пригоди',
+ 'Тир звичайний': 'Перевірте влучність та відпрацюйте навички стрільби',
+ 'Тир призовий': 'Випробуйте влучність та виграйте фірмовий приз',
+ Потяг: 'Оглядова спокійна поїздка казковим маршрутом',
+ Кошики: 'Карусель з плавним обертанням',
+ 'Диво сітки': 'Активний трирівневий простір для стрибків та розваг',
+ 'Дино сітки': 'Активний трирівневий простір для стрибків та розваг',
+ 'Звичайна екскурсія': 'Захоплива екскурсія з провідником по Динопарку',
+ 'Палеонтологічна екскурсія': 'Поглиблена пізнавальна екскурсія про динозаврів та їх епоху',
+}
+
+function getTicketPhoto(tariff: Tariff): string {
+ return (
+ TICKET_PHOTOS[tariff.name] ??
+ CATEGORY_FALLBACK_PHOTOS[tariff.categoryTag] ??
+ '/images/figma/ticket-dinopark.jpg'
+ )
+}
+
+function getTicketDescription(tariff: Tariff): string {
+ return TICKET_DESCRIPTIONS[tariff.name] ?? ''
+}
+
+function getCategoryStyle(tag: string): { bg: string; label: string } {
+ return CATEGORY_COLORS[tag] ?? { bg: '#b9e995', label: 'Інше' }
+}
+
+// Tab configuration — Figma: "Усі розваги" | "Основні зони" | "Атракціони"
+const ALL_TAB = '__all__'
+const ZONE_TAB = '__zones__'
+const ATTRACTION_TAB = '__attractions__'
+
+const ZONE_TAGS = new Set(['zone', 'dyno', 'dyvolis'])
+const ATTRACTION_TAGS = new Set(['attraction'])
+
+export function KvytkyTicketsClient({
+ serverTariffs,
+ categoryLabelsMap: _categoryLabelsMap,
+}: KvytkyTicketsClientProps) {
+ // Filter out combo tariffs — they have their own section
+ const singleTariffs = serverTariffs.filter((t) => t.categoryTag !== 'combo')
+
+ const [activeTab, setActiveTab] = useState(ALL_TAB)
+
+ const visibleTariffs = singleTariffs.filter((t) => {
+ if (activeTab === ALL_TAB) return true
+ if (activeTab === ZONE_TAB) return ZONE_TAGS.has(t.categoryTag)
+ if (activeTab === ATTRACTION_TAB) return ATTRACTION_TAGS.has(t.categoryTag)
+ return t.categoryTag === activeTab
+ })
+
+ const hasZones = singleTariffs.some((t) => ZONE_TAGS.has(t.categoryTag))
+ const hasAttractions = singleTariffs.some((t) => ATTRACTION_TAGS.has(t.categoryTag))
+
+ if (singleTariffs.length === 0) {
+ return (
+
+
+
+
+ Квитки тимчасово недоступні. Спробуйте пізніше або зателефонуйте нам.
+
+
+ Зателефонувати
+
+
+
+ )
+ }
+
+ return (
+
+
+
+ Вартість квитків
+
+
+ {/* Category tabs — Figma: "Усі розваги" | "Основні зони" | "Атракціони" */}
+
+ {[
+ { id: ALL_TAB, label: 'Усі розваги', show: true },
+ { id: ZONE_TAB, label: 'Основні зони', show: hasZones },
+ { id: ATTRACTION_TAB, label: 'Атракціони', show: hasAttractions },
+ ]
+ .filter((t) => t.show)
+ .map((tab) => {
+ const isActive = activeTab === tab.id
+ return (
+ setActiveTab(tab.id)}
+ className="overflow-clip rounded-[20px] border-2 border-[#f28b4a] px-[30px] py-[10px] text-[18px] font-bold text-[#272727] transition-all hover:shadow-[0_0_20px_0_#f28b4a] lg:text-[20px]"
+ style={{
+ ...FONT_MONT,
+ background: isActive
+ ? 'linear-gradient(90deg, #fad5bb 0%, #fad5bb 100%)'
+ : '#f1fbeb',
+ }}
+ >
+ {tab.label}
+
+ )
+ })}
+
+
+ {/* Ticket rows — horizontal layout per Figma */}
+
+ {visibleTariffs.map((tariff) => (
+
+
+ )
+}
+
+function TicketRow({ tariff }: { tariff: Tariff }) {
+ const { addItem } = useCart()
+ const [count, setCount] = useState(1)
+ const [added, setAdded] = useState(false)
+
+ function handleAdd() {
+ for (let i = 0; i < count; i++) {
+ addItem({
+ tariffId: String(tariff.id),
+ name: tariff.name,
+ price: tariff.price,
+ categoryTag: tariff.categoryTag,
+ icon: tariff.icon ?? undefined,
+ })
+ }
+ setAdded(true)
+ setCount(1)
+ setTimeout(() => setAdded(false), 1500)
+ }
+
+ const catStyle = getCategoryStyle(tariff.categoryTag)
+ const photo = getTicketPhoto(tariff)
+ const description = getTicketDescription(tariff)
+
+ return (
+
+ {/* Photo — 300x300 rounded per Figma */}
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+ {/* Description column */}
+
+ {/* Category badge */}
+
+ {catStyle.label}
+
+
+ {/* Name */}
+
+ {tariff.name}
+
+
+ {/* Description */}
+ {description && (
+
+ {description}
+
+ )}
+
+
+ {/* Price + Counter column */}
+
+ {/* Price — large number + "грн" */}
+
+ {tariff.price}
+ грн
+
+
+ {/* Counter + Add to cart */}
+
+ {/* Counter pill */}
+
+ setCount((c) => Math.max(1, c - 1))}
+ aria-label="Зменшити кількість"
+ className="flex h-[22px] w-[22px] items-center justify-center rounded-full text-[18px] font-bold text-[#396817] transition-opacity hover:opacity-70 active:opacity-40"
+ style={FONT_MONT}
+ >
+ −
+
+
+ {count}
+
+ setCount((c) => Math.min(10, c + 1))}
+ aria-label="Збільшити кількість"
+ className="flex h-[22px] w-[22px] items-center justify-center rounded-full text-[18px] font-bold text-[#396817] transition-opacity hover:opacity-70 active:opacity-40"
+ style={FONT_MONT}
+ >
+ +
+
+
+
+ {/* Buy button */}
+
+ {added ? '✓ Додано' : 'Купити квиток'}
+
+
+
+
| null>(null)
+ const n = slides.length
+
+ const prev = useCallback(() => setActive((a) => (a - 1 + n) % n), [n])
+ const next = useCallback(() => setActive((a) => (a + 1) % n), [n])
+
+ // Keyboard navigation
+ useEffect(() => {
+ const onKey = (e: KeyboardEvent) => {
+ if (e.key === 'ArrowLeft') prev()
+ if (e.key === 'ArrowRight') next()
+ }
+ window.addEventListener('keydown', onKey)
+ return () => window.removeEventListener('keydown', onKey)
+ }, [prev, next])
+
+ // Autoplay
+ useEffect(() => {
+ if (!autoplay) return
+ autoTimer.current = setInterval(next, autoplay)
+ return () => {
+ if (autoTimer.current) clearInterval(autoTimer.current)
+ }
+ }, [autoplay, next])
+
+ // Touch/drag support
+ const dragStart = useRef(null)
+ const onTouchStart = (e: React.TouchEvent) => {
+ dragStart.current = e.touches[0]?.clientX ?? null
+ }
+ const onTouchEnd = (e: React.TouchEvent) => {
+ if (dragStart.current === null) return
+ const dx = (e.changedTouches[0]?.clientX ?? 0) - dragStart.current
+ if (Math.abs(dx) > 40) dx < 0 ? next() : prev()
+ dragStart.current = null
+ }
+
+ const containerHeight = Math.round(cardHeight * 1.25)
+
+ return (
+
+ {/* 3D stage */}
+
+ {slides.map((slide, i) => {
+ const offset = i - active
+ // Wrap-around distance (shortest path)
+ const wrapped = offset > n / 2 ? offset - n : offset < -n / 2 ? offset + n : offset
+ const abs = Math.abs(wrapped)
+
+ if (abs > VISIBLE_SIDES + 0.5) return null
+
+ const tx = wrapped * SLOT
+ const ry = -wrapped * ANGLE
+ const scale = Math.max(0.55, 1 - abs * SCALE_STEP)
+ const opacity = Math.max(0.25, 1 - abs * OPACITY_STEP)
+ const zIndex = 20 - abs * 4
+
+ return (
+
setActive(i)}
+ onKeyDown={(e) => e.key === 'Enter' && setActive(i)}
+ className="absolute cursor-pointer overflow-hidden"
+ style={{
+ width: cardWidth,
+ height: cardHeight,
+ borderRadius: radius,
+ left: '50%',
+ top: '50%',
+ transform: `translate(-50%, -50%) translateX(${tx}px) rotateY(${ry}deg) scale(${scale})`,
+ transformStyle: 'preserve-3d',
+ opacity,
+ zIndex,
+ transition:
+ 'transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.45s ease',
+ outline: 'none',
+ }}
+ >
+
+ {slide.overlay &&
{slide.overlay}
}
+
+ )
+ })}
+
+
+ {/* Controls row */}
+
+ {/* Prev button */}
+
+
+
+
+
+ {/* Dots */}
+
+ {slides.map((_, i) => (
+ setActive(i)}
+ aria-label={`Слайд ${i + 1}`}
+ className="rounded-full transition-all duration-200 focus-visible:outline-none"
+ style={{
+ width: i === active ? 10 : 8,
+ height: i === active ? 10 : 8,
+ backgroundColor: i === active ? '#396817' : 'rgba(57,104,23,0.35)',
+ }}
+ />
+ ))}
+
+
+ {/* Next button */}
+
+
+
+
+
+
+
+ 
+