182 lines
7.5 KiB
TypeScript
182 lines
7.5 KiB
TypeScript
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||
import { Link } from '@/i18n/routing'
|
||
import Image from 'next/image'
|
||
import { notFound } from 'next/navigation'
|
||
import { CheckCircle2, Maximize, Users, BedDouble, ArrowRight } from 'lucide-react'
|
||
|
||
// Bu sayfa parametre olarak dinamik slug alacak
|
||
export default async function RoomDetailPage({ params }: { params: Promise<{ locale: string, slug: string }> }) {
|
||
const { locale, slug } = await params
|
||
setRequestLocale(locale)
|
||
|
||
const tRooms = await getTranslations('rooms')
|
||
|
||
const MOCK_ROOMS = [
|
||
{
|
||
slug: '1-0-daire',
|
||
name: tRooms('room_list.1_0_daire.name'),
|
||
description: tRooms('room_list.1_0_daire.desc'),
|
||
capacity: 2,
|
||
size: '25m²',
|
||
beds: '1',
|
||
image: 'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?auto=format&fit=crop&q=80',
|
||
gallery: [
|
||
'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80',
|
||
'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&q=80',
|
||
'https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&q=80'
|
||
],
|
||
amenities: ['Mini Mutfak', 'Klima', 'Balkon', 'WiFi', 'TV', 'Saç Kurutma Makinesi']
|
||
},
|
||
{
|
||
slug: '1-1-daire-a',
|
||
name: tRooms('room_list.1_1_daire_a.name'),
|
||
description: tRooms('room_list.1_1_daire_a.desc'),
|
||
capacity: 2,
|
||
size: '40m²',
|
||
beds: '1 + Sofa',
|
||
image: 'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80',
|
||
gallery: [
|
||
'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?auto=format&fit=crop&q=80',
|
||
'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&q=80',
|
||
'https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&q=80'
|
||
],
|
||
amenities: ['Ayrı Mutfak', 'Klima', 'Balkon', 'WiFi', 'Oturma Alanı', 'Çamaşır Makinesi']
|
||
},
|
||
{
|
||
slug: '1-1-daire-b',
|
||
name: tRooms('room_list.1_1_daire_b.name'),
|
||
description: tRooms('room_list.1_1_daire_b.desc'),
|
||
capacity: 4,
|
||
size: '50m²',
|
||
beds: '2',
|
||
image: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&q=80',
|
||
gallery: [
|
||
'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?auto=format&fit=crop&q=80',
|
||
'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80',
|
||
'https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&q=80'
|
||
],
|
||
amenities: ['2 Oda', 'Ayrı Mutfak', 'Klima', 'Balkon', 'WiFi', 'Geniş Oturma Alanı']
|
||
}
|
||
];
|
||
|
||
const room = MOCK_ROOMS.find(r => r.slug === slug);
|
||
|
||
if (!room) {
|
||
notFound();
|
||
}
|
||
|
||
return (
|
||
<div className="bg-background min-h-screen text-on-surface">
|
||
{/* Hero Section */}
|
||
<section className="relative h-[60vh] md:h-[70vh] w-full">
|
||
<Image
|
||
src={room.image}
|
||
alt={room.name}
|
||
fill
|
||
sizes="100vw"
|
||
className="object-cover"
|
||
priority
|
||
/>
|
||
<div className="absolute inset-0 bg-black/40" />
|
||
<div className="absolute inset-0 flex items-center justify-center">
|
||
<div className="text-center">
|
||
<h1 className="font-serif text-[48px] md:text-[64px] text-white font-bold drop-shadow-md">
|
||
{room.name}
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Main Content */}
|
||
<section className="max-w-container-max mx-auto px-margin-mobile md:px-gutter py-16">
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||
|
||
{/* Left Column - Details */}
|
||
<div className="lg:col-span-2 space-y-12">
|
||
|
||
{/* Badges */}
|
||
<div className="flex flex-wrap gap-4">
|
||
<div className="flex items-center gap-2 bg-surface-container px-4 py-2 rounded-full text-secondary font-medium">
|
||
<Users className="w-5 h-5 text-primary" />
|
||
<span>Maks {room.capacity} Kişi</span>
|
||
</div>
|
||
<div className="flex items-center gap-2 bg-surface-container px-4 py-2 rounded-full text-secondary font-medium">
|
||
<Maximize className="w-5 h-5 text-primary" />
|
||
<span>{room.size}</span>
|
||
</div>
|
||
<div className="flex items-center gap-2 bg-surface-container px-4 py-2 rounded-full text-secondary font-medium">
|
||
<BedDouble className="w-5 h-5 text-primary" />
|
||
<span>{room.beds} Yatak</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Description */}
|
||
<div className="prose prose-lg text-on-surface-variant">
|
||
<p className="text-[18px] leading-relaxed">
|
||
{room.description}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Amenities */}
|
||
<div>
|
||
<h3 className="font-serif text-[28px] text-secondary font-semibold mb-6">
|
||
{tRooms('details.features')}
|
||
</h3>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
{room.amenities.map((amenity, index) => (
|
||
<div key={index} className="flex items-center gap-3">
|
||
<CheckCircle2 className="w-5 h-5 text-accent-green flex-shrink-0" />
|
||
<span className="text-on-surface-variant">{amenity}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Mini Gallery */}
|
||
<div>
|
||
<h3 className="font-serif text-[28px] text-secondary font-semibold mb-6">
|
||
{tRooms('details.gallery')}
|
||
</h3>
|
||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||
{room.gallery.map((img, i) => (
|
||
<div key={i} className="relative aspect-square rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
|
||
<Image
|
||
src={img}
|
||
alt={`${room.name} gallery ${i + 1}`}
|
||
fill
|
||
sizes="(max-width: 640px) 100vw, 33vw"
|
||
className="object-cover hover:scale-105 transition-transform duration-500"
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Right Column - Sticky Sidebar */}
|
||
<div className="lg:col-span-1">
|
||
<div className="sticky top-32 bg-surface-container rounded-[24px] p-8 shadow-sm border border-outline/10">
|
||
<h4 className="font-serif text-[24px] text-secondary font-semibold mb-2">
|
||
Bilgi Alın
|
||
</h4>
|
||
<p className="text-on-surface-variant text-[15px] mb-8">
|
||
Tarihlerinize uygun fiyat ve müsaitlik durumunu öğrenmek için bizimle iletişime geçin.
|
||
</p>
|
||
|
||
<Link
|
||
href="/iletisim"
|
||
className="w-full flex items-center justify-center gap-2 bg-primary hover:bg-primary-hover text-white py-4 rounded-full font-bold transition-all duration-300 shadow-md hover:shadow-lg cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-primary/50 focus-visible:ring-offset-2"
|
||
>
|
||
{tRooms('details.book_now_cta')}
|
||
<ArrowRight className="w-5 h-5" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
</div>
|
||
)
|
||
}
|