fb

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