208 lines
12 KiB
TypeScript
208 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import Navbar from "@/components/navbar"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card } from "@/components/ui/card"
|
|
import { ArrowLeft, CheckCircle2, Facebook, Phone, Info } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { useLanguage } from "@/lib/language-context"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export default function ServicesPage() {
|
|
const { t } = useLanguage()
|
|
|
|
const packageEntries = [
|
|
{
|
|
unique: t.servicesPage.packages.classic.unique,
|
|
name: t.servicesPage.packages.classic.title,
|
|
desc: t.servicesPage.packages.classic.desc,
|
|
toAirport: t.servicesPage.packages.classic.toAirport,
|
|
toCity: t.servicesPage.packages.classic.toCity
|
|
},
|
|
{
|
|
unique: t.servicesPage.packages.express.unique,
|
|
name: t.servicesPage.packages.express.title,
|
|
desc: t.servicesPage.packages.express.desc,
|
|
toAirport: t.servicesPage.packages.express.toAirport,
|
|
toCity: t.servicesPage.packages.express.toCity
|
|
},
|
|
{
|
|
unique: t.servicesPage.packages.private.unique,
|
|
name: t.servicesPage.packages.private.title,
|
|
desc: t.servicesPage.packages.private.desc,
|
|
toAirport: t.servicesPage.packages.private.toAirport,
|
|
toCity: t.servicesPage.packages.private.toCity
|
|
},
|
|
{
|
|
unique: t.servicesPage.packages.family.unique,
|
|
name: t.servicesPage.packages.family.title,
|
|
desc: t.servicesPage.packages.family.desc,
|
|
toAirport: t.servicesPage.packages.family.toAirport,
|
|
toCity: t.servicesPage.packages.family.toCity
|
|
},
|
|
{
|
|
unique: t.servicesPage.packages.bigFamily.unique,
|
|
name: t.servicesPage.packages.bigFamily.title,
|
|
desc: t.servicesPage.packages.bigFamily.desc,
|
|
toAirport: t.servicesPage.packages.bigFamily.toAirport,
|
|
toCity: t.servicesPage.packages.bigFamily.toCity
|
|
}
|
|
]
|
|
|
|
return (
|
|
<main className="relative min-h-screen bg-[#2D343F]">
|
|
<Navbar darkMode={false} />
|
|
|
|
{/* Header Section */}
|
|
<section className="relative pt-32 pb-16 bg-[#2D343F]">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<Link href="/" className="inline-flex items-center text-white/70 hover:text-white mb-8 transition-colors group">
|
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
|
<span className="text-xs font-bold uppercase tracking-widest">{t.servicesPage.back}</span>
|
|
</Link>
|
|
<h1 className="text-4xl md:text-5xl font-black text-white uppercase tracking-tight">
|
|
{t.servicesPage.title} {t.servicesPage.titleAccent}
|
|
</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="pb-24">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
|
|
{/* Left Column - Packages (2/3 width) */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
|
|
{/* Common Shared Features */}
|
|
<div className="overflow-hidden rounded-lg shadow-lg">
|
|
<div className="bg-[#EF9F3F] px-4 py-2">
|
|
<h2 className="text-white text-sm font-bold uppercase">{t.servicesPage.commonFeatures.title}</h2>
|
|
</div>
|
|
<div className="bg-[#3D4552] p-4 space-y-3">
|
|
<div className="grid grid-cols-3 gap-4 border-b border-slate-600/50 pb-2">
|
|
<div className="text-[#EF9F3F] text-xs font-bold col-span-1">{t.servicesPage.commonFeatures.toAirport}</div>
|
|
<div className="text-white/90 text-xs col-span-2">{t.servicesPage.commonFeatures.toAirportDesc}</div>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div className="text-[#EF9F3F] text-xs font-bold col-span-1">{t.servicesPage.commonFeatures.toCity}</div>
|
|
<div className="text-white/90 text-xs col-span-2">{t.servicesPage.commonFeatures.toCityDesc}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Individual Packages */}
|
|
{packageEntries.map((pkg, idx) => (
|
|
<div key={idx} className="overflow-hidden rounded-lg shadow-lg">
|
|
<div className="bg-[#EF9F3F] px-4 py-2">
|
|
<h2 className="text-white text-sm font-bold uppercase">{pkg.unique}</h2>
|
|
</div>
|
|
<div className="bg-[#3D4552] p-4 space-y-3">
|
|
<div className="grid grid-cols-3 gap-4 border-b border-slate-600/50 pb-2">
|
|
<div className="text-white text-xs font-bold col-span-1">"{pkg.name}"</div>
|
|
<div className="text-white/90 text-xs col-span-2">{pkg.desc}</div>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-4 border-b border-slate-600/50 pb-2">
|
|
<div className="text-white/70 text-xs col-span-1">{t.servicesPage.commonFeatures.toAirport}</div>
|
|
<div className="text-white/90 text-xs col-span-2">{pkg.toAirport}</div>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div className="text-white/70 text-xs col-span-1">{t.servicesPage.commonFeatures.toCity}</div>
|
|
<div className="text-white/90 text-xs col-span-2">{pkg.toCity}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right Column - Info Panels (1/3 width) */}
|
|
<div className="space-y-6">
|
|
|
|
{/* Why Us */}
|
|
<div className="overflow-hidden rounded-lg shadow-lg">
|
|
<div className="bg-[#EF9F3F] px-4 py-2">
|
|
<h2 className="text-white text-sm font-bold uppercase">{t.servicesPage.whyUs.title}</h2>
|
|
</div>
|
|
<div className="bg-[#3D4552] p-6">
|
|
<ul className="space-y-3">
|
|
{t.servicesPage.whyUs.items.map((item: string, i: number) => (
|
|
<li key={i} className="flex items-start gap-3">
|
|
<div className="mt-1.5 w-1.5 h-1.5 bg-white rounded-full shrink-0" />
|
|
<span className="text-white/90 text-xs leading-relaxed">{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Free of Charge */}
|
|
<div className="overflow-hidden rounded-lg shadow-lg">
|
|
<div className="bg-[#EF9F3F] px-4 py-2">
|
|
<h2 className="text-white text-sm font-bold uppercase">{t.servicesPage.freeOfCharge.title}</h2>
|
|
</div>
|
|
<div className="bg-[#3D4552] p-6">
|
|
<ul className="space-y-3">
|
|
{t.servicesPage.freeOfCharge.items.map((item: string, i: number) => (
|
|
<li key={i} className="flex items-start gap-3">
|
|
<div className="mt-1.5 w-1.5 h-1.5 bg-white rounded-full shrink-0" />
|
|
<span className="text-white/90 text-xs leading-relaxed">{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Discounts */}
|
|
<div className="overflow-hidden rounded-lg shadow-lg">
|
|
<div className="bg-[#EF9F3F] px-4 py-2">
|
|
<h2 className="text-white text-sm font-bold uppercase">{t.servicesPage.discounts.title}</h2>
|
|
</div>
|
|
<div className="bg-[#3D4552] p-6 space-y-6">
|
|
<div className="space-y-4">
|
|
<p className="text-white/90 text-xs italic font-bold">
|
|
{t.servicesPage.discounts.fb} <Link href="https://www.facebook.com/skyflytravel.hu" target="_blank" className="text-[#EF9F3F] hover:underline ml-1">{t.servicesPage.discounts.fbLink}</Link>
|
|
</p>
|
|
<div className="flex justify-center">
|
|
<Link href="https://www.facebook.com/skyflytravel.hu" target="_blank" className="bg-[#4D69A1] p-3 rounded-lg hover:scale-105 transition-transform">
|
|
<Facebook className="text-white w-8 h-8 fill-white" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3 pt-4 border-t border-slate-600/50">
|
|
<div className="mt-1.5 w-1.5 h-1.5 bg-white rounded-full shrink-0" />
|
|
<p className="text-white/90 text-xs leading-relaxed">
|
|
<span className="font-bold">{t.servicesPage.discounts.loyalty.split(':')[0]}:</span>
|
|
{t.servicesPage.discounts.loyalty.split(':')[1]}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hotline quick link */}
|
|
<Card className="bg-primary/10 border-primary/20 p-6 rounded-2xl flex items-center space-x-4">
|
|
<div className="bg-primary p-3 rounded-xl shadow-lg">
|
|
<Phone className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-[10px] font-bold text-white/50 uppercase tracking-widest">Hotline 0-24</p>
|
|
<p className="text-lg font-black text-white">+36 30 554 3838</p>
|
|
</div>
|
|
</Card>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Final CTA */}
|
|
<div className="mt-16 text-center">
|
|
<Button asChild size="lg" className="rounded-full px-12 h-16 bg-[#EF9F3F] hover:bg-[#D98F2F] text-white font-bold uppercase tracking-widest shadow-xl transition-all">
|
|
<a href="https://app.skyflytravel.hu/public/offers/new" target="_blank" rel="noopener noreferrer">
|
|
{t.nav.cta}
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|