refactor: update header and hero components for improved styling and layout

app/components/Hero.tsx

@@ -1,21 +1,49 @@
-import Link from "next/link";
+import Image from "next/image";
+import {Roboto} from "next/font/google";
+
+const roboto = Roboto({weight: "400", subsets: ["latin"]});
 
 export default function Hero() {
     return (
-        <div id="hero">
-            <section
-                id="hero"
-                className="text-center p-20 text-black"
-            >
-                <h1 className="text-5xl font-bold">Hi, I am Dennis</h1>
-                <p className="mt-4 text-xl">A passionate developer and student.</p>
-                <Link href="#projects">
-                    <button
-                        className="mt-6 inline-block px-6 py-2 bg-black text-black rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition">
-                        See My Work
-                    </button>
-                </Link>
-            </section>
+        <div className={roboto.className}>
+            <div id="hero"
+                 className="flex flex-col md:flex-row items-center justify-center pt-16 pb-16 px-6 text-gray-700">
+
+                {/* Left Section: Text */}
+                <div className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30
+                                backdrop-blur-lg rounded-2xl shadow-xl max-w-lg text-center">
+                    <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900">
+                        Hi, I’m Dennis
+                    </h1>
+                    <h2 className="mt-2 text-xl md:text-2xl font-semibold text-gray-700">
+                        Student & Software Engineer
+                    </h2>
+                    <h3 className="mt-1 text-lg md:text-xl text-gray-600">
+                        Based in Osnabrück, Germany
+                    </h3>
+
+                    <p className="mt-6 text-gray-800 text-lg leading-relaxed">
+                        Passionate about technology, coding, and solving real-world problems.
+                        I enjoy building innovative solutions and continuously expanding my knowledge.
+                    </p>
+
+                    <p className="mt-4 text-gray-700 text-base">
+                        Currently working on exciting projects that merge creativity with functionality.
+                        Always eager to learn and collaborate!
+                    </p>
+                </div>
+
+                {/* Right Section: Image */}
+                <div className="flex mt-8 md:mt-0 md:ml-12">
+                    <Image
+                        src="/images/me.jpg"
+                        alt="Image of Dennis"
+                        width={400}
+                        height={400}
+                        className="rounded-2xl shadow-lg shadow-gray-700 object-cover"
+                    />
+                </div>
+            </div>
         </div>
     );
 }