234 lines
13 KiB
TypeScript
234 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import Navbar from "@/components/navbar"
|
|
import Footer from "@/components/footer"
|
|
import PageReveal from "@/components/page-reveal"
|
|
import PricingTable from "@/components/pricing-table"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card } from "@/components/ui/card"
|
|
import { ArrowLeft, Phone, Mail, Clock, Shield, MapPin } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { useLanguage } from "@/lib/language-context"
|
|
|
|
export default function PricingPage() {
|
|
const { t } = useLanguage()
|
|
|
|
const expressInfoText = (price: string) =>
|
|
t.pricing.expressInfoTemplate.replace("{price}", price)
|
|
|
|
const expressInfoBecs = expressInfoText("23.500 HUF")
|
|
const expressInfoBudapest = expressInfoText("28.000 HUF")
|
|
const expressInfoPozsony = expressInfoText("23.500 HUF")
|
|
const expressInfoBudapestBecs = expressInfoText("50.000 HUF")
|
|
|
|
const districtSurcharge = t.pricing.districtSurcharge
|
|
|
|
const routeNav = [
|
|
{
|
|
id: "gyor-becs",
|
|
label: t.pricing.routes.gyorBecs,
|
|
},
|
|
{
|
|
id: "gyor-budapest",
|
|
label: t.pricing.routes.gyorBudapest,
|
|
},
|
|
{
|
|
id: "gyor-pozsony",
|
|
label: t.pricing.routes.gyorPozsony,
|
|
},
|
|
{
|
|
id: "budapest-becs",
|
|
label: t.pricing.routes.budapestBecs,
|
|
},
|
|
]
|
|
|
|
return (
|
|
<PageReveal className="relative min-h-screen bg-slate-50">
|
|
<Navbar darkMode={true} />
|
|
|
|
{/* Background Decorations matching Home page */}
|
|
<div className="absolute md:fixed inset-0 pointer-events-none -z-10 overflow-hidden">
|
|
<div className="absolute top-1/4 -right-20 w-96 h-96 bg-purple-100 rounded-full blur-3xl opacity-30 animate-blob" />
|
|
<div className="absolute top-1/2 -left-20 w-80 h-80 bg-blue-100 rounded-full blur-3xl opacity-30 animate-blob animation-delay-2000" />
|
|
</div>
|
|
|
|
{/* Header Section */}
|
|
<section className="relative pt-40 pb-32 overflow-hidden bg-[#D9A321]">
|
|
{/* Background gradient covers full section now */}
|
|
<div
|
|
className="absolute inset-0 bg-diagonal opacity-100 -z-10"
|
|
style={{ background: "linear-gradient(135deg, #D9A321 0%, #1A1A1A 100%)" }}
|
|
/>
|
|
<div className="absolute bottom-0 left-0 w-full h-[100px] bg-slate-50 transform -skew-y-3 origin-bottom-left -z-10" />
|
|
|
|
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
|
<Link href="/" className="inline-flex items-center text-white/70 hover:text-white mb-10 transition-colors group">
|
|
<div className="bg-white/10 p-2 rounded-full mr-3 group-hover:bg-white/20 transition-colors">
|
|
<ArrowLeft className="w-4 h-4" />
|
|
</div>
|
|
<span className="text-xs font-bold tracking-[0.2em] uppercase">{t.pricing.back}</span>
|
|
</Link>
|
|
|
|
<div className="space-y-4">
|
|
<h1 className="text-5xl md:text-8xl font-black text-white tracking-tighter leading-none uppercase">
|
|
{t.pricing.title} <br />
|
|
<span className="text-slate-900 italic">{t.pricing.titleAccent}</span>
|
|
</h1>
|
|
<p className="text-xl text-white/70 max-w-2xl leading-relaxed font-medium">
|
|
{t.pricing.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Pricing Content */}
|
|
<section className="py-16">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
{/* Info Banner */}
|
|
<Card className="p-6 mb-16 bg-white border-blue-100 shadow-xl rounded-[2rem] flex flex-col md:flex-row gap-8 items-center">
|
|
<div className="bg-primary/10 p-4 rounded-2xl">
|
|
<Clock className="w-8 h-8 text-primary" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-extrabold text-blue-950 uppercase tracking-tight mb-1">{t.pricing.banner.title}</h3>
|
|
<div className="text-slate-500 text-sm leading-relaxed space-y-3">
|
|
{Array.isArray(t.pricing.banner.description) ? (
|
|
t.pricing.banner.description.map((p: string, i: number) => (
|
|
<p key={i}>{p}</p>
|
|
))
|
|
) : (
|
|
<p>{t.pricing.banner.description}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Button asChild className="rounded-full px-8 h-12 bg-primary hover:bg-primary/90 text-sm font-bold tracking-widest uppercase">
|
|
<a href="https://app.skyflytravel.hu/public/offers/new" target="_blank" rel="noopener noreferrer">
|
|
{t.nav.cta}
|
|
</a>
|
|
</Button>
|
|
</Card>
|
|
|
|
{/* Route Navigation */}
|
|
<div className="mb-14">
|
|
<div className="text-center text-[10px] font-black uppercase tracking-[0.4em] text-slate-400 mb-4">
|
|
{t.pricing.routes.title}
|
|
</div>
|
|
<div className="flex flex-wrap justify-center gap-3">
|
|
{routeNav.map(route => (
|
|
<a
|
|
key={route.id}
|
|
href={`#${route.id}`}
|
|
className="px-4 py-2 rounded-full bg-white text-slate-700 text-xs font-bold uppercase tracking-widest border border-slate-100 shadow-sm hover:border-primary hover:text-primary transition-colors"
|
|
>
|
|
{route.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tables */}
|
|
<div id="gyor-becs">
|
|
<PricingTable
|
|
route={t.pricing.routesTable.gyorBecs}
|
|
rows={t.pricing.rows.becs}
|
|
specials={t.pricing.specials.base}
|
|
vipInfo={t.pricing.vipInfo.base}
|
|
effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
|
|
expressInfo={expressInfoBecs}
|
|
/>
|
|
</div>
|
|
|
|
<div id="gyor-budapest">
|
|
<PricingTable
|
|
route={t.pricing.routesTable.gyorBudapest}
|
|
rows={t.pricing.rows.budapest}
|
|
specials={t.pricing.specials.budapest}
|
|
vipInfo={t.pricing.vipInfo.budapest}
|
|
effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
|
|
expressInfo={expressInfoBudapest}
|
|
districtSurcharge={districtSurcharge}
|
|
/>
|
|
</div>
|
|
|
|
<div id="gyor-pozsony">
|
|
<PricingTable
|
|
route={t.pricing.routesTable.gyorPozsony}
|
|
rows={t.pricing.rows.pozsony}
|
|
specials={t.pricing.specials.base}
|
|
vipInfo={t.pricing.vipInfo.base}
|
|
effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
|
|
expressInfo={expressInfoPozsony}
|
|
/>
|
|
</div>
|
|
|
|
<div id="budapest-becs">
|
|
<PricingTable
|
|
route={t.pricing.routesTable.budapestBecs}
|
|
rows={t.pricing.rows.budapestVienna}
|
|
specials={t.pricing.specials.budapestVienna}
|
|
vipInfo={t.pricing.vipInfo.budapestVienna}
|
|
effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
|
|
expressInfo={expressInfoBudapestBecs}
|
|
districtSurcharge={districtSurcharge}
|
|
/>
|
|
</div>
|
|
{/* Additional Info Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-24">
|
|
<Card className="p-8 rounded-[2rem] border-none shadow-lg bg-white group hover:-translate-y-2 transition-all duration-300">
|
|
<div className="bg-green-50 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-green-500 transition-colors duration-300">
|
|
<Shield className="w-8 h-8 text-green-500 group-hover:text-white transition-colors duration-300" />
|
|
</div>
|
|
<h4 className="font-extrabold text-slate-900 text-xl mb-3 uppercase tracking-tight">{t.pricing.extra.security.title}</h4>
|
|
<p className="text-slate-500 text-sm leading-relaxed">
|
|
{t.pricing.extra.security.desc}
|
|
</p>
|
|
</Card>
|
|
|
|
<Card className="p-8 rounded-[2rem] border-none shadow-lg bg-white group hover:-translate-y-2 transition-all duration-300">
|
|
<div className="bg-blue-50 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-blue-500 transition-colors duration-300">
|
|
<MapPin className="w-8 h-8 text-blue-500 group-hover:text-white transition-colors duration-300" />
|
|
</div>
|
|
<h4 className="font-extrabold text-slate-900 text-xl mb-3 uppercase tracking-tight">{t.pricing.extra.addresses.title}</h4>
|
|
<p className="text-slate-500 text-sm leading-relaxed">
|
|
{t.pricing.extra.addresses.desc}
|
|
</p>
|
|
</Card>
|
|
|
|
<Card className="p-8 rounded-[2rem] border-none shadow-lg bg-white group hover:-translate-y-2 transition-all duration-300">
|
|
<div className="bg-purple-50 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-purple-500 transition-colors duration-300">
|
|
<Phone className="w-8 h-8 text-purple-500 group-hover:text-white transition-colors duration-300" />
|
|
</div>
|
|
<h4 className="font-extrabold text-slate-900 text-xl mb-3 uppercase tracking-tight">{t.pricing.extra.custom.title}</h4>
|
|
<p className="text-slate-500 text-sm leading-relaxed">
|
|
{t.pricing.extra.custom.desc}
|
|
</p>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Footer CTA */}
|
|
<div className="mt-24 text-center space-y-8 bg-slate-900 rounded-[3rem] p-16 text-white overflow-hidden relative">
|
|
<div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 rounded-full blur-3xl -mr-32 -mt-32" />
|
|
<div className="relative z-10 flex flex-col items-center">
|
|
<h2 className="text-3xl md:text-5xl font-black uppercase tracking-tighter mb-8">{t.pricing.cta.title}</h2>
|
|
<div className="flex flex-wrap justify-center gap-12">
|
|
<a href={`tel:${t.common.phone.replace(/\s/g, "")}`} className="flex items-center gap-4 text-xl md:text-2xl font-black hover:text-primary transition-colors decoration-primary decoration-4 underline-offset-8 group">
|
|
<div className="bg-white/5 p-3 rounded-2xl group-hover:bg-primary transition-colors">
|
|
<Phone className="text-primary group-hover:text-white" />
|
|
</div>
|
|
{t.common.phone}
|
|
</a>
|
|
<a href={`mailto:${t.common.email}`} className="flex items-center gap-4 text-xl md:text-2xl font-black hover:text-primary transition-colors decoration-primary decoration-4 underline-offset-8 group">
|
|
<div className="bg-white/5 p-3 rounded-2xl group-hover:bg-primary transition-colors">
|
|
<Mail className="text-primary group-hover:text-white" />
|
|
</div>
|
|
{t.common.email}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<Footer />
|
|
</PageReveal>
|
|
)
|
|
} |