105 lines
4.2 KiB
TypeScript
105 lines
4.2 KiB
TypeScript
'use client'
|
|
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import Image from 'next/image'
|
|
import { useState } from 'react'
|
|
|
|
const experiences = [
|
|
{
|
|
title: "Infinity Pool",
|
|
description: "Swim towards the horizon in our stunning heated infinity pool, overlooking the turquoise expanse of the Aegean Sea.",
|
|
image: "https://images.unsplash.com/photo-1576013551627-0cfde316be70?q=80&w=1974&auto=format&fit=crop"
|
|
},
|
|
{
|
|
title: "Snorkeling",
|
|
description: "Discover vibrant marine life, swim through crystal-clear waters, and experience the wonder of ocean.",
|
|
image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2070&auto=format&fit=crop"
|
|
},
|
|
{
|
|
title: "Paddle boarding",
|
|
description: "Balance your soul and body while gliding over calm morning waves on our premium paddle boards.",
|
|
image: "https://images.unsplash.com/photo-1517176641128-052478950337?q=80&w=1974&auto=format&fit=crop"
|
|
},
|
|
{
|
|
title: "Fishing trips",
|
|
description: "Join our local experts for an authentic Mediterranean fishing experience at sunrise.",
|
|
image: "https://images.unsplash.com/photo-1524704652723-21444983944d?q=80&w=1974&auto=format&fit=crop"
|
|
}
|
|
]
|
|
|
|
export default function Experiences() {
|
|
const [hoveredIdx, setHoveredIdx] = useState<number | null>(null)
|
|
|
|
return (
|
|
<section className="relative z-60 bg-[#FAF7F0] py-32 px-6 md:px-12">
|
|
<div className="max-w-[1400px] mx-auto space-y-20">
|
|
<div className="text-center space-y-4">
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 1.2, ease: [0.33, 1, 0.68, 1] }}
|
|
className="text-4xl md:text-[64px] font-medium text-[#1A1A1A] leading-tight"
|
|
>
|
|
Discover experiences <br /> beyond the shore
|
|
</motion.h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12">
|
|
{experiences.map((exp, idx) => (
|
|
<motion.div
|
|
key={idx}
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 1, delay: idx * 0.1, ease: [0.33, 1, 0.68, 1] }}
|
|
onMouseEnter={() => setHoveredIdx(idx)}
|
|
onMouseLeave={() => setHoveredIdx(null)}
|
|
animate={{
|
|
filter: hoveredIdx !== null && hoveredIdx !== idx ? 'blur(4px)' : 'blur(0px)',
|
|
opacity: hoveredIdx !== null && hoveredIdx !== idx ? 0.5 : 1,
|
|
scale: hoveredIdx === idx ? 1.02 : 1
|
|
}}
|
|
className="group cursor-pointer flex flex-col relative"
|
|
>
|
|
<div className="relative aspect-[3/4] w-full overflow-hidden rounded-[2px] mb-6">
|
|
<Image
|
|
src={exp.image}
|
|
alt={exp.title}
|
|
fill
|
|
className="object-cover transition-transform duration-1000 group-hover:scale-110"
|
|
/>
|
|
|
|
{/* Overlay Description */}
|
|
<AnimatePresence>
|
|
{hoveredIdx === idx && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="absolute inset-0 bg-black/40 backdrop-blur-[2px] flex flex-col justify-end p-8"
|
|
>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="text-white text-base md:text-lg leading-relaxed font-medium"
|
|
>
|
|
{exp.description}
|
|
</motion.p>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
<h3 className="text-2xl font-medium text-[#1A1A1A] group-hover:text-[#C88C4B] transition-colors">
|
|
{exp.title}
|
|
</h3>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|