update image and about section

src/components/sections/EVSection.tsx

@@ -325,7 +325,7 @@ function DashboardPanel({
 }
 
 export default function EVSection({
-  bannerImage = "/images/bg-header-5.png",
+  bannerImage = "/images/bg-header-5.webp",
   cardNumber = "",
   cardTitle = "EV Logistics",
   cardSubtitle = "Cleaner miles, lower costs",
@@ -333,7 +333,7 @@ export default function EVSection({
   titleLead = "BUILT FOR ELECTRIC. ",
   titleAccent = "NOT ADAPTED.",
   features = DEFAULT_FEATURES,
-  image = "/images/premium-ev-van.png",
+  image = "/images/premium-ev-van.webp",
   imageAlt = "DoorMile electric delivery van",
   badges = DEFAULT_BADGES,
   stats = DEFAULT_STATS,
@@ -539,12 +539,12 @@ export default function EVSection({
                (fit-content), so it stays centred with no side bands. The cap is
                kept below the dashboard height so the image never inflates the row.
                Scoped to the non-scene wrapper; desktop only, mobile untouched. */
-            .evnd__grid--cards .evnd__imgwrap:not(.evnd__imgwrap--media) {
+            .evnd__grid--cards .evnd__imgwrap:not(.evnd__imgwrap--media):not(.evnd__imgwrap--video) {
                 width: fit-content;
                 max-width: 100%;
                 margin-inline: auto;
             }
-            .evnd__grid--cards .evnd__imgwrap:not(.evnd__imgwrap--media) .evnd__img {
+            .evnd__grid--cards .evnd__imgwrap:not(.evnd__imgwrap--media):not(.evnd__imgwrap--video) .evnd__img {
                 width: auto;
                 height: auto;
                 max-height: clamp(520px, 46vw, 670px);
@@ -552,6 +552,19 @@ export default function EVSection({
             }
         }
 
+        @media (min-width: 1200px) {
+            .evnd__grid--cards .evnd__imgwrap--video {
+                width: 100%;
+                height: 100%;
+                min-height: 100%;
+            }
+            .evnd__grid--cards .evnd__imgwrap--video .evnd__video {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        }
+
         .evnd__left {
             display: flex;
             flex-direction: column;
@@ -627,6 +640,12 @@ export default function EVSection({
             object-fit: cover;
             transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
         }
+        .evnd__video {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
         .evnd__imgwrap:hover .evnd__img {
             transform: scale(1.03);
         }
@@ -1239,10 +1258,21 @@ export default function EVSection({
                 <div className="evnd__media">
                   <div className="evnd__glow" />
                   <div
-                    className={`evnd__imgwrap${mediaSlot ? " evnd__imgwrap--media" : ""}`}
+                    className={`evnd__imgwrap${mediaSlot ? " evnd__imgwrap--media" : ""}${image.endsWith(".mp4") ? " evnd__imgwrap--video" : ""}`}
                   >
                     {mediaSlot ? (
                       mediaSlot
+                    ) : image.endsWith(".mp4") ? (
+                      <video
+                        className="evnd__video"
+                        autoPlay
+                        muted
+                        loop
+                        playsInline
+                        aria-label={imageAlt}
+                      >
+                        <source src={image} type="video/mp4" />
+                      </video>
                     ) : (
                       /* eslint-disable-next-line @next/next/no-img-element */
                       <img