feat(kvytky): add birthday & group visit sections with enquiry CTA
Combo bundle tariffs moved to their own 'combo' category via DB. Static sections for Дні народження (3 packages) and Групові відвідування (3 types) added at the bottom with "Дізнатися ціну" buttons linking to the respective booking forms. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko
parent
380776fb03
commit
277a240359
1 changed files with 92 additions and 23 deletions
|
|
@ -1,4 +1,5 @@
|
|||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
import { PageHero } from '@/components/ui/PageHero'
|
||||
import { TariffCardClient } from '@/components/ui/TariffCardClient'
|
||||
|
||||
|
|
@ -51,6 +52,8 @@ export default async function TicketsPage() {
|
|||
return acc
|
||||
}, {})
|
||||
|
||||
const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#f1fbeb]">
|
||||
<PageHero
|
||||
|
|
@ -65,29 +68,26 @@ export default async function TicketsPage() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{tariffs.length === 0 ? (
|
||||
<div className="py-20 text-center">
|
||||
<p
|
||||
className="mb-6 text-[20px] text-[#272727]"
|
||||
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
|
||||
>
|
||||
Квитки тимчасово недоступні. Спробуйте пізніше або зателефонуйте нам.
|
||||
</p>
|
||||
<a
|
||||
href="tel:+380000000000"
|
||||
className="inline-flex rounded-[64px] bg-[#f28b4a] px-8 py-3 font-bold text-white"
|
||||
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
|
||||
>
|
||||
Зателефонувати
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-12">
|
||||
{Object.entries(grouped).map(([category, items]) => (
|
||||
<div className="flex flex-col gap-12">
|
||||
{tariffs.length === 0 ? (
|
||||
<div className="py-20 text-center">
|
||||
<p className="mb-6 text-[20px] text-[#272727]" style={FONT_MONT}>
|
||||
Квитки тимчасово недоступні. Спробуйте пізніше або зателефонуйте нам.
|
||||
</p>
|
||||
<a
|
||||
href="tel:+380671443635"
|
||||
className="inline-flex rounded-[64px] bg-[#f28b4a] px-8 py-3 font-bold text-white"
|
||||
style={FONT_MONT}
|
||||
>
|
||||
Зателефонувати
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
Object.entries(grouped).map(([category, items]) => (
|
||||
<div key={category}>
|
||||
<h2
|
||||
className="mb-6 text-[24px] font-bold text-[#272727] uppercase"
|
||||
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
|
||||
style={FONT_MONT}
|
||||
>
|
||||
{CATEGORY_LABELS[category] ?? category}
|
||||
</h2>
|
||||
|
|
@ -104,11 +104,80 @@ export default async function TicketsPage() {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))
|
||||
)}
|
||||
|
||||
{/* Birthday packages */}
|
||||
<div>
|
||||
<h2 className="mb-6 text-[24px] font-bold text-[#272727] uppercase" style={FONT_MONT}>
|
||||
Дні народження
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{[
|
||||
{ name: 'Стандарт', desc: 'До 10 дітей · Аніматор 2 год · Торт від закладу', href: '/dni-narodzhennia#order-form' },
|
||||
{ name: 'Преміум', desc: 'До 20 дітей · Аніматор 3 год · Декор + фотограф', href: '/dni-narodzhennia#order-form' },
|
||||
{ name: 'VIP', desc: 'До 40 гостей · Аніматор 4 год · Повне меню + відео', href: '/dni-narodzhennia#order-form' },
|
||||
].map((pkg) => (
|
||||
<div
|
||||
key={pkg.name}
|
||||
className="flex flex-col gap-4 rounded-[20px] bg-[#396817] p-8 shadow-[0_4px_60px_0_rgba(242,139,74,0.25)]"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-[20px] font-bold leading-tight text-white" style={FONT_MONT}>
|
||||
{pkg.name}
|
||||
</h3>
|
||||
<p className="mt-2 text-[14px] leading-relaxed text-white/70" style={FONT_MONT}>
|
||||
{pkg.desc}
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href={pkg.href}
|
||||
className="mt-auto flex items-center justify-center rounded-[56px] py-[10px] text-[15px] font-bold text-[#1a1a1a] transition-opacity hover:opacity-90"
|
||||
style={{ ...FONT_MONT, background: 'linear-gradient(90deg,#f28b4a 0%,#fdcf54 55%,#f28b4a 100%)' }}
|
||||
>
|
||||
Дізнатися ціну
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Group visits */}
|
||||
<div>
|
||||
<h2 className="mb-6 text-[24px] font-bold text-[#272727] uppercase" style={FONT_MONT}>
|
||||
Групові відвідування
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{[
|
||||
{ name: 'Шкільні екскурсії', desc: 'Від 15 осіб · Знижка 15% · Екскурсовод', href: '/grupovi-vidviduvannia#order-form' },
|
||||
{ name: 'Дитячі садки', desc: 'Від 10 осіб · Знижка 20% · Безпечний формат', href: '/grupovi-vidviduvannia#order-form' },
|
||||
{ name: 'Корпоративи', desc: 'Від 20 осіб · Знижка 10% · Ексклюзивні зони', href: '/grupovi-vidviduvannia#order-form' },
|
||||
].map((grp) => (
|
||||
<div
|
||||
key={grp.name}
|
||||
className="flex flex-col gap-4 rounded-[20px] bg-[#396817] p-8 shadow-[0_4px_60px_0_rgba(242,139,74,0.25)]"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-[20px] font-bold leading-tight text-white" style={FONT_MONT}>
|
||||
{grp.name}
|
||||
</h3>
|
||||
<p className="mt-2 text-[14px] leading-relaxed text-white/70" style={FONT_MONT}>
|
||||
{grp.desc}
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href={grp.href}
|
||||
className="mt-auto flex items-center justify-center rounded-[56px] py-[10px] text-[15px] font-bold text-[#1a1a1a] transition-opacity hover:opacity-90"
|
||||
style={{ ...FONT_MONT, background: 'linear-gradient(90deg,#f28b4a 0%,#fdcf54 55%,#f28b4a 100%)' }}
|
||||
>
|
||||
Дізнатися ціну
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue