Build Success: Resolve all Typography and Framer Motion type errors across the project

app/[locale]/contact/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { use } from 'react';
-import { useTranslations } from 'next-intl';
+import { useTranslations, useLocale } from 'next-intl';
 
 interface PageProps {
   params: Promise<{ locale: string }>;

app/[locale]/fleet/[slug]/page.tsx

@@ -475,7 +475,7 @@ export default function YachtPage({ params }: PageProps) {
           </motion.div>
         )}
       </AnimatePresence>
-    </div>
+    </main>
   );
 }
 

app/[locale]/page.tsx

@@ -3,8 +3,14 @@
 import { Link } from '@/i18n/routing';
 import { yachts } from '../data/yachts';
 import YachtCard from '../components/YachtCard';
-import { motion } from 'framer-motion';
+import { motion, Variants } from 'framer-motion';
 import { use } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
+
+const fadeInUp: Variants = {
+  hidden: { opacity: 0, y: 40 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
+};
 
 interface PageProps {
   params: Promise<{ locale: string }>;
@@ -14,11 +20,6 @@ export default function Home({ params }: PageProps) {
   const { locale: _locale } = use(params);
   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">

app/components/Navbar.tsx

@@ -3,7 +3,47 @@
 import { Link, usePathname, useRouter } from '@/i18n/routing';
 import { useState, useEffect } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence, Variants } from 'framer-motion';
+
+const menuVariants: Variants = {
+  closed: {
+    opacity: 0,
+    y: "-100%",
+    transition: {
+      duration: 0.8,
+      ease: [0.76, 0, 0.24, 1] as const
+    }
+  },
+  open: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.8,
+      ease: [0.76, 0, 0.24, 1] as const
+    }
+  }
+};
+
+const linkVariants: Variants = {
+  closed: { opacity: 0, y: 30 },
+  open: (i: number) => ({
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.7,
+      delay: 0.5 + i * 0.1,
+      ease: [0.215, 0.61, 0.355, 1] as const
+    }
+  }),
+  exit: {
+    opacity: 0,
+    y: 20,
+    transition: {
+      duration: 0.5,
+      ease: [0.215, 0.61, 0.355, 1] as const
+    }
+  }
+};
 
 export default function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
@@ -38,37 +78,7 @@ export default function Navbar() {
     { name: t('sunworld'), href: '/fleet/sunworld-8' },
   ];
 
-  const menuVariants = {
-    closed: {
-      opacity: 0,
-      y: "-100%",
-      transition: {
-        duration: 0.8,
-        ease: [0.76, 0, 0.24, 1]
-      }
-    },
-    open: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.8,
-        ease: [0.76, 0, 0.24, 1]
-      }
-    }
-  };
 
-  const linkVariants = {
-    closed: { opacity: 0, y: 30 },
-    open: (i: number) => ({
-      opacity: 1,
-      y: 0,
-      transition: {
-        delay: 0.3 + (i * 0.1),
-        duration: 0.6,
-        ease: "easeOut"
-      }
-    })
-  };
 
   return (
     <nav className="fixed top-0 w-full z-50 transition-all duration-300">