fb

2026-04-19 17:23:31 +03:00
parent 9cad199125
commit 4f2188363a
122 changed files with 3215 additions and 116 deletions
--- a/components/SuitesHighlights.tsx
+++ b/components/SuitesHighlights.tsx
@@ -0,0 +1,112 @@
+'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>
+  )
+}