fb

components/ShowcaseImage.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { motion, useScroll, useTransform } from 'framer-motion'
+import { useRef } from 'react'
+import Image from 'next/image'
+
+export default function ShowcaseImage() {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start end", "end start"]
+  })
+
+  // Slightly increased scales for a better balance
+  const scale = useTransform(scrollYProgress, [0, 0.4], [0.8, 1.0])
+  const opacity = useTransform(scrollYProgress, [0, 0.2], [0, 1])
+
+  return (
+    <section ref={containerRef} className="relative z-60 bg-[#FAF7F0] pb-32">
+      <div className="max-w-[1400px] mx-auto px-6 overflow-hidden">
+        <motion.div
+          style={{
+            scale,
+            opacity
+          }}
+          className="relative aspect-[16/9] w-full overflow-hidden shadow-xl rounded-sm"
+        >
+          <Image
+            src="https://images.unsplash.com/photo-1571896349842-33c89424de2d?q=80&w=2080&auto=format&fit=crop"
+            alt="Luxury Cave Pool Experience"
+            fill
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 bg-black/5" />
+        </motion.div>
+      </div>
+    </section>
+  )
+}