Merge pull request RamakrushnaBiswal#60 from vishnuprasad2004/typing-…

…animation

feat: added the typing animation using gsap

frontend/package.json

@@ -16,12 +16,14 @@
     "axios": "^1.7.7",
     "clsx": "^2.1.1",
     "framer-motion": "^11.5.6",
+    "gsap": "^3.12.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-intersection-observer": "^9.13.0",
     "react-pageflip": "^2.0.3",
     "react-router-dom": "^6.24.1",
+    "split-type": "^0.3.4",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.4"
   },

frontend/src/components/ui/Landing.jsx

@@ -1,15 +1,43 @@
 import heropic from "../../assets/landing/hero pic.jpg";
 import coffecup from "../../assets/landing/coffecup.png";
+import { useEffect, useRef } from "react";
+import SplitType from "split-type";
+import gsap from "gsap";
 
 
 export default function Landing() {
+
+  const textRef = useRef(null);
+
+  useEffect(() => {
+    const splitText = new SplitType(textRef.current, { types: "chars, words" })
+    const tl = gsap.timeline({ repeat: -1, repeatDelay: 1 });
+
+    // Set initial opacity to 0 for all characters
+    gsap.set(splitText.chars, { opacity: 0 });
+
+    tl.to(splitText.chars, {
+      opacity: 1,
+      duration: 0.1,
+      stagger: 0.1,
+      ease: 'power1.inOut',
+    })
+    .to(splitText.chars, {
+      opacity: 0,
+      duration: 0.1,
+      stagger: 0.1,
+      ease: 'power1.inOut',
+      delay: 1
+    });
+  });
+
   return (
     <div>
       <section className="relative pb-24 h-screen-dvh w-screen bg-cover bg-center overflow-hidden">
         <div className="flex-col md:flex pt-20 z-1">
           {/* Text Content */}
           <div className="w-screen p-4 md:w-1/2 mb-6 md:mb-0 text-center md:text-left z-10 pt-14">
-            <h1 className="text-6xl md:text-9xl font-bold">
+            <h1 className="text-6xl md:text-9xl font-bold ml-4" ref={textRef}>
               A unique café experience awaits you
             </h1>
           </div>