54 lines
2.6 KiB
TypeScript
54 lines
2.6 KiB
TypeScript
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
|
import { MOCK_TOURS, MOCK_CATEGORIES } from '@/lib/mock'
|
|
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
|
|
export default async function ToursPage({ params }: { params: Promise<{ locale: string }> }) {
|
|
const { locale } = await params
|
|
setRequestLocale(locale)
|
|
|
|
const s = await getTranslations('sections')
|
|
const t = await getTranslations('tour')
|
|
|
|
return (
|
|
<div className="bg-zinc-950 min-h-screen py-12">
|
|
<div className="container mx-auto px-4">
|
|
<h1 className="text-4xl font-black mb-8 text-white uppercase tracking-tighter">
|
|
{s('categories')}
|
|
</h1>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
{MOCK_TOURS.map(tour => {
|
|
const cat = MOCK_CATEGORIES.find(c => c.id === tour.categoryId)
|
|
return (
|
|
<div key={tour.id} className="bg-zinc-900 rounded-xl overflow-hidden shadow-lg border border-zinc-800 hover:border-orange-500/50 transition-all duration-300 flex flex-col group">
|
|
<div className="relative h-56 overflow-hidden">
|
|
<Image src={tour.imageUrl || ''} alt={tour.title} fill sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw" className="object-cover group-hover:scale-110 transition-transform duration-500" />
|
|
{cat && (
|
|
<div className="absolute top-4 left-4 bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow">
|
|
{cat.name}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="p-6 flex-1 flex flex-col">
|
|
<h3 className="font-bold text-xl mb-3 text-zinc-100 line-clamp-1">{tour.title}</h3>
|
|
<p className="text-zinc-400 text-sm mb-6 flex-1 line-clamp-3">{tour.description}</p>
|
|
<div className="flex items-center justify-between border-t border-zinc-800 pt-4 mt-auto">
|
|
<div>
|
|
<span className="text-xs text-zinc-500 uppercase tracking-wider block">{t('from')}</span>
|
|
<span className="font-bold text-2xl text-orange-500">${tour.price}</span>
|
|
</div>
|
|
<Link href={`/tours/${tour.slug}`} className="px-5 py-2.5 bg-zinc-800 text-white text-sm font-medium rounded-md hover:bg-orange-500 transition-colors duration-300">
|
|
{t('book_now')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|