41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
'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>
|
|
)
|
|
}
|