Initial commit: Salmakis Yachting Portal with Cloudinary & i18n

app/components/FleetPreview.tsx

@@ -0,0 +1,66 @@
+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>
+  );
+}