42 lines
1.9 KiB
TypeScript
42 lines
1.9 KiB
TypeScript
import { ExperienceSection } from "@/src/data/resort";
|
|
import { getCloudinaryUrl } from "@/src/lib/cloudinary";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
interface ExperienceCardProps {
|
|
experience: ExperienceSection;
|
|
lang: "tr" | "en" | "de";
|
|
}
|
|
|
|
export default function ExperienceCard({ experience, lang }: ExperienceCardProps) {
|
|
return (
|
|
<Link
|
|
href={experience.href}
|
|
className="group relative overflow-hidden rounded-2xl aspect-square block"
|
|
>
|
|
<Image
|
|
src={getCloudinaryUrl(experience.imageId, { width: 800, height: 800, crop: "fill" })}
|
|
alt={experience.title[lang]}
|
|
fill
|
|
className="object-cover transition-transform duration-1000 group-hover:scale-110 group-hover:rotate-1"
|
|
/>
|
|
|
|
{/* Dark Overlay */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-60 transition-opacity duration-700 group-hover:opacity-40" />
|
|
|
|
{/* Minimal Gold Border Hover */}
|
|
<div className="absolute inset-4 border border-white/0 transition-all duration-700 group-hover:border-gold/30 group-hover:backdrop-blur-[2px] flex items-center justify-center">
|
|
<span className="text-white text-xs font-bold tracking-[0.4em] opacity-0 translate-y-4 transition-all duration-700 group-hover:opacity-100 group-hover:translate-y-0 border-b border-gold pb-1">
|
|
{lang === "tr" ? "KEŞFET" : lang === "en" ? "EXPLORE" : "ENTDECKEN"}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="absolute bottom-8 left-8 text-white group-hover:opacity-0 transition-opacity duration-500">
|
|
<h3 className="text-2xl font-serif font-bold mb-1 tracking-wider">{experience.title[lang]}</h3>
|
|
<p className="text-white/70 text-[10px] uppercase tracking-[0.2em] font-medium">{experience.subtitle[lang]}</p>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|