Initial commit: Salmakis Yachting Portal with Cloudinary & i18n

app/[locale]/page.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { Link } from '@/i18n/routing';
+import { yachts } from '../data/yachts';
+import YachtCard from '../components/YachtCard';
+import { motion } from 'framer-motion';
+import { useTranslations } from 'next-intl';
+
+export default function Home() {
+  const t = useTranslations('Home');
+
+  const fadeInUp = {
+    hidden: { opacity: 0, y: 40 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
+  };
+
+  return (
+    <>
+      <header className="relative h-screen w-full overflow-hidden">
+        {/* YouTube Video Background */}
+        <motion.div 
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1.5 }}
+          className="absolute inset-0 z-0 pointer-events-none overflow-hidden bg-black"
+        >
+          <iframe
+            className="absolute top-1/2 left-1/2 w-[115vw] h-[115vh] min-w-[177.77vh] min-h-[56.25vw] -translate-x-1/2 -translate-y-1/2"
+            src="https://www.youtube.com/embed/0k4s7X8EgYI?autoplay=1&mute=1&controls=0&loop=1&playlist=0k4s7X8EgYI&showinfo=0&rel=0&modestbranding=1&playsinline=1&enablejsapi=1&vq=hd1080"
+            allow="autoplay; encrypted-media"
+            frameBorder="0"
+          ></iframe>
+          {/* Elegant Overlay */}
+          <div className="absolute inset-0 bg-gradient-to-b from-primary/60 via-primary/20 to-primary/80"></div>
+          <div className="absolute inset-0 bg-black/10 backdrop-blur-[1px]"></div>
+        </motion.div>
+        <div className="relative h-full flex flex-col items-center justify-center text-center px-6">
+          {/* Text overlays removed for cinematic look */}
+        </div>
+      </header>
+
+      {/* Fiziksel Boşluk Ayırıcı - Üst */}
+      <div className="h-24 md:h-32"></div>
+
+      <section className="py-24 px-6 bg-surface overflow-hidden relative flex flex-col items-center justify-center text-center">
+        {/* Decorative Background Element */}
+        <motion.div 
+          initial={{ opacity: 0, scale: 0.9 }}
+          whileInView={{ opacity: 0.03, scale: 1 }}
+          transition={{ duration: 1.5 }}
+          viewport={{ once: true }}
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none select-none w-full text-center"
+        >
+          <span className="font-headline text-[15rem] md:text-[24rem] font-bold leading-none tracking-tighter text-primary">1980</span>
+        </motion.div>
+
+        <motion.div 
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+          variants={{
+            visible: { transition: { staggerChildren: 0.2 } }
+          }}
+          className="max-w-4xl mx-auto relative z-10 flex flex-col items-center"
+        >
+          <motion.div variants={fadeInUp} className="mb-8 flex flex-col items-center gap-4">
+            <span className="font-label text-xs tracking-[0.4em] text-secondary uppercase">{t('established')}</span>
+            <div className="h-px w-12 bg-secondary/40"></div>
+          </motion.div>
+
+          <motion.div variants={fadeInUp}>
+            <h2 className="font-headline text-4xl md:text-7xl text-primary leading-[1.1] mb-16 tracking-tight">
+              {t('title_main')} <br />
+              <span className="text-secondary italic">{t('title_italic')}</span>
+            </h2>
+          </motion.div>
+
+          <motion.div variants={fadeInUp}>
+            <p className="font-body text-on-surface-variant text-lg md:text-xl leading-[2] font-light max-w-3xl mx-auto text-justify [text-align-last:center]">
+              {t('description')}
+            </p>
+          </motion.div>
+        </motion.div>
+      </section>
+
+      {/* Fiziksel Boşluk Ayırıcı - Alt */}
+      <div className="h-24 md:h-32"></div>
+
+      {/* Fleet Section */}
+      <section className="pb-48 px-6 md:px-12 bg-white flex flex-col items-center">
+        <div className="w-full max-w-[1440px] mx-auto flex flex-col items-center">
+
+          {/* Section Header */}
+          <motion.div 
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="flex flex-col items-center text-center"
+          >
+            <span className="font-label text-xs tracking-[0.4em] text-secondary uppercase block mb-4">Our Selection</span>
+            <h2 className="font-headline text-4xl md:text-6xl text-primary leading-tight uppercase">
+              {t('featured_fleet')} <span className="italic">{t('featured_fleet_italic')}</span>
+            </h2>
+          </motion.div>
+
+          {/* Kesin Boşluk Ayırıcı */}
+          <div className="h-16 md:h-24"></div>
+
+          {/* Cards Grid (3 on top, 2 centered on bottom) */}
+          <motion.div 
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: "-100px" }}
+            variants={{
+              visible: { transition: { staggerChildren: 0.15 } }
+            }}
+            className="flex flex-wrap justify-center gap-x-12 gap-y-24 w-full"
+          >
+            {yachts.map((yacht) => (
+              <motion.div 
+                key={yacht.slug} 
+                variants={fadeInUp}
+                className="w-full md:w-[calc(50%-3rem)] lg:w-[calc(33.333%-3rem)]"
+              >
+                <YachtCard yacht={yacht} />
+              </motion.div>
+            ))}
+          </motion.div>
+
+        </div>
+      </section>
+
+      {/* Ekstra Alt Boşluk */}
+      <div className="h-32 md:h-48"></div>
+
+    </>
+  );
+}
+
+