222 lines
11 KiB
TypeScript
222 lines
11 KiB
TypeScript
'use client'
|
||
|
||
import { motion } from "framer-motion"
|
||
import Image from "next/image"
|
||
import Link from "next/link"
|
||
import { Users, BedDouble, ArrowLeft } from 'lucide-react'
|
||
import Amenities from "@/components/Amenities"
|
||
|
||
export default function SuiteDetailClient({ lang, id, dict }: { lang: string, id: string, dict: any }) {
|
||
// Mapping the 8 mythological suites with their Cloudinary assets
|
||
const suitesData: Record<string, any> = {
|
||
'iris': {
|
||
number: '01',
|
||
name: dict.suites_page.list.s1.name,
|
||
description: dict.suites_page.list.s1.desc,
|
||
mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606641/ayrisapart/Daire%201/photo_1_2024-04-05_12-32-09.jpg',
|
||
guests: dict.suites_page.list.s1.guests,
|
||
bed: dict.suites_page.list.s1.bed,
|
||
gallery: [
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606642/ayrisapart/Daire%201/photo_2_2024-04-05_12-32-09.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606643/ayrisapart/Daire%201/photo_3_2024-04-05_12-32-09.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606644/ayrisapart/Daire%201/photo_4_2024-04-05_12-32-09.jpg'
|
||
]
|
||
},
|
||
'electra': {
|
||
number: '02',
|
||
name: dict.suites_page.list.s2.name,
|
||
description: dict.suites_page.list.s2.desc,
|
||
mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606648/ayrisapart/Daire%202/photo_1_2024-04-05_16-04-34.jpg',
|
||
guests: dict.suites_page.list.s2.guests,
|
||
bed: dict.suites_page.list.s2.bed,
|
||
gallery: [
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606649/ayrisapart/Daire%202/photo_2_2024-04-05_16-04-34.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606650/ayrisapart/Daire%202/photo_3_2024-04-05_16-04-34.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606651/ayrisapart/Daire%202/photo_5_2024-04-05_16-04-34.jpg'
|
||
]
|
||
},
|
||
'arke': {
|
||
number: '03',
|
||
name: dict.suites_page.list.s3.name,
|
||
description: dict.suites_page.list.s3.desc,
|
||
mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606654/ayrisapart/Daire%203/photo_1_2024-04-05_16-06-09.jpg',
|
||
guests: dict.suites_page.list.s3.guests,
|
||
bed: dict.suites_page.list.s3.bed,
|
||
gallery: [
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606655/ayrisapart/Daire%203/photo_2_2024-04-05_16-06-09.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606655/ayrisapart/Daire%203/photo_3_2024-04-05_16-06-09.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606656/ayrisapart/Daire%203/photo_4_2024-04-05_16-06-09.jpg'
|
||
]
|
||
},
|
||
'harpy': {
|
||
number: '04',
|
||
name: dict.suites_page.list.s4.name,
|
||
description: dict.suites_page.list.s4.desc,
|
||
mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606661/ayrisapart/Daire%204/photo_1_2024-04-05_16-07-01.jpg',
|
||
guests: dict.suites_page.list.s4.guests,
|
||
bed: dict.suites_page.list.s4.bed,
|
||
gallery: [
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606662/ayrisapart/Daire%204/photo_2_2024-04-05_16-07-01.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606663/ayrisapart/Daire%204/photo_3_2024-04-05_16-07-01.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606664/ayrisapart/Daire%204/photo_5_2024-04-05_16-07-01.jpg'
|
||
]
|
||
},
|
||
'hydaspes': {
|
||
number: '05',
|
||
name: dict.suites_page.list.s5.name,
|
||
description: dict.suites_page.list.s5.desc,
|
||
mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606671/ayrisapart/Daire%205/photo_1_2024-05-04_15-32-44.jpg',
|
||
guests: dict.suites_page.list.s5.guests,
|
||
bed: dict.suites_page.list.s5.bed,
|
||
gallery: [
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606672/ayrisapart/Daire%205/photo_2_2024-05-04_15-33-08.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606673/ayrisapart/Daire%205/photo_3_2024-05-04_15-33-08.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606674/ayrisapart/Daire%205/photo_4_2024-05-04_15-33-08.jpg'
|
||
]
|
||
},
|
||
'zephyrus': {
|
||
number: '06',
|
||
name: dict.suites_page.list.s6.name,
|
||
description: dict.suites_page.list.s6.desc,
|
||
mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606681/ayrisapart/Daire%206/photo_1_2024-05-04_15-32-44.jpg',
|
||
guests: dict.suites_page.list.s6.guests,
|
||
bed: dict.suites_page.list.s6.bed,
|
||
gallery: [
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606682/ayrisapart/Daire%206/photo_2_2024-05-04_15-33-08.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606683/ayrisapart/Daire%206/photo_3_2024-05-04_15-33-08.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606684/ayrisapart/Daire%206/photo_5_2024-05-04_15-33-08.jpg'
|
||
]
|
||
},
|
||
'pothos': {
|
||
number: '07',
|
||
name: dict.suites_page.list.s7.name,
|
||
description: dict.suites_page.list.s7.desc,
|
||
mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606689/ayrisapart/Daire%207/photo_1_2024-05-04_15-33-34.jpg',
|
||
guests: dict.suites_page.list.s7.guests,
|
||
bed: dict.suites_page.list.s7.bed,
|
||
gallery: [
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606690/ayrisapart/Daire%207/photo_2_2024-05-04_15-33-34.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606691/ayrisapart/Daire%207/photo_3_2024-05-04_15-33-34.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606692/ayrisapart/Daire%207/photo_5_2024-05-04_15-33-34.jpg'
|
||
]
|
||
},
|
||
'thaumas': {
|
||
number: '08',
|
||
name: dict.suites_page.list.s8.name,
|
||
description: dict.suites_page.list.s8.desc,
|
||
mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606696/ayrisapart/Daire%208/photo_1_2024-05-04_15-33-34.jpg',
|
||
guests: dict.suites_page.list.s8.guests,
|
||
bed: dict.suites_page.list.s8.bed,
|
||
gallery: [
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606697/ayrisapart/Daire%208/photo_2_2024-05-04_15-33-34.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606698/ayrisapart/Daire%208/photo_4_2024-05-04_15-33-34.jpg',
|
||
'https://res.cloudinary.com/du7xohbct/image/upload/v1776606699/ayrisapart/Daire%208/photo_5_2024-05-04_15-33-34.jpg'
|
||
]
|
||
}
|
||
}
|
||
|
||
const suite = suitesData[id] || suitesData['iris']
|
||
|
||
return (
|
||
<main className="bg-[#FAF7F0] min-h-screen">
|
||
|
||
{/* SECTION 1: HEADER & MAIN IMAGE */}
|
||
<section className="pt-44 pb-20 px-6 md:px-16 max-w-[1400px] mx-auto">
|
||
<div className="space-y-12">
|
||
{/* Back Button */}
|
||
<Link href={`/${lang}/suites`} className="inline-flex items-center space-x-2 text-[11px] font-bold tracking-[0.4em] uppercase text-[#1A1A1A]/40 hover:text-[#1A1A1A] transition-colors">
|
||
<ArrowLeft size={16} />
|
||
<span>{lang === 'tr' ? 'Tüm Odalar' : 'All Suites'}</span>
|
||
</Link>
|
||
|
||
{/* Title and Brief Header */}
|
||
<div className="space-y-8">
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="text-6xl md:text-[88px] font-serif text-[#1A1A1A] tracking-tight leading-none uppercase"
|
||
>
|
||
<span className="opacity-50 mr-4 font-sans text-4xl">{suite.number}.</span>
|
||
{suite.name}
|
||
</motion.h1>
|
||
|
||
<div className="flex flex-wrap items-center gap-x-12 gap-y-4 text-[#1A1A1A]/70 text-[15px] font-medium">
|
||
<div className="flex items-center space-x-2 uppercase tracking-widest">
|
||
<Users size={18} className="text-[#C88C4B]" />
|
||
<span>{suite.guests}</span>
|
||
</div>
|
||
<div className="flex items-center space-x-2 uppercase tracking-widest">
|
||
<BedDouble size={18} className="text-[#C88C4B]" />
|
||
<span>{suite.bed}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Main Visual */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.98 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 1 }}
|
||
className="aspect-[21/9] relative overflow-hidden rounded-[2px] shadow-2xl"
|
||
>
|
||
<Image
|
||
src={suite.mainImage}
|
||
alt={suite.name}
|
||
fill
|
||
className="object-cover"
|
||
priority
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* SECTION 2: ABOUT & AMENITIES */}
|
||
<section className="py-24 px-6 md:px-16 max-w-[1400px] mx-auto">
|
||
<div className="grid grid-cols-1 md:grid-cols-12 gap-16 border-b border-[#1A1A1A]/10 pb-20">
|
||
<div className="md:col-span-4">
|
||
<h2 className="text-4xl font-serif text-[#1A1A1A] uppercase tracking-tight">{lang === 'tr' ? 'Suit Hakkında' : 'About Suite'}</h2>
|
||
</div>
|
||
<div className="md:col-span-8 space-y-12">
|
||
<p className="text-[#1A1A1A]/70 text-2xl leading-relaxed italic max-w-2xl">
|
||
{suite.description}
|
||
</p>
|
||
<Link
|
||
href={`/${lang}/reservation`}
|
||
className="inline-flex items-center space-x-3 text-[14px] font-bold tracking-[0.4em] uppercase border-b-2 border-[#1A1A1A] pb-2 group"
|
||
>
|
||
<span className="transform group-hover:translate-x-1 transition-transform">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="rotate-45">
|
||
<line x1="12" y1="19" x2="12" y2="5" />
|
||
<polyline points="5 12 12 5 19 12" />
|
||
</svg>
|
||
</span>
|
||
<span>{dict.footer.book}</span>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* INTEGRATED AMENITIES COMPONENT */}
|
||
<div className="mt-20">
|
||
<Amenities dict={dict} />
|
||
</div>
|
||
</section>
|
||
|
||
{/* SECTION 3: GALLERY GRID */}
|
||
<section className="py-24 px-6 md:px-16 max-w-[1400px] mx-auto pb-44">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<div className="aspect-square relative overflow-hidden rounded-[2px] shadow-lg">
|
||
<Image src={suite.gallery[0]} alt="Gallery" fill className="object-cover hover:scale-105 transition-transform duration-1000" />
|
||
</div>
|
||
<div className="aspect-square relative overflow-hidden rounded-[2px] shadow-lg">
|
||
<Image src={suite.gallery[1]} alt="Gallery" fill className="object-cover hover:scale-105 transition-transform duration-1000" />
|
||
</div>
|
||
<div className="md:col-span-2 aspect-[21/9] relative overflow-hidden rounded-[2px] shadow-lg">
|
||
<Image src={suite.gallery[2]} alt="Gallery" fill className="object-cover hover:scale-105 transition-transform duration-1000" />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
)
|
||
}
|