performance

components/AboutContent.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import Image from 'next/image';
 import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck } from 'lucide-react';
 import { Reveal } from './Reveal';
 import { TechBackground } from './TechBackground';
@@ -13,9 +14,12 @@ export default function About() {
       {/* Hero Section */}
       <section className="relative min-h-[60vh] 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/drums/iStock-487538226 (1).jpg")' }}
+          <Image
+            src="/media/drums/about-hero.jpg"
+            alt="About 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 />