first commit

app/components/ExperienceCard.tsx

@@ -0,0 +1,41 @@
+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>
+  );
+}