095beb0303
- Rename all new Figma 2026 assets to *-v2.webp so browsers load fresh copies instead of serving year-old cached originals - Change Cache-Control for /images/ from immutable (1 year) to must-revalidate (1 day) — public/ files are mutable, not hashed Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
105 lines
4.4 KiB
TypeScript
105 lines
4.4 KiB
TypeScript
import { LocationsSlider } from './LocationsSlider'
|
||
import type { LocationData } from './LocationsSlider'
|
||
import type { LocationCMS, Media } from '@/types/globals'
|
||
|
||
function getMediaUrl(img: Media | string | null | undefined): string | null {
|
||
if (!img) return null
|
||
if (typeof img === 'string') return img
|
||
return img.url ?? null
|
||
}
|
||
|
||
const FALLBACK_IMAGES: Record<string, string> = {
|
||
dynopark: '/images/figma/loc-dinopark-v2.webp',
|
||
dyvolis: '/images/figma/loc-divo-lis-v2.webp',
|
||
maze: '/images/figma/loc-maze-v2.webp',
|
||
tir: '/images/figma/loc-tir-v2.webp',
|
||
playground: '/images/figma/loc-playground-v2.webp',
|
||
}
|
||
|
||
const STATIC_LOCATIONS: LocationData[] = [
|
||
{
|
||
name: 'ДиноПарк',
|
||
slug: 'dynopark',
|
||
tagline: 'портал у світ динозаврів',
|
||
description:
|
||
'Ви бачили їх у фільмах та мультиках, а тепер час зустріти в реальному житті та роздивитися їх зблизька! Найбільші динозаври України, які гарчать і рухаються, як справжні.',
|
||
image: '/images/figma/loc-dinopark.webp',
|
||
href: '/lokatsii#dynopark',
|
||
},
|
||
{
|
||
name: 'Диво Ліс',
|
||
slug: 'dyvolis',
|
||
tagline: 'зона казкових топіарних фігур',
|
||
description:
|
||
'Тут на лісових стежках оселилися єдинороги, дракони та добрі лісові звірята. Це ідеальне місце, щоб пофантазувати разом із дитиною.',
|
||
image: '/images/figma/loc-divo-lis.webp',
|
||
href: '/lokatsii/dyvolis',
|
||
},
|
||
{
|
||
name: 'Дзеркальний Лабіринт',
|
||
slug: 'maze',
|
||
tagline: 'справжній виклик кмітливості',
|
||
description:
|
||
'Чи зможете ви разом знайти вихід? Це справжній пригодницький виклик для всієї родини! Тут діти вчаться бути уважними та впевненими у собі.',
|
||
image: '/images/figma/loc-maze.webp',
|
||
href: '/lokatsii#maze',
|
||
},
|
||
{
|
||
name: 'Тир з призами',
|
||
slug: 'tir',
|
||
tagline: 'перемога, яку ви розділите разом',
|
||
description:
|
||
'Для дітей це не просто гра, а можливість проявити себе та "заробити" подарунок. Влаштуйте дружні змагання, дайте малечі декілька уроків та виграйте класний приз.',
|
||
image: '/images/figma/loc-tir.webp',
|
||
href: '/lokatsii#tir',
|
||
},
|
||
{
|
||
name: 'Дитячий майданчик',
|
||
slug: 'playground',
|
||
tagline: 'територія забав і нових друзів',
|
||
description:
|
||
'Поки малеча підкорює гірки, випробовує безпечні лазанки та знаходить перших друзів, ви можете нарешті зробити паузу та просто спостерігати.',
|
||
image: '/images/figma/loc-playground.webp',
|
||
href: '/lokatsii#playground',
|
||
},
|
||
]
|
||
|
||
interface LocationsProps {
|
||
data?: LocationCMS[]
|
||
title?: string
|
||
}
|
||
|
||
export function Locations({ data, title }: LocationsProps) {
|
||
const locations: LocationData[] =
|
||
data && data.length > 0
|
||
? data.map((loc) => ({
|
||
name: loc.name,
|
||
slug: loc.slug,
|
||
tagline: loc.tagline ?? '',
|
||
description: loc.shortDesc ?? '',
|
||
image:
|
||
getMediaUrl(loc.image) ??
|
||
FALLBACK_IMAGES[loc.slug] ??
|
||
'/images/figma/loc-dinopark.webp',
|
||
href:
|
||
loc.slug === 'dyvolis' ? '/lokatsii/dyvolis' : (loc.href ?? `/lokatsii#${loc.slug}`),
|
||
}))
|
||
: STATIC_LOCATIONS
|
||
|
||
return (
|
||
<section className="py-[20px] md:py-[60px] lg:py-[40px]">
|
||
<div className="mx-auto max-w-[1204px] px-8">
|
||
<h2
|
||
className="mb-[40px] text-[24px] font-bold text-[#272727] uppercase md:mb-[60px] md:text-[32px]"
|
||
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
|
||
>
|
||
{title ?? 'ЛАСКАВО ПРОСИМО ДО ШУМІЛЕНДУ'}
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="relative mx-auto max-w-[1204px] px-8">
|
||
<LocationsSlider locations={locations} />
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|