67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
|
|
export default function FleetPreview() {
|
|
const featuredYachts = [
|
|
{
|
|
name: 'M/S MEIRA',
|
|
length: '55m',
|
|
guests: '12',
|
|
image: 'https://images.unsplash.com/photo-1569263979104-865ab7cd8d13?q=80&w=2074&auto=format&fit=crop',
|
|
href: '/fleet/meira'
|
|
},
|
|
{
|
|
name: 'M/Y PRINCESS MELDA',
|
|
length: '45m',
|
|
guests: '10',
|
|
image: 'https://images.unsplash.com/photo-1621275471769-e6aa344546d5?q=80&w=2073&auto=format&fit=crop',
|
|
href: '/fleet/princess-melda'
|
|
},
|
|
{
|
|
name: 'QUEEN OF SALMAKIS',
|
|
length: '40m',
|
|
guests: '18',
|
|
image: 'https://images.unsplash.com/photo-1605281317010-fe5ffe798156?q=80&w=2044&auto=format&fit=crop',
|
|
href: '/fleet/queen-of-salmakis'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className="py-24 bg-soft-grey px-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex justify-between items-end mb-16">
|
|
<div>
|
|
<span className="text-gold luxury-text text-sm mb-4 block">Our Collection</span>
|
|
<h2 className="text-midnight text-5xl">Featured Fleet</h2>
|
|
</div>
|
|
<Link href="/fleet" className="luxury-text text-sm border-b border-gold pb-1 hover:text-gold smooth-transition">
|
|
View All Yachts
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{featuredYachts.map((yacht) => (
|
|
<Link key={yacht.name} href={yacht.href} className="group overflow-hidden bg-white shadow-lg smooth-transition hover:-translate-y-2">
|
|
<div className="aspect-[4/5] relative overflow-hidden">
|
|
<img
|
|
src={yacht.image}
|
|
alt={yacht.name}
|
|
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors" />
|
|
<div className="absolute bottom-8 left-8 text-white">
|
|
<h3 className="text-2xl mb-2">{yacht.name}</h3>
|
|
<div className="flex gap-4 text-xs luxury-text opacity-80">
|
|
<span>{yacht.length}</span>
|
|
<span>{yacht.guests} Guests</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|