118 lines
6.8 KiB
TypeScript
118 lines
6.8 KiB
TypeScript
'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>
|
|
)
|
|
}
|