From d38195bed9bc814d307589e0de2d9cab50b30f95 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Fri, 26 Dec 2025 12:41:16 -0500
Subject: [PATCH] Fix hero image using Next.js Image component

---
 src/app/page.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2fcb4b8..fcca69d 100644
--- a/src/app/page.tsx
+++ b/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 */}