ayrisdevandClaude Sonnet 4.6
40b4434a7b
- Rename /news route to /blog across all pages, links, and sitemap - Fix hardcoded English text in Experiences, QuoteSection, and Footer by wiring all content through the TR/EN dictionaries - Clean up Footer: remove non-existent page links, add contact column - Update contact info: new phone numbers, bilgi@ email, No:71 address, Instagram @ayrisapart link - Add suppressHydrationWarning to <body> to silence browser-extension attribute mismatch errors - Add sizes prop to all fill-mode Next.js Image components Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
42 lines
1.3 KiB
TypeScript
42 lines
1.3 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.1, 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=" 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://res.cloudinary.com/du7xohbct/image/upload/v1776642098/ayrisapart/hero/photo-1501696461415-6bd6660c6742_rkxjcu.avif"
|
|
alt="Luxury Cave Pool Experience"
|
|
fill
|
|
sizes="(max-width: 768px) calc(100vw - 48px), calc(100vw - 48px)"
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 bg-black/5" />
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|