ayrisdev/ayrisapart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fb

Browse Source
This commit is contained in:
ayrisdev
2026-04-19 17:23:31 +03:00
parent 9cad199125
commit 4f2188363a
122 changed files with 3215 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
app/[lang]/suites/[id]/SuiteDetailClient.tsx Normal file
View File

@@ -0,0 +1,221 @@
'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>
)
}