Landing Page Animation

package.json

@@ -15,7 +15,7 @@
     "@tailwindcss/postcss": "^4.1.11",
     "@tanstack/react-query": "5.69.0",
     "lucide-react": "0.484.0",
-    "motion": "^12.11.3",
+    "motion": "^12.23.12",
     "next": "^13.5.11",
     "react": "18.2.0",
     "react-countup": "^6.5.3",

src/components/home/Landing.tsx

@@ -1,21 +1,32 @@
+"use client";
+import { motion } from "motion/react";
 import Image from "next/image";
 import landingPage from "@/public/home/WCHLanding.webp";
 
 const Landing = () => {
   return (
-    <div className="relative h-screen w-full">
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 1, ease: "easeOut", type: "tween" }}
+      className="relative h-screen w-full overflow-hidden"
+    >
       <Image
         src={landingPage}
-        alt="Landing Image"
-        layout="fill"
-        objectFit="cover"
+        alt="Landing Background"
+        fill
+        style={{ objectFit: "cover" }}
+        priority
       />
-      <div className="absolute flex h-full w-full items-center justify-center">
-        <div className="flex h-1/3 w-1/3 place-items-center justify-center border-b-4 border-ula-yellow-primary text-center text-4xl font-bold text-white xl:text-6xl">
+
+      <div className="relative z-10 mx-auto flex h-full max-w-lg flex-col items-center justify-center px-4 text-center">
+        <div className="text-5xl font-bold leading-snug tracking-wide text-white">
           UCR CSE's Undergraduate Learning Assistants
         </div>
+        <div className="mt-6 h-1 w-3/4 bg-ula-yellow-primary"></div>
       </div>
-    </div>
+    </motion.div>
   );
 };
 export default Landing;