77 lines
3.2 KiB
TypeScript
77 lines
3.2 KiB
TypeScript
'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>
|
||
);
|
||
}
|