Front Text unpdate!

Author: Deadcoder001

Ashif/src/components/hero.jsx

@@ -2,13 +2,14 @@ import React from 'react';
 import Spline from '@splinetool/react-spline';
 import { ArrowRight } from 'lucide-react';
 import RotatingText from './RotatingText';
-import { SparklesText } from "@/components/ui/sparkles-text";
+import { WordRotate } from "@/components/ui/word-rotate";
 
 /**
  * A modern, minimal hero section component.
  */
 export default function Hero() {
   const skills = ['UI/UX Designer', 'Frontend Developer', 'Backend Developer', 'Creative Coder'];
+  const greetings = ["Hello", "Hola", "Ciao", "مرحبا"];
 
   return (
     <section className="relative w-full h-screen overflow-hidden">
@@ -24,8 +25,9 @@ export default function Hero() {
       {/* Content is aligned to the center */}
       <div className="relative z-20 flex items-center justify-center w-full h-full p-8 text-center bg-black/20 pointer-events-none sm:p-16 md:p-24">
         <div className="max-w-md pointer-events-auto">
-          <h1 className="font-pixel text-5xl font-bold text-white whitespace-nowrap md:text-7xl lg:text-8xl [text-shadow:_0_3px_5px_rgb(0_0_0_/_40%)]">
-            <SparklesText>Hello, I'm</SparklesText>
+          <h1 className="font-pixel flex items-center justify-center gap-x-2 text-5xl font-bold text-white md:text-7xl lg:text-8xl [text-shadow:_0_3px_5px_rgb(0_0_0_/_40%)]">
+            <WordRotate words={greetings} />
+            {", I'm"}
           </h1>
 
           {/* Rotating Text for Skills */}

Ashif/src/components/ui/word-rotate.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react"
+import { AnimatePresence, motion, MotionProps } from "motion/react"
+
+import { cn } from "@/lib/utils"
+
+interface WordRotateProps {
+  words: string[]
+  duration?: number
+  motionProps?: MotionProps
+  className?: string
+}
+
+export function WordRotate({
+  words,
+  duration = 2500,
+  motionProps = {
+    initial: { opacity: 0, y: -50 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 50 },
+    transition: { duration: 0.25, ease: "easeOut" },
+  },
+  className,
+}: WordRotateProps) {
+  const [index, setIndex] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIndex((prevIndex) => (prevIndex + 1) % words.length)
+    }, duration)
+
+    // Clean up interval on unmount
+    return () => clearInterval(interval)
+  }, [words, duration])
+
+  return (
+    <div className="overflow-hidden py-2">
+      <AnimatePresence mode="wait">
+        <motion.h1
+          key={words[index]}
+          className={cn(className)}
+          {...motionProps}
+        >
+          {words[index]}
+        </motion.h1>
+      </AnimatePresence>
+    </div>
+  )
+}