diff --git a/public/images/review-video-poster.jpg b/public/images/review-video-poster.jpg new file mode 100644 index 0000000..8c1f393 Binary files /dev/null and b/public/images/review-video-poster.jpg differ diff --git a/src/components/sections/DyvoLisHero.tsx b/src/components/sections/DyvoLisHero.tsx index fcb5916..f7c3d7b 100644 --- a/src/components/sections/DyvoLisHero.tsx +++ b/src/components/sections/DyvoLisHero.tsx @@ -11,7 +11,7 @@ const TIPS = [ export function DyvoLisHero() { return ( -
+
{/* Left column — contained within max-width */}
diff --git a/src/components/sections/DyvoLisTickets.tsx b/src/components/sections/DyvoLisTickets.tsx index e5bfb84..4ca4f95 100644 --- a/src/components/sections/DyvoLisTickets.tsx +++ b/src/components/sections/DyvoLisTickets.tsx @@ -10,7 +10,7 @@ interface TicketCard { } const SINGLE_TICKETS: TicketCard[] = [ - { label: 'Вхід до ДивоЛісу', price: '300 грн', per: 'за 1 людину' }, + { label: 'Вхід до ДиноПарку', price: '300 грн', per: 'за 1 людину' }, { label: 'Звичайна екскурсія', price: '150 грн', @@ -47,7 +47,7 @@ function Ticket({ label, price, per, note }: TicketCard) { return (
{label && ( @@ -139,7 +139,7 @@ export function DyvoLisTickets() { className="text-[16px] leading-[1.4] font-semibold text-white/80 lg:text-[20px]" style={FONT_MONT} > - ДивоЛіс із казковими топіарними фігурами + ДиноПарк + Дзеркальний лабіринт + Динопарк + Диволіс із казковими топіарними фігурами + Дзеркальний лабіринт

diff --git a/src/components/sections/DyvoLisWhyVisit.tsx b/src/components/sections/DyvoLisWhyVisit.tsx index 2e85269..794dd47 100644 --- a/src/components/sections/DyvoLisWhyVisit.tsx +++ b/src/components/sections/DyvoLisWhyVisit.tsx @@ -3,6 +3,9 @@ import { useState, useRef, useEffect } from 'react' +const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' } +const IMG_PLAY = '/images/figma/btn-video-play.svg' + const ITEMS = [ { title: 'Простір для спільної фантазії', @@ -21,73 +24,59 @@ const ITEMS = [ }, ] -const GALLERY = [ - '/images/dyvolis/gallery-1.jpg', - '/images/dyvolis/gallery-2.jpg', - '/images/dyvolis/gallery-3.jpg', - '/images/dyvolis/gallery-4.jpg', +const VIDEO_REVIEWS = [ + { poster: '/images/review-video-poster.jpg' }, + { poster: '/images/review-video-poster.jpg' }, + { poster: '/images/review-video-poster.jpg' }, ] export function DyvoLisWhyVisit() { const [openIndex, setOpenIndex] = useState(0) - const galleryRef = useRef(null) - const galleryPausedRef = useRef(false) - const galleryRafRef = useRef(null) - const autoTimer = useRef | null>(null) - - const doubled = [...GALLERY, ...GALLERY] + const [videoActive, setVideoActive] = useState(0) + const videoPausedRef = useRef(false) + const accordionTimer = useRef | null>(null) + const videoTimer = useRef | null>(null) + const vn = VIDEO_REVIEWS.length useEffect(() => { - autoTimer.current = setInterval(() => { + accordionTimer.current = setInterval(() => { setOpenIndex((prev) => (prev + 1) % ITEMS.length) }, 4000) return () => { - if (autoTimer.current) clearInterval(autoTimer.current) + if (accordionTimer.current) clearInterval(accordionTimer.current) } }, []) + useEffect(() => { + videoTimer.current = setInterval(() => { + if (!videoPausedRef.current) { + setVideoActive((prev) => (prev + 1) % vn) + } + }, 5000) + return () => { + if (videoTimer.current) clearInterval(videoTimer.current) + } + }, [vn]) + function handleItemClick(i: number) { setOpenIndex(i) - if (autoTimer.current) clearInterval(autoTimer.current) - autoTimer.current = setInterval(() => { + if (accordionTimer.current) clearInterval(accordionTimer.current) + accordionTimer.current = setInterval(() => { setOpenIndex((prev) => (prev + 1) % ITEMS.length) }, 4000) } - useEffect(() => { - const el = galleryRef.current - if (!el) return - if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return - let last = performance.now() - const tick = (now: number) => { - const dt = now - last - last = now - if (!galleryPausedRef.current) { - const half = el.scrollWidth / 2 - if (half > 0) { - el.scrollLeft += dt * 0.04 - if (el.scrollLeft >= half) el.scrollLeft -= half - } - } - galleryRafRef.current = requestAnimationFrame(tick) - } - galleryRafRef.current = requestAnimationFrame(tick) - return () => { - if (galleryRafRef.current) cancelAnimationFrame(galleryRafRef.current) - } - }, []) - return (

Чому варто відвідати ДивоЛіс

-
+
{/* Left: accordion */}
@@ -105,7 +94,7 @@ export function DyvoLisWhyVisit() {
{item.title} @@ -144,58 +133,108 @@ export function DyvoLisWhyVisit() {
- {/* Right: auto-scroll gallery — desktop */} -
+ {/* Right: video review carousel */} +
{ - galleryPausedRef.current = true + videoPausedRef.current = true }} onMouseLeave={() => { - galleryPausedRef.current = false + videoPausedRef.current = false }} > - {doubled.map((src, i) => ( + {VIDEO_REVIEWS.map((v, i) => (
))} -
-
- - {/* Mobile: horizontal scroll */} -
- {GALLERY.map((src, i) => ( -
+ {/* Play button overlay */} +
- ))} +
+ + {/* Carousel navigation */} +
+ + +
+ {VIDEO_REVIEWS.map((_, i) => ( +
+ + +
+ + {/* Quote block — Figma node 4:202 */} +
+

+ Це простір, де ви разом із дитиною створюєте власний магічний світ, вчитеся помічати + дива у звичайних речах та розвиваєте творчу уяву через спільну гру. Хто знає, можлива + саме ця прогулянка спонукає вже дорослу дитину написати казкову історію, яка стане + бестселером. +

+
)