49 lines
2.3 KiB
TypeScript
49 lines
2.3 KiB
TypeScript
import { setRequestLocale } from 'next-intl/server'
|
|
import { MOCK_TOURS } from '@/lib/mock'
|
|
import { notFound } from 'next/navigation'
|
|
import Image from 'next/image'
|
|
import { Clock, Star } from 'lucide-react'
|
|
|
|
export default async function TourDetailPage({ params }: { params: Promise<{ locale: string, slug: string }> }) {
|
|
const { locale, slug } = await params
|
|
setRequestLocale(locale)
|
|
|
|
const tour = MOCK_TOURS.find(t => t.slug === slug)
|
|
if (!tour) notFound()
|
|
|
|
return (
|
|
<div className="bg-zinc-950 min-h-screen py-12">
|
|
<div className="container mx-auto px-4 max-w-6xl">
|
|
<div className="bg-zinc-900 rounded-2xl overflow-hidden shadow-2xl border border-zinc-800 flex flex-col md:flex-row">
|
|
<div className="w-full md:w-1/2 relative h-64 md:h-auto">
|
|
<Image src={tour.imageUrl || ''} alt={tour.title} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover" />
|
|
</div>
|
|
<div className="w-full md:w-1/2 p-8 md:p-12 flex flex-col">
|
|
<h1 className="text-3xl md:text-4xl font-black mb-4 text-white">
|
|
{tour.title}
|
|
</h1>
|
|
<div className="flex items-center space-x-6 text-sm text-zinc-400 mb-8">
|
|
<span className="flex items-center"><Clock className="w-4 h-4 mr-1 text-orange-500" /> {tour.duration}</span>
|
|
<span className="flex items-center"><Star className="w-4 h-4 mr-1 text-orange-500 fill-current" /> 5.0 (Review)</span>
|
|
</div>
|
|
|
|
<p className="text-zinc-300 mb-8 leading-relaxed text-lg">
|
|
{tour.description}
|
|
</p>
|
|
|
|
<div className="mt-auto bg-zinc-950 p-6 rounded-xl flex items-center justify-between border border-zinc-800">
|
|
<div>
|
|
<span className="text-sm text-zinc-500 uppercase tracking-wider block mb-1">Price per person</span>
|
|
<span className="font-black text-4xl text-orange-500">${tour.price}</span>
|
|
</div>
|
|
<button className="px-8 py-4 bg-orange-500 text-white font-bold rounded-lg hover:bg-orange-600 transition-all duration-300 shadow-[0_0_15px_rgba(249,115,22,0.4)] hover:shadow-[0_0_25px_rgba(249,115,22,0.6)] transform hover:-translate-y-0.5">
|
|
Book Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|