211 lines
12 KiB
TypeScript
211 lines
12 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,
|
|
Calendar,
|
|
Users,
|
|
Bus,
|
|
Briefcase,
|
|
Heart,
|
|
Phone,
|
|
Sparkles,
|
|
Shield,
|
|
Clock,
|
|
MapPin
|
|
} from "lucide-react"
|
|
import Link from "next/link"
|
|
import Image from "next/image"
|
|
import { useLanguage } from "@/lib/language-context"
|
|
|
|
export default function OtherTransportPage() {
|
|
const { t } = useLanguage()
|
|
|
|
const serviceIcons = [
|
|
<Bus key="excursions" className="w-8 h-8 text-primary" />,
|
|
<Heart key="weddings" className="w-8 h-8 text-secondary" />,
|
|
<Briefcase key="corporate" className="w-8 h-8 text-primary" />,
|
|
<Users key="work" className="w-8 h-8 text-secondary" />
|
|
]
|
|
|
|
const serviceImages = [
|
|
"/images/service-cards/ford-transit.jpg",
|
|
"/images/service-cards/merci-eskuvo.png",
|
|
"/images/service-cards/ford-tourneo.jpg",
|
|
"/images/service-cards/opel-vivaro.jpg"
|
|
]
|
|
|
|
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-primary/10 rounded-full blur-3xl opacity-30 animate-blob" />
|
|
<div className="absolute top-1/2 -left-20 w-[360px] h-[360px] bg-blue-100 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-50 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.otherTransportPage.back}</span>
|
|
</Link>
|
|
|
|
<div className="space-y-8 max-w-4xl">
|
|
<h1 className="text-6xl md:text-9xl font-black uppercase tracking-tighter leading-[0.85] text-slate-900">
|
|
{t.otherTransportPage.title}
|
|
<br />
|
|
<span className="text-primary italic">{t.otherTransportPage.titleAccent}</span>
|
|
</h1>
|
|
<p className="text-lg md:text-2xl text-slate-500 leading-relaxed font-medium">
|
|
{t.otherTransportPage.heroDescription}
|
|
</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-12">
|
|
|
|
{/* Main Introduction Card */}
|
|
<Card className="rounded-[3rem] border-none shadow-2xl bg-white overflow-hidden p-8 md:p-12">
|
|
<div className="space-y-6">
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary">
|
|
<Sparkles className="w-4 h-4" />
|
|
<span className="text-[10px] font-black uppercase tracking-[0.2em]">{t.otherTransportPage.badge}</span>
|
|
</div>
|
|
<h2 className="text-3xl md:text-4xl font-black uppercase tracking-tighter text-slate-900 leading-tight">
|
|
{t.otherTransportPage.titlePart1} <span className="text-primary">{t.otherTransportPage.titleAccentPart}</span>
|
|
</h2>
|
|
<p className="text-slate-600 text-lg leading-relaxed font-medium">
|
|
{t.otherTransportPage.mainContent}
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Service Grid - Ensuring relative position for fill images */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{t.otherTransportPage.services.map((service: any, idx: number) => (
|
|
<Card key={idx} className="rounded-[3rem] border-none shadow-xl bg-white overflow-hidden group hover:-translate-y-2 transition-transform duration-500">
|
|
<div className="relative w-full overflow-hidden bg-slate-100" style={{ height: '240px' }}>
|
|
<Image
|
|
src={serviceImages[idx]}
|
|
alt={service.title}
|
|
fill
|
|
className="object-cover group-hover:scale-110 transition-transform duration-700"
|
|
sizes="(min-width: 768px) 400px, 100vw"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
|
|
<div className="absolute bottom-6 left-6">
|
|
<div className="bg-white/20 backdrop-blur-md p-3 rounded-2xl border border-white/20">
|
|
{serviceIcons[idx]}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="p-8 space-y-4">
|
|
<h3 className="text-2xl font-black uppercase tracking-tight text-slate-900">
|
|
{service.title}
|
|
</h3>
|
|
<p className="text-slate-500 text-sm leading-relaxed font-medium">
|
|
{service.desc}
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right column */}
|
|
<div className="space-y-8">
|
|
{/* Capacity Card */}
|
|
<Card className="rounded-[3rem] border-none shadow-2xl bg-slate-900 text-white overflow-hidden">
|
|
<div className="bg-primary px-8 py-6">
|
|
<div className="flex items-center gap-3">
|
|
<Users className="w-5 h-5 text-white" />
|
|
<h2 className="text-white text-sm font-black uppercase tracking-[0.3em]">
|
|
{t.otherTransportPage.capacityTitle}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div className="p-8 space-y-6">
|
|
<p className="text-slate-300 text-sm leading-relaxed font-medium">
|
|
{t.otherTransportPage.capacityDesc}
|
|
</p>
|
|
<div className="space-y-4">
|
|
{t.otherTransportPage.capacityList.map((item: string, idx: number) => (
|
|
<div key={idx} className="flex items-start gap-3">
|
|
<CheckCircle2 className="w-4 h-4 text-primary mt-1" />
|
|
<span className="text-slate-200 text-sm font-medium">{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Contact Card */}
|
|
<Card className="rounded-[3rem] border-none shadow-2xl bg-white overflow-hidden p-8 space-y-8">
|
|
<div className="space-y-2">
|
|
<p className="text-[10px] font-black uppercase tracking-[0.3em] text-primary">{t.otherTransportPage.contactSubtitle}</p>
|
|
<h3 className="text-2xl font-black uppercase tracking-tight text-slate-900">
|
|
{t.otherTransportPage.cta}
|
|
</h3>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<Button asChild className="w-full h-16 rounded-full bg-primary hover:bg-primary/90 text-white font-black uppercase tracking-widest text-xs shadow-lg shadow-primary/20">
|
|
<Link href="/kapcsolat">
|
|
{t.otherTransportPage.cta}
|
|
</Link>
|
|
</Button>
|
|
<div className="flex items-center justify-center gap-4 py-4">
|
|
<div className="h-px bg-slate-100 flex-grow" />
|
|
<span className="text-[10px] font-black text-slate-300 uppercase tracking-widest">{t.otherTransportPage.phoneAlt}</span>
|
|
<div className="h-px bg-slate-100 flex-grow" />
|
|
</div>
|
|
<a href={`tel:${t.common.phoneHref}`} className="flex items-center gap-4 p-5 rounded-[2rem] bg-slate-50 hover:bg-slate-100 transition-colors border border-slate-100 group">
|
|
<div className="bg-slate-900 p-3 rounded-2xl group-hover:scale-110 transition-transform">
|
|
<Phone className="w-5 h-5 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Hotline 24/7</p>
|
|
<p className="text-lg font-black text-slate-900">{t.common.phone}</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Quality Badge */}
|
|
<div className="rounded-[3rem] bg-gradient-to-br from-primary to-secondary p-[1px]">
|
|
<div className="bg-white rounded-[2.9rem] p-8 space-y-4">
|
|
<Shield className="w-10 h-10 text-primary" />
|
|
<h4 className="text-xl font-black uppercase tracking-tight text-slate-900">{t.otherTransportPage.qualityTitle}</h4>
|
|
<p className="text-slate-500 text-sm font-medium leading-relaxed">
|
|
{t.otherTransportPage.qualityDesc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</PageReveal>
|
|
)
|
|
}
|