feat: complete initial project setup with i18n and standalone config

components/VillaCard.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Villa } from '@/data/villas';
+import { Link } from '@/i18n/routing';
+import { Users, Bed, Droplets, MapPin } from 'lucide-react';
+import Image from 'next/image';
+
+interface VillaCardProps {
+  villa: Villa;
+  index: number;
+}
+
+export default function VillaCard({ villa, index }: VillaCardProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 50 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.6, delay: index * 0.1 }}
+      className="villa-card group bg-white rounded-2xl overflow-hidden shadow-sm"
+    >
+      <Link href={`/villas/${villa.slug}` as any}>
+        <div className="relative aspect-[4/5] overflow-hidden">
+          <Image
+            src={villa.images[0]}
+            alt={villa.name}
+            fill
+            className="object-cover transition-transform duration-700 group-hover:scale-110"
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          />
+          <div className="absolute top-4 left-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-full text-[10px] font-bold tracking-widest uppercase text-aegean-dark">
+            Portfolio
+          </div>
+          <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/60 to-transparent">
+            <div className="flex items-center text-white/90 text-xs mb-1">
+              <MapPin className="w-3 h-3 mr-1" />
+              {villa.location}
+            </div>
+            <h3 className="text-2xl font-serif text-white">{villa.name}</h3>
+          </div>
+        </div>
+      </Link>
+
+      <div className="p-6">
+        <div className="flex justify-between items-center mb-6 border-b border-aegean-dark/5 pb-4">
+          <div className="flex items-center space-x-4">
+            <div className="flex flex-col items-center">
+              <Users className="w-4 h-4 text-salmakis-blue mb-1" />
+              <span className="text-[10px] uppercase font-bold text-aegean-dark/40">{villa.capacity} Kişi</span>
+            </div>
+            <div className="flex flex-col items-center">
+              <Bed className="w-4 h-4 text-salmakis-blue mb-1" />
+              <span className="text-[10px] uppercase font-bold text-aegean-dark/40">{villa.bedrooms} Oda</span>
+            </div>
+            <div className="flex flex-col items-center">
+              <Droplets className="w-4 h-4 text-salmakis-blue mb-1" />
+              <span className="text-[10px] uppercase font-bold text-aegean-dark/40">Havuz</span>
+            </div>
+          </div>
+          <div className="text-right">
+            <span className="text-[10px] uppercase font-bold text-aegean-dark/40 block">Gecelik</span>
+            <span className="text-lg font-serif font-bold text-salmakis-blue">€{villa.priceLow} - €{villa.priceHigh}</span>
+          </div>
+        </div>
+
+        <Link
+          href={`/villas/${villa.slug}` as any}
+          className="w-full block py-3 text-center rounded-xl border border-aegean-dark/10 text-sm font-bold uppercase tracking-widest bg-aegean-dark text-white hover:bg-salmakis-blue transition-all duration-300 shadow-lg shadow-aegean-dark/10"
+        >
+          Detayları İncele
+        </Link>
+      </div>
+    </motion.div>
+  );
+}