Add react-simple-typewriter and integrate in Hero component

- Added `react-simple-typewriter` dependency to project.
- Integrated a typewriter effect in the Hero component for dynamic text.

components/Home/Hero/Hero.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import Image from "next/image";
+import {Typewriter} from "react-simple-typewriter";
 
 const Hero = () => {
     return (
@@ -9,7 +12,7 @@ const Hero = () => {
                 color: "white",
             }}
         >
-            {/* Background Image with Blur */}
+            {/* Background Image */}
             <div className="absolute inset-0 z-0">
                 <Image
                     src="/images/home_hero.jpg"
@@ -19,37 +22,58 @@ const Hero = () => {
                     className="blur-md scale-105"
                     priority
                 />
-                {/* Dark overlay for better text contrast */}
                 <div className="absolute inset-0 bg-black/40"/>
             </div>
 
-            {/* Main content */}
+            {/* Main Content */}
             <div className="relative z-10 flex justify-center flex-col w-[90%] sm:w-[80%] h-full mx-auto">
                 <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12">
                     {/* Text Content */}
                     <div>
                         <h1
                             data-aos="fade-up"
-                            className="text-2xl sm:text-4xl md:text-5xl mt-6 mb-6 font-bold md:leading-[3rem] lg:leading-[3.5rem] text-white"
+                            className="text-3xl sm:text-4xl md:text-5xl mt-6 mb-6 font-bold text-white"
                         >
-                            Rhein Software Development
+                            Rhein-Software Development
                         </h1>
+
                         <p
                             data-aos="fade-up"
                             data-aos-delay="200"
-                            className="text-white"
+                            className="text-lg md:text-xl text-gray-400"
                         >
-                            Wir entwickeln performante und zukunftssichere Software für deine Vision.
+                            Wir bieten digitale Lösungen für dein Unternehmen.
+                        </p>
+
+                        <p
+                            data-aos="fade-up"
+                            data-aos-delay="400"
+                            className="mt-4 text-lg md:text-xl font-semibold text-white"
+                        >
+                            <Typewriter
+                                words={["Beratung", "Entwicklung", "Wartung", "Fehlerbehebung"]}
+                                loop={true}
+                                cursor
+                                cursorStyle="_"
+                                typeSpeed={60}
+                                deleteSpeed={40}
+                                delaySpeed={1500} // ⬅️ Delay before it starts typing the FIRST word
+                            />
                         </p>
                     </div>
 
-                    {/* Floating Image Content */}
+                    {/* Floating Image */}
                     <div
                         data-aos="fade-up"
                         data-aos-delay="400"
                         className="hidden lg:block animate-float"
                     >
-                        <Image src="/images/hero.png" alt="hero graphic" width={700} height={700}/>
+                        <Image
+                            src="/images/hero.png"
+                            alt="hero graphic"
+                            width={700}
+                            height={700}
+                        />
                     </div>
                 </div>
             </div>