258 lines
15 KiB
TypeScript
258 lines
15 KiB
TypeScript
"use client"
|
|
|
|
import Navbar from "@/components/navbar"
|
|
import Footer from "@/components/footer"
|
|
import PageReveal from "@/components/page-reveal"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card } from "@/components/ui/card"
|
|
import {
|
|
ArrowLeft,
|
|
CheckCircle2,
|
|
Facebook,
|
|
Phone,
|
|
Sparkles,
|
|
Shield,
|
|
Clock,
|
|
MapPin
|
|
} from "lucide-react"
|
|
import Link from "next/link"
|
|
import { useLanguage } from "@/lib/language-context"
|
|
|
|
export default function ServicesPage() {
|
|
const { t } = useLanguage()
|
|
|
|
const packageEntries = [
|
|
|
|
{
|
|
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 (
|
|
<PageReveal className="relative min-h-screen bg-slate-50">
|
|
<Navbar darkMode={false} />
|
|
|
|
{/* Atmosphere */}
|
|
<div className="absolute md:fixed inset-0 pointer-events-none -z-10 overflow-hidden">
|
|
<div className="absolute -top-24 -right-24 w-[420px] h-[420px] bg-purple-200 rounded-full blur-3xl opacity-30 animate-blob" />
|
|
<div className="absolute top-1/2 -left-20 w-[360px] h-[360px] bg-blue-200 rounded-full blur-3xl opacity-30 animate-blob animation-delay-2000" />
|
|
<div className="absolute bottom-0 right-1/3 w-[280px] h-[280px] bg-pink-100 rounded-full blur-3xl opacity-30 animate-blob animation-delay-4000" />
|
|
</div>
|
|
|
|
{/* Hero */}
|
|
<section className="relative pt-32 pb-20 overflow-hidden">
|
|
<div className="absolute inset-0 -z-10 bg-[#fafaf9]" />
|
|
<div className="absolute bottom-0 left-0 w-full h-[90px] bg-white transform -skew-y-2 origin-bottom-left -z-10" />
|
|
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<Link href="/" className="inline-flex items-center text-slate-400 hover:text-primary mb-10 transition-colors group">
|
|
<div className="bg-slate-100 p-2 rounded-full mr-3 group-hover:bg-primary/10 transition-colors">
|
|
<ArrowLeft className="w-4 h-4" />
|
|
</div>
|
|
<span className="text-[10px] font-black uppercase tracking-[0.3em]">{t.servicesPage.back}</span>
|
|
</Link>
|
|
|
|
<div className="space-y-8 max-w-4xl">
|
|
<h1 className="text-4xl md:text-9xl font-black uppercase tracking-tighter leading-[0.85] text-slate-900">
|
|
{t.servicesPage.title}
|
|
<br />
|
|
<span className="text-primary italic">{t.servicesPage.titleAccent}</span>
|
|
</h1>
|
|
<p className="text-lg md:text-2xl text-slate-500 leading-relaxed font-medium">
|
|
{t.servicesPage.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="py-16">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
|
|
|
|
{/* Left column */}
|
|
<div className="lg:col-span-2 space-y-8">
|
|
{/* Shared Features */}
|
|
<Card className="rounded-[3rem] border-none shadow-2xl bg-white overflow-hidden">
|
|
<div className="bg-gradient-to-r from-primary to-secondary px-8 py-6">
|
|
<div className="flex items-center gap-3 text-white">
|
|
<Sparkles className="w-5 h-5" />
|
|
<h2 className="text-sm font-black uppercase tracking-[0.3em]">{t.servicesPage.commonFeatures.title}</h2>
|
|
</div>
|
|
</div>
|
|
<div className="p-8 space-y-6">
|
|
<div className="grid md:grid-cols-3 gap-6 border-b border-slate-100 pb-6">
|
|
<div className="text-[10px] font-black uppercase tracking-[0.3em] text-primary">
|
|
{t.servicesPage.commonFeatures.toAirport}
|
|
</div>
|
|
<div className="md:col-span-2 text-slate-500 text-sm leading-relaxed font-medium">
|
|
{t.servicesPage.commonFeatures.toAirportDesc}
|
|
</div>
|
|
</div>
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
<div className="text-[10px] font-black uppercase tracking-[0.3em] text-primary">
|
|
{t.servicesPage.commonFeatures.toCity}
|
|
</div>
|
|
<div className="md:col-span-2 text-slate-500 text-sm leading-relaxed font-medium">
|
|
{t.servicesPage.commonFeatures.toCityDesc}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Packages */}
|
|
<div className="grid grid-cols-1 gap-6">
|
|
{packageEntries.map((pkg, idx) => (
|
|
<Card key={idx} className="rounded-[3rem] border-none shadow-xl bg-white overflow-hidden group">
|
|
<div className="flex flex-col md:flex-row">
|
|
<div className="md:w-1/3 bg-slate-900 text-white p-8">
|
|
<p className="text-[10px] font-black uppercase tracking-[0.35em] text-white/60">
|
|
{pkg.unique}
|
|
</p>
|
|
<h3 className="text-2xl font-black uppercase tracking-tight mt-3">
|
|
{pkg.name}
|
|
</h3>
|
|
</div>
|
|
<div className="md:w-2/3 p-8 space-y-6">
|
|
<p className="text-slate-500 text-sm leading-relaxed font-medium">
|
|
{pkg.desc}
|
|
</p>
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div className="rounded-[2rem] bg-slate-50 p-5 border border-slate-100">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<MapPin className="w-4 h-4 text-primary" />
|
|
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-400">
|
|
{t.servicesPage.commonFeatures.toAirport}
|
|
</span>
|
|
</div>
|
|
<p className="text-slate-600 text-sm leading-relaxed font-medium">{pkg.toAirport}</p>
|
|
</div>
|
|
<div className="rounded-[2rem] bg-slate-50 p-5 border border-slate-100">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<Clock className="w-4 h-4 text-secondary" />
|
|
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-400">
|
|
{t.servicesPage.commonFeatures.toCity}
|
|
</span>
|
|
</div>
|
|
<p className="text-slate-600 text-sm leading-relaxed font-medium">{pkg.toCity}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right column */}
|
|
<div className="space-y-8">
|
|
<Card className="rounded-[3rem] border-none shadow-2xl bg-white overflow-hidden">
|
|
<div className="bg-slate-900 px-8 py-6">
|
|
<h2 className="text-white text-sm font-black uppercase tracking-[0.3em]">
|
|
{t.servicesPage.whyUs.title}
|
|
</h2>
|
|
</div>
|
|
<div className="p-8 space-y-4">
|
|
{t.servicesPage.whyUs.items.map((item: string, i: number) => (
|
|
<div key={i} className="flex items-start gap-3">
|
|
<CheckCircle2 className="w-4 h-4 text-primary mt-1" />
|
|
<span className="text-slate-600 text-sm leading-relaxed font-medium">{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="rounded-[3rem] border-none shadow-2xl bg-white overflow-hidden">
|
|
<div className="bg-gradient-to-r from-secondary to-primary px-8 py-6">
|
|
<h2 className="text-white text-sm font-black uppercase tracking-[0.3em]">
|
|
{t.servicesPage.freeOfCharge.title}
|
|
</h2>
|
|
</div>
|
|
<div className="p-8 space-y-4">
|
|
{t.servicesPage.freeOfCharge.items.map((item: string, i: number) => (
|
|
<div key={i} className="flex items-start gap-3">
|
|
<Shield className="w-4 h-4 text-secondary mt-1" />
|
|
<span className="text-slate-600 text-sm leading-relaxed font-medium">{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="rounded-[3rem] border-none shadow-2xl bg-white overflow-hidden">
|
|
<div className="bg-slate-900 px-8 py-6">
|
|
<h2 className="text-white text-sm font-black uppercase tracking-[0.3em]">
|
|
{t.servicesPage.discounts.title}
|
|
</h2>
|
|
</div>
|
|
<div className="p-8 space-y-6">
|
|
<p className="text-slate-600 text-sm leading-relaxed font-medium">
|
|
{t.servicesPage.discounts.fb}{" "}
|
|
<Link href="/akciok/facebook-google" className="text-primary font-black hover:underline">
|
|
{t.servicesPage.discounts.fbLink}
|
|
</Link>
|
|
</p>
|
|
<div className="flex items-center justify-between rounded-[2rem] bg-slate-50 border border-slate-100 p-4">
|
|
<div className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-400">
|
|
{t.servicesPage.discounts.fbLink}
|
|
</div>
|
|
<Link href="/akciok/facebook-google" className="bg-[#4D69A1] p-3 rounded-2xl hover:scale-105 transition-transform">
|
|
<Facebook className="text-white w-6 h-6 fill-white" />
|
|
</Link>
|
|
</div>
|
|
<div className="rounded-[2rem] bg-slate-900 text-white p-5">
|
|
<p className="text-xs leading-relaxed">
|
|
<span className="font-black uppercase tracking-wide text-primary">
|
|
{t.servicesPage.discounts.loyalty.split(":")[0]}:
|
|
</span>{" "}
|
|
{t.servicesPage.discounts.loyalty.split(":")[1]}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="rounded-[3rem] border-none shadow-2xl bg-slate-900 text-white p-6 flex items-center gap-4">
|
|
<div className="bg-primary p-3 rounded-2xl shadow-lg">
|
|
<Phone className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-[10px] font-black text-white/50 uppercase tracking-[0.3em]">
|
|
{t.contactPage.info.hotlineShort}
|
|
</p>
|
|
<p className="text-lg font-black">{t.common.phone}</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</PageReveal>
|
|
)
|
|
} |