fix the herosection image

src/components/home/Hero.tsx

@@ -27,10 +27,8 @@ const QUICK_LINKS = [
 export function Hero() {
   return (
     <div className="hero">
-      
       {/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
       <div className="hero-dark-panel select-none pointer-events-none">
-        
         {/* Subtle Background Dot Texture (Minimal, barely visible) */}
         <div className="hero-map-layer select-none">
           <Image
@@ -51,7 +49,13 @@ export function Hero() {
           xmlns="http://www.w3.org/2000/svg"
         >
           <defs>
-            <filter id="heroRouteGlow" x="-50%" y="-50%" width="200%" height="200%">
+            <filter
+              id="heroRouteGlow"
+              x="-50%"
+              y="-50%"
+              width="200%"
+              height="200%"
+            >
               <feGaussianBlur stdDeviation="3" result="blur" />
               <feMerge>
                 <feMergeNode in="blur" />
@@ -60,10 +64,22 @@ export function Hero() {
             </filter>
           </defs>
           {/* Minimal glow nodes - only 2 small ones at top */}
-          <circle cx="140" cy="100" r="5" className="fill-[#bd34fe] opacity-20 animate-pulse" filter="url(#heroRouteGlow)" />
+          <circle
+            cx="140"
+            cy="100"
+            r="5"
+            className="fill-[#bd34fe] opacity-20 animate-pulse"
+            filter="url(#heroRouteGlow)"
+          />
           <circle cx="140" cy="100" r="1.5" className="fill-white" />
 
-          <circle cx="300" cy="80" r="5" className="fill-[#bd34fe] opacity-20 animate-pulse" filter="url(#heroRouteGlow)" />
+          <circle
+            cx="300"
+            cy="80"
+            r="5"
+            className="fill-[#bd34fe] opacity-20 animate-pulse"
+            filter="url(#heroRouteGlow)"
+          />
           <circle cx="300" cy="80" r="1.5" className="fill-white" />
 
           {/* Only 2 very thin route lines at top - staying clear of text area */}
@@ -93,21 +109,24 @@ export function Hero() {
 
       {/* ─── Main Content Wrapper ─── */}
       <div className="hero-stage relative w-full flex flex-col z-10 md:justify-center md:items-start">
-        
         {/* Left Column: Text & Search Content */}
         <div className="hero-content text-white select-none">
           <span className="inline-block text-label-sm text-brand-accent font-black tracking-widest uppercase mb-4 bg-brand-accent/10 px-4 py-1.5 rounded-full border border-brand-accent/20">
             Express Services
           </span>
-          
+
           <h1 className="text-5xl lg:text-[82px] font-display font-black leading-[0.98] tracking-tight mb-7">
             Express
             <br />
-            <span className="text-brand-accent drop-shadow-md">Neighborhood</span>
+            <span className="text-brand-accent drop-shadow-md">
+              Neighborhood
+            </span>
           </h1>
 
           <p className="text-body-lg md:text-[20px] md:leading-8 text-white/80 mb-11 leading-relaxed max-w-2xl">
-            Get groceries, hot meals, daily essentials, and local professional services delivered from trusted partners within <span className="text-brand-accent font-bold">25-30 minutes</span>.
+            Get groceries, hot meals, daily essentials, and local professional
+            services delivered from trusted partners within{" "}
+            <span className="text-brand-accent font-bold">25-30 minutes</span>.
           </p>
 
           {/* Search Input Bar */}
@@ -159,7 +178,6 @@ export function Hero() {
             />
           </div>
         </div>
-
       </div>
 
       {/* Overlapping Quick Category Links (Anchored at the bottom edge) */}