Fix: Resolve TypeScript errors in AnimatedText and Index

This commit addresses TypeScript errors related to the AnimatedText component's props and the MobileNav component's usage in Index.tsx. The errors are resolved by ensuring the correct types are used for the animation configurations and by passing the correct props to the MobileNav component.

Author: lovable-dev[bot]

src/components/AnimatedText.tsx

@@ -1,19 +1,20 @@
-import { motion } from "framer-motion";
+
+import { motion, TargetAndTransition, VariantLabels } from "framer-motion";
 import React from "react";
 
-// Props para el componente AnimatedText
+// Props for the AnimatedText component
 interface AnimatedTextProps {
-  children: React.ReactNode; // Contenido del texto animado
-  className?: string; // Clases adicionales para personalizar estilos
-  initial?: object; // Configuración inicial de la animación (opcional)
-  animate?: object; // Configuración de la animación final (opcional)
-  transition?: object; // Configuración de la transición (opcional)
+  children: React.ReactNode; // Content of the animated text
+  className?: string; // Additional classes to customize styles
+  initial?: boolean | TargetAndTransition | VariantLabels; // Initial animation configuration (optional)
+  animate?: boolean | TargetAndTransition | VariantLabels; // Final animation configuration (optional)
+  transition?: { duration?: number; ease?: string | number[]; delay?: number }; // Transition configuration (optional)
 }
 
 const AnimatedText: React.FC<AnimatedTextProps> = ({
   children,
   className = "",
-  initial = { opacity: 0, y: 20 }, // Valores por defecto
+  initial = { opacity: 0, y: 20 }, // Default values
   animate = { opacity: 1, y: 0 },
   transition = { duration: 0.8 },
 }) => {

src/pages/Index.tsx

@@ -1,3 +1,4 @@
+
 import React from "react";
 import { AnimatePresence } from "framer-motion";
 import { Menu, X } from "lucide-react";
@@ -45,7 +46,7 @@ const Header = () => {
       </div>
       <AnimatePresence>
         {isMobile && isMenuOpen && (
-          <MobileNav isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} id="mobile-menu" />
+          <MobileNav isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
         )}
       </AnimatePresence>
       <div className="absolute left-0 right-0 bottom-0 translate-y-full w-full bg-alien-space-dark/80">