'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 (
{suites.map((suite, idx) => ( ))}
{/* Bottom spacer to allow the last item to scroll */}
) } 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 (
{/* Room Number & Info */}
{suite.number}.

{suite.name}

{suite.desc}

{dict.suites.btn.more}
{/* Image */}
{suite.name}
) }