performance

components/ContactContent.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
+import Image from 'next/image';
 import { Mail, MapPin, CheckCircle } from 'lucide-react';
 import { Button } from './Button';
 import { Counter } from './Counter';
@@ -41,9 +42,12 @@ export default function Contact() {
       {/* Hero Section */}
       <section className="relative min-h-[40vh] flex items-center pt-32 pb-20 overflow-hidden">
         <div className="absolute inset-0 z-0">
-          <div 
-            className="absolute inset-0 bg-cover bg-center"
-            style={{ backgroundImage: 'url("/media/laying/iStock-1282259999.jpg")' }}
+          <Image
+            src="/media/laying/contact-hero.jpg"
+            alt="Contact MB Grid Solutions"
+            fill
+            className="object-cover"
+            priority
           />
           <div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40" />
           <TechBackground />