263 lines
14 KiB
TypeScript
263 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import Navbar from "@/components/navbar"
|
|
import Footer from "@/components/footer"
|
|
import PageReveal from "@/components/page-reveal"
|
|
import { Card } from "@/components/ui/card"
|
|
import { ArrowLeft, Users, Briefcase, Wind, Wifi, ShieldCheck, ChevronRight } from "lucide-react"
|
|
import Link from "next/link"
|
|
import Image from "next/image"
|
|
import { useLanguage } from "@/lib/language-context"
|
|
import { motion } from "framer-motion"
|
|
import { GalleryDialog } from "@/components/gallery-dialog"
|
|
|
|
export default function FleetPage() {
|
|
const { t } = useLanguage()
|
|
const [galleryData, setGalleryData] = useState<Record<string, string[]>>({})
|
|
const [isGalleryOpen, setIsGalleryOpen] = useState(false)
|
|
const [selectedGallery, setSelectedGallery] = useState<string[]>([])
|
|
const [selectedVehicleName, setSelectedVehicleName] = useState("")
|
|
const [selectedCategoryName, setSelectedCategoryName] = useState("")
|
|
|
|
useEffect(() => {
|
|
fetch('/gallery.json')
|
|
.then(res => res.json())
|
|
.then(data => setGalleryData(data))
|
|
.catch(err => console.error('Error fetching gallery:', err))
|
|
}, [])
|
|
|
|
const openGallery = (categoryId: string, vehicleName: string, categoryName: string) => {
|
|
const images = galleryData[categoryId] || []
|
|
if (images.length > 0) {
|
|
setSelectedGallery(images)
|
|
setSelectedVehicleName(vehicleName)
|
|
setSelectedCategoryName(categoryName)
|
|
setIsGalleryOpen(true)
|
|
}
|
|
}
|
|
|
|
const vehicles = [
|
|
{
|
|
id: "vclass",
|
|
categoryId: "vip",
|
|
data: t.fleetPage.vehicles.vclass,
|
|
image: "/images/fleet/Flotta_VIP_kezdő.png",
|
|
large: true,
|
|
icon: Users
|
|
},
|
|
{
|
|
id: "superb",
|
|
categoryId: "personal",
|
|
data: t.fleetPage.vehicles.superb,
|
|
image: "/images/fleet/3_skoda_repter.png",
|
|
large: true,
|
|
icon: Wind
|
|
},
|
|
{
|
|
id: "transit",
|
|
categoryId: "minibus",
|
|
data: t.fleetPage.vehicles.transit,
|
|
image: "/images/fleet/Tourneo_hatter_hegy.png",
|
|
large: true,
|
|
icon: Users
|
|
}
|
|
]
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.2
|
|
}
|
|
}
|
|
}
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 30 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.8
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<PageReveal className="relative min-h-screen bg-[#fafaf9] text-slate-800 overflow-hidden">
|
|
<Navbar darkMode={false} />
|
|
|
|
{/* Background elements - Softer and more premium */}
|
|
<div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none -z-10">
|
|
<div className="absolute top-[-5%] left-[-5%] w-[50%] h-[50%] bg-primary/5 rounded-full blur-[140px] opacity-60" />
|
|
<div className="absolute top-[20%] right-[-10%] w-[40%] h-[40%] bg-blue-500/5 rounded-full blur-[120px] opacity-40" />
|
|
</div>
|
|
|
|
{/* Header Section */}
|
|
<section className="relative pt-32 pb-20 px-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<Link href="/" className="inline-flex items-center text-slate-400 hover:text-primary mb-10 transition-colors group">
|
|
<ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" />
|
|
<span className="text-[10px] font-black uppercase tracking-[0.3em]">{t.fleetPage.back}</span>
|
|
</Link>
|
|
</motion.div>
|
|
|
|
<div className="max-w-4xl">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="space-y-8"
|
|
>
|
|
<h1 className="text-7xl md:text-9xl font-black uppercase tracking-tighter leading-[0.85] text-slate-900">
|
|
{t.fleetPage.title} <br />
|
|
<span className="text-primary italic">{t.fleetPage.titleAccent}</span>
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-slate-500 max-w-2xl leading-relaxed font-medium">
|
|
{t.fleetPage.description}
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Fleet Grid */}
|
|
<section className="pb-32 px-6">
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true }}
|
|
className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-10"
|
|
>
|
|
{vehicles.map((vehicle, idx) => (
|
|
<motion.div
|
|
key={vehicle.id}
|
|
variants={itemVariants}
|
|
className={vehicle.large ? "md:col-span-2" : "md:col-span-1"}
|
|
>
|
|
<Card className="group relative overflow-hidden rounded-[2.5rem] md:rounded-[3.5rem] border-none bg-white shadow-[0_32px_64px_-16px_rgba(0,0,0,0.08)] transition-all duration-700 hover:shadow-[0_48px_80px_-20px_rgba(0,0,0,0.12)] flex flex-col md:block md:h-[700px]">
|
|
{/* Image container */}
|
|
<div className="relative h-[280px] md:absolute md:inset-0 md:h-full overflow-hidden">
|
|
<Image
|
|
src={vehicle.image}
|
|
alt={vehicle.data.name}
|
|
fill
|
|
className="object-cover transition-transform duration-[1.5s] ease-out md:group-hover:scale-110"
|
|
/>
|
|
{/* Desktop-only gradient */}
|
|
<div className="hidden md:block absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-80" />
|
|
</div>
|
|
|
|
{/* Content - Overlay on desktop, below on mobile */}
|
|
<div className="relative md:absolute md:inset-0 p-8 md:p-16 flex flex-col justify-end bg-white md:bg-transparent">
|
|
<div className="space-y-6 transform transition-all duration-700 md:group-hover:-translate-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<span className="px-5 py-2 rounded-full bg-primary text-white text-[9px] font-black uppercase tracking-[0.2em] shadow-xl">
|
|
{vehicle.data.category}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
|
<span className="text-[9px] font-black text-slate-400 md:text-white/60 uppercase tracking-[0.3em]">{t.fleetPage.availabilityLabel}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<h3 className="text-3xl md:text-7xl font-black uppercase tracking-tighter text-slate-900 md:text-white leading-tight">
|
|
{vehicle.data.name}
|
|
</h3>
|
|
<p className="text-slate-500 md:text-white/70 max-w-2xl text-base md:text-lg font-medium leading-relaxed">
|
|
{vehicle.data.description}
|
|
</p>
|
|
</div>
|
|
|
|
{vehicle.data.features && vehicle.data.features.length > 0 && (
|
|
<div className="flex flex-wrap gap-x-8 gap-y-4 pt-4">
|
|
{vehicle.data.features.map((feature: string, fIdx: number) => (
|
|
<div key={fIdx} className="flex items-center gap-3 text-slate-500 md:text-white/80">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-primary" />
|
|
<span className="text-[10px] md:text-xs font-black uppercase tracking-widest">{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="pt-8 border-t border-slate-100 md:border-white/10 flex items-center justify-between">
|
|
<div className="flex flex-wrap gap-6 items-center">
|
|
<button
|
|
onClick={() => openGallery(vehicle.categoryId, vehicle.data.name, t.fleetPage.categories[vehicle.categoryId as keyof typeof t.fleetPage.categories])}
|
|
className="inline-flex items-center gap-4 text-primary font-black uppercase tracking-[0.2em] text-[10px] hover:gap-6 transition-all cursor-pointer group/btn"
|
|
>
|
|
{t.common.moreImages}
|
|
<ChevronRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="hidden md:flex gap-4">
|
|
<div className="w-12 h-12 rounded-2xl bg-white/10 backdrop-blur-md flex items-center justify-center text-white border border-white/10 group-hover:bg-primary/20 group-hover:border-primary/30 transition-all">
|
|
<vehicle.icon className="w-6 h-6" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* Quality Statement */}
|
|
<section className="py-32 px-6 bg-white relative">
|
|
<div className="max-w-5xl mx-auto text-center space-y-16">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
className="bg-primary/10 w-24 h-24 rounded-[2rem] flex items-center justify-center mx-auto mb-8 rotate-6 hover:rotate-0 transition-transform duration-700"
|
|
>
|
|
<ShieldCheck className="w-12 h-12 text-primary" />
|
|
</motion.div>
|
|
|
|
<h2 className="text-4xl md:text-6xl font-black uppercase tracking-tighter leading-tight text-slate-900">
|
|
{t.servicesPage.whyUs.items[1]}
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-16 md:gap-8">
|
|
<div className="space-y-4">
|
|
<p className="text-6xl font-black text-primary transition-transform hover:scale-110 duration-300">{t.fleetPage.stats.ageValue}</p>
|
|
<p className="text-[11px] font-black uppercase tracking-[0.2em] text-slate-400">{t.fleetPage.stats.ageLabel}</p>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<p className="text-6xl font-black text-primary transition-transform hover:scale-110 duration-300">{t.fleetPage.stats.cleanlinessValue}</p>
|
|
<p className="text-[11px] font-black uppercase tracking-[0.2em] text-slate-400">{t.fleetPage.stats.cleanlinessLabel}</p>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<p className="text-6xl font-black text-primary transition-transform hover:scale-110 duration-300">{t.fleetPage.stats.maintenanceValue}</p>
|
|
<p className="text-[11px] font-black uppercase tracking-[0.2em] text-slate-400">{t.fleetPage.stats.maintenanceLabel}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<GalleryDialog
|
|
isOpen={isGalleryOpen}
|
|
onClose={() => setIsGalleryOpen(false)}
|
|
images={selectedGallery}
|
|
vehicleName={selectedVehicleName}
|
|
categoryName={selectedCategoryName}
|
|
/>
|
|
|
|
<Footer />
|
|
</PageReveal>
|
|
)
|
|
} |