From c44c713925dceec0b28762322d2e18e8d2962051 Mon Sep 17 00:00:00 2001
From: Thatsaphorn Atchariyaphap <thatsaphorn@outlook.de>
Date: Sun, 6 Apr 2025 19:18:04 +0200
Subject: [PATCH] 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 | 42 +++++++++++++++++++++++++++--------
 package-lock.json             | 16 ++++++++++++-
 package.json                  |  3 ++-
 3 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/components/Home/Hero/Hero.tsx b/components/Home/Hero/Hero.tsx
index ef4c641..6cda552 100644
--- a/components/Home/Hero/Hero.tsx
+++ b/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>
diff --git a/package-lock.json b/package-lock.json
index 46a2158..1023b89 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
         "next": "15.1.7",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "react-icons": "^5.4.0"
+        "react-icons": "^5.4.0",
+        "react-simple-typewriter": "^5.0.1"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -5530,6 +5531,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-simple-typewriter": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-simple-typewriter/-/react-simple-typewriter-5.0.1.tgz",
+      "integrity": "sha512-vA5HkABwJKL/DJ4RshSlY/igdr+FiVY4MLsSQYJX6FZG/f1/VwN4y1i3mPXRyfaswrvI8xii1kOVe1dYtO2Row==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 91043a7..379afc6 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "next": "15.1.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-icons": "^5.4.0"
+    "react-icons": "^5.4.0",
+    "react-simple-typewriter": "^5.0.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",