- {tariff.name}
- -
{tariff.price} грн
- {tariff.priceUnit ?? 'за 1 людину'}
- {tariff.notes && {tariff.notes}
}
-
-
-
+
+ )
+}
+
+interface TicketCardData {
+ label: string
+ price: string
+ note?: string
+ ctaLabel?: string
+ ctaHref?: string
+}
+
+function TicketCard({ ticket }: { ticket: TicketCardData }) {
+ return (
+
+ {item.imageUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : (
+
+ )}
+
+
+
+
+
+ {item.ctaLabel}
+
+
+
+
+
+ + {item.title} +
++ {item.description} +
+
+
+ {ticket.ctaLabel ?? 'Купити квиток'}
+
+
+ )
+}
+
export default async function BirthdayPage() {
const pageData = await getBirthdayPageData()
- const d = pageData as any
+ const d = pageData as Record
+
+ + {ticket.label} +
+ ++ {ticket.price} +
+ {ticket.note && ( ++ {ticket.note} +
+ )} +
+
+
-
-
+
-
+ {/* ── 2. SUBTITLE BAND ───────────────────────────────────────────── */}
+
{heroTitle}
-
- {/* ── 2. ЩО ВХОДИТЬ У ПАКЕТ СВЯТА ───────────────────────────────── */}
-
-
- - {heroSubtitle} -
- - {heroCta} - -
-
+
- {packageSectionTitle} -
-- {packageSectionSubtitle} + {heroSubtitle}
-
- {packageItems.map((item) => (
-
+
+
+ {/* ── 3. ЩО ВХОДИТЬ У ПАКЕТ СВЯТА ───────────────────────────────── */}
+
- {item.imageUrl ? (
-
- ) : (
-
- )}
-
+
-
-
-
-
-
-
- - {item.title} -
-- {item.description} -
-
+ ({ title: i.title, description: i.description }))}
+ items={whyItems.map((i) => ({ title: i.title, description: i.description }))}
reviewVideos={
whyVideos.length > 0
- ? whyVideos.map((v: any) => ({
- src: v.src,
- poster: v.poster ?? null,
- label: v.label ?? null,
+ ? whyVideos.map((v) => ({
+ src: v.src as string,
+ poster: (v.poster as string) ?? null,
+ label: (v.label as string) ?? null,
}))
: undefined
}
/>
- {/* ── 4. WORKING HOURS ──────────────────────────────────────────── */}
-
-
-
- {/* ── 5. PRICING ────────────────────────────────────────────────── */}
-
-
-
- {/* ── 6. ORDER FORM ─────────────────────────────────────────────── */}
-
+ {/* ── ORDER FORM ─────────────────────────────────────────────── */}
+
diff --git a/src/app/(frontend)/grupovi-vidviduvannia/page.tsx b/src/app/(frontend)/grupovi-vidviduvannia/page.tsx
index 1bf8327..62dcd3b 100644
--- a/src/app/(frontend)/grupovi-vidviduvannia/page.tsx
+++ b/src/app/(frontend)/grupovi-vidviduvannia/page.tsx
@@ -4,7 +4,8 @@ import configPromise from '@payload-config'
import { GroupRequestForm } from '@/components/forms/GroupRequestForm'
import { FormBlock, type FormData as FormBlockData } from '@/components/forms/FormBlock'
import { RefreshRouteOnSave } from '@/components/cms/RefreshRouteOnSave'
-import { PayloadImage } from '@/components/ui/PayloadImage'
+import { JsonLd } from '@/components/seo/JsonLd'
+import { groupVisitsPageJsonLd } from '@/lib/structuredData'
import type { Media } from '@/payload-types'
export const revalidate = 60
@@ -33,87 +34,131 @@ function mediaUrl(m: number | Media | null | undefined): string | null {
return (m as Media).url ?? null
}
+// Figma assets exported via get_screenshot, stored locally.
+// TODO: move these photos to CMS (group-visits-page global) once upload fields exist.
+const FIGMA = {
+ hero: '/images/figma/group/hero.webp',
+ featureA: '/images/figma/group/feature-1.webp',
+ featureB: '/images/figma/group/feature-2.webp',
+ bottomA: '/images/figma/group/bottom-1.webp',
+ bottomB: '/images/figma/group/bottom-2.webp',
+ amenity1: '/images/figma/group/amenity-1.webp',
+ amenity2: '/images/figma/group/amenity-2.webp',
+ amenity3: null as string | null, // "NO PHOTO" placeholder in Figma
+ amenity4: '/images/figma/group/amenity-4.webp',
+}
+
+const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
+const ORANGE_GRADIENT = 'linear-gradient(90deg, #f28b4a 0%, #fdcf54 47%, #f28d4b 100%)'
+
export default async function GroupVisitsPage() {
const data = await getGroupVisitsData()
- const d = data as any
+ const d = data as Record
+
+
+ + {packageSectionTitle} +
++ Одна локація — три унікальні світи для іменинника + та його друзів. +
+
+ {primaryItems.map((item) => (
+
- {/* Mobile scroll */}
-
- {packageItems.map((item) => (
-
- {/* ── 3. ЧОМУ ВАРТО ─────────────────────────────────────────────── */}
+ {/* ── 4. ЧОМУ ВАРТО ─────────────────────────────────────────────── */}
- {item.imageUrl ? (
-
- ) : (
-
- )}
-
+
+
-
-
-
-
-
-
- - {item.title} -
-- {item.description} -
-+ Також можна додатково замовити: +
+ +
+ {extraItems.map((item) => (
+
-
- - ЧАС РОБОТИ -
-- {workingHours} -
-
-
- - {pricingSectionTitle} -
- - {/* Main packages grid */} -
- {pricingPackages.map((pkg: any) => (
-
-
- {/* Entrance prices */}
-
-
- ))}
- - {pkg.label} -
-- {pkg.price} -
- {pkg.note && ( -- {pkg.note} -
- )} - - {pkg.ctaLabel ?? 'Купити квиток'} - -- {entranceSectionTitle} -
-
- {entrancePrices.map((item: any) => (
-
- ))}
-
-
- {/* Free inclusions */}
- {freeInclusions && (
- - Безкоштовно: {freeInclusions} -
- )} - - {/* Entertainment packages */} -- {entertainmentSectionTitle} -
-
- {entertainmentPackages.map((pkg: any) => (
-
- ))}
-
-
diff --git a/src/app/(frontend)/grupovi-vidviduvannia/page.tsx b/src/app/(frontend)/grupovi-vidviduvannia/page.tsx
index 1bf8327..62dcd3b 100644
--- a/src/app/(frontend)/grupovi-vidviduvannia/page.tsx
+++ b/src/app/(frontend)/grupovi-vidviduvannia/page.tsx
@@ -4,7 +4,8 @@ import configPromise from '@payload-config'
import { GroupRequestForm } from '@/components/forms/GroupRequestForm'
import { FormBlock, type FormData as FormBlockData } from '@/components/forms/FormBlock'
import { RefreshRouteOnSave } from '@/components/cms/RefreshRouteOnSave'
-import { PayloadImage } from '@/components/ui/PayloadImage'
+import { JsonLd } from '@/components/seo/JsonLd'
+import { groupVisitsPageJsonLd } from '@/lib/structuredData'
import type { Media } from '@/payload-types'
export const revalidate = 60
@@ -33,87 +34,131 @@ function mediaUrl(m: number | Media | null | undefined): string | null {
return (m as Media).url ?? null
}
+// Figma assets exported via get_screenshot, stored locally.
+// TODO: move these photos to CMS (group-visits-page global) once upload fields exist.
+const FIGMA = {
+ hero: '/images/figma/group/hero.webp',
+ featureA: '/images/figma/group/feature-1.webp',
+ featureB: '/images/figma/group/feature-2.webp',
+ bottomA: '/images/figma/group/bottom-1.webp',
+ bottomB: '/images/figma/group/bottom-2.webp',
+ amenity1: '/images/figma/group/amenity-1.webp',
+ amenity2: '/images/figma/group/amenity-2.webp',
+ amenity3: null as string | null, // "NO PHOTO" placeholder in Figma
+ amenity4: '/images/figma/group/amenity-4.webp',
+}
+
+const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
+const ORANGE_GRADIENT = 'linear-gradient(90deg, #f28b4a 0%, #fdcf54 47%, #f28d4b 100%)'
+
export default async function GroupVisitsPage() {
const data = await getGroupVisitsData()
- const d = data as any
+ const d = data as Record | null
- const heroTitle = d?.heroTitle ?? 'Групові відвідування'
- const heroSubtitle =
- d?.heroSubtitle ??
- 'Спеціальні умови для організованих груп. Мінімум 10 осіб — максимум вражень.'
+ const heroTitle = (d?.heroTitle as string) ?? 'ГРУПОВІ ВІЗИТИ'
+ // TODO: move to CMS
+ const heroSubtitle = (d?.heroSubtitle as string) ?? 'Спеціальна пропозиція для садочків та шкіл'
const heroDescription =
- d?.heroDescription ??
+ (d?.heroDescription as string) ??
'Шукаєте ідеальне місце для групового виїзду класу чи садочка? Або яскраву локацію для фотосесії? Хочете, щоб дитячий випускний альбом був дійсно унікальним? Запрошуємо провести цей захопливий і незабутній день на казковій локації.'
- const heroCta = d?.heroCta ?? 'Забронювати пригоду'
+ const heroCta = (d?.heroCta as string) ?? 'Забронювати пригоду'
const featureText =
- d?.featureText ??
- 'На дітлах чекає подорож ДинопарКом та ДивоЛісом. Це активне дозвілля на свіжому повітрі та справжні казкові пригоди, де кожен стане героєм власної історії.'
- const featureImages: string[] = (d?.featureImages ?? [])
- .map((i: any) => mediaUrl(i.image))
- .filter(Boolean)
+ (d?.featureText as string) ??
+ 'На дітлахів чекає подорож ДиноПарком та ДивоЛісом. Це активне дозвілля на свіжому повітрі та справжні казкові пригоди, де кожен стане героєм власної історії.'
+ const featureImages: string[] = ((d?.featureImages as { image: unknown }[]) ?? [])
+ .map((i) => mediaUrl(i.image as never))
+ .filter((u): u is string => Boolean(u))
+ const featureA = featureImages[0] ?? FIGMA.featureA
+ const featureB = featureImages[1] ?? FIGMA.featureB
- const amenitiesTitle = d?.amenitiesTitle ?? 'Ми подбали про затишок і комфорт'
- const amenities: { label: string; imageUrl: string | null }[] = (
- d?.amenities ?? [
- { label: '2 локації без обмежень у часі' },
- { label: 'Вбиральні та кафе на території' },
- { label: 'Укриття поруч' },
- { label: 'Огороджено забором, є охорона' },
- ]
- ).map((a: any) => ({ label: a.label, imageUrl: mediaUrl(a.image) }))
+ const amenitiesTitle = (d?.amenitiesTitle as string) ?? 'Ми подбали про затишок і комфорт'
+ // TODO: move amenity labels/images to CMS
+ const amenities: { label: React.ReactNode; imageUrl: string | null }[] = [
+ {
+ label: (
+ <>
+ 2 локації
+
+ без обмежень у часі
+
+ ),
+ imageUrl: FIGMA.amenity1,
+ },
+ {
+ label: (
+ <>
+ Вбиральня та кафе
+
+ на території
+
+ ),
+ imageUrl: FIGMA.amenity2,
+ },
+ { label: 'Укриття поруч', imageUrl: FIGMA.amenity3 },
+ {
+ label: (
+ <>
+ Огороджено забором,
+
є охорона
+
+ ),
+ imageUrl: FIGMA.amenity4,
+ },
+ ]
- const workingHours = d?.workingHours ?? "п'ятниця-субота-неділя з 11:00 до 20:00"
- const price = d?.price ?? '350 грн'
- const priceLabel = d?.priceLabel ?? 'особа'
- const priceNote = d?.priceNote ?? 'Вхід для двох дорослих, що супроводжують дітей, безкоштовний.'
- const priceMinPeople = d?.priceMinPeople ?? 'Пропозиція для груп від 10 людей'
- const priceCta = d?.priceCta ?? 'Купити квиток'
+ const workingHoursTitle = (d?.workingHoursTitle as string) ?? 'Час роботи'
+ const workingHours = (d?.workingHours as string) ?? 'пʼятниця-субота-неділя з 11:00 до 20:00'
+
+ const priceTitle = (d?.priceTitle as string) ?? 'Вартість групового візиту:'
+ const priceBadge = (d?.priceBadge as string) ?? 'Спеціальна ціна для груп'
+ const price = (d?.price as string) ?? '350 грн'
+ const priceLabel = (d?.priceLabel as string) ?? 'особа'
+ const priceNote =
+ (d?.priceNote as string) ?? 'Вхід для двох дорослих, що супроводжують дітей, безкоштовний.'
+ const priceMinPeople = (d?.priceMinPeople as string) ?? 'Пропозиція діє для груп від 10 людей'
+ const priceCta = (d?.priceCta as string) ?? 'Купити квиток'
const priceDescription =
- d?.priceDescription ??
- 'У вартість входить відвідування Динопарку та ДивоЛісу.\nЧас перебування на локаціях необмежений.'
+ (d?.priceDescription as string) ??
+ 'У вартість входить відвідування ДиноПарку та ДивоЛісу.\nЧас перебування на локаціях необмежений.'
const bottomText =
- d?.bottomText ??
- 'Хочете перетворити візит на справжню маленьку експедицію з розповідями або замовити екскурсію з розповідями про динозаврів? Ми залюбки це організуємо! Телефонуйте нам — і ми все підготуємо та розрахуємо індивідуально для вашої групи.'
- const bottomImages: string[] = (d?.bottomImages ?? [])
- .map((i: any) => mediaUrl(i.image))
- .filter(Boolean)
+ (d?.bottomText as string) ??
+ 'Хочете перетворити візит на справжню маленьку експедицію з розкопками або замовити екскурсію з розповідями про динозаврів? Ми залюбки це організуємо! Телефонуйте нам — і ми все підготуємо та розрахуємо індивідуально для вашої групи.'
+ const bottomImages: string[] = ((d?.bottomImages as { image: unknown }[]) ?? [])
+ .map((i) => mediaUrl(i.image as never))
+ .filter((u): u is string => Boolean(u))
+ const bottomA = bottomImages[0] ?? FIGMA.bottomA
+ const bottomB = bottomImages[1] ?? FIGMA.bottomB
- const formTitle = d?.formTitle ?? 'Подати заявку на групове відвідування'
+ const formTitle = (d?.formTitle as string) ?? 'Подати заявку на групове відвідування'
const formSubtitle =
- d?.formSubtitle ??
+ (d?.formSubtitle as string) ??
'Вкажіть кількість учасників та бажану дату — менеджер зателефонує і погодить деталі.'
- const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
+ const dForm = (d?.form as unknown) ?? null
return (
-
+
+
-
-
+
{heroTitle}
-
+
{heroSubtitle}
@@ -121,215 +166,102 @@ export default async function GroupVisitsPage() {
{/* 2. Green description band */}
-
-
-
- {heroDescription}
-
+
+
+ {heroDescription}
{heroCta}
- {/* 3. Two-column feature block */}
-
-
-
+ {/* 3. Feature banner — text + overlapping photos */}
+
+
+
{featureText}
-
- {featureImages.length >= 2 ? (
- <>
+
+ 
+ 
+
+
+
+
+ {/* 4. Amenities grid 2x2 */}
+
+
+ {amenitiesTitle}
+
+
+ {amenities.map((item, i) => (
+
+ {item.imageUrl ? (
- 
-
- ) : (
- <>
-
-
-
- )}
-
+ ) : (
+
+ NO PHOTO
+
+ )}
+
+ {item.label}
+
+
+ ))}
- {/* 4. Amenity cards grid */}
-
-
-
- {amenitiesTitle}
-
-
- {amenities.map((item) => (
-
- {item.imageUrl ? (
-
- ) : (
-
- )}
-
- {item.label}
-
-
- ))}
-
-
-
-
- {/* 5. Working hours banner */}
-
-
- ЧАС РОБОТИ
-
-
- {workingHours}
-
-
-
- {/* 6. Pricing section */}
-
-
-
- ВАРТІСТЬ ГРУПОВОГО ВІЗИТУ:
-
-
-
- СПЕЦІАЛЬНА ЦІНА ДЛЯ ГРУП
-
-
- {price}
-
-
- {priceLabel}
-
-
- {priceNote}
-
-
- {priceMinPeople}
-
-
- {priceCta}
-
-
-
- {priceDescription.split('\n').map((line, i) => (
-
- {line}
- {i < priceDescription.split('\n').length - 1 &&
}
-
- ))}
-
-
-
-
- {/* 7. Bottom two-column block */}
-
-
-
+ {/* Bottom banner — text + overlapping photos */}
+
+
+
{bottomText}
-
- {bottomImages.length >= 2 ? (
- <>
- 
- 
-
- ) : (
- <>
-
-
-
- )}
+
+ 
+ 
- {/* 8. Order form */}
-
-
-
- {formTitle}
-
-
- {formSubtitle}
-
- {data?.form && typeof data.form === 'object' ? (
-
+
+
+ {formTitle}
+ {formSubtitle}
+ {dForm && typeof dForm === 'object' ? (
+
diff --git a/src/app/(frontend)/kvytky/page.tsx b/src/app/(frontend)/kvytky/page.tsx
index e5e8a22..f2bc1d2 100644
--- a/src/app/(frontend)/kvytky/page.tsx
+++ b/src/app/(frontend)/kvytky/page.tsx
@@ -2,25 +2,18 @@
import type { Metadata } from 'next'
import { getPayload } from 'payload'
import configPromise from '@payload-config'
-import { getSiteSettings } from '@/lib/getSiteSettings'
import { RefreshRouteOnSave } from '@/components/cms/RefreshRouteOnSave'
-import { KvytkyTicketsClient } from '@/components/sections/KvytkyTicketsClient'
-import { BirthdayPricing } from '@/components/sections/BirthdayPricing'
-import type { BirthdayPackageCMS } from '@/types/globals'
+import { KvytkyTicketsClient, type Tariff } from '@/components/sections/KvytkyTicketsClient'
+import { ComboTickets, type ComboCardData } from '@/components/sections/ComboTickets'
+import type { Media, TicketsPage } from '@/payload-types'
export const revalidate = 60
const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
-const FONT_INTER = { fontFamily: 'var(--font-inter, Inter), sans-serif' }
-interface Tariff {
- id: number
- name: string
- price: number
- categoryTag: string
- sort: number
- icon?: string | null
- stale?: boolean
+function mediaUrl(m: number | Media | null | undefined): string | null {
+ if (!m || typeof m === 'number') return null
+ return m.url ?? null
}
async function getTariffs() {
@@ -34,29 +27,15 @@ async function getTariffs() {
}
}
-async function getPageData() {
+async function getPageData(): Promise {
try {
const payload = await getPayload({ config: configPromise })
- return await payload.findGlobal({ slug: 'tickets-page', depth: 0 })
+ return (await payload.findGlobal({ slug: 'tickets-page', depth: 1 })) as TicketsPage
} catch {
return null
}
}
-async function getBirthdayPackages() {
- try {
- const payload = await getPayload({ config: configPromise })
- const result = await payload.find({
- collection: 'birthday-packages',
- sort: 'sort',
- limit: 10,
- })
- return result.docs as unknown as BirthdayPackageCMS[]
- } catch {
- return [] as BirthdayPackageCMS[]
- }
-}
-
export async function generateMetadata(): Promise {
const pageData = await getPageData()
return {
@@ -68,28 +47,22 @@ export async function generateMetadata(): Promise {
}
export default async function TicketsPage() {
- const [tariffData, pageData, birthdayPackages, siteSettings] = await Promise.all([
- getTariffs(),
- getPageData(),
- getBirthdayPackages(),
- getSiteSettings(),
- ])
+ const [tariffData, pageData] = await Promise.all([getTariffs(), getPageData()])
const tariffs = tariffData?.tariffs ?? []
const hasWarning = !!tariffData?.warning
- const categoryLabelsMap = Object.fromEntries(
- (siteSettings.tariffCategoryLabels ?? []).map(({ key, label }) => [key, label])
- )
-
- const heroTitle = pageData?.heroTitle ?? 'Купити квитки'
+ const heroTitle = pageData?.heroTitle ?? 'Купити квиток'
const heroSubtitle =
pageData?.heroSubtitle ?? 'Оберіть квиток та придбайте онлайн — без черги на касі'
+ const heroImg = mediaUrl(pageData?.heroImage) ?? '/images/figma/kvytky-hero-bg.png'
+
+ const comboCards = buildComboCards(pageData, tariffs)
return (
{/* ── HERO ── */}
-
- пʼятниця-субота-неділя з 11:00 до 20:00
+ {pageData?.workingHoursText ?? 'пʼятниця-субота-неділя з 11:00 до 20:00'}
@@ -120,20 +93,23 @@ export default async function TicketsPage() {
)}
- {/* ── COMBO TICKETS SECTION ── */}
- 0 ? birthdayPackages : undefined}
- title={pageData?.sectionTitleBirthday ?? 'День Народження в Шуміленді'}
+ {/* ── TICKETS CATALOG (tabs + cart) ── */}
+
@@ -143,14 +119,18 @@ export default async function TicketsPage() {
// ─────────────────────────────────────────────
// HERO SECTION
// ─────────────────────────────────────────────
-function HeroSection({ title, subtitle }: { title: string; subtitle: string }) {
+function HeroSection({
+ title,
+ subtitle,
+ image,
+}: {
+ title: string
+ subtitle: string
+ image: string
+}) {
return (
- 
+ 
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: ['Динопарк', 'Топіарні фігури', 'Дзеркальний лабіринт'],
+const parsePrice = (s: string): number => Number(String(s).replace(/[^\d]/g, '')) || 0
+
+function buildComboCards(pageData: TicketsPage | null, tariffs: Tariff[]): ComboCardData[] {
+ const cms = pageData?.comboCards
+ const cards: ComboCardData[] =
+ !cms || cms.length === 0
+ ? COMBO_CARDS_STATIC
+ : cms.map((c, i) => ({
+ id: c.id ?? `combo-${i}`,
+ tariffId: `combo-${i}`,
+ priceValue: parsePrice(c.price),
+ name: c.name,
+ subtitle: c.subtitle ?? null,
+ price: c.price,
+ description: c.description ?? '',
+ featured: !!c.featured,
+ badge: c.badge ?? null,
+ locations: (c.locations ?? []).map((l) => l.text).filter(Boolean) as string[],
}))
- : COMBO_CARDS_STATIC
- return (
-
-
-
- Комбо-квитки
-
-
- {cards.map((card) => (
-
- )
-}
+ // Match combo cards to live combo tariffs (by ascending price) to get a real
+ // cart tariffId + current price for the cart/checkout flow.
+ const apiCombos = tariffs
+ .filter((t) => t.categoryTag === 'combo')
+ .sort((a, b) => a.price - b.price)
+ if (apiCombos.length === 0) return cards
-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}
-
-
- ))}
-
-
-
-
- )
+ const sorted = [...cards].sort((a, b) => a.priceValue - b.priceValue)
+ const overrides = new Map()
+ sorted.forEach((card, i) => {
+ const api = apiCombos[i]
+ if (api)
+ overrides.set(card.id, {
+ tariffId: String(api.id),
+ priceValue: api.price,
+ price: `${api.price} ₴`,
+ })
+ })
+ return cards.map((c) => ({ ...c, ...(overrides.get(c.id) ?? {}) }))
}
// ─────────────────────────────────────────────
// BENEFITS & CONDITIONS SECTION
// ─────────────────────────────────────────────
-
const FREE_ENTRY_ITEMS = [
'Діти військовослужбовців',
'Діти до 3-х років включно',
@@ -433,7 +294,16 @@ function BenefitItem({ text }: { text: string }) {
)
}
-function BenefitsSection() {
+function BenefitsSection({ pageData }: { pageData: TicketsPage | null }) {
+ const freeItems =
+ pageData?.freeEntryItems && pageData.freeEntryItems.length > 0
+ ? pageData.freeEntryItems.map((i) => i.text).filter(Boolean)
+ : FREE_ENTRY_ITEMS
+ const discountItems =
+ pageData?.discountsItems && pageData.discountsItems.length > 0
+ ? pageData.discountsItems.map((i) => i.text).filter(Boolean)
+ : DISCOUNT_ITEMS
+
return (
@@ -441,7 +311,7 @@ function BenefitsSection() {
className="mb-[60px] text-[24px] font-bold text-[#272727] uppercase lg:text-[32px]"
style={FONT_MONT}
>
- Пільги та умови
+ {pageData?.benefitsSectionTitle ?? 'Пільги та умови'}
@@ -457,19 +327,19 @@ function BenefitsSection() {
className="text-[20px] leading-[1.5] font-bold text-[#272727] lg:text-[24px]"
style={FONT_MONT}
>
- Вхід безкоштовний
+ {pageData?.freeEntryTitle ?? 'Вхід безкоштовний'}
- 0 грн
+ {pageData?.freeEntryBadge ?? '0 грн'}
- {FREE_ENTRY_ITEMS.map((item) => (
+ {freeItems.map((item) => (
- {DISCOUNT_ITEMS.map((item) => (
+ {discountItems.map((item) => (
diff --git a/src/app/(frontend)/lokatsii/page.tsx b/src/app/(frontend)/lokatsii/page.tsx
index 3efa6cf..04eec94 100644
--- a/src/app/(frontend)/lokatsii/page.tsx
+++ b/src/app/(frontend)/lokatsii/page.tsx
@@ -3,6 +3,8 @@ import Link from 'next/link'
import { getPayload } from 'payload'
import configPromise from '@payload-config'
import { PageHero } from '@/components/ui/PageHero'
+import { JsonLd } from '@/components/seo/JsonLd'
+import { locationsPageJsonLd } from '@/lib/structuredData'
import type { LocationCMS, Media } from '@/types/globals'
export const revalidate = 60
@@ -46,6 +48,13 @@ const FALLBACK_IMAGES: Record = {
const COLORS = ['#396817', '#2d5414', '#1a3009', '#2a5a12', '#1d4710']
+// Only ДиноПарк та Диво Ліс мають окрему сторінку локації — лише на них показуємо «Детальніше».
+const DETAIL_HREF: Record = {
+ dynopark: '/lokatsii/dynozavry',
+ dynozavry: '/lokatsii/dynozavry',
+ dyvolis: '/lokatsii/dyvolis',
+}
+
async function getLocations(): Promise {
try {
const payload = await getPayload({ config: configPromise })
@@ -66,6 +75,7 @@ export default async function LocationsPage() {
return (
+
- {loc.showDetailPage && (
+ {DETAIL_HREF[slug] && (
diff --git a/src/app/(frontend)/page.tsx b/src/app/(frontend)/page.tsx
index a4818a6..878e5e8 100644
--- a/src/app/(frontend)/page.tsx
+++ b/src/app/(frontend)/page.tsx
@@ -1,13 +1,14 @@
import { Hero } from '@/components/sections/Hero'
import { Locations } from '@/components/sections/Locations'
import { WhyParents } from '@/components/sections/WhyParents'
-import { BirthdayPricing } from '@/components/sections/BirthdayPricing'
import { VideoSection } from '@/components/sections/VideoSection'
import { Gallery } from '@/components/sections/Gallery'
import { Reviews } from '@/components/sections/Reviews'
import { News } from '@/components/sections/News'
import { getHomeData } from '@/lib/getHomeData'
import { RefreshRouteOnSave } from '@/components/cms/RefreshRouteOnSave'
+import { JsonLd } from '@/components/seo/JsonLd'
+import { homePageJsonLd } from '@/lib/structuredData'
import type { HomePageHero } from '@/types/globals'
export const revalidate = 60
@@ -20,13 +21,14 @@ const STATIC_HERO: NonNullable = {
}
export default async function HomePage() {
- const { home, locations, reviews, birthdayPackages } = await getHomeData()
+ const { home, locations, reviews } = await getHomeData()
const heroData = home?.hero
const hero = heroData?.title ? heroData : STATIC_HERO
return (
+
- {/* Dark overlay */}
+ {/* Soft overlay for legibility */}
- {/* Card */}
-
- {/* Checkmark */}
+ {/* Ticket card */}
+
+ {/* Perforation — vertical dashed line (ticket stub) */}
+ className="absolute top-8 bottom-8 hidden w-[2px] lg:block"
+ style={{
+ right: '26%',
+ backgroundImage:
+ 'repeating-linear-gradient(to bottom, rgba(255,255,255,0.9) 0 9px, transparent 9px 22px)',
+ }}
+ />
-
- Дякуємо
-
- за замовлення!
-
+
+
+
+ Дякуємо за покупку
+
+
+ Ваші квитки відправлені на email.
+
+ {orderId && (
+
+ Номер замовлення: {orderId}
+
+ )}
+
-
- Квитки надійдуть на вашу електронну пошту
-
протягом кількох хвилин.
-
-
- {orderId && (
-
- Номер замовлення: {orderId}
-
- )}
-
-
- Купити ще квитки
+
+
+ Купити квиток
+
+
diff --git a/src/app/api/tickets/tariffs/route.ts b/src/app/api/tickets/tariffs/route.ts
index 037d7bb..fe94518 100644
--- a/src/app/api/tickets/tariffs/route.ts
+++ b/src/app/api/tickets/tariffs/route.ts
@@ -6,6 +6,9 @@ import { logger } from '@/lib/logger'
export const dynamic = 'force-dynamic'
+// Стабільний id для квитків, доданих вручну (без ezy_id), щоб не конфліктувати з ezy id.
+const MANUAL_ID_OFFSET = 1_000_000
+
export async function GET(): Promise {
try {
const ezyTariffs = await getTariffs()
@@ -15,6 +18,7 @@ export async function GET(): Promise {
collection: 'tariffs',
where: { visible: { equals: true } },
limit: 100,
+ depth: 1,
overrideAccess: true,
})
@@ -29,29 +33,34 @@ export async function GET(): Promise {
name: dbRecord.display_name ?? t.name,
price: t.price,
categoryTag: dbRecord.category_tag,
- description: dbRecord.description,
- image: dbRecord.image,
- icon: dbRecord.icon,
+ description: dbRecord.description ?? null,
+ image: dbRecord.image ?? null,
+ icon: dbRecord.icon ?? null,
+ badgeLabel: dbRecord.badgeLabel ?? null,
+ infoChips: dbRecord.infoChips ?? [],
sort: dbRecord.sort ?? 0,
}
})
.filter((v: T | null): v is T => v !== null)
- // Include visible DB tariffs not present in ezy (e.g. dyvolis uses a separate ezy activity)
- const dbOnly = dbTariffs
- .filter((d) => d.ezy_id != null && !ezyIdSet.has(d.ezy_id as number))
+ // Квитки з БД, яких немає у live-списку ezy: окрема ezy-активність (напр. dyvolis)
+ // АБО додані вручну (ezy_id порожній).
+ const dbExtra = dbTariffs
+ .filter((d) => d.ezy_id == null || !ezyIdSet.has(d.ezy_id as number))
.map((d) => ({
- id: d.ezy_id as number,
- name: (d.display_name ?? d.last_synced_name) as string,
+ id: (d.ezy_id ?? MANUAL_ID_OFFSET + (d.id as number)) as number,
+ name: (d.display_name ?? d.last_synced_name ?? '') as string,
price: (d.last_synced_price ?? 0) as number,
categoryTag: d.category_tag as string | null,
description: d.description ?? null,
image: d.image ?? null,
icon: d.icon ?? null,
+ badgeLabel: d.badgeLabel ?? null,
+ infoChips: d.infoChips ?? [],
sort: (d.sort ?? 0) as number,
}))
- const all = [...merged, ...dbOnly].sort((a, b) => a.sort - b.sort)
+ const all = [...merged, ...dbExtra].sort((a, b) => a.sort - b.sort)
return NextResponse.json({ tariffs: all })
} catch (err) {
@@ -63,6 +72,7 @@ export async function GET(): Promise {
collection: 'tariffs',
where: { visible: { equals: true } },
limit: 100,
+ depth: 1,
overrideAccess: true,
})
@@ -72,13 +82,15 @@ export async function GET(): Promise {
const fallback = docs
.map((d) => ({
- id: d.ezy_id,
+ id: (d.ezy_id ?? MANUAL_ID_OFFSET + (d.id as number)) as number,
name: d.display_name ?? d.last_synced_name,
price: d.last_synced_price,
categoryTag: d.category_tag,
- description: d.description,
- image: d.image,
- icon: d.icon,
+ description: d.description ?? null,
+ image: d.image ?? null,
+ icon: d.icon ?? null,
+ badgeLabel: d.badgeLabel ?? null,
+ infoChips: d.infoChips ?? [],
sort: d.sort ?? 0,
stale: true,
}))
diff --git a/src/app/globals.css b/src/app/globals.css
index 25fcfc4..205cca0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -33,3 +33,22 @@
width: 100%;
}
}
+
+/* Green wave pattern (as on the Dinopark page) — used for consistent green sections + footer */
+.wave-pattern {
+ background-color: #396817;
+ background-image: url('/images/figma/dyno-pattern.svg');
+ background-size: 660px;
+ background-repeat: repeat;
+ background-position: center;
+}
+
+/* Overlay variants — keep an existing background-color, add the wave pattern on top.
+ Used by DyvoLisTickets (.wave-bg-green) and DyvoLisWhyVisit (.wave-bg-green-card). */
+.wave-bg-green,
+.wave-bg-green-card {
+ background-image: url('/images/figma/dyno-pattern.svg');
+ background-size: 660px;
+ background-repeat: repeat;
+ background-position: center;
+}
diff --git a/src/collections/Tariffs.ts b/src/collections/Tariffs.ts
index 755a999..6335f31 100644
--- a/src/collections/Tariffs.ts
+++ b/src/collections/Tariffs.ts
@@ -27,29 +27,82 @@ export const Tariffs: CollectionConfig = {
{
name: 'ezy_id',
type: 'number',
- required: true,
unique: true,
index: true,
admin: {
readOnly: true,
- description: 'Встановлюється автоматично при синхронізації з ezy API',
+ description:
+ 'Встановлюється автоматично при синхронізації з ezy API. Порожнє — для квитків, доданих вручну.',
},
access: { update: adminFieldAccess },
},
{ name: 'display_name', type: 'text', label: 'Назва для сайту (перевизначення)' },
- { name: 'description', type: 'richText', editor: lexicalEditor({}) },
- { name: 'image', type: 'upload', relationTo: 'media' },
+ {
+ name: 'description',
+ type: 'richText',
+ editor: lexicalEditor({}),
+ label: 'Опис квитка',
+ },
+ { name: 'image', type: 'upload', relationTo: 'media', label: 'Фото квитка' },
{ name: 'icon', type: 'text', label: 'Emoji або назва іконки' },
{
name: 'category_tag',
type: 'select',
required: true,
+ label: 'Категорія (вкладка каталогу)',
options: [
- { label: 'Dyno', value: 'dyno' },
- { label: 'Dyvolis', value: 'dyvolis' },
- { label: 'Maze', value: 'maze' },
- { label: 'Combo', value: 'combo' },
- { label: 'Family', value: 'family' },
+ { label: 'Основні зони', value: 'zone' },
+ { label: 'Атракціони', value: 'attraction' },
+ { label: 'Програми та екскурсії', value: 'program' },
+ { label: 'Комбо', value: 'combo' },
+ // legacy-значення з ранніх синхронізацій (мапляться у вкладки в каталозі)
+ { label: 'Dyno (legacy)', value: 'dyno' },
+ { label: 'Dyvolis (legacy)', value: 'dyvolis' },
+ { label: 'Maze (legacy)', value: 'maze' },
+ { label: 'Family (legacy)', value: 'family' },
+ ],
+ },
+ {
+ name: 'badgeLabel',
+ type: 'text',
+ label: 'Назва бейджа (перевизначення)',
+ admin: {
+ description: 'Якщо порожнє — береться з назви категорії (Зона / Атракціон / Екскурсія).',
+ },
+ },
+ {
+ name: 'infoChips',
+ type: 'array',
+ label: 'Значки (характеристики квитка)',
+ labels: { singular: 'Значок', plural: 'Значки' },
+ admin: {
+ description:
+ 'Маленькі значки під назвою: тривалість, вартість за людину, вік тощо. Іконка + текст.',
+ },
+ fields: [
+ {
+ name: 'icon',
+ type: 'select',
+ required: true,
+ label: 'Іконка',
+ defaultValue: 'clock',
+ options: [
+ { label: '⏱ Тривалість (годинник)', value: 'clock' },
+ { label: '👤 Вартість за людину', value: 'person' },
+ { label: '👨👩👧 Група / для родини', value: 'group' },
+ { label: '♿ Вік / доступність', value: 'age' },
+ { label: '∞ Необмежено', value: 'infinity' },
+ { label: '🎯 Влучність / постріли', value: 'target' },
+ { label: '🎟 Сеанс / квиток', value: 'session' },
+ { label: '📏 Зріст / розмір', value: 'height' },
+ { label: '🔧 Інтерактив', value: 'wrench' },
+ { label: '🎓 Навчальний', value: 'graduation' },
+ { label: '🌈 Спокійно', value: 'rainbow' },
+ { label: '🚀 Драйв', value: 'send' },
+ { label: '🥽 VR досвід', value: 'vr' },
+ ],
+ },
+ { name: 'label', type: 'text', required: true, label: 'Текст' },
],
},
{ name: 'sort', type: 'number', defaultValue: 0, admin: { position: 'sidebar' } },
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 4652da9..2878048 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -14,7 +14,7 @@ function resolveLogoUrl(logo: unknown): string | null {
return null
}
-const IMG_BG = '/images/figma/footer-bg.webp'
+const IMG_BG = '/images/figma/loc-divo-lis.webp'
const LOGO_G1 = '/images/figma/logo-g1-lg.svg'
const LOGO_G2 = '/images/figma/logo-g2-lg.svg'
const LOGO_G3 = '/images/figma/logo-g3-lg.svg'
@@ -74,8 +74,9 @@ export async function Footer() {
src={IMG_BG}
alt=""
aria-hidden="true"
- className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
+ className="pointer-events-none absolute inset-0 h-full w-full object-cover"
/>
+
@@ -196,6 +197,17 @@ export async function Footer() {
{copyright}
+
+ Розроблено{' '}
+
+ AImpress LTD
+
+
diff --git a/src/components/sections/ComboTickets.tsx b/src/components/sections/ComboTickets.tsx
new file mode 100644
index 0000000..8a6c8d9
--- /dev/null
+++ b/src/components/sections/ComboTickets.tsx
@@ -0,0 +1,186 @@
+'use client'
+
+import { useState } from 'react'
+import { useCart } from '@/context/CartContext'
+
+const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
+const FONT_INTER = { fontFamily: 'var(--font-inter, Inter), sans-serif' }
+
+export interface ComboCardData {
+ id: string
+ tariffId: string
+ priceValue: number
+ name: string
+ subtitle: string | null
+ price: string
+ description: string
+ featured: boolean
+ badge: string | null
+ locations: string[]
+}
+
+interface ComboTicketsProps {
+ cards: ComboCardData[]
+ title?: string
+}
+
+export function ComboTickets({ cards, title = 'Комбо-квитки' }: ComboTicketsProps) {
+ return (
+
+
+
+ {title}
+
+
+
+ {cards.map((card) => (
+
+ )
+}
+
+function ComboCard({ card }: { card: ComboCardData }) {
+ const { name, subtitle, price, description, featured, badge, locations, tariffId, priceValue } =
+ card
+ const { addItem } = useCart()
+ const [added, setAdded] = useState(false)
+
+ function handleAdd() {
+ addItem({
+ tariffId,
+ name: subtitle ? `${name} ${subtitle}` : name,
+ price: priceValue,
+ categoryTag: 'combo',
+ })
+ setAdded(true)
+ setTimeout(() => setAdded(false), 1500)
+ }
+
+ const bg = featured ? '#f28b4a' : '#fdf2e8'
+ const titleColor = featured ? '#272727' : '#f28b4a'
+ const textColor = featured ? '#272727' : '#272727'
+ const dividerColor = featured ? 'rgba(255,255,255,0.6)' : '#e8d8c4'
+
+ return (
+
+ {/* Floating badge (featured only) — absolute, keeps all cards same height */}
+ {featured && badge && (
+
+ {badge}
+
+ )}
+
+
+ {/* Title */}
+
+
+ {name}
+
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+
+
+
+
+ {/* Price */}
+
+ {price}
+
+
+ {/* Description */}
+ {description && (
+
+ {description}
+
+ )}
+
+ {/* Locations */}
+ {locations.length > 0 && (
+
+
+ Включає {locations.length} локації:
+
+
+ {locations.map((loc) => (
+ -
+
+ ))}
+
+
+ )}
+
+ {/* CTA — add combo package to cart */}
+
+
+
+ )
+}
+
+function CheckIcon({ featured }: { featured: boolean }) {
+ return (
+
+
+
+ )
+}
diff --git a/src/components/sections/DinoPageContent.tsx b/src/components/sections/DinoPageContent.tsx
index f9e441e..208118a 100644
--- a/src/components/sections/DinoPageContent.tsx
+++ b/src/components/sections/DinoPageContent.tsx
@@ -1098,14 +1098,16 @@ export function DinoPageContent({
- addItem({
- tariffId: String(t.id),
- name: t.name,
- price: t.price,
- categoryTag: t.categoryTag,
- })
- }
+ onBook={(count) => {
+ for (let i = 0; i < count; i++) {
+ addItem({
+ tariffId: String(t.id),
+ name: t.name,
+ price: t.price,
+ categoryTag: t.categoryTag,
+ })
+ }
+ }}
/>
))}
@@ -1122,14 +1124,16 @@ export function DinoPageContent({
- addItem({
- tariffId: String(t.id),
- name: t.name,
- price: t.price,
- categoryTag: t.categoryTag,
- })
- }
+ onBook={(count) => {
+ for (let i = 0; i < count; i++) {
+ addItem({
+ tariffId: String(t.id),
+ name: t.name,
+ price: t.price,
+ categoryTag: t.categoryTag,
+ })
+ }
+ }}
/>
))}
@@ -1144,30 +1148,77 @@ export function DinoPageContent({
// ─── Ticket Card ──────────────────────────────────────────────────────────────
-function TicketCard({ tariff, onBook }: { tariff: Tariff; onBook: () => void }) {
+// Уніфіковано з DyvoLisTickets — однаковий формат карток квитків на всіх сторінках локацій.
+function TicketCard({ tariff, onBook }: { tariff: Tariff; onBook: (count: number) => void }) {
+ const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
+ const [count, setCount] = useState(1)
const [added, setAdded] = useState(false)
- function handle() {
- onBook()
+ function handleAdd() {
+ onBook(count)
setAdded(true)
+ setCount(1)
setTimeout(() => setAdded(false), 1500)
}
return (
-
-
-
+
+
+
+
+ {tariff.price} ₴
+
+
+ {tariff.name}
+
+
+
+
+
+
+
+ {count}
+
+
+
+
+
+
)
}
diff --git a/src/components/sections/KvytkyTicketsClient.tsx b/src/components/sections/KvytkyTicketsClient.tsx
index 19bd400..07d3a9f 100644
--- a/src/components/sections/KvytkyTicketsClient.tsx
+++ b/src/components/sections/KvytkyTicketsClient.tsx
@@ -1,124 +1,157 @@
'use client'
+/* eslint-disable @next/next/no-img-element */
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
import { useCart } from '@/context/CartContext'
+import {
+ CHIP_ICONS,
+ FIGMA_TICKETS_BY_NAME,
+ type ChipIcon,
+ type FigmaChip,
+} from './kvytkyTicketsData'
const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
-interface Tariff {
+// ── Types ────────────────────────────────────────────────────────
+type LexicalNode = { text?: string; children?: LexicalNode[]; type?: string }
+type RichText = { root?: LexicalNode } | null
+
+interface CmsMedia {
+ url?: string | null
+}
+
+interface CmsChip {
+ icon?: string | null
+ label?: string | null
+}
+
+export interface Tariff {
id: number
name: string
price: number
- categoryTag: string
+ categoryTag: string | null
sort: number
icon?: string | null
+ description?: RichText
+ image?: CmsMedia | number | null
+ badgeLabel?: string | null
+ infoChips?: CmsChip[] | null
+ stale?: boolean
+}
+
+interface TabLabels {
+ all: string
+ zone: string
+ attraction: string
+ program: string
}
interface KvytkyTicketsClientProps {
serverTariffs: Tariff[]
- categoryLabelsMap: Record
+ title?: string
+ tabLabels?: TabLabels
}
-// 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',
+const DEFAULT_TAB_LABELS: TabLabels = {
+ all: 'Усі розваги',
+ zone: 'Основні зони',
+ attraction: 'Атракціони',
+ program: 'Програми та екскурсії',
}
-// 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 → tab / badge mapping (Figma) ───────────────────────
+type TabId = 'all' | 'zone' | 'attraction' | 'program'
+
+const CATEGORY_CONFIG: Record; label: string; bg: string }> = {
+ zone: { tab: 'zone', label: 'Зона', bg: '#b9e995' },
+ dyno: { tab: 'zone', label: 'Зона', bg: '#b9e995' },
+ dyvolis: { tab: 'zone', label: 'Зона', bg: '#b9e995' },
+ maze: { tab: 'zone', label: 'Зона', bg: '#b9e995' },
+ attraction: { tab: 'attraction', label: 'Атракціон', bg: '#fce2d2' },
+ program: { tab: 'program', label: 'Екскурсія', bg: '#fee194' },
}
-// 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: 'Інше' },
+function getCatConfig(tag: string | null) {
+ return (tag && CATEGORY_CONFIG[tag]) || CATEGORY_CONFIG.zone!
}
-// Descriptions mapped from Figma design
-const TICKET_DESCRIPTIONS: Record = {
- 'Вхід до Динопарку': 'Вхід на локацію, де розташовані 23 живі рухомі фігури динозаврів',
- Динопарк: 'Вхід на локацію, де розташовані 23 живі рухомі фігури динозаврів',
- ДивоЛіс: 'Зона казкових топіарних фігур. Затишний зелений простір та фотозони',
- 'Дзеркальний лабіринт': 'Захоплюючий світ оптичних ілюзій, світлових ефектів та відображень',
- ДиноРодо: 'Захоплюючий атракціон для юних верхівців — прокатися верхи на дино',
- Автомістечко: 'Безпечний міні-трек для найменших водіїв',
- 'XD Кінотеатр': "Динамічний фільм з об'ємним звуком та спецефектами",
- 'VR (Віртуальна реальність)': 'Дивовижні цифрові 3D світи та пригоди',
- 'Тир звичайний': 'Перевірте влучність та відпрацюйте навички стрільби',
- 'Тир призовий': 'Випробуйте влучність та виграйте фірмовий приз',
- Потяг: 'Оглядова спокійна поїздка казковим маршрутом',
- Кошики: 'Карусель з плавним обертанням',
- 'Диво сітки': 'Активний трирівневий простір для стрибків та розваг',
- 'Дино сітки': 'Активний трирівневий простір для стрибків та розваг',
- 'Звичайна екскурсія': 'Захоплива екскурсія з провідником по Динопарку',
- 'Палеонтологічна екскурсія': 'Поглиблена пізнавальна екскурсія про динозаврів та їх епоху',
+// ── Helpers ──────────────────────────────────────────────────────
+function lexicalToText(rt: RichText): string {
+ if (!rt?.root) return ''
+ const walk = (n: LexicalNode): string => {
+ if (typeof n.text === 'string') return n.text
+ if (Array.isArray(n.children)) return n.children.map(walk).join('')
+ return ''
+ }
+ return (rt.root.children ?? []).map(walk).join(' ').trim()
}
-function getTicketPhoto(tariff: Tariff): string {
- return (
- TICKET_PHOTOS[tariff.name] ??
- CATEGORY_FALLBACK_PHOTOS[tariff.categoryTag] ??
- '/images/figma/ticket-dinopark.jpg'
- )
+function mediaUrl(img: Tariff['image']): string | null {
+ if (!img || typeof img === 'number') return null
+ return img.url ?? null
}
-function getTicketDescription(tariff: Tariff): string {
- return TICKET_DESCRIPTIONS[tariff.name] ?? ''
+const CATEGORY_FALLBACK_PHOTO: Record = {
+ zone: '/images/figma/tickets/dyvolis.jpg',
+ attraction: '/images/figma/tickets/dynorodeo.png',
+ program: '/images/figma/tickets/ekskursiia-v-zoni-dynozavriv.png',
}
-function getCategoryStyle(tag: string): { bg: string; label: string } {
- return CATEGORY_COLORS[tag] ?? { bg: '#b9e995', label: 'Інше' }
+function resolveTicket(tariff: Tariff) {
+ const figma = FIGMA_TICKETS_BY_NAME[tariff.name]
+ const cat = getCatConfig(tariff.categoryTag)
+
+ const photo =
+ mediaUrl(tariff.image) ??
+ figma?.photo ??
+ CATEGORY_FALLBACK_PHOTO[cat.tab] ??
+ '/images/figma/tickets/dynopark.jpg'
+
+ const cmsDesc = lexicalToText(tariff.description ?? null)
+ const description = cmsDesc || figma?.description || ''
+
+ const cmsChips: FigmaChip[] = (tariff.infoChips ?? [])
+ .filter((c): c is { icon: string; label: string } => !!c?.icon && !!c?.label)
+ .map((c) => ({ icon: c.icon as ChipIcon, label: c.label }))
+ const chips = cmsChips.length > 0 ? cmsChips : (figma?.chips ?? [])
+
+ const badgeLabel = tariff.badgeLabel || cat.label
+
+ return { photo, description, chips, badgeLabel, badgeBg: cat.bg, tab: cat.tab }
}
-// 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'])
-
+// ── Component ────────────────────────────────────────────────────
export function KvytkyTicketsClient({
serverTariffs,
- categoryLabelsMap: _categoryLabelsMap,
+ title = 'Локації та Атракціони',
+ tabLabels = DEFAULT_TAB_LABELS,
}: KvytkyTicketsClientProps) {
- // Filter out combo tariffs — they have their own section
- const singleTariffs = serverTariffs.filter((t) => t.categoryTag !== 'combo')
+ // Combo tariffs have their own section
+ const singleTariffs = useMemo(
+ () => serverTariffs.filter((t) => t.categoryTag !== 'combo'),
+ [serverTariffs]
+ )
- const [activeTab, setActiveTab] = useState(ALL_TAB)
+ const [activeTab, setActiveTab] = useState('all')
- 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 tabsWithContent = useMemo(() => {
+ const TABS: { id: TabId; label: string }[] = [
+ { id: 'all', label: tabLabels.all },
+ { id: 'zone', label: tabLabels.zone },
+ { id: 'attraction', label: tabLabels.attraction },
+ { id: 'program', label: tabLabels.program },
+ ]
+ const present = new Set(singleTariffs.map((t) => getCatConfig(t.categoryTag).tab))
+ return TABS.filter((t) => t.id === 'all' || present.has(t.id))
+ }, [singleTariffs, tabLabels])
- const hasZones = singleTariffs.some((t) => ZONE_TAGS.has(t.categoryTag))
- const hasAttractions = singleTariffs.some((t) => ATTRACTION_TAGS.has(t.categoryTag))
+ const visibleTariffs = useMemo(
+ () =>
+ singleTariffs.filter(
+ (t) => activeTab === 'all' || getCatConfig(t.categoryTag).tab === activeTab
+ ),
+ [singleTariffs, activeTab]
+ )
if (singleTariffs.length === 0) {
return (
@@ -143,44 +176,34 @@ export function KvytkyTicketsClient({
return (
-
+
- Вартість квитків
+ {title}
- {/* 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 (
-
- )
- })}
+ {/* Category tabs */}
+
+ {tabsWithContent.map((tab) => {
+ const isActive = activeTab === tab.id
+ return (
+
+ )
+ })}
- {/* Ticket rows — horizontal layout per Figma */}
-
+ {/* Ticket rows */}
+
{visibleTariffs.map((tariff) => (
-
+
+ {/* Left: photo + item */}
+
+ {/* Photo — 288×288 rounded per Figma */}
+
+
+
- {/* 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 */}
-
-
+ {/* Item: badge + name + description + chips */}
+
+
+ {/* Category badge */}
- {count}
+ {badgeLabel}
-
+ {tariff.name}
+
+
+ {/* Description */}
+ {description && (
+
+ {description}
+
+ )}
- {/* Buy button */}
+ {/* Info chips */}
+ {chips.length > 0 && (
+
+ {chips.map((chip, i) => (
+
+
+
+ {chip.label}
+
+
+ ))}
+
+ )}
+
+
+
+ {/* Right: price + stepper */}
+
+ {/* Price */}
+
+ {tariff.price}
+ грн
+
+
+ {/* Stepper — plus / count / minus (Figma) */}
+
+
+ {count}
+
+
)
}
+
+// ── Stepper icons (Figma, rounded square #396817) ───────────────
+function PlusIcon() {
+ return (
+
+ )
+}
+
+function MinusIcon() {
+ return (
+
+ )
+}
diff --git a/src/components/sections/Reviews.tsx b/src/components/sections/Reviews.tsx
index 105e49d..9933c13 100644
--- a/src/components/sections/Reviews.tsx
+++ b/src/components/sections/Reviews.tsx
@@ -1,12 +1,14 @@
'use client'
/* eslint-disable @next/next/no-img-element */
-import { useRef, useState } from 'react'
-import { useAutoScroll } from '@/hooks/useAutoScroll'
+import { useCallback, useEffect, useRef, useState } from 'react'
import StarRating from '@/components/ui/StarRating'
import type { ReviewCMS, Media } from '@/types/globals'
-const IMG_AVATAR_DEFAULT = '/images/figma/review-avatar-bg.webp'
+const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
+const FONT_INTER = { fontFamily: 'var(--font-inter, Inter), sans-serif' }
+
+const GOOGLE_REVIEW_URL = 'https://g.page/r/shumiland/review'
function getMediaUrl(img: Media | string | null | undefined): string | null {
if (!img) return null
@@ -42,11 +44,29 @@ const STATIC_REVIEWS: ReviewCMS[] = [
text: "Ми з сім'єю відвідали відкритий парк, нам дуже сподобалось! Значно краще, ніж очікував. Динозаври дуже запам'яталися — неймовірно!",
source: 'google',
},
+ {
+ id: 'r4',
+ name: 'Oksana M.',
+ initial: 'O',
+ ago: '4 місяці тому',
+ rating: 5,
+ text: 'Дитина в захваті від динозаврів та лабіринту. Гарно прибрана територія, привітний персонал. Обовʼязково повернемось!',
+ source: 'google',
+ },
+ {
+ id: 'r5',
+ name: 'Ihor T.',
+ initial: 'I',
+ ago: '1 місяць тому',
+ rating: 5,
+ text: 'Чудовий сімейний відпочинок. Багато активностей на свіжому повітрі, є де поїсти та відпочити. Рекомендую!',
+ source: 'google',
+ },
]
-function GoogleIcon() {
+function GoogleIcon({ size = 18 }: { size?: number }) {
return (
-
+ без обмежень у часі + + ), + imageUrl: FIGMA.amenity1, + }, + { + label: ( + <> + Вбиральня та кафе +
+ на території + + ), + imageUrl: FIGMA.amenity2, + }, + { label: 'Укриття поруч', imageUrl: FIGMA.amenity3 }, + { + label: ( + <> + Огороджено забором, +
є охорона + + ), + imageUrl: FIGMA.amenity4, + }, + ] - const workingHours = d?.workingHours ?? "п'ятниця-субота-неділя з 11:00 до 20:00" - const price = d?.price ?? '350 грн' - const priceLabel = d?.priceLabel ?? 'особа' - const priceNote = d?.priceNote ?? 'Вхід для двох дорослих, що супроводжують дітей, безкоштовний.' - const priceMinPeople = d?.priceMinPeople ?? 'Пропозиція для груп від 10 людей' - const priceCta = d?.priceCta ?? 'Купити квиток' + const workingHoursTitle = (d?.workingHoursTitle as string) ?? 'Час роботи' + const workingHours = (d?.workingHours as string) ?? 'пʼятниця-субота-неділя з 11:00 до 20:00' + + const priceTitle = (d?.priceTitle as string) ?? 'Вартість групового візиту:' + const priceBadge = (d?.priceBadge as string) ?? 'Спеціальна ціна для груп' + const price = (d?.price as string) ?? '350 грн' + const priceLabel = (d?.priceLabel as string) ?? 'особа' + const priceNote = + (d?.priceNote as string) ?? 'Вхід для двох дорослих, що супроводжують дітей, безкоштовний.' + const priceMinPeople = (d?.priceMinPeople as string) ?? 'Пропозиція діє для груп від 10 людей' + const priceCta = (d?.priceCta as string) ?? 'Купити квиток' const priceDescription = - d?.priceDescription ?? - 'У вартість входить відвідування Динопарку та ДивоЛісу.\nЧас перебування на локаціях необмежений.' + (d?.priceDescription as string) ?? + 'У вартість входить відвідування ДиноПарку та ДивоЛісу.\nЧас перебування на локаціях необмежений.' const bottomText = - d?.bottomText ?? - 'Хочете перетворити візит на справжню маленьку експедицію з розповідями або замовити екскурсію з розповідями про динозаврів? Ми залюбки це організуємо! Телефонуйте нам — і ми все підготуємо та розрахуємо індивідуально для вашої групи.' - const bottomImages: string[] = (d?.bottomImages ?? []) - .map((i: any) => mediaUrl(i.image)) - .filter(Boolean) + (d?.bottomText as string) ?? + 'Хочете перетворити візит на справжню маленьку експедицію з розкопками або замовити екскурсію з розповідями про динозаврів? Ми залюбки це організуємо! Телефонуйте нам — і ми все підготуємо та розрахуємо індивідуально для вашої групи.' + const bottomImages: string[] = ((d?.bottomImages as { image: unknown }[]) ?? []) + .map((i) => mediaUrl(i.image as never)) + .filter((u): u is string => Boolean(u)) + const bottomA = bottomImages[0] ?? FIGMA.bottomA + const bottomB = bottomImages[1] ?? FIGMA.bottomB - const formTitle = d?.formTitle ?? 'Подати заявку на групове відвідування' + const formTitle = (d?.formTitle as string) ?? 'Подати заявку на групове відвідування' const formSubtitle = - d?.formSubtitle ?? + (d?.formSubtitle as string) ?? 'Вкажіть кількість учасників та бажану дату — менеджер зателефонує і погодить деталі.' - const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' } + const dForm = (d?.form as unknown) ?? null return ( -
+
+
-
-
-
+
@@ -121,215 +166,102 @@ export default async function GroupVisitsPage() {
{/* 2. Green description band */}
-
+
{heroTitle}
-
+
{heroSubtitle}
-
+
- {/* 3. Two-column feature block */}
-
- = {
const COLORS = ['#396817', '#2d5414', '#1a3009', '#2a5a12', '#1d4710']
+// Only ДиноПарк та Диво Ліс мають окрему сторінку локації — лише на них показуємо «Детальніше».
+const DETAIL_HREF: Record = {
+ dynopark: '/lokatsii/dynozavry',
+ dynozavry: '/lokatsii/dynozavry',
+ dyvolis: '/lokatsii/dyvolis',
+}
+
async function getLocations(): Promise {
try {
const payload = await getPayload({ config: configPromise })
@@ -66,6 +75,7 @@ export default async function LocationsPage() {
return (
- {heroDescription} -
+
+
{heroDescription}
{heroCta}
-
diff --git a/src/app/(frontend)/lokatsii/page.tsx b/src/app/(frontend)/lokatsii/page.tsx
index 3efa6cf..04eec94 100644
--- a/src/app/(frontend)/lokatsii/page.tsx
+++ b/src/app/(frontend)/lokatsii/page.tsx
@@ -3,6 +3,8 @@ import Link from 'next/link'
import { getPayload } from 'payload'
import configPromise from '@payload-config'
import { PageHero } from '@/components/ui/PageHero'
+import { JsonLd } from '@/components/seo/JsonLd'
+import { locationsPageJsonLd } from '@/lib/structuredData'
import type { LocationCMS, Media } from '@/types/globals'
export const revalidate = 60
@@ -46,6 +48,13 @@ const FALLBACK_IMAGES: Record
+ {/* 3. Feature banner — text + overlapping photos */}
+
{featureText}
+ {item.label}
+
- {item.label}
-
- ЧАС РОБОТИ
-
- {workingHours}
-
- СПЕЦІАЛЬНА ЦІНА ДЛЯ ГРУП
-
- {price}
-
- {priceLabel}
-
- {priceNote}
-
- {priceMinPeople}
-
- {priceDescription.split('\n').map((line, i) => (
-
- {line}
- {i < priceDescription.split('\n').length - 1 &&
+ {/* Bottom banner — text + overlapping photos */}
+
{bottomText}
- {formSubtitle}
- {formSubtitle}
- пʼятниця-субота-неділя з 11:00 до 20:00
+ {pageData?.workingHoursText ?? 'пʼятниця-субота-неділя з 11:00 до 20:00'}
- {name}
- {subtitle && (
- <>
-
- {price}
-
- {description}
-
- Включає 3 локації:
-
+
- {featureImages.length >= 2 ? (
- <>
+
+
+
+ {/* 4. Amenities grid 2x2 */}
+
+
+
+
+
+ {amenitiesTitle}
+
+
+ {amenities.map((item, i) => (
+
+ ))}
+ {item.imageUrl ? (
+ ) : (
+
-
-
- ) : (
- <>
-
-
-
- )}
-
+ NO PHOTO
+
+ )}
+
-
-
- {amenitiesTitle}
-
-
- {amenities.map((item) => (
-
-
- {item.imageUrl ? (
-
- ))}
-
- ) : (
-
- )}
-
-
-
- ВАРТІСТЬ ГРУПОВОГО ВІЗИТУ:
-
-
-
-
}
-
- ))}
-
-
+
@@ -143,14 +119,18 @@ export default async function TicketsPage() {
// ─────────────────────────────────────────────
// HERO SECTION
// ─────────────────────────────────────────────
-function HeroSection({ title, subtitle }: { title: string; subtitle: string }) {
+function HeroSection({
+ title,
+ subtitle,
+ image,
+}: {
+ title: string
+ subtitle: string
+ image: string
+}) {
return (
- {bottomImages.length >= 2 ? (
- <>
-
- {/* 8. Order form */}
-
-
-
- ) : (
- <>
-
-
-
- )}
+
+
+
-
)}
- {/* ── COMBO TICKETS SECTION ── */}
-
- {formTitle}
-
-
+
+
{formTitle}
+
{/* ── HERO ── */}
-
@@ -120,20 +93,23 @@ export default async function TicketsPage() {
@@ -103,10 +76,10 @@ export default async function TicketsPage() {
className="text-[20px] font-bold text-[#272727] uppercase lg:text-[32px]"
style={FONT_MONT}
>
- Час роботи
+ {pageData?.workingHoursTitle ?? 'Час роботи'}
-
+
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: ['Динопарк', 'Топіарні фігури', 'Дзеркальний лабіринт'],
+const parsePrice = (s: string): number => Number(String(s).replace(/[^\d]/g, '')) || 0
+
+function buildComboCards(pageData: TicketsPage | null, tariffs: Tariff[]): ComboCardData[] {
+ const cms = pageData?.comboCards
+ const cards: ComboCardData[] =
+ !cms || cms.length === 0
+ ? COMBO_CARDS_STATIC
+ : cms.map((c, i) => ({
+ id: c.id ?? `combo-${i}`,
+ tariffId: `combo-${i}`,
+ priceValue: parsePrice(c.price),
+ name: c.name,
+ subtitle: c.subtitle ?? null,
+ price: c.price,
+ description: c.description ?? '',
+ featured: !!c.featured,
+ badge: c.badge ?? null,
+ locations: (c.locations ?? []).map((l) => l.text).filter(Boolean) as string[],
}))
- : COMBO_CARDS_STATIC
- return (
-
-
-
- Комбо-квитки
-
-
- {cards.map((card) => (
-
-
- {/* Badge desktop */}
- {featured && badge && (
-
- )
+ const sorted = [...cards].sort((a, b) => a.priceValue - b.priceValue)
+ const overrides = new Map
- {badge}
-
- )}
- {/* Badge mobile */}
- {featured && badge && (
-
- {badge}
-
- )}
-
-
- {/* Header: name + divider + price */}
-
-
-
-
- {/* Description */}
- {description && (
-
- {subtitle}
-
- )}
-
-
-
- {locations.map((loc) => (
-
-
@@ -441,7 +311,7 @@ function BenefitsSection() {
className="mb-[60px] text-[24px] font-bold text-[#272727] uppercase lg:text-[32px]"
style={FONT_MONT}
>
- Пільги та умови
+ {pageData?.benefitsSectionTitle ?? 'Пільги та умови'}
@@ -457,19 +327,19 @@ function BenefitsSection() {
className="text-[20px] leading-[1.5] font-bold text-[#272727] lg:text-[24px]"
style={FONT_MONT}
>
- Вхід безкоштовний
+ {pageData?.freeEntryTitle ?? 'Вхід безкоштовний'}
- 0 грн
+ {pageData?.freeEntryBadge ?? '0 грн'}
- {FREE_ENTRY_ITEMS.map((item) => (
+ {freeItems.map((item) => (
@@ -486,19 +356,19 @@ function BenefitsSection() {
className="text-[20px] leading-[1.5] font-bold text-[#272727] lg:text-[24px]"
style={FONT_MONT}
>
- Спеціальні знижки
+ {pageData?.discountsTitle ?? 'Спеціальні знижки'}
- -30%
+ {pageData?.discountsBadge ?? '-30%'}
- {DISCOUNT_ITEMS.map((item) => (
+ {discountItems.map((item) => (
@@ -511,9 +381,8 @@ function BenefitsSection() {
className="text-center text-[16px] leading-[1.5] font-normal text-[#272727] lg:text-[20px]"
style={FONT_MONT}
>
- *Знижки та пільги поширюються виключно на індивідуальне відвідування 3 основних
- локацій (Динопарк, Зона топіарних фігур, Дзеркальний лабіринт) та не сумуються з
- тарифами категорії «КОМБО».
+ {pageData?.benefitsFootnote ??
+ '*Знижки та пільги поширюються виключно на індивідуальне відвідування 3 основних локацій (Динопарк, Зона топіарних фігур, Дзеркальний лабіринт) та не сумуються з тарифами категорії «КОМБО».'}
+
- {loc.showDetailPage && (
+ {DETAIL_HREF[slug] && (
diff --git a/src/app/(frontend)/page.tsx b/src/app/(frontend)/page.tsx
index a4818a6..878e5e8 100644
--- a/src/app/(frontend)/page.tsx
+++ b/src/app/(frontend)/page.tsx
@@ -1,13 +1,14 @@
import { Hero } from '@/components/sections/Hero'
import { Locations } from '@/components/sections/Locations'
import { WhyParents } from '@/components/sections/WhyParents'
-import { BirthdayPricing } from '@/components/sections/BirthdayPricing'
import { VideoSection } from '@/components/sections/VideoSection'
import { Gallery } from '@/components/sections/Gallery'
import { Reviews } from '@/components/sections/Reviews'
import { News } from '@/components/sections/News'
import { getHomeData } from '@/lib/getHomeData'
import { RefreshRouteOnSave } from '@/components/cms/RefreshRouteOnSave'
+import { JsonLd } from '@/components/seo/JsonLd'
+import { homePageJsonLd } from '@/lib/structuredData'
import type { HomePageHero } from '@/types/globals'
export const revalidate = 60
@@ -20,13 +21,14 @@ const STATIC_HERO: NonNullable = {
}
export default async function HomePage() {
- const { home, locations, reviews, birthdayPackages } = await getHomeData()
+ const { home, locations, reviews } = await getHomeData()
const heroData = home?.hero
const hero = heroData?.title ? heroData : STATIC_HERO
return (
+
- {/* Dark overlay */}
+ {/* Soft overlay for legibility */}
- {/* Card */}
-
-
-
+
+ title?: string
+ tabLabels?: TabLabels
}
-// 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',
+const DEFAULT_TAB_LABELS: TabLabels = {
+ all: 'Усі розваги',
+ zone: 'Основні зони',
+ attraction: 'Атракціони',
+ program: 'Програми та екскурсії',
}
-// 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 → tab / badge mapping (Figma) ───────────────────────
+type TabId = 'all' | 'zone' | 'attraction' | 'program'
+
+const CATEGORY_CONFIG: Record; label: string; bg: string }> = {
+ zone: { tab: 'zone', label: 'Зона', bg: '#b9e995' },
+ dyno: { tab: 'zone', label: 'Зона', bg: '#b9e995' },
+ dyvolis: { tab: 'zone', label: 'Зона', bg: '#b9e995' },
+ maze: { tab: 'zone', label: 'Зона', bg: '#b9e995' },
+ attraction: { tab: 'attraction', label: 'Атракціон', bg: '#fce2d2' },
+ program: { tab: 'program', label: 'Екскурсія', bg: '#fee194' },
}
-// 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: 'Інше' },
+function getCatConfig(tag: string | null) {
+ return (tag && CATEGORY_CONFIG[tag]) || CATEGORY_CONFIG.zone!
}
-// Descriptions mapped from Figma design
-const TICKET_DESCRIPTIONS: Record = {
- 'Вхід до Динопарку': 'Вхід на локацію, де розташовані 23 живі рухомі фігури динозаврів',
- Динопарк: 'Вхід на локацію, де розташовані 23 живі рухомі фігури динозаврів',
- ДивоЛіс: 'Зона казкових топіарних фігур. Затишний зелений простір та фотозони',
- 'Дзеркальний лабіринт': 'Захоплюючий світ оптичних ілюзій, світлових ефектів та відображень',
- ДиноРодо: 'Захоплюючий атракціон для юних верхівців — прокатися верхи на дино',
- Автомістечко: 'Безпечний міні-трек для найменших водіїв',
- 'XD Кінотеатр': "Динамічний фільм з об'ємним звуком та спецефектами",
- 'VR (Віртуальна реальність)': 'Дивовижні цифрові 3D світи та пригоди',
- 'Тир звичайний': 'Перевірте влучність та відпрацюйте навички стрільби',
- 'Тир призовий': 'Випробуйте влучність та виграйте фірмовий приз',
- Потяг: 'Оглядова спокійна поїздка казковим маршрутом',
- Кошики: 'Карусель з плавним обертанням',
- 'Диво сітки': 'Активний трирівневий простір для стрибків та розваг',
- 'Дино сітки': 'Активний трирівневий простір для стрибків та розваг',
- 'Звичайна екскурсія': 'Захоплива екскурсія з провідником по Динопарку',
- 'Палеонтологічна екскурсія': 'Поглиблена пізнавальна екскурсія про динозаврів та їх епоху',
+// ── Helpers ──────────────────────────────────────────────────────
+function lexicalToText(rt: RichText): string {
+ if (!rt?.root) return ''
+ const walk = (n: LexicalNode): string => {
+ if (typeof n.text === 'string') return n.text
+ if (Array.isArray(n.children)) return n.children.map(walk).join('')
+ return ''
+ }
+ return (rt.root.children ?? []).map(walk).join(' ').trim()
}
-function getTicketPhoto(tariff: Tariff): string {
- return (
- TICKET_PHOTOS[tariff.name] ??
- CATEGORY_FALLBACK_PHOTOS[tariff.categoryTag] ??
- '/images/figma/ticket-dinopark.jpg'
- )
+function mediaUrl(img: Tariff['image']): string | null {
+ if (!img || typeof img === 'number') return null
+ return img.url ?? null
}
-function getTicketDescription(tariff: Tariff): string {
- return TICKET_DESCRIPTIONS[tariff.name] ?? ''
+const CATEGORY_FALLBACK_PHOTO: Record = {
+ zone: '/images/figma/tickets/dyvolis.jpg',
+ attraction: '/images/figma/tickets/dynorodeo.png',
+ program: '/images/figma/tickets/ekskursiia-v-zoni-dynozavriv.png',
}
-function getCategoryStyle(tag: string): { bg: string; label: string } {
- return CATEGORY_COLORS[tag] ?? { bg: '#b9e995', label: 'Інше' }
+function resolveTicket(tariff: Tariff) {
+ const figma = FIGMA_TICKETS_BY_NAME[tariff.name]
+ const cat = getCatConfig(tariff.categoryTag)
+
+ const photo =
+ mediaUrl(tariff.image) ??
+ figma?.photo ??
+ CATEGORY_FALLBACK_PHOTO[cat.tab] ??
+ '/images/figma/tickets/dynopark.jpg'
+
+ const cmsDesc = lexicalToText(tariff.description ?? null)
+ const description = cmsDesc || figma?.description || ''
+
+ const cmsChips: FigmaChip[] = (tariff.infoChips ?? [])
+ .filter((c): c is { icon: string; label: string } => !!c?.icon && !!c?.label)
+ .map((c) => ({ icon: c.icon as ChipIcon, label: c.label }))
+ const chips = cmsChips.length > 0 ? cmsChips : (figma?.chips ?? [])
+
+ const badgeLabel = tariff.badgeLabel || cat.label
+
+ return { photo, description, chips, badgeLabel, badgeBg: cat.bg, tab: cat.tab }
}
-// 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'])
-
+// ── Component ────────────────────────────────────────────────────
export function KvytkyTicketsClient({
serverTariffs,
- categoryLabelsMap: _categoryLabelsMap,
+ title = 'Локації та Атракціони',
+ tabLabels = DEFAULT_TAB_LABELS,
}: KvytkyTicketsClientProps) {
- // Filter out combo tariffs — they have their own section
- const singleTariffs = serverTariffs.filter((t) => t.categoryTag !== 'combo')
+ // Combo tariffs have their own section
+ const singleTariffs = useMemo(
+ () => serverTariffs.filter((t) => t.categoryTag !== 'combo'),
+ [serverTariffs]
+ )
- const [activeTab, setActiveTab] = useState(ALL_TAB)
+ const [activeTab, setActiveTab] = useState('all')
- 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 tabsWithContent = useMemo(() => {
+ const TABS: { id: TabId; label: string }[] = [
+ { id: 'all', label: tabLabels.all },
+ { id: 'zone', label: tabLabels.zone },
+ { id: 'attraction', label: tabLabels.attraction },
+ { id: 'program', label: tabLabels.program },
+ ]
+ const present = new Set(singleTariffs.map((t) => getCatConfig(t.categoryTag).tab))
+ return TABS.filter((t) => t.id === 'all' || present.has(t.id))
+ }, [singleTariffs, tabLabels])
- const hasZones = singleTariffs.some((t) => ZONE_TAGS.has(t.categoryTag))
- const hasAttractions = singleTariffs.some((t) => ATTRACTION_TAGS.has(t.categoryTag))
+ const visibleTariffs = useMemo(
+ () =>
+ singleTariffs.filter(
+ (t) => activeTab === 'all' || getCatConfig(t.categoryTag).tab === activeTab
+ ),
+ [singleTariffs, activeTab]
+ )
if (singleTariffs.length === 0) {
return (
@@ -143,44 +176,34 @@ export function KvytkyTicketsClient({
return (
-
- {/* Checkmark */}
+ {/* Ticket card */}
+
- addItem({
- tariffId: String(t.id),
- name: t.name,
- price: t.price,
- categoryTag: t.categoryTag,
- })
- }
+ onBook={(count) => {
+ for (let i = 0; i < count; i++) {
+ addItem({
+ tariffId: String(t.id),
+ name: t.name,
+ price: t.price,
+ categoryTag: t.categoryTag,
+ })
+ }
+ }}
/>
))}
@@ -1144,30 +1148,77 @@ export function DinoPageContent({
// ─── Ticket Card ──────────────────────────────────────────────────────────────
-function TicketCard({ tariff, onBook }: { tariff: Tariff; onBook: () => void }) {
+// Уніфіковано з DyvoLisTickets — однаковий формат карток квитків на всіх сторінках локацій.
+function TicketCard({ tariff, onBook }: { tariff: Tariff; onBook: (count: number) => void }) {
+ const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
+ const [count, setCount] = useState(1)
const [added, setAdded] = useState(false)
- function handle() {
- onBook()
+ function handleAdd() {
+ onBook(count)
setAdded(true)
+ setCount(1)
setTimeout(() => setAdded(false), 1500)
}
return (
-
+ {/* Perforation — vertical dashed line (ticket stub) */}
+ className="absolute top-8 bottom-8 hidden w-[2px] lg:block"
+ style={{
+ right: '26%',
+ backgroundImage:
+ 'repeating-linear-gradient(to bottom, rgba(255,255,255,0.9) 0 9px, transparent 9px 22px)',
+ }}
+ />
-
- Дякуємо
-
+ {
try {
const ezyTariffs = await getTariffs()
@@ -15,6 +18,7 @@ export async function GET(): Promise {
collection: 'tariffs',
where: { visible: { equals: true } },
limit: 100,
+ depth: 1,
overrideAccess: true,
})
@@ -29,29 +33,34 @@ export async function GET(): Promise {
name: dbRecord.display_name ?? t.name,
price: t.price,
categoryTag: dbRecord.category_tag,
- description: dbRecord.description,
- image: dbRecord.image,
- icon: dbRecord.icon,
+ description: dbRecord.description ?? null,
+ image: dbRecord.image ?? null,
+ icon: dbRecord.icon ?? null,
+ badgeLabel: dbRecord.badgeLabel ?? null,
+ infoChips: dbRecord.infoChips ?? [],
sort: dbRecord.sort ?? 0,
}
})
.filter((v: T | null): v is T => v !== null)
- // Include visible DB tariffs not present in ezy (e.g. dyvolis uses a separate ezy activity)
- const dbOnly = dbTariffs
- .filter((d) => d.ezy_id != null && !ezyIdSet.has(d.ezy_id as number))
+ // Квитки з БД, яких немає у live-списку ezy: окрема ezy-активність (напр. dyvolis)
+ // АБО додані вручну (ezy_id порожній).
+ const dbExtra = dbTariffs
+ .filter((d) => d.ezy_id == null || !ezyIdSet.has(d.ezy_id as number))
.map((d) => ({
- id: d.ezy_id as number,
- name: (d.display_name ?? d.last_synced_name) as string,
+ id: (d.ezy_id ?? MANUAL_ID_OFFSET + (d.id as number)) as number,
+ name: (d.display_name ?? d.last_synced_name ?? '') as string,
price: (d.last_synced_price ?? 0) as number,
categoryTag: d.category_tag as string | null,
description: d.description ?? null,
image: d.image ?? null,
icon: d.icon ?? null,
+ badgeLabel: d.badgeLabel ?? null,
+ infoChips: d.infoChips ?? [],
sort: (d.sort ?? 0) as number,
}))
- const all = [...merged, ...dbOnly].sort((a, b) => a.sort - b.sort)
+ const all = [...merged, ...dbExtra].sort((a, b) => a.sort - b.sort)
return NextResponse.json({ tariffs: all })
} catch (err) {
@@ -63,6 +72,7 @@ export async function GET(): Promise {
collection: 'tariffs',
where: { visible: { equals: true } },
limit: 100,
+ depth: 1,
overrideAccess: true,
})
@@ -72,13 +82,15 @@ export async function GET(): Promise {
const fallback = docs
.map((d) => ({
- id: d.ezy_id,
+ id: (d.ezy_id ?? MANUAL_ID_OFFSET + (d.id as number)) as number,
name: d.display_name ?? d.last_synced_name,
price: d.last_synced_price,
categoryTag: d.category_tag,
- description: d.description,
- image: d.image,
- icon: d.icon,
+ description: d.description ?? null,
+ image: d.image ?? null,
+ icon: d.icon ?? null,
+ badgeLabel: d.badgeLabel ?? null,
+ infoChips: d.infoChips ?? [],
sort: d.sort ?? 0,
stale: true,
}))
diff --git a/src/app/globals.css b/src/app/globals.css
index 25fcfc4..205cca0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -33,3 +33,22 @@
width: 100%;
}
}
+
+/* Green wave pattern (as on the Dinopark page) — used for consistent green sections + footer */
+.wave-pattern {
+ background-color: #396817;
+ background-image: url('/images/figma/dyno-pattern.svg');
+ background-size: 660px;
+ background-repeat: repeat;
+ background-position: center;
+}
+
+/* Overlay variants — keep an existing background-color, add the wave pattern on top.
+ Used by DyvoLisTickets (.wave-bg-green) and DyvoLisWhyVisit (.wave-bg-green-card). */
+.wave-bg-green,
+.wave-bg-green-card {
+ background-image: url('/images/figma/dyno-pattern.svg');
+ background-size: 660px;
+ background-repeat: repeat;
+ background-position: center;
+}
diff --git a/src/collections/Tariffs.ts b/src/collections/Tariffs.ts
index 755a999..6335f31 100644
--- a/src/collections/Tariffs.ts
+++ b/src/collections/Tariffs.ts
@@ -27,29 +27,82 @@ export const Tariffs: CollectionConfig = {
{
name: 'ezy_id',
type: 'number',
- required: true,
unique: true,
index: true,
admin: {
readOnly: true,
- description: 'Встановлюється автоматично при синхронізації з ezy API',
+ description:
+ 'Встановлюється автоматично при синхронізації з ezy API. Порожнє — для квитків, доданих вручну.',
},
access: { update: adminFieldAccess },
},
{ name: 'display_name', type: 'text', label: 'Назва для сайту (перевизначення)' },
- { name: 'description', type: 'richText', editor: lexicalEditor({}) },
- { name: 'image', type: 'upload', relationTo: 'media' },
+ {
+ name: 'description',
+ type: 'richText',
+ editor: lexicalEditor({}),
+ label: 'Опис квитка',
+ },
+ { name: 'image', type: 'upload', relationTo: 'media', label: 'Фото квитка' },
{ name: 'icon', type: 'text', label: 'Emoji або назва іконки' },
{
name: 'category_tag',
type: 'select',
required: true,
+ label: 'Категорія (вкладка каталогу)',
options: [
- { label: 'Dyno', value: 'dyno' },
- { label: 'Dyvolis', value: 'dyvolis' },
- { label: 'Maze', value: 'maze' },
- { label: 'Combo', value: 'combo' },
- { label: 'Family', value: 'family' },
+ { label: 'Основні зони', value: 'zone' },
+ { label: 'Атракціони', value: 'attraction' },
+ { label: 'Програми та екскурсії', value: 'program' },
+ { label: 'Комбо', value: 'combo' },
+ // legacy-значення з ранніх синхронізацій (мапляться у вкладки в каталозі)
+ { label: 'Dyno (legacy)', value: 'dyno' },
+ { label: 'Dyvolis (legacy)', value: 'dyvolis' },
+ { label: 'Maze (legacy)', value: 'maze' },
+ { label: 'Family (legacy)', value: 'family' },
+ ],
+ },
+ {
+ name: 'badgeLabel',
+ type: 'text',
+ label: 'Назва бейджа (перевизначення)',
+ admin: {
+ description: 'Якщо порожнє — береться з назви категорії (Зона / Атракціон / Екскурсія).',
+ },
+ },
+ {
+ name: 'infoChips',
+ type: 'array',
+ label: 'Значки (характеристики квитка)',
+ labels: { singular: 'Значок', plural: 'Значки' },
+ admin: {
+ description:
+ 'Маленькі значки під назвою: тривалість, вартість за людину, вік тощо. Іконка + текст.',
+ },
+ fields: [
+ {
+ name: 'icon',
+ type: 'select',
+ required: true,
+ label: 'Іконка',
+ defaultValue: 'clock',
+ options: [
+ { label: '⏱ Тривалість (годинник)', value: 'clock' },
+ { label: '👤 Вартість за людину', value: 'person' },
+ { label: '👨👩👧 Група / для родини', value: 'group' },
+ { label: '♿ Вік / доступність', value: 'age' },
+ { label: '∞ Необмежено', value: 'infinity' },
+ { label: '🎯 Влучність / постріли', value: 'target' },
+ { label: '🎟 Сеанс / квиток', value: 'session' },
+ { label: '📏 Зріст / розмір', value: 'height' },
+ { label: '🔧 Інтерактив', value: 'wrench' },
+ { label: '🎓 Навчальний', value: 'graduation' },
+ { label: '🌈 Спокійно', value: 'rainbow' },
+ { label: '🚀 Драйв', value: 'send' },
+ { label: '🥽 VR досвід', value: 'vr' },
+ ],
+ },
+ { name: 'label', type: 'text', required: true, label: 'Текст' },
],
},
{ name: 'sort', type: 'number', defaultValue: 0, admin: { position: 'sidebar' } },
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 4652da9..2878048 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -14,7 +14,7 @@ function resolveLogoUrl(logo: unknown): string | null {
return null
}
-const IMG_BG = '/images/figma/footer-bg.webp'
+const IMG_BG = '/images/figma/loc-divo-lis.webp'
const LOGO_G1 = '/images/figma/logo-g1-lg.svg'
const LOGO_G2 = '/images/figma/logo-g2-lg.svg'
const LOGO_G3 = '/images/figma/logo-g3-lg.svg'
@@ -74,8 +74,9 @@ export async function Footer() {
src={IMG_BG}
alt=""
aria-hidden="true"
- className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
+ className="pointer-events-none absolute inset-0 h-full w-full object-cover"
/>
+
diff --git a/src/components/sections/ComboTickets.tsx b/src/components/sections/ComboTickets.tsx
new file mode 100644
index 0000000..8a6c8d9
--- /dev/null
+++ b/src/components/sections/ComboTickets.tsx
@@ -0,0 +1,186 @@
+'use client'
+
+import { useState } from 'react'
+import { useCart } from '@/context/CartContext'
+
+const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
+const FONT_INTER = { fontFamily: 'var(--font-inter, Inter), sans-serif' }
+
+export interface ComboCardData {
+ id: string
+ tariffId: string
+ priceValue: number
+ name: string
+ subtitle: string | null
+ price: string
+ description: string
+ featured: boolean
+ badge: string | null
+ locations: string[]
+}
+
+interface ComboTicketsProps {
+ cards: ComboCardData[]
+ title?: string
+}
+
+export function ComboTickets({ cards, title = 'Комбо-квитки' }: ComboTicketsProps) {
+ return (
+
+
+ )
+}
+
+function ComboCard({ card }: { card: ComboCardData }) {
+ const { name, subtitle, price, description, featured, badge, locations, tariffId, priceValue } =
+ card
+ const { addItem } = useCart()
+ const [added, setAdded] = useState(false)
+
+ function handleAdd() {
+ addItem({
+ tariffId,
+ name: subtitle ? `${name} ${subtitle}` : name,
+ price: priceValue,
+ categoryTag: 'combo',
+ })
+ setAdded(true)
+ setTimeout(() => setAdded(false), 1500)
+ }
+
+ const bg = featured ? '#f28b4a' : '#fdf2e8'
+ const titleColor = featured ? '#272727' : '#f28b4a'
+ const textColor = featured ? '#272727' : '#272727'
+ const dividerColor = featured ? 'rgba(255,255,255,0.6)' : '#e8d8c4'
+
+ return (
+
- addItem({
- tariffId: String(t.id),
- name: t.name,
- price: t.price,
- categoryTag: t.categoryTag,
- })
- }
+ onBook={(count) => {
+ for (let i = 0; i < count; i++) {
+ addItem({
+ tariffId: String(t.id),
+ name: t.name,
+ price: t.price,
+ categoryTag: t.categoryTag,
+ })
+ }
+ }}
/>
))}
@@ -1122,14 +1124,16 @@ export function DinoPageContent({
- Дякуємо
-
- за замовлення!
-
+
+
diff --git a/src/app/api/tickets/tariffs/route.ts b/src/app/api/tickets/tariffs/route.ts
index 037d7bb..fe94518 100644
--- a/src/app/api/tickets/tariffs/route.ts
+++ b/src/app/api/tickets/tariffs/route.ts
@@ -6,6 +6,9 @@ import { logger } from '@/lib/logger'
export const dynamic = 'force-dynamic'
+// Стабільний id для квитків, доданих вручну (без ezy_id), щоб не конфліктувати з ezy id.
+const MANUAL_ID_OFFSET = 1_000_000
+
export async function GET(): Promise
+
- + Дякуємо за покупку +
++ Ваші квитки відправлені на email. +
+ {orderId && ( ++ Номер замовлення: {orderId} +
+ )} +
- Квитки надійдуть на вашу електронну пошту
-
протягом кількох хвилин.
-
- Номер замовлення: {orderId} -
- )} - -
- Купити ще квитки
+
+
+ Купити квиток
+
+
@@ -196,6 +197,17 @@ export async function Footer() {
{copyright}
++ Розроблено{' '} + + AImpress LTD + +
+
+ + {title} +
+ +
+ {cards.map((card) => (
+
+
+ {/* Floating badge (featured only) — absolute, keeps all cards same height */}
+ {featured && badge && (
+
+ )
+}
+
+function CheckIcon({ featured }: { featured: boolean }) {
+ return (
+
+
+
+ )
+}
diff --git a/src/components/sections/DinoPageContent.tsx b/src/components/sections/DinoPageContent.tsx
index f9e441e..208118a 100644
--- a/src/components/sections/DinoPageContent.tsx
+++ b/src/components/sections/DinoPageContent.tsx
@@ -1098,14 +1098,16 @@ export function DinoPageContent({
+ {badge}
+
+ )}
+
+
+ {/* Title */}
+
+
+
+
+
+
+ {/* Price */}
+ + {name} +
+ {subtitle && ( ++ {subtitle} +
+ )} ++ {price} +
+ + {/* Description */} + {description && ( ++ {description} +
+ )} + + {/* Locations */} + {locations.length > 0 && ( +
+
+ )}
+
+ {/* CTA — add combo package to cart */}
+
+ + Включає {locations.length} локації: +
+-
+ {locations.map((loc) => (
+
-
+
+ + {loc} + +
+ ))}
+
-
+
)
}
diff --git a/src/components/sections/KvytkyTicketsClient.tsx b/src/components/sections/KvytkyTicketsClient.tsx
index 19bd400..07d3a9f 100644
--- a/src/components/sections/KvytkyTicketsClient.tsx
+++ b/src/components/sections/KvytkyTicketsClient.tsx
@@ -1,124 +1,157 @@
'use client'
+/* eslint-disable @next/next/no-img-element */
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
import { useCart } from '@/context/CartContext'
+import {
+ CHIP_ICONS,
+ FIGMA_TICKETS_BY_NAME,
+ type ChipIcon,
+ type FigmaChip,
+} from './kvytkyTicketsData'
const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
-interface Tariff {
+// ── Types ────────────────────────────────────────────────────────
+type LexicalNode = { text?: string; children?: LexicalNode[]; type?: string }
+type RichText = { root?: LexicalNode } | null
+
+interface CmsMedia {
+ url?: string | null
+}
+
+interface CmsChip {
+ icon?: string | null
+ label?: string | null
+}
+
+export interface Tariff {
id: number
name: string
price: number
- categoryTag: string
+ categoryTag: string | null
sort: number
icon?: string | null
+ description?: RichText
+ image?: CmsMedia | number | null
+ badgeLabel?: string | null
+ infoChips?: CmsChip[] | null
+ stale?: boolean
+}
+
+interface TabLabels {
+ all: string
+ zone: string
+ attraction: string
+ program: string
}
interface KvytkyTicketsClientProps {
serverTariffs: Tariff[]
- categoryLabelsMap: Record
+
+
+
+ + {tariff.price} ₴ +
++ {tariff.name} +
+
+
+
+
+
+ {count}
+
+
+
+
+
+
- Вартість квитків + {title}
- {/* 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 (
-
- )
- })}
+ {/* Category tabs */}
+
+ {tabsWithContent.map((tab) => {
+ const isActive = activeTab === tab.id
+ return (
+
+ )
+ })}
- {/* Ticket rows — horizontal layout per Figma */}
-
+ {/* Ticket rows */}
+
{visibleTariffs.map((tariff) => (
- {/* Photo — 300x300 rounded per Figma */}
-
- {/* eslint-disable-next-line @next/next/no-img-element */}
-
-
+
+ {/* Left: photo + item */}
+
+ {/* Photo — 288×288 rounded per Figma */}
+
+
+
- {/* Description column */}
-
- {/* Category badge */}
-
- {catStyle.label}
-
-
- {/* Name */}
-
-
- {/* Price + Counter column */}
- - {tariff.name} -
- - {/* Description */} - {description && ( -- {description} -
- )} -
- {/* Price — large number + "грн" */}
-
- {tariff.price}
-
- грн
-
- {/* Counter pill */}
-
)
}
+
+// ── Stepper icons (Figma, rounded square #396817) ───────────────
+function PlusIcon() {
+ return (
+
+ )
+}
+
+function MinusIcon() {
+ return (
+
+ )
+}
diff --git a/src/components/sections/Reviews.tsx b/src/components/sections/Reviews.tsx
index 105e49d..9933c13 100644
--- a/src/components/sections/Reviews.tsx
+++ b/src/components/sections/Reviews.tsx
@@ -1,12 +1,14 @@
'use client'
/* eslint-disable @next/next/no-img-element */
-import { useRef, useState } from 'react'
-import { useAutoScroll } from '@/hooks/useAutoScroll'
+import { useCallback, useEffect, useRef, useState } from 'react'
import StarRating from '@/components/ui/StarRating'
import type { ReviewCMS, Media } from '@/types/globals'
-const IMG_AVATAR_DEFAULT = '/images/figma/review-avatar-bg.webp'
+const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
+const FONT_INTER = { fontFamily: 'var(--font-inter, Inter), sans-serif' }
+
+const GOOGLE_REVIEW_URL = 'https://g.page/r/shumiland/review'
function getMediaUrl(img: Media | string | null | undefined): string | null {
if (!img) return null
@@ -42,11 +44,29 @@ const STATIC_REVIEWS: ReviewCMS[] = [
text: "Ми з сім'єю відвідали відкритий парк, нам дуже сподобалось! Значно краще, ніж очікував. Динозаври дуже запам'яталися — неймовірно!",
source: 'google',
},
+ {
+ id: 'r4',
+ name: 'Oksana M.',
+ initial: 'O',
+ ago: '4 місяці тому',
+ rating: 5,
+ text: 'Дитина в захваті від динозаврів та лабіринту. Гарно прибрана територія, привітний персонал. Обовʼязково повернемось!',
+ source: 'google',
+ },
+ {
+ id: 'r5',
+ name: 'Ihor T.',
+ initial: 'I',
+ ago: '1 місяць тому',
+ rating: 5,
+ text: 'Чудовий сімейний відпочинок. Багато активностей на свіжому повітрі, є де поїсти та відпочити. Рекомендую!',
+ source: 'google',
+ },
]
-function GoogleIcon() {
+function GoogleIcon({ size = 18 }: { size?: number }) {
return (
-
-
+ {/* Item: badge + name + description + chips */}
+
+
+ {/* Right: price + stepper */}
+
+
+
+ {/* Category badge */}
- {count}
+ {badgeLabel}
-
+ {tariff.name}
+
+
+ {/* Description */}
+ {description && (
+
- {/* Buy button */}
+ {/* Info chips */}
+ {chips.length > 0 && (
+ + {description} +
+ )}
+ {chips.map((chip, i) => (
+
+ )}
+
+
+
+ {chip.label}
+
+
+ ))}
+
+ {/* Price */}
+
+ {tariff.price} + грн +
+ + {/* Stepper — plus / count / minus (Figma) */} +
+
+ {count}
+
+