Add background image and improve Hero section layout

components/Home/Hero/Hero.tsx

@@ -3,13 +3,28 @@ import Image from "next/image";
 const Hero = () => {
     return (
         <div
-            className="relative w-full pt-[4vh] md:pt-[12vh] h-screen flex flex-col"
+            className="relative w-full pt-[4vh] md:pt-[12vh] h-screen flex flex-col overflow-hidden"
             style={{
                 backgroundColor: "var(--primary-bg)",
                 color: "var(--primary-text)",
             }}
         >
-            <div className="flex justify-center flex-col w-[90%] sm:w-[80%] h-full mx-auto">
+            {/* Background Image with Blur */}
+            <div className="absolute inset-0 z-0">
+                <Image
+                    src="/images/home_hero.jpg"
+                    alt="Rhein river aerial view"
+                    layout="fill"
+                    objectFit="cover"
+                    className="blur-md"
+                    priority
+                />
+                {/* Dark overlay for better text contrast */}
+                <div className="absolute inset-0 bg-black/40"/>
+            </div>
+
+            {/* 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>
@@ -23,21 +38,17 @@ const Hero = () => {
                             Wir entwickeln performante und zukunftssichere Software für deine Vision.
                         </p>
                     </div>
+
                     {/* Image Content */}
                     <div
                         data-aos="fade-up"
                         data-aos-delay="400"
                         className="hidden lg:block"
                     >
-                        <Image src="/images/hero.png" alt="hero" width={700} height={700}/>
+                        <Image src="/images/hero.png" alt="hero graphic" width={700} height={700}/>
                     </div>
                 </div>
             </div>
-
-            {/* Farbverlauf zum nächsten Bereich */}
-            {/*<div*/}
-            {/*    className="absolute bottom-0 left-0 w-full h-20 bg-gradient-to-b from-[var(--primary-bg)] to-[var(--secondary-bg)]"*/}
-            {/*/>*/}
         </div>
     );
 };