Added animation to eagle component in home page

src/components/home/Eagle.tsx

@@ -1,13 +1,39 @@
+"use client";
 import Image from "next/image";
 import EagleImg from "@/../public/home/Eagle.webp";
 import ShiftedLineTitle from "@/components/ShiftedLineTitle";
 import LearnMoreButton from "./LearnMoreButton";
+import { motion } from "motion/react";
+
+const animationRight = {
+  hidden: { opacity: 0, x: -50 },
+  show: {
+    opacity: 1,
+    x: 0,
+  },
+};
+const animationLeft = {
+  hidden: { opacity: 0, x: 50 },
+  show: {
+    opacity: 1,
+    x: 0,
+  },
+};
+const transition = {
+  duration: 0.7,
+};
 
 const Eagle = () => {
   return (
     <div className="mt-[18%] flex w-full flex-col items-center justify-between text-white md:mt-[12%] lg:flex-row lg:pl-[8%]">
       {/* left side */}
-      <div className="mb-7 w-[90%] lg:mb-0 lg:w-2/6">
+      <motion.div
+        className="mb-7 w-[90%] lg:mb-0 lg:w-2/6"
+        variants={animationRight}
+        transition={{ ...transition, delay: 0.2 }}
+        initial="hidden"
+        whileInView="show"
+      >
         <div className="mb-[7%] lg:mb-[12%]">
           <ShiftedLineTitle
             title="Eagle"
@@ -27,18 +53,24 @@ const Eagle = () => {
           </p>
           <LearnMoreButton color="bg-aviatr-blue-300" link="/projects" />
         </div>
-      </div>
+      </motion.div>
 
       {/* right side */}
-      <div className="clip-slope relative flex overflow-hidden lg:h-[800px]">
+      <motion.div
+        className="clip-slope relative flex overflow-hidden lg:h-[800px]"
+        variants={animationLeft}
+        transition={{ ...transition, delay: 0.2 }}
+        initial="hidden"
+        whileInView="show"
+      >
         <Image
           src={EagleImg}
           alt="Eagle"
           width={914}
           height={800}
           className="object-cover"
         />
-      </div>
+      </motion.div>
     </div>
   );
 };

src/components/home/LearnMoreButton.tsx

@@ -1,13 +1,19 @@
+"use client";
 import Link from "next/link";
 import { MoveRight } from "lucide-react";
+import { motion } from "motion/react";
 
 const LearnMoreButton = ({ color, link }: { color: string; link: string }) => {
   return (
     <div className="flex items-center gap-2 md:gap-3">
       <Link href={`${link}`}>
-        <p className="mr-2 whitespace-nowrap font-metrophobic text-xl text-white hover:underline md:text-2xl">
+        <motion.p
+          className="mr-2 whitespace-nowrap font-metrophobic text-xl text-white hover:underline md:text-2xl"
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+        >
           LEARN MORE
-        </p>
+        </motion.p>
       </Link>
       <div
         className={`flex min-h-7 min-w-7 items-center justify-center rounded-full ${color}`}