Almost updated

components/homes/marketing-consulting/Services.jsx

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { services3 } from "@/data/services";
+
 export default function Services() {
   const [activeService, setActiveService] = useState(1);
   return (
@@ -22,38 +23,50 @@ export default function Services() {
           </div>
           <div className="right">
             <p className="text-body-1 text_mono-gray-7 split-text split-lines-transform">
-              Explore our range of expert services designed to <br />
-              elevate your business. From strategic planning to <br />
+              Explore our range of expert services designed to
+              elevate your business. From strategic planning to
               execution, we deliver solutions.
             </p>
           </div>
         </div>
         <div className="top mb_48">
-          <div className="navigation-bar overflow-x-auto">
+          <div className="navigation-bar">
             <div
               className={`nav-item  ${activeService == 1 ? "is-active" : ""} `}
               onClick={() => setActiveService(1)}
             >
-              Market Research &amp; Analysis
+              Data Entry Services
             </div>
             <div
               className={`nav-item  ${activeService == 2 ? "is-active" : ""} `}
               onClick={() => setActiveService(2)}
             >
-              Brand Development &amp; Positioning
+              Data Conversion
             </div>
             <div
               className={`nav-item  ${activeService == 3 ? "is-active" : ""} `}
               onClick={() => setActiveService(3)}
             >
-              Digital Marketing
+              Data Processing
+            </div>
+            <div
+              className={`nav-item  ${activeService == 4 ? "is-active" : ""} `}
+              onClick={() => setActiveService(4)}
+            >
+              Receipt Data Entry Services
+            </div>
+            <div
+              className={`nav-item  ${activeService == 5 ? "is-active" : ""} `}
+              onClick={() => setActiveService(5)}
+            >
+              Logistics Data Entry Services
             </div>
           </div>
           <div className="navigation-arrows">
             <div
               className="arrow"
               onClick={() =>
-                setActiveService((pre) => (pre == 1 ? 3 : pre - 1))
+                setActiveService((pre) => (pre == 1 ? 5 : pre - 1))
               }
               id="prevButton"
             >
@@ -83,7 +96,7 @@ export default function Services() {
             <div
               className="arrow"
               onClick={() =>
-                setActiveService((pre) => (pre == 3 ? 1 : pre + 1))
+                setActiveService((pre) => (pre == 5 ? 1 : pre + 1))
               }
               id="nextButton"
             >
@@ -148,7 +161,7 @@ export default function Services() {
                         </div>
                       </div>
                       <div className="right">
-                        <div className="img-style">
+                        <div className="img-style" style={{ maxWidth: '100%', overflow: 'hidden' }}>
                           <Image
                             className="lazyload"
                             data-src={service.image}
@@ -156,6 +169,12 @@ export default function Services() {
                             src={service.image}
                             width={393}
                             height={417}
+                            style={{ 
+                              width: '100%', 
+                              height: 'auto', 
+                              maxWidth: '393px',
+                              objectFit: 'cover'
+                            }}
                           />
                         </div>
                       </div>
@@ -169,4 +188,4 @@ export default function Services() {
       </div>
     </div>
   );
-}
+}