Dockercommit

src/components/Style2/ServicesDetails/Details.jsx

@@ -9,14 +9,14 @@ const Details = ({ service }) => {
             <div className="col-lg-8">
               <div className="main-info">
                 <div className="main-img img-cover">
-                  <img src={service.image} alt={service.title} />
+                  <img src={service?.image || service?.icon || '/assets/img/default-image.jpg'} alt={service?.title || 'Service'} />
                 </div>
                 <h3 className="text-capitalize mb-20">Service Overview</h3>
                 <p className="mb-10">
-                  {service.overview}
+                  {service?.overview || 'No overview available'}
                 </p>
                 <div className="imgs-items border-1 border-bottom border-top brd-gray">
-                  {service.processes.map((process, index) => (
+                  {(service?.processes || []).map((process, index) => (
                     <div className="img-item my-5" key={index}>
                       <div className="row align-items-center">
                         <div className="col-lg-2">
@@ -30,22 +30,21 @@ const Details = ({ service }) => {
                         </div>
                       </div>
                     </div>
-                  ))}
+                  )) || <p>No processes available</p>}
                 </div>
                 <h4 className="mt-5 mb-4">Key Features</h4>
-                {service.features.map((feature, index) => (
+                {(service?.features || []).map((feature, index) => (
                   <p className="mt-10" key={index}>
                     <i className="fas fa-check-circle color-blue5 me-2"></i>
                     <strong className="color-000">{feature.name}:</strong> {feature.description}
                   </p>
-                ))}
-
+                )) || <p>No features available</p>}
                 <div className="testi-card mt-60">
                   <div className="icon">
                     <img src="/assets/img/testimonials/qout.png" alt="" />
                   </div>
                   <div className="text">
-                    "RootXwire's {service.title.toLowerCase()} service has transformed our infrastructure, providing reliable and scalable solutions for our business needs."
+                    "RootXwire's {service?.title?.toLowerCase() || 'service'} has transformed our infrastructure, providing reliable and scalable solutions for our business needs."
                   </div>
                   <div className="author">
                     <div className="img icon-60 rounded-circle overflow-hidden img-cover me-3 flex-shrink-0">
@@ -57,7 +56,6 @@ const Details = ({ service }) => {
                     </div>
                   </div>
                 </div>
-
                 <div className="last-next-serv d-flex align-items-center justify-content-between mt-60">
                   <a href="/services/details?service=storage" className="item">
                     <p>Previous Service</p>

src/data/Software/services.json

@@ -1,6 +1,6 @@
 [
   {
-    "icon": "/assets/img/icons/serv_icons/cloud.png",
+    "icon": "/assets/img/icons/serv_icons/5.png",
     "title": "Cloud Computing",
     "details": "Scalable cloud solutions including compute, storage, and networking services for your business needs.",
     "link": "/services/details?service=cloud",
@@ -28,7 +28,7 @@
     ]
   },
   {
-    "icon": "/assets/img/icons/serv_icons/app.png",
+    "icon": "/assets/img/icons/serv_icons/8.png",
     "title": "Application Development",
     "details": "Comprehensive development services for web, mobile (Android/iOS), and IoT applications.",
     "link": "/services/details?service=app-dev",
@@ -56,7 +56,7 @@
     ]
   },
   {
-    "icon": "/assets/img/icons/serv_icons/ai.png",
+    "icon": "/assets/img/icons/serv_icons/1.png",
     "title": "AI & Machine Learning",
     "details": "Advanced AI solutions including machine learning, computer vision, and natural language processing.",
     "link": "/services/details?service=ai",

src/pages/page-services-details-5/index.jsx

@@ -13,6 +13,19 @@ import Footer from 'components/Saas/Footer';
 
 const PageServiceDetails = () => {
   const navbarRef = useRef(null);
+  const service = {
+    title: "Email Marketing",
+    image: "/assets/img/service-email.jpg",
+    overview: "Targeted email campaigns and automation solutions for effective customer engagement.",
+    processes: [
+      { icon: "/assets/img/icons/serv_icons/34.png", title: "Campaign Setup", description: "Custom email campaign creation and design." },
+      { icon: "/assets/img/icons/serv_icons/35.png", title: "Automation", description: "Automated email workflows for efficiency." }
+    ],
+    features: [
+      { name: "Campaign Analytics", description: "Track and analyze email performance metrics." },
+      { name: "Automation Tools", description: "Streamline email marketing workflows." }
+    ]
+  };
 
   useEffect(() => {
     navbarScrollEffect(navbarRef.current, true);
@@ -22,24 +35,24 @@ const PageServiceDetails = () => {
     <MainLayout>
       <TopNav style="5" />
       <Navbar navbarRef={navbarRef} />
-      <Header page="Service Details" title="Email Marketing" />
+      <Header page="Service Details" title={service.title} />
       <main className="services-details-page style-5">
-        <Details />
+        <Details service={service} />
         <Contact />
       </main>
       <Footer noWave />
     </MainLayout>
-  )
-}
+  );
+};
 
 export const Head = () => {
   return (
     <>
- <title>Rootxwire - Service Details</title>
+      <title>Rootxwire - Service Details</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>
-  )
-}
+  );
+};
 
 export default PageServiceDetails;