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

117
app/[lang]/suites/SuitesClient.tsx Normal file
View File

@@ -0,0 +1,117 @@
'use client'
import { motion } from "framer-motion"
import Image from "next/image"
import Link from "next/link"
import { Users, BedDouble } from 'lucide-react'
import Amenities from "@/components/Amenities"
export default function SuitesClient({ lang, dict }: { lang: string, dict: any }) {
const suites = [
{ id: 'iris', number: '01', name: dict.suites_page.list.s1.name, desc: dict.suites_page.list.s1.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606641/ayrisapart/Daire%201/photo_1_2024-04-05_12-32-09.jpg', bed: dict.suites_page.list.s1.bed, guests: dict.suites_page.list.s1.guests },
{ id: 'electra', number: '02', name: dict.suites_page.list.s2.name, desc: dict.suites_page.list.s2.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606648/ayrisapart/Daire%202/photo_1_2024-04-05_16-04-34.jpg', bed: dict.suites_page.list.s2.bed, guests: dict.suites_page.list.s2.guests },
{ id: 'arke', number: '03', name: dict.suites_page.list.s3.name, desc: dict.suites_page.list.s3.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606654/ayrisapart/Daire%203/photo_1_2024-04-05_16-06-09.jpg', bed: dict.suites_page.list.s3.bed, guests: dict.suites_page.list.s3.guests },
{ id: 'harpy', number: '04', name: dict.suites_page.list.s4.name, desc: dict.suites_page.list.s4.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606661/ayrisapart/Daire%204/photo_1_2024-04-05_16-07-01.jpg', bed: dict.suites_page.list.s4.bed, guests: dict.suites_page.list.s4.guests },
{ id: 'hydaspes', number: '05', name: dict.suites_page.list.s5.name, desc: dict.suites_page.list.s5.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606671/ayrisapart/Daire%205/photo_1_2024-05-04_15-32-44.jpg', bed: dict.suites_page.list.s5.bed, guests: dict.suites_page.list.s5.guests },
{ id: 'zephyrus', number: '06', name: dict.suites_page.list.s6.name, desc: dict.suites_page.list.s6.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606681/ayrisapart/Daire%206/photo_1_2024-05-04_15-32-44.jpg', bed: dict.suites_page.list.s6.bed, guests: dict.suites_page.list.s6.guests },
{ id: 'pothos', number: '07', name: dict.suites_page.list.s7.name, desc: dict.suites_page.list.s7.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606689/ayrisapart/Daire%207/photo_1_2024-05-04_15-33-34.jpg', bed: dict.suites_page.list.s7.bed, guests: dict.suites_page.list.s7.guests },
{ id: 'thaumas', number: '08', name: dict.suites_page.list.s8.name, desc: dict.suites_page.list.s8.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606696/ayrisapart/Daire%208/photo_1_2024-05-04_15-33-34.jpg', bed: dict.suites_page.list.s8.bed, guests: dict.suites_page.list.s8.guests },
]
return (
<main className="bg-[#FAF7F0] min-h-screen z-60 ">
{/* HEADER SECTION */}
<section className="pt-44 pb-20 px-6 ">
<div className="max-w-4xl mx-auto text-center space-y-10">
<motion.h1
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-7xl md:text-[120px] font-serif text-[#1A1A1A] leading-[0.9] tracking-tight uppercase"
>
{dict.suites_page.title}
</motion.h1>
<motion.p
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="text-[#1A1A1A]/60 text-lg md:text-xl max-w-2xl mx-auto font-medium leading-relaxed italic"
>
{dict.suites_page.subtitle}
</motion.p>
</div>
</section>
{/* SUITES LIST SECTION */}
<section className="pb-32 px-6 md:px-12 max-w-[1400px] mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-24">
{suites.map((suite, idx) => (
<motion.div
key={suite.id}
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8, delay: (idx % 2) * 0.1 }}
className="group cursor-pointer"
>
{/* Image Card */}
<div className="aspect-[4/3] relative overflow-hidden rounded-[2px] bg-white p-0 shadow-sm">
<Image
src={suite.image}
alt={suite.name}
fill
className="object-cover transition-transform duration-1000 group-hover:scale-105"
/>
</div>
{/* Info */}
<div className="mt-10 space-y-6">
<h2 className="text-4xl font-serif text-[#1A1A1A] uppercase tracking-tight">
<span className="mr-4 font-sans text-xl opacity-20">{suite.number}.</span>
{suite.name}
</h2>
{/* Icons row */}
<div className="flex items-center space-x-8 text-[#1A1A1A]/60 text-[15px] font-medium">
<div className="flex items-center space-x-2">
<Users size={16} strokeWidth={1.5} className="text-[#C88C4B]" />
<span>{suite.guests}</span>
</div>
<div className="flex items-center space-x-2">
<BedDouble size={16} strokeWidth={1.5} className="text-[#C88C4B]" />
<span>{suite.bed}</span>
</div>
</div>
<p className="text-[#1A1A1A]/70 text-[17px] leading-relaxed italic max-w-lg">
{suite.desc}
</p>
{/* Link */}
<Link
href={`/${lang}/suites/${suite.id}`}
className="inline-flex items-center space-x-3 text-[13px] font-bold tracking-[0.3em] uppercase border-b-2 border-[#1A1A1A] pb-2 group/btn"
>
<span className="bg-[#1A1A1A] text-white p-1 rounded-full group-hover/btn:bg-[#C88C4B] transition-colors">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" 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.suites_page.details}</span>
</Link>
</div>
</motion.div>
))}
</div>
</section>
{/* GENERAL AMENITIES SECTION */}
<section className="py-32 px-6 md:px-12 max-w-[1400px] mx-auto bg-white/30 rounded-[4px] mb-32 border border-[#1A1A1A]/5 shadow-sm">
<Amenities dict={dict} />
</section>
</main>
)
}

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>
)
}

19
app/[lang]/suites/[id]/page.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { getDictionary } from "@/dictionaries/get-dictionary"
import SuiteDetailClient from "./SuiteDetailClient"
export async function generateMetadata({ params }: { params: Promise<{ lang: string, id: string }> }) {
const { lang, id } = await params
const dict = await getDictionary(lang as 'en' | 'tr')
return {
title: `Suites - Ayris Apart`,
description: dict.suites_page.subtitle,
}
}
export default async function SuiteDetailPage({ params }: { params: Promise<{ lang: string, id: string }> }) {
const { lang, id } = await params
const dict = await getDictionary(lang as 'en' | 'tr')
return <SuiteDetailClient lang={lang} id={id} dict={dict} />
}

18
app/[lang]/suites/page.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { getDictionary } from "@/dictionaries/get-dictionary"
import SuitesClient from "./SuitesClient"
export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }) {
const { lang } = await params
const dict = await getDictionary(lang as 'en' | 'tr')
return {
title: `${dict.suites_page.title} - Ayris Apart`,
description: dict.suites_page.subtitle,
}
}
export default async function SuitesPage({ params }: { params: Promise<{ lang: string }> }) {
const { lang } = await params
const dict = await getDictionary(lang as 'en' | 'tr')
return <SuitesClient lang={lang} dict={dict} />
}