113 lines
4.9 KiB
TypeScript
113 lines
4.9 KiB
TypeScript
'use client'
|
|
|
|
import { useRef } from 'react'
|
|
import { motion, useScroll, useTransform } from 'framer-motion'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
|
|
interface Suite {
|
|
id: string
|
|
name: string
|
|
number: string
|
|
image: string
|
|
desc: string
|
|
}
|
|
|
|
export default function SuitesHighlights({ lang, dict }: { lang: string, dict: any }) {
|
|
const container = useRef(null)
|
|
|
|
const suites: Suite[] = [
|
|
{ id: 'iris', number: '01', name: dict.suites.s1.name, desc: dict.suites.s1.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606641/ayrisapart/Daire%201/photo_1_2024-04-05_12-32-09.jpg' },
|
|
{ id: 'electra', number: '02', name: dict.suites.s2.name, desc: dict.suites.s2.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606648/ayrisapart/Daire%202/photo_1_2024-04-05_16-04-34.jpg' },
|
|
{ id: 'arke', number: '03', name: dict.suites.s3.name, desc: dict.suites.s3.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606654/ayrisapart/Daire%203/photo_1_2024-04-05_16-06-09.jpg' },
|
|
{ id: 'harpy', number: '04', name: dict.suites.s4.name, desc: dict.suites.s4.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606661/ayrisapart/Daire%204/photo_1_2024-04-05_16-07-01.jpg' },
|
|
{ id: 'hydaspes', number: '05', name: dict.suites.s5.name, desc: dict.suites.s5.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606671/ayrisapart/Daire%205/photo_1_2024-05-04_15-32-44.jpg' },
|
|
{ id: 'zephyrus', number: '06', name: dict.suites.s6.name, desc: dict.suites.s6.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606681/ayrisapart/Daire%206/photo_1_2024-05-04_15-32-44.jpg' },
|
|
{ id: 'pothos', number: '07', name: dict.suites.s7.name, desc: dict.suites.s7.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606689/ayrisapart/Daire%207/photo_1_2024-05-04_15-33-34.jpg' },
|
|
{ id: 'thaumas', number: '08', name: dict.suites.s8.name, desc: dict.suites.s8.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606696/ayrisapart/Daire%208/photo_1_2024-05-04_15-33-34.jpg' },
|
|
]
|
|
|
|
return (
|
|
<section ref={container} className="relative bg-[#FAF7F0] z-60">
|
|
|
|
<div className="relative">
|
|
{suites.map((suite, idx) => (
|
|
<SuiteCard
|
|
key={suite.id}
|
|
suite={suite}
|
|
index={idx}
|
|
lang={lang}
|
|
dict={dict}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bottom spacer to allow the last item to scroll */}
|
|
<div className="h-[20vh] bg-[#FAF7F0]" />
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function SuiteCard({ suite, index, lang, dict }: { suite: Suite, index: number, lang: string, dict: any }) {
|
|
const cardRef = useRef(null)
|
|
const { scrollYProgress } = useScroll({
|
|
target: cardRef,
|
|
offset: ["start end", "start start"]
|
|
})
|
|
|
|
// Stacking (Curtain) Effect: Each card is sticky and 100vh to cover the previous one
|
|
return (
|
|
<div
|
|
ref={cardRef}
|
|
className="sticky top-0 h-screen w-full flex items-center bg-[#FAF7F0] border-t border-[#1A1A1A]/5 shadow-[0_-20px_50px_rgba(0,0,0,0.05)]"
|
|
style={{ zIndex: index + 1 }}
|
|
>
|
|
<div className="max-w-[1400px] mx-auto px-6 w-full">
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
|
|
|
|
{/* Room Number & Info */}
|
|
<div className="md:col-span-4 space-y-10">
|
|
<div className="space-y-4">
|
|
<span className="text-[#1A1A1A]/20 text-6xl font-serif block">{suite.number}.</span>
|
|
<h3 className="text-4xl md:text-6xl font-serif text-[#1A1A1A] uppercase tracking-tight">{suite.name}</h3>
|
|
</div>
|
|
|
|
<p className="text-[#1A1A1A]/60 text-lg md:text-xl font-medium italic leading-relaxed max-w-sm">
|
|
{suite.desc}
|
|
</p>
|
|
|
|
<div className="pt-4">
|
|
<Link
|
|
href={`/${lang}/suites/${suite.id}`}
|
|
className="inline-flex items-center space-x-4 border-b-2 border-[#1A1A1A] pb-2 group"
|
|
>
|
|
<span className="text-[11px] font-bold tracking-[0.3em] uppercase">{dict.suites.btn.more}</span>
|
|
<span className="text-xl transform group-hover:translate-x-1 transition-transform">↳</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Image */}
|
|
<div className="md:col-span-8">
|
|
<motion.div
|
|
className="relative aspect-[16/10] md:aspect-[16/9] overflow-hidden rounded-[2px] shadow-2xl bg-white"
|
|
style={{
|
|
scale: useTransform(scrollYProgress, [0, 1], [0.9, 1]),
|
|
opacity: useTransform(scrollYProgress, [0, 0.5], [0, 1])
|
|
}}
|
|
>
|
|
<Image
|
|
src={suite.image}
|
|
alt={suite.name}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|