diff --git a/.gitignore b/.gitignore index 71edd68..95c1f14 100644 --- a/.gitignore +++ b/.gitignore @@ -55,7 +55,7 @@ agentdb.rvf agentdb.rvf.lock .playwright-mcp/ -# Debug screenshots (root-level) -*.png -*.jpg -*.jpeg +# Debug screenshots (root-level only) +/*.png +/*.jpg +/*.jpeg diff --git a/public/images/dyvolis/gallery-1.jpg b/public/images/dyvolis/gallery-1.jpg new file mode 100644 index 0000000..6459a57 Binary files /dev/null and b/public/images/dyvolis/gallery-1.jpg differ diff --git a/public/images/dyvolis/gallery-2.jpg b/public/images/dyvolis/gallery-2.jpg new file mode 100644 index 0000000..e762eef Binary files /dev/null and b/public/images/dyvolis/gallery-2.jpg differ diff --git a/public/images/dyvolis/gallery-3.jpg b/public/images/dyvolis/gallery-3.jpg new file mode 100644 index 0000000..182b2b6 Binary files /dev/null and b/public/images/dyvolis/gallery-3.jpg differ diff --git a/public/images/dyvolis/gallery-4.jpg b/public/images/dyvolis/gallery-4.jpg new file mode 100644 index 0000000..ebd8f3f Binary files /dev/null and b/public/images/dyvolis/gallery-4.jpg differ diff --git a/public/images/dyvolis/hero-cat.png b/public/images/dyvolis/hero-cat.png new file mode 100644 index 0000000..6a8c5e5 Binary files /dev/null and b/public/images/dyvolis/hero-cat.png differ diff --git a/public/images/dyvolis/video-thumb.jpg b/public/images/dyvolis/video-thumb.jpg new file mode 100644 index 0000000..404dfd8 Binary files /dev/null and b/public/images/dyvolis/video-thumb.jpg differ diff --git a/src/app/(frontend)/lokatsii/dyvolis/page.tsx b/src/app/(frontend)/lokatsii/dyvolis/page.tsx new file mode 100644 index 0000000..84213ac --- /dev/null +++ b/src/app/(frontend)/lokatsii/dyvolis/page.tsx @@ -0,0 +1,22 @@ +import type { Metadata } from 'next' +import { DyvoLisHero } from '@/components/sections/DyvoLisHero' +import { DyvoLisGallery } from '@/components/sections/DyvoLisGallery' +import { DyvoLisWhyVisit } from '@/components/sections/DyvoLisWhyVisit' +import { DyvoLisTickets } from '@/components/sections/DyvoLisTickets' + +export const metadata: Metadata = { + title: 'ДивоЛіс — Шуміленд', + description: + 'Казковий топіарний ліс у Шуміленді: фігури з безпечних матеріалів, унікальна ландшафтна композиція та повна свобода для дітей.', +} + +export default function DyvoLisPage() { + return ( +
+ + + + +
+ ) +} diff --git a/src/components/sections/DyvoLisGallery.tsx b/src/components/sections/DyvoLisGallery.tsx new file mode 100644 index 0000000..6d28d27 --- /dev/null +++ b/src/components/sections/DyvoLisGallery.tsx @@ -0,0 +1,54 @@ +/* eslint-disable @next/next/no-img-element */ + +const QUOTE = + 'Це місце – де малеча зустрічає героїв улюблених казок. Простір справжнього дитинства.' + +const GALLERY = [ + '/images/dyvolis/gallery-1.jpg', + '/images/dyvolis/gallery-2.jpg', + '/images/dyvolis/gallery-3.jpg', + '/images/dyvolis/gallery-4.jpg', +] + +export function DyvoLisGallery() { + return ( +
+ {/* Quote banner */} +
+

+ {QUOTE} +

+
+ + {/* Gallery row — overlaps banner on desktop */} +
+
+ {GALLERY.map((src, i) => ( +
+ {`ДивоЛіс +
+ ))} +
+
+
+ ) +} diff --git a/src/components/sections/DyvoLisHero.tsx b/src/components/sections/DyvoLisHero.tsx new file mode 100644 index 0000000..8f24ac4 --- /dev/null +++ b/src/components/sections/DyvoLisHero.tsx @@ -0,0 +1,105 @@ +/* eslint-disable @next/next/no-img-element */ +import { BtnPrimary } from '@/components/ui/BtnPrimary' + +const HERO_IMG = '/images/dyvolis/hero-cat.png' + +const TIPS = [ + 'Унікальна ландшафтна композиція з місцями для відпочинку', + 'Повна свобода переміщення - без заборон', +] + +export function DyvoLisHero() { + return ( +
+
+
+ + {/* Left: text + info tips */} +
+ + {/* Text block */} +
+

+ ДивоЛіс – територія магії та фантазії +

+

+ Топіарні фігури зроблені з урахуванням важливих деталей, тому ви одразу впізнаєте в них улюблених казкових героїв. Тут можна бігати, стрибати, лазити по фігурках і ставати героями власної казки. +

+ + Купити квиток + +
+ + {/* Info tips */} +
+ + {/* Main tip with X badge */} +
+ +
+ атракціонів з безпечних
для дітей матеріалів +
+
+ + {TIPS.map((tip, i) => ( +
+ {tip} +
+ ))} +
+
+ + {/* Right: hero image (desktop) */} + +
+
+ + {/* Mobile: hero image below text */} + +
+ ) +} diff --git a/src/components/sections/DyvoLisTickets.tsx b/src/components/sections/DyvoLisTickets.tsx new file mode 100644 index 0000000..b9619e3 --- /dev/null +++ b/src/components/sections/DyvoLisTickets.tsx @@ -0,0 +1,156 @@ +/* eslint-disable @next/next/no-img-element */ +import { BtnPrimary } from '@/components/ui/BtnPrimary' + +const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' } + +interface TicketCard { + label: string + price: string + per: string + note?: string +} + +const SINGLE_TICKETS: TicketCard[] = [ + { label: 'Вхід до ДивоЛісу', price: '300 грн', per: 'за 1 людину' }, + { + label: 'Звичайна екскурсія', + price: '150 грн', + per: 'за 1 людину', + note: 'Екскурсійна група — від 5 людей\nПриблизний час екскурсії — 30 хвилин', + }, + { label: 'Палеонтологічна екскурсія', price: '300 грн', per: 'за 1 людину' }, + { label: 'Динородео', price: '50 грн', per: 'сеанс' }, +] + +const COMBO_TICKETS: TicketCard[] = [ + { label: '', price: '600 грн', per: 'Комбо на людину' }, + { + label: '', + price: '1500 грн', + per: 'Комбо на 3 людини', + note: '(мама та/або тато та їхні діти до 14 років)', + }, + { + label: '', + price: '1800 грн', + per: 'Комбо на 4 людини', + note: '(мама та/або тато та їхні діти до 14 років)', + }, + { + label: '', + price: '2000 грн', + per: 'Комбо на 5 людей', + note: '(мама та/або тато та їхні діти до 14 років)', + }, +] + +function Ticket({ label, price, per, note }: TicketCard) { + return ( +
+
+ {label && ( +

+ {label} +

+ )} +
+

+ {price} +

+

+ {per} +

+ {note && ( +

+ {note} +

+ )} +
+ + Забронювати пригоду + +
+ ) +} + +export function DyvoLisTickets() { + return ( +
+ {/* Dark green background */} +
+ +
+ + {/* Working hours banner */} +
+

+ Час роботи +

+

+ п'ятниця–субота–неділя з 11:00 до 20:00 +

+
+ + {/* Single tickets */} +

+ Вартість квитка +

+
+ {SINGLE_TICKETS.map((t, i) => ( + + ))} +
+ + {/* Combo header */} +
+

+ Комбо +

+

+ ДивоЛіс із казковими топіарними фігурами + ДиноПарк + Дзеркальний лабіринт +

+
+
+ {COMBO_TICKETS.map((t, i) => ( + + ))} +
+
+
+ ) +} diff --git a/src/components/sections/DyvoLisWhyVisit.tsx b/src/components/sections/DyvoLisWhyVisit.tsx new file mode 100644 index 0000000..aa75e0f --- /dev/null +++ b/src/components/sections/DyvoLisWhyVisit.tsx @@ -0,0 +1,146 @@ +'use client' +/* eslint-disable @next/next/no-img-element */ + +import { useState } from 'react' + +const VIDEO_THUMB = '/images/dyvolis/video-thumb.jpg' + +const ITEMS = [ + { + title: 'Простір для спільної фантазії', + description: '', + }, + { + title: 'Казковий ліс у справжньому лісі', + description: + 'Ми створили локацію, в якій гармонійно поєднуються казкові фігури та жива природа. Прогулянка лісом ще не була такою захопливою.', + }, + { + title: 'Магічні кадри для сімейного альбому', + description: '', + }, +] + +const VIDEOS = [ + { src: VIDEO_THUMB, label: 'Відео 1' }, + { src: VIDEO_THUMB, label: 'Відео 2' }, + { src: VIDEO_THUMB, label: 'Відео 3' }, +] + +const PLAY_BTN = ( + +) + +export function DyvoLisWhyVisit() { + const [openIndex, setOpenIndex] = useState(1) + + return ( +
+
+ +

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

+ +
+ + {/* Accordion column */} +
+ {/* Green vertical decoration bar */} +
+ +
+ {ITEMS.map((item, i) => { + const isOpen = openIndex === i + return ( + + ) + })} +
+
+ + {/* Video cards */} +
+ {VIDEOS.map((v, i) => ( +
+ {v.label} + {PLAY_BTN} +
+ ))} +
+
+ + {/* Description paragraph */} +
+

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

+
+
+
+ ) +} diff --git a/src/components/sections/VideoSection.tsx b/src/components/sections/VideoSection.tsx index bfdcac9..99251aa 100644 --- a/src/components/sections/VideoSection.tsx +++ b/src/components/sections/VideoSection.tsx @@ -99,11 +99,21 @@ export function VideoSection({ poster, src }: VideoSectionProps) { className="absolute right-4 bottom-4 flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-sm transition-colors hover:bg-black/70" > {muted ? ( - + ) : ( - +