55 lines
2.4 KiB
TypeScript
55 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import { Link } from '@/i18n/routing';
|
|
import { motion } from 'framer-motion';
|
|
import { ArrowRight } from 'lucide-react';
|
|
|
|
interface TourCardProps {
|
|
item: {
|
|
id: number;
|
|
slug: string;
|
|
title: string;
|
|
image: string;
|
|
price: string;
|
|
};
|
|
basePath: string; // e.g. "/turlar", "/aktiviteler"
|
|
index?: number;
|
|
}
|
|
|
|
export function TourCard({ item, basePath, index = 0 }: TourCardProps) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-50px" }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
className="bg-white/80 backdrop-blur-md rounded-3xl overflow-hidden shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgb(0,0,0,0.08)] transition-all duration-500 border border-white/50 flex flex-col group"
|
|
>
|
|
<div className="relative aspect-[4/3] w-full overflow-hidden">
|
|
<Image
|
|
src={item.image}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover group-hover:scale-110 transition-transform duration-700 ease-out"
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
|
<div className="absolute top-4 right-4 bg-white/90 backdrop-blur-md px-4 py-1.5 rounded-full text-sm font-extrabold text-vibrantorange-500 shadow-lg transform group-hover:scale-105 transition-transform duration-300">
|
|
{item.price}
|
|
</div>
|
|
</div>
|
|
<div className="p-6 flex flex-col flex-1 relative bg-gradient-to-b from-white/50 to-white">
|
|
<h3 className="font-bold text-xl mb-3 text-deepblue-900 line-clamp-2 flex-1 group-hover:text-turquoise-500 transition-colors">{item.title}</h3>
|
|
<Link
|
|
href={`${basePath}/${item.slug}`}
|
|
className="mt-4 flex items-center justify-center gap-2 w-full py-3 bg-gradient-to-r from-turquoise-500 to-deepblue-900 hover:from-deepblue-900 hover:to-turquoise-500 text-white font-semibold rounded-2xl transition-all duration-500 shadow-md hover:shadow-xl transform hover:-translate-y-1"
|
|
>
|
|
<span>Hemen İncele</span>
|
|
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|