343 lines
19 KiB
TypeScript
343 lines
19 KiB
TypeScript
"use client"
|
||
|
||
import Navbar from "@/components/navbar"
|
||
import Footer from "@/components/footer"
|
||
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"
|
||
|
||
const becsRows = [
|
||
{ persons: "1 pax / 1 way", express: "16.000 HUF", private: "29.000 HUF" },
|
||
{ persons: "2 pax / 1 way", express: "23.500 HUF", private: "29.000 HUF" },
|
||
{ persons: "3 pax / 1 way", express: "26.500 HUF", private: "29.000 HUF" },
|
||
{ persons: "4 pax / 1 way", express: "31.000 HUF", private: "35.000 HUF" },
|
||
{ persons: "5-6 pax / 1 way", express: "33.000 HUF", private: "37.500 HUF" },
|
||
{ persons: "7-8 pax / 1 way", express: "35.000 HUF", private: "39.000 HUF" },
|
||
]
|
||
|
||
const budapestRows = [
|
||
{ persons: "1 pax / 1 way", express: "22.000 HUF", private: "38.000 HUF" },
|
||
{ persons: "2 pax / 1 way", express: "28.000 HUF", private: "38.000 HUF" },
|
||
{ persons: "3 pax / 1 way", express: "33.000 HUF", private: "38.000 HUF" },
|
||
{ persons: "4 pax / 1 way", express: "38.000 HUF", private: "45.000 HUF" },
|
||
{ persons: "5-6 pax / 1 way", express: "42.000 HUF", private: "50.000 HUF" },
|
||
{ persons: "7-8 pax / 1 way", express: "45.000 HUF", private: "52.000 HUF" },
|
||
]
|
||
|
||
const pozsonyRows = [
|
||
{ persons: "1 pax / 1 way", express: "16.000 HUF", private: "29.000 HUF" },
|
||
{ persons: "2 pax / 1 way", express: "23.500 HUF", private: "29.000 HUF" },
|
||
{ persons: "3 pax / 1 way", express: "26.500 HUF", private: "29.000 HUF" },
|
||
{ persons: "4 pax / 1 way", express: "31.000 HUF", private: "35.000 HUF" },
|
||
{ persons: "5-6 pax / 1 way", express: "33.000 HUF", private: "37.500 HUF" },
|
||
{ persons: "7-8 pax / 1 way", express: "35.000 HUF", private: "39.000 HUF" },
|
||
]
|
||
|
||
const budapestViennaRows = [
|
||
{ persons: "1 pax / 1 way", express: "40.000 HUF", private: "60.000 HUF" },
|
||
{ persons: "2 pax / 1 way", express: "50.000 HUF", private: "60.000 HUF" },
|
||
{ persons: "3 pax / 1 way", express: "55.000 HUF", private: "60.000 HUF" },
|
||
{ persons: "4 pax / 1 way", express: "60.000 HUF", private: "70.000 HUF" },
|
||
{ persons: "5 pax / 1 way", express: "65.000 HUF", private: "75.000 HUF" },
|
||
{ persons: "6 pax / 1 way", express: "65.000 HUF", private: "75.000 HUF" },
|
||
{ persons: "7-8 pax / 1 way", express: "70.000 HUF", private: "80.000 HUF" },
|
||
]
|
||
|
||
export default function PricingPage() {
|
||
const { language, t } = useLanguage()
|
||
|
||
// Dynamic passenger text
|
||
const getFaresHub = (rows: any[]) => {
|
||
return rows.map(r => ({
|
||
...r,
|
||
persons: language === "hu" ? r.persons.replace("pax", "fő").replace("way", "út") : r.persons
|
||
}))
|
||
}
|
||
|
||
const specials = [
|
||
{
|
||
name: language === "hu" ? "Családi csomag" : "Family package",
|
||
price: "33.000 HUF",
|
||
description: language === "hu"
|
||
? "max. 4 fő, min. 1 gyermek (0-14 éves), private transzfer, max. 3 normál és 3 kézi poggyász (Teljesítés: személygépjárművel)"
|
||
: "max. 4 pax, min. 1 child (0-14 yrs), private transfer, max. 3 standard and 3 hand luggage (Performed by passenger car)"
|
||
},
|
||
{
|
||
name: language === "hu" ? "„Nagy” családi csomag" : "„Large” family package",
|
||
price: "36.000 HUF",
|
||
description: language === "hu"
|
||
? "max. 6 fő, min. 1 gyermek (0-14 éves), private transzfer, max. 6 normál és 6 kézi poggyász (Teljesítés: kisbusszal)"
|
||
: "max. 6 pax, min. 1 child (0-14 yrs), private transfer, max. 6 standard and 6 hand luggage (Performed by minibus)"
|
||
}
|
||
]
|
||
|
||
const vipInfo = language === "hu"
|
||
? ["1-3 fő (Mercedes E-class): 40.000 Ft", "4-6 fő (Mercedes Vito / Ford Tourneo Custom): 50.000 Ft"]
|
||
: ["1-3 pax (Mercedes E-class): 40.000 Ft", "4-6 pax (Mercedes Vito / Ford Tourneo Custom): 50.000 Ft"]
|
||
|
||
|
||
const specialsPozsony = specials
|
||
|
||
const specialsBudapestVienna = [
|
||
{
|
||
name: language === "hu" ? "Családi csomag" : "Family package",
|
||
price: "66.000 HUF",
|
||
description: language === "hu"
|
||
? "max. 4 fő, min. 1 gyermek (0-14 éves), private transzfer, max. 3 normál és 3 kézi poggyász (Teljesítés: személygépjárművel)"
|
||
: "max. 4 pax, min. 1 child (0-14 yrs), private transfer, max. 3 standard and 3 hand luggage (Performed by passenger car)"
|
||
},
|
||
{
|
||
name: language === "hu" ? "„Nagy” családi csomag" : "„Large” family package",
|
||
price: "72.000 HUF",
|
||
description: language === "hu"
|
||
? "max. 6 fő, min. 1 gyermek (0-14 éves), private transzfer, max. 6 normál és 6 kézi poggyász (Teljesítés: kisbusszal)"
|
||
: "max. 6 pax, min. 1 child (0-14 yrs), private transfer, max. 6 standard and 6 hand luggage (Performed by minibus)"
|
||
}
|
||
]
|
||
|
||
const vipInfoBudapestVienna = language === "hu"
|
||
? ["1-3 fő (Mercedes E-class): 75.000 Ft", "4-6 fő (Mercedes Vito / Ford Tourneo Custom): 95.000 Ft"]
|
||
: ["1-3 pax (Mercedes E-class): 75.000 Ft", "4-6 pax (Mercedes Vito / Ford Tourneo Custom): 95.000 Ft"]
|
||
|
||
|
||
const expressInfoText = (price: string) =>
|
||
language === "hu"
|
||
? `Amennyiben nincs más utas a viteldíj ${price}. (22:00-05:00 utasfelvétel esetén Private transzfer keretében tudjuk vállalni, ha nincs más)`
|
||
: `If there are no other passengers, the fare is ${price}. (For pickups between 22:00-05:00 we can only provide Private transfer if there are no other passengers.)`
|
||
|
||
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 = language === "hu"
|
||
? {
|
||
label: "Kerületi felárak – részletek",
|
||
title: "Budapesti kerületi felárak",
|
||
description: "Az alábbi díjak a táblázatban szereplő alapárakon felül fizetendők Budapesten, kerületi címek esetén:",
|
||
items: [
|
||
"2.000 Ft / út: II., III., X., XII., XIII., XIV. kerület",
|
||
"3.500 Ft / út: IV., XV., XVI., XVII. kerület"
|
||
],
|
||
closeLabel: "Bezár"
|
||
}
|
||
: {
|
||
label: "District surcharges – details",
|
||
title: "Budapest district surcharges",
|
||
description: "The following fees apply in Budapest for district addresses, in addition to the base fares shown in the tables:",
|
||
items: [
|
||
"2,000 HUF / trip: districts II, III, X, XII, XIII, XIV",
|
||
"3,500 HUF / trip: districts IV, XV, XVI, XVII"
|
||
],
|
||
closeLabel: "Close"
|
||
}
|
||
|
||
const routeNav = [
|
||
{
|
||
id: "gyor-becs",
|
||
label: language === "hu" ? "Győr – Bécs (Schwechat)" : "Győr – Vienna (Schwechat)",
|
||
},
|
||
{
|
||
id: "gyor-budapest",
|
||
label: language === "hu" ? "Győr – Budapest" : "Győr – Budapest",
|
||
},
|
||
{
|
||
id: "gyor-pozsony",
|
||
label: language === "hu" ? "Győr – Pozsony" : "Győr – Bratislava",
|
||
},
|
||
{
|
||
id: "budapest-becs",
|
||
label: language === "hu" ? "Budapest – Bécs (Schwechat)" : "Budapest – Vienna (Schwechat)",
|
||
},
|
||
]
|
||
|
||
return (
|
||
<main className="relative min-h-screen bg-slate-50">
|
||
<Navbar darkMode={true} />
|
||
|
||
{/* Background Decorations matching Home page */}
|
||
<div className="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">
|
||
{t.pricing.title} <br />
|
||
<span className="text-secondary/40 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>
|
||
<p className="text-slate-500 text-sm leading-relaxed">
|
||
{t.pricing.banner.description}
|
||
</p>
|
||
</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">
|
||
{language === "hu" ? "Útvonalak" : "Routes"}
|
||
</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={language === "hu" ? "GYŐR – BÉCS REPTÉR (SCHWECHAT) vagy BÉCS REPTÉR - GYŐR" : "GYŐR – VIENNA AIRPORT (SCHWECHAT) or VIENNA AIRPORT - GYŐR"}
|
||
rows={getFaresHub(becsRows)}
|
||
specials={specials}
|
||
vipInfo={vipInfo}
|
||
effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
|
||
expressInfo={expressInfoBecs}
|
||
/>
|
||
</div>
|
||
|
||
<div id="gyor-budapest">
|
||
<PricingTable
|
||
route={language === "hu" ? "GYŐR – BUDAPEST REPTÉR vagy BUDAPEST REPTÉR - GYŐR" : "GYŐR – BUDAPEST AIRPORT or BUDAPEST AIRPORT - GYŐR"}
|
||
rows={getFaresHub(budapestRows)}
|
||
specials={specials}
|
||
vipInfo={vipInfo}
|
||
effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
|
||
expressInfo={expressInfoBudapest}
|
||
districtSurcharge={districtSurcharge}
|
||
/>
|
||
</div>
|
||
|
||
|
||
|
||
<div id="gyor-pozsony">
|
||
<PricingTable
|
||
route={language === "hu" ? "GYŐR – POZSONY REPTÉR vagy POZSONY REPTÉR - GYŐR" : "GYŐR – BRATISLAVA AIRPORT or BRATISLAVA AIRPORT - GYŐR"}
|
||
rows={getFaresHub(pozsonyRows)}
|
||
specials={specialsPozsony}
|
||
vipInfo={vipInfo}
|
||
effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
|
||
expressInfo={expressInfoPozsony}
|
||
/>
|
||
</div>
|
||
|
||
<div id="budapest-becs">
|
||
<PricingTable
|
||
route={language === "hu" ? "BUDAPEST – BÉCS REPTÉR (SCHWECHAT) vagy BÉCS REPTÉR (SCHWECHAT) - BUDAPEST" : "BUDAPEST – VIENNA AIRPORT (SCHWECHAT) or VIENNA AIRPORT (SCHWECHAT) - BUDAPEST"}
|
||
rows={getFaresHub(budapestViennaRows)}
|
||
specials={specialsBudapestVienna}
|
||
vipInfo={vipInfoBudapestVienna}
|
||
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:+36305543838" 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>
|
||
+36 30 5543838
|
||
</a>
|
||
<a href="mailto:info@skyflytravel.hu" 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>
|
||
info@skyflytravel.hu
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<Footer />
|
||
</main>
|
||
)
|
||
}
|