update intial page

components/ShowCase.tsx

@@ -54,6 +54,8 @@ export function ShowCase({
 
   return (
     <section className="relative min-h-screen  pt-20 pb-20">
+
+      {/* background image */}
       <div className="absolute -z-50 top-0 left-0 h-full w-full">
         <Image
           src="/images/hero1.jpg"
@@ -63,6 +65,7 @@ export function ShowCase({
         />
       </div>
       <div className="absolute w-full h-full top-0 left-0 bg-black opacity-25 -z-40" />
+
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
           {/* Left Content */}
@@ -113,7 +116,7 @@ export function ShowCase({
                     src={images[currentImageIndex]}
                     alt={`Pump ${currentImageIndex + 1}`}
                     fill
-                    className="object-cover"
+                    className="object-contain"
                     priority={currentImageIndex === 0}
                     onMouseEnter={() => setAutoPlay(false)}
                     onMouseLeave={() => setAutoPlay(true)}