Fix hero image using Next.js Image component

src/app/page.tsx

@@ -124,9 +124,12 @@ function Hero() {
   return (
     <section className="relative min-h-screen flex items-center justify-center">
       {/* Background Image */}
-      <div
-        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
-        style={{ backgroundImage: "url('/dandelion-hero.png')" }}
+      <Image
+        src="/dandelion-hero.png"
+        alt="Dandelion meadow in golden sunlight"
+        fill
+        priority
+        className="object-cover"
       />
 
       {/* Overlay for text readability */}