42 lines
2.2 KiB
TypeScript
42 lines
2.2 KiB
TypeScript
export default function Destinations() {
|
|
const regions = [
|
|
{ name: 'BODRUM', image: 'https://images.unsplash.com/photo-1544650039-33827ca79f06?q=80&w=2070&auto=format&fit=crop' },
|
|
{ name: 'GÖCEK', image: 'https://images.unsplash.com/photo-1524231757912-21f4fe3a7200?q=80&w=2071&auto=format&fit=crop' },
|
|
{ name: 'GREEK ISLANDS', image: 'https://images.unsplash.com/photo-1533105079780-92b9be482077?q=80&w=2068&auto=format&fit=crop' }
|
|
];
|
|
|
|
return (
|
|
<section className="py-24 bg-white px-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="text-center mb-16">
|
|
<span className="text-gold luxury-text text-sm mb-4 block">The Journey</span>
|
|
<h2 className="text-midnight text-5xl mb-6">Unforgettable Destinations</h2>
|
|
<p className="text-gray-500 max-w-2xl mx-auto">
|
|
Explore the most exclusive bays and historical harbors of the Aegean and Mediterranean.
|
|
From the turquoise waters of Bodrum to the secluded islands of Greece.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 h-[600px]">
|
|
<div className="md:col-span-8 relative overflow-hidden group">
|
|
<img src={regions[0].image} className="w-full h-full object-cover smooth-transition group-hover:scale-105" alt={regions[0].name} />
|
|
<div className="absolute inset-0 bg-black/40 flex items-center justify-center">
|
|
<h3 className="text-white text-4xl tracking-widest font-serif">{regions[0].name}</h3>
|
|
</div>
|
|
</div>
|
|
<div className="md:col-span-4 grid grid-rows-2 gap-4">
|
|
{regions.slice(1).map((region) => (
|
|
<div key={region.name} className="relative overflow-hidden group">
|
|
<img src={region.image} className="w-full h-full object-cover smooth-transition group-hover:scale-105" alt={region.name} />
|
|
<div className="absolute inset-0 bg-black/30 flex items-center justify-center">
|
|
<h3 className="text-white text-2xl tracking-widest font-serif">{region.name}</h3>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|