94 lines
4.5 KiB
TypeScript
94 lines
4.5 KiB
TypeScript
import { CldImage } from 'next-cloudinary';
|
|
import Link from 'next/link';
|
|
import { Yacht } from '../data/yachts';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
interface YachtCardProps {
|
|
yacht: Yacht;
|
|
}
|
|
|
|
export default function YachtCard({ yacht }: YachtCardProps) {
|
|
const t = useTranslations('YachtCard');
|
|
return (
|
|
<div className="flex flex-col group cursor-pointer">
|
|
{/* Image Container */}
|
|
<div className="relative aspect-[16/10] overflow-hidden mb-6">
|
|
<CldImage
|
|
src={yacht.heroImage}
|
|
alt={yacht.name}
|
|
fill
|
|
crop="fill"
|
|
gravity="auto"
|
|
className="object-cover transition-transform duration-700 group-hover:scale-105"
|
|
/>
|
|
|
|
{/* Award Badge */}
|
|
{yacht.award && (
|
|
<div className="absolute top-4 left-4 z-10 w-24 h-24 border border-white/40 p-2 flex flex-col items-center justify-center text-center backdrop-blur-sm bg-black/10">
|
|
<span className="text-[8px] font-bold text-white leading-tight uppercase tracking-tighter">
|
|
{yacht.award}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Top Right Heart Icon */}
|
|
<div className="absolute top-4 right-4 z-10 text-white hover:text-secondary transition-colors">
|
|
<span className="material-symbols-outlined !text-xl">favorite</span>
|
|
</div>
|
|
|
|
{/* Bottom Right Icons */}
|
|
<div className="absolute bottom-4 right-4 z-10 flex flex-col gap-2">
|
|
<div className="w-8 h-8 rounded-full border border-white/60 flex items-center justify-center text-white backdrop-blur-md bg-black/20 hover:bg-secondary/40 transition-colors">
|
|
<span className="material-symbols-outlined !text-base">photo_camera</span>
|
|
</div>
|
|
<div className="w-8 h-8 rounded-full border border-white/60 flex items-center justify-center text-white backdrop-blur-md bg-black/20 hover:bg-secondary/40 transition-colors">
|
|
<span className="material-symbols-outlined !text-base">play_arrow</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Brand Text Overlay */}
|
|
<div className="absolute bottom-4 left-4 z-10">
|
|
<span className="font-headline text-lg tracking-[0.2em] text-white uppercase opacity-80">SALMAKIS</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Info Section */}
|
|
<div className="flex flex-col items-center text-center px-4">
|
|
<h3 className="font-headline text-2xl text-primary tracking-widest uppercase mb-1">
|
|
{yacht.name}
|
|
</h3>
|
|
|
|
<p className="font-label text-[10px] tracking-[0.15em] text-on-surface-variant uppercase mb-6">
|
|
{yacht.builder} — {yacht.year} {yacht.refitYear && `(${yacht.refitYear})`}
|
|
</p>
|
|
|
|
{/* Spec Grid */}
|
|
<div className="grid grid-cols-4 w-full border-t border-outline-variant/30 py-6 mb-2">
|
|
<div className="flex flex-col items-center border-r border-outline-variant/30">
|
|
<span className="font-body text-xs text-primary font-medium">{yacht.length} <span className="text-[10px] text-on-surface-variant">{yacht.lengthFt}</span></span>
|
|
<span className="font-label text-[9px] tracking-[0.1em] text-on-surface-variant uppercase mt-1">{t('length')}</span>
|
|
</div>
|
|
<div className="flex flex-col items-center border-r border-outline-variant/30">
|
|
<span className="font-body text-xs text-primary font-medium">{yacht.guests}</span>
|
|
<span className="font-label text-[9px] tracking-[0.1em] text-on-surface-variant uppercase mt-1">{t('guests')}</span>
|
|
</div>
|
|
<div className="flex flex-col items-center border-r border-outline-variant/30">
|
|
<span className="font-body text-xs text-primary font-medium">{yacht.cabins}</span>
|
|
<span className="font-label text-[9px] tracking-[0.1em] text-on-surface-variant uppercase mt-1">{t('cabins')}</span>
|
|
</div>
|
|
<div className="flex flex-col items-center">
|
|
<span className="font-body text-xs text-primary font-medium">{yacht.crew}</span>
|
|
<span className="font-label text-[9px] tracking-[0.1em] text-on-surface-variant uppercase mt-1">{t('crew')}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full bg-surface-container-low py-3 text-center">
|
|
<p className="font-label text-[10px] tracking-widest text-on-surface-variant uppercase gap-1 flex items-center justify-center">
|
|
{t('from')} <span className="font-body text-sm font-bold text-primary px-1">{yacht.weeklyPrice}</span> {t('p_week')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|