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>
97 lines
4.1 KiB
TypeScript
97 lines
4.1 KiB
TypeScript
'use client'
|
|
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import Image from 'next/image'
|
|
import { useState } from 'react'
|
|
|
|
const experienceImages = [
|
|
"https://res.cloudinary.com/du7xohbct/image/upload/v1776642503/ayrisapart/experiences/akbuk_cjfyan.jpg",
|
|
"https://res.cloudinary.com/du7xohbct/image/upload/v1776642502/ayrisapart/experiences/oren_d2pxcy.jpg",
|
|
"https://res.cloudinary.com/du7xohbct/image/upload/v1776642501/ayrisapart/experiences/alatepe_oawu3z.jpg",
|
|
"https://res.cloudinary.com/du7xohbct/image/upload/v1776642492/ayrisapart/experiences/cokertme_d5qfiw.jpg",
|
|
]
|
|
|
|
export default function Experiences({ dict }: { dict: any }) {
|
|
const [hoveredIdx, setHoveredIdx] = useState<number | null>(null)
|
|
|
|
const experiences = [
|
|
{ title: dict.experiences.e1.title, description: dict.experiences.e1.desc, image: experienceImages[0] },
|
|
{ title: dict.experiences.e2.title, description: dict.experiences.e2.desc, image: experienceImages[1] },
|
|
{ title: dict.experiences.e3.title, description: dict.experiences.e3.desc, image: experienceImages[2] },
|
|
{ title: dict.experiences.e4.title, description: dict.experiences.e4.desc, image: experienceImages[3] },
|
|
]
|
|
|
|
return (
|
|
<section className="relative z-60 bg-[#FAF7F0] ">
|
|
<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"
|
|
>
|
|
{dict.experiences.title}
|
|
</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
|
|
sizes="(max-width: 768px) 100vw, 33vw"
|
|
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>
|
|
)
|
|
}
|