messy changes

.eslintrc.json

@@ -1,9 +1,32 @@
 {
-  "extends": "react-app",
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "plugins": ["react", "react-hooks"],
+  "parserOptions": {
+    "ecmaVersion": 2021,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
   "rules": {
     "react/style-prop-object": "off",
     "jsx-a11y/anchor-is-valid": "off",
     "jsx-a11y/heading-has-content": "off",
-    "jsx-a11y/iframe-has-title": "off"
+    "jsx-a11y/iframe-has-title": "off",
+    "react/react-in-jsx-scope": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

entry.sh

@@ -0,0 +1,43 @@
+#!/bin/sh
+set -e
+
+export GATSBY_DIR="/site"
+export PATH="$PATH:/usr/local/bin/gatsby"
+
+# Initialize Gatsby or run NPM install if needed
+if [ ! -f "$GATSBY_DIR/package.json" ]
+then
+  echo "Initializing Gatsby..."
+  gatsby new $GATSBY_DIR
+
+else
+  if [ ! -e "$GATSBY_DIR/node_modules/" ]
+  then
+    echo "Node modules is empty. Running npm install..."
+    npm install
+
+  fi
+
+fi
+
+# Decide what to do
+if  [ "$1" == "develop" ]
+then
+  rm -rf $GATSBY_DIR/public
+  gatsby develop --host 0.0.0.0
+
+elif  [ "$1" == "build" ]
+then
+  rm -rf $GATSBY_DIR/public
+  gatsby build
+
+elif  [ "$1" == "stage" ]
+then
+  rm -rf $GATSBY_DIR/public
+  gatsby build
+  gatsby serve --port 8000
+
+else
+  exec $@
+
+fi

gatsby-config.js

@@ -1,12 +1,61 @@
 module.exports = {
   siteMetadata: {
-    title: 'RootXwire',
+    title: "RootXwire",
-    description: 'RootXwire - Multi-Purpose React.js Gatsby Template',
+    description:
-    author: 'RootXwire'
+      "RootXwire - A leading cloud solution provider offering compute, GPU, storage, networking, and more, delivering scalable infrastructure similar to top public cloud providers.",
+    author: "RootXwire",
+    siteUrl: "https://www.rootxwire.com",
   },
   plugins: [
-    'gatsby-plugin-resolve-src',
+    "gatsby-plugin-resolve-src",
-    'gatsby-plugin-eslint'
+    "gatsby-plugin-react-helmet",
+    "gatsby-plugin-sitemap",
+    {
+      resolve: "gatsby-plugin-robots-txt",
+      options: {
+        host: "https://www.rootxwire.com",
+        sitemap: "https://www.rootxwire.com/sitemap.xml",
+        policy: [
+          {
+            userAgent: "*",
+            allow: "/",
+            disallow: ["/private/", "/admin/", "/test/"], // Adjust based on your site
+          },
         ],
-  trailingSlash: "always"
+      },
-}
+    },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'data',
+        path: `${__dirname}/src/data/`,
+      },
+    },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'assets',
+        path: `${__dirname}/static/assets/`,
+      },
+    },
+    'gatsby-transformer-json',
+    {
+      resolve: 'gatsby-plugin-manifest',
+      options: {
+        name: 'RootXwire',
+        short_name: 'RootXwire',
+        start_url: '/',
+        background_color: '#ffffff',
+        theme_color: '#000000',
+        display: 'minimal-ui',
+        icon: 'static/assets/img/favicon.png',
+      },
+    },
+  ],
+  flags: {
+    DEV_SSR: true,
+    FAST_DEV: true,
+    PRESERVE_WEBPACK_CACHE: true,
+    PRESERVE_FILE_DOWNLOAD_CACHE: true,
+  }
+};

gatsby-ssr.js

@@ -1,30 +1,75 @@
-import React from "react";
+import React from 'react';
 
 const HtmlAttributes = {
-  lang: "en"
+  lang: 'en',
-}
+};
 
 const HeadComponents = [
-  <meta key="httpEquiv" httpEquiv="X-UA-Compatible" content="IE=edge" />,
+  <meta
-  <meta key="viewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />,
+    key='httpEquiv'
-  <meta key="keywords" name="keywords" content="React Gatsby Template Iteck Multi-Purpose themeforest" />,
+    httpEquiv='X-UA-Compatible'
-  <meta key="description" name="description" content="Iteck - Multi-Purpose React.js Gatsby Template" />,
+    content='IE=edge'
-  <meta key="author" name="author" content="" />,
+  />,
-  <link key="styles-bs-icons" rel="stylesheet" href="/assets/css/lib/bootstrap-icons.css" />,
+  <link
-  <link key="styles-fa" rel="stylesheet" href="/assets/css/lib/all.min.css" />,
+    key='styles-bs-icons'
-  <link key="styles-animate" rel="stylesheet" href="/assets/css/lib/animate.css" />,
+    rel='stylesheet'
-  <link key="styles-all" rel="stylesheet" href="/assets/css/style.css" />,
+    href='/assets/css/lib/bootstrap-icons.css'
-  <link key="icon" rel="shortcut icon" href="/assets/img/fav.png" title="Favicon" sizes="16x16" />,
+  />,
-  <link key="InterFont" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" />,
+  <link
-  <link key="MessiriFont" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&display=swap" />,
+    key='styles-fa'
-  <script key="pace" src="/assets/js/lib/pace.js"></script>,
+    rel='stylesheet'
-  <script key="bootstrap" src="/assets/js/lib/bootstrap.bundle.min.js"></script>,
+    href='/assets/css/lib/all.min.css'
-  <script key="mixitup" src="/assets/js/lib/mixitup.min.js"></script>,
+  />,
-  <script key="wow" src="/assets/js/lib/wow.min.js"></script>,
+  <link
-  <script key="html5shiv" src="/assets/js/lib/html5shiv.min.js"></script>
+    key='styles-animate'
-]
+    rel='stylesheet'
+    href='/assets/css/lib/animate.css'
+  />,
+  <link
+    key='styles-all'
+    rel='stylesheet'
+    href='/assets/css/style.css'
+  />,
+  <link
+    key='icon'
+    rel='shortcut icon'
+    href='/assets/img/fav.png'
+    title='Favicon'
+    sizes='16x16'
+  />,
+  <link
+    key='InterFont'
+    rel='stylesheet'
+    href='https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'
+  />,
+  <link
+    key='MessiriFont'
+    rel='stylesheet'
+    href='https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&display=swap'
+  />,
+  <script
+    key='pace'
+    src='/assets/js/lib/pace.js'
+  ></script>,
+  <script
+    key='bootstrap'
+    src='/assets/js/lib/bootstrap.bundle.min.js'
+  ></script>,
+  <script
+    key='mixitup'
+    src='/assets/js/lib/mixitup.min.js'
+  ></script>,
+  <script
+    key='wow'
+    src='/assets/js/lib/wow.min.js'
+  ></script>,
+  <script
+    key='html5shiv'
+    src='/assets/js/lib/html5shiv.min.js'
+  ></script>,
+];
 
 export const onRenderBody = ({ setHeadComponents, setHtmlAttributes }) => {
   setHtmlAttributes(HtmlAttributes);
   setHeadComponents(HeadComponents);
-}
+};

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "description": "iteck-gatsby",
-  "author": "Hassan Ali",
+  "author": "Govardhan",
   "keywords": [
     "gatsby"
   ],
@@ -15,19 +15,29 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
+    "@reach/router": "^1.3.4",
+    "ajv": "^8.17.1",
     "axios": "^0.27.2",
-    "gatsby": "^4.24.1",
+    "gatsby": "^5.14.3",
+    "gatsby-plugin-manifest": "^5.14.0",
+    "gatsby-plugin-react-helmet": "^6.14.0",
     "gatsby-plugin-resolve-src": "^2.1.0",
+    "gatsby-plugin-robots-txt": "^1.8.0",
+    "gatsby-plugin-sitemap": "^6.14.0",
+    "gatsby-source-filesystem": "^5.14.0",
+    "gatsby-transformer-json": "^5.14.0",
     "lightgallery": "^2.5.0",
     "rc-slider": "^10.0.1",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
     "react-modal-video": "^1.2.9",
     "swiper": "^8.3.2"
   },
   "devDependencies": {
+    "babel-eslint": "^10.1.0",
     "eslint": "^7.32.0",
     "eslint-webpack-plugin": "^3.2.0",
-    "gatsby-plugin-eslint": "^4.0.2"
+    "gatsby-plugin-eslint": "^4.0.4"
   }
 }

src/components/SEO.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { useStaticQuery, graphql } from 'gatsby';
+
+const SEO = ({ title, description, keywords }) => {
+  const { site } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            title
+            description
+            author
+            siteUrl
+          }
+        }
+      }
+    `
+  );
+
+  const metaTitle = title || site.siteMetadata.title;
+  const metaDescription = description || site.siteMetadata.description;
+  const metaKeywords =
+    keywords || 'RootXwire, cloud solutions, compute, GPU, storage, networking, public cloud';
+
+  return (
+    <Helmet>
+      <title>{metaTitle}</title>
+      <meta
+        name='viewport'
+        content='width=device-width, initial-scale=1, maximum-scale=1'
+      />
+      <meta
+        name='description'
+        content={metaDescription}
+      />
+      <meta
+        name='keywords'
+        content={metaKeywords}
+      />
+      <meta
+        name='author'
+        content={site.siteMetadata.author}
+      />
+      <meta
+        property='og:title'
+        content={metaTitle}
+      />
+      <meta
+        property='og:description'
+        content={metaDescription}
+      />
+      <meta
+        property='og:type'
+        content='website'
+      />
+      <meta
+        property='og:url'
+        content={site.siteMetadata.siteUrl}
+      />
+      <meta
+        name='twitter:card'
+        content='summary'
+      />
+      <meta
+        name='twitter:title'
+        content={metaTitle}
+      />
+      <meta
+        name='twitter:description'
+        content={metaDescription}
+      />
+      <script type='application/ld+json'>
+        {JSON.stringify({
+          '@context': 'https://schema.org',
+          '@type': 'Organization',
+          name: 'RootXwire',
+          url: site.siteMetadata.siteUrl,
+          description: site.siteMetadata.description,
+          sameAs: [
+            // Replace with your actual social media URLs
+            'https://twitter.com/rootxwire',
+            'https://in.linkedin.com/company/rootxwire-pvt-ltd',
+          ],
+        })}
+      </script>
+    </Helmet>
+  );
+};
+
+export default SEO;

src/components/Saas/Features.jsx

@@ -1,69 +1,91 @@
 import React from 'react';
-import features from 'data/Saas/features.json';
+import { Link } from 'gatsby';
-import featuresRTL from 'data/Saas/features-rtl.json';
+import coreServices from 'data/core-services.json';
-
-
-import services from 'data/Saas/services.json';
-import servicesRTL from 'data/Saas/services-rtl.json';
-
-const Features = ({ isServices, rtl }) => {
-  const featuresData = rtl ? featuresRTL : features;
-  const servicesData = rtl ? servicesRTL : services;
-
 
+const Features = ({ rtl }) => {
   return (
-    <section className={`features section-padding style-5 ${isServices ? 'pt-50':'bg-gray5'}`} data-scroll-index="3">
+    <section className="features section-padding style-6 bg-light">
       <div className="container">
         <div className="row justify-content-center">
           <div className="col-lg-8">
-            {
-              isServices ? 
-              (
             <div className="section-head text-center mb-60 style-5">
-                  <h2 className="mb-20">{ rtl ? '' : 'Our' } <span>{ rtl ? 'خدماتنا' : 'Services' }</span></h2>
+              <h2 className="mb-20">
-                  <p>
+                {coreServices.title} <span>{rtl ? 'الرئيسية' : ''}</span>
-                    { rtl ? 'نحن نقدم حلول تكنولوجيا المعلومات المثالية لعملك' : 'We provide perfect IT Solutions for your business' }
+              </h2>
-                  </p>
+              <p>{coreServices.subtitle}</p>
             </div>
-              )
-              :
-              (
-                <div className="section-head text-center mb-60 style-5">
-                  <h2 className="mb-20">Other Awesome <span>Features</span></h2>
-                  <p>
-                    Iteck Dashboard is a powerhouse when it comes to the feature list. This ensures you have every functionality you need to build, run, and expand your marketplace
-                  </p>
-                </div>
-              )
-            }
           </div>
         </div>
         <div className="content">
-          <div className="row">
+          <div className="row g-4">
-            {
+            {coreServices.services.map((service, index) => (
-              servicesData.map((feature, i) => (
+              <div className="col-lg-4" key={index}>
-                <div className="col-lg-3" key={i}>
+                <div className="feature-card style-6 h-100 bg-white p-4 rounded-3 shadow-sm">
-                  <a href="#" className="features-card mb-30 style-5">
+                  <div className="icon mb-4">
-                    <div className="icon">
+                    <img src={service.icon} alt={service.title} className="img-fluid" style={{ maxHeight: '60px' }} />
-                      <img src={feature.img} alt="" />
                   </div>
                   <div className="info">
-                      <h5 className="card-title">
+                    <h5 className="title mb-3">{service.title}</h5>
-                        { feature.info }
+                    <p className="text mb-4">{service.description}</p>
-                      </h5>
+                    <div className="sub-services">
-                      <p className="text">
+                      <h6 className="mb-3 text-primary">Our Top {service.title} Services:</h6>
-                        { feature.text }
+                      <ul className="features-list list-unstyled">
-                      </p>
+                        {service.features.map((feature, idx) => (
+                          <li key={idx} className="mb-3">
+                            <div className="d-flex align-items-start">
+                              <i className="bi bi-check-circle-fill text-primary me-2 mt-1"></i>
+                              <div>
+                                <strong className="d-block">{feature}</strong>
+                                <small className="text-muted">
+                                  {getFeatureDescription(service.title, feature)}
+                                </small>
                               </div>
-                  </a>
                             </div>
-              ))
+                          </li>
-            }
+                        ))}
+                      </ul>
+                    </div>
+                    <Link to={service.link} className="btn btn-outline-primary rounded-pill mt-4">
+                      Learn More <i className="bi bi-arrow-right ms-1"></i>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            ))}
           </div>
         </div>
       </div>
     </section>
-  )
+  );
-}
+};
 
-export default Features
+// Helper function to get feature descriptions
+const getFeatureDescription = (serviceTitle, feature) => {
+  const descriptions = {
+    'Cloud Computing': {
+      'Infrastructure as a Service (IaaS)': 'Virtualized computing resources, storage, and networking on demand',
+      'Platform as a Service (PaaS)': 'Development and deployment platforms in the cloud',
+      'Software as a Service (SaaS)': 'Cloud-based software applications and services',
+      'Cloud Migration & Management': 'Seamless transition and ongoing management of cloud infrastructure',
+      'Hybrid Cloud Solutions': 'Integrated on-premises and cloud infrastructure solutions'
+    },
+    'Application Development': {
+      'Web Application Development': 'Custom web applications using modern frameworks and technologies',
+      'Mobile App Development': 'Native and cross-platform mobile applications for iOS and Android',
+      'IoT Solutions': 'Connected device applications and IoT platform development',
+      'Custom Software Development': 'Tailored software solutions for specific business needs',
+      'Enterprise Applications': 'Large-scale business applications and systems integration'
+    },
+    'AI & Machine Learning': {
+      'Machine Learning Models': 'Custom ML models and predictive analytics systems',
+      'Computer Vision Solutions': 'Image and video analysis applications',
+      'Natural Language Processing': 'Text analysis, chatbots, and language understanding systems',
+      'Predictive Analytics': 'Data-driven forecasting and business intelligence solutions',
+      'AI Integration Services': 'Seamless integration of AI capabilities into existing systems'
+    }
+  };
+
+  return descriptions[serviceTitle]?.[feature] || '';
+};
+
+export default Features;

src/components/Saas/Services.jsx

@@ -1,13 +1,33 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'gatsby';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import services from 'data/Saas/services.json';
+import 'swiper/css';
-import servicesRTL from 'data/Saas/services-rtl.json';
+import servicesData from '../../data/services.json';
 
-import "swiper/css";
+const Services = () => {
+  const services = servicesData.services;
+  const [selectedService, setSelectedService] = useState(null);
 
-const Services = ({ rtl }) => {
+  const handleServiceClick = (service) => {
-  const servicesData = rtl ? servicesRTL : services;
+    setSelectedService(service);
+  };
+
+  const handleCloseDetails = () => {
+    setSelectedService(null);
+  };
+
+  const getSectionColor = (category) => {
+    switch (category) {
+      case 'cloud':
+        return 'bg-light-blue';
+      case 'app-dev':
+        return 'bg-light-green';
+      case 'ai':
+        return 'bg-light-purple';
+      default:
+        return 'bg-light';
+    }
+  };
 
   return (
     <section className="services section-padding bg-white pb-50 style-6">
@@ -15,70 +35,206 @@ const Services = ({ rtl }) => {
         <div className="row justify-content-center">
           <div className="col-lg-8">
             <div className="section-head text-center mb-60 style-5">
-              <h2 className="mb-20">{ rtl ? 'اهم' : 'Our Top' } <span>{ rtl ? 'خدماتنا' : 'Services' }</span> </h2>
+              <h2 className="mb-20">
+                Our Core <span>Services</span>
+              </h2>
               <p>
-                { rtl ? 'تعتبر Iteck لوحة تحكم مصدر قوة عندما يتعلق الأمر بقائمة الميزات. يضمن ذلك حصولك على كل الوظائف التي تحتاجها لبناء سوقك وتشغيله وتوسيعه' : 'Iteck Dashboard is a powerhouse when it comes to the feature list. This ensures you have every functionality you need to build, run, and expand your marketplace' }
+                RootXwire delivers comprehensive technology solutions including cloud computing, application development, and AI & ML services, designed to meet your business needs.
               </p>
             </div>
           </div>
         </div>
       </div>
-      <div className="content">
+
-        <div className="services-slider position-relative style-6">
+      {/* Service Details Modal */}
-          <Swiper
+      {selectedService && (
-            className="swiper-container"
+        <div className="service-details-modal" style={{
-            slidesPerView={6}
+          position: 'fixed',
-            centeredSlides={true}
+          top: 0,
-            spaceBetween={0}
+          left: 0,
-            speed={1000}
+          right: 0,
-            pagination={false}
+          bottom: 0,
-            navigation={false}
+          backgroundColor: 'rgba(0,0,0,0.5)',
-            mousewheel={false}
+          zIndex: 1000,
-            keyboard={true}
+          display: 'flex',
-            autoplay={{
+          alignItems: 'center',
-              delay: 200
+          justifyContent: 'center'
-            }}
+        }}>
-            loop={true}
+          <div className="modal-content bg-white p-4 rounded-3" style={{ maxWidth: '800px', width: '90%' }}>
-            breakpoints={{
+            <button 
-              0: {
+              onClick={handleCloseDetails}
-                slidesPerView: 1
+              className="btn-close position-absolute top-0 end-0 m-3"
-              },
+            />
-              480: {
+            <div className="row">
-                slidesPerView: 1
+              <div className="col-md-4">
-              },
+                <img src={selectedService.icon} alt={selectedService.iconAlt} className="img-fluid mb-3" />
-              787: {
+              </div>
-                slidesPerView: 2
+              <div className="col-md-8">
-              },
+                <h3>{selectedService.title}</h3>
-              991: {
+                <p className="text-muted">{selectedService.text}</p>
-                slidesPerView: 4
+                {selectedService.overview && (
-              },
+                  <div className="mt-4">
-              1200: {
+                    <h4>Overview</h4>
-                slidesPerView: 6
+                    {selectedService.overview.description.map((desc, index) => (
+                      <p key={index}>{desc}</p>
+                    ))}
+                  </div>
+                )}
+                {selectedService.features && (
+                  <div className="mt-4">
+                    <h4>Features</h4>
+                    <ul className="list-unstyled">
+                      {selectedService.features.map((feature, index) => (
+                        <li key={index} className="mb-2">
+                          <strong>{feature.name}:</strong> {feature.description}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Cloud Services Section */}
+      <div className="container mt-5">
+        <div className="row justify-content-center">
+          <div className="col-lg-8">
+            <div className="section-head text-center mb-60 style-5">
+              <h2 className="mb-20">
+                Our Top <span>Cloud Services</span>
+              </h2>
+            </div>
+          </div>
+        </div>
+        <div className="row g-4">
+          {services.filter(service => service.category === 'cloud').map((service, index) => (
+            <div className="col-lg-4" key={index}>
+              <div 
+                className={`service-card style-6 ${getSectionColor('cloud')} p-4 rounded-3 cursor-pointer`}
+                onClick={() => handleServiceClick(service)}
+                style={{ 
+                  cursor: 'pointer',
+                  transition: 'transform 0.2s, box-shadow 0.2s',
+                  ':hover': {
+                    transform: 'translateY(-5px)',
+                    boxShadow: '0 4px 15px rgba(0,0,0,0.1)'
                   }
                 }}
               >
-            {
+                <div className="icon mb-3">
-              servicesData.map((service, index) => (
+                  <img src={service.icon} alt={service.iconAlt} />
-                <SwiperSlide key={index}>
-                  <Link to="/page-services-5" className="service-card style-6">
-                    <div className="icon">
-                      <img src={service.img} alt="" />
                 </div>
                 <div className="info">
-                      <h5>{ service.info }</h5>
+                  <h5>{service.title}</h5>
-                      <div className="text">
+                  <p className="text-muted">{service.text}</p>
-                        { service.text }
                 </div>
               </div>
-                  </Link>
+            </div>
-                </SwiperSlide>
+          ))}
-              ))
-            }
-          </Swiper>
         </div>
       </div>
-    </section>
-  )
-}
 
-export default Services
+      {/* Application Development Services Section */}
+      <div className="container mt-5">
+        <div className="row justify-content-center">
+          <div className="col-lg-8">
+            <div className="section-head text-center mb-60 style-5">
+              <h2 className="mb-20">
+                Our Top <span>Application Development Services</span>
+              </h2>
+            </div>
+          </div>
+        </div>
+        <div className="row g-4">
+          {services.filter(service => service.category === 'app-dev').map((service, index) => (
+            <div className="col-lg-4" key={index}>
+              <div 
+                className={`service-card style-6 ${getSectionColor('app-dev')} p-4 rounded-3 cursor-pointer`}
+                onClick={() => handleServiceClick(service)}
+                style={{ 
+                  cursor: 'pointer',
+                  transition: 'transform 0.2s, box-shadow 0.2s',
+                  ':hover': {
+                    transform: 'translateY(-5px)',
+                    boxShadow: '0 4px 15px rgba(0,0,0,0.1)'
+                  }
+                }}
+              >
+                <div className="icon mb-3">
+                  <img src={service.icon} alt={service.iconAlt} />
+                </div>
+                <div className="info">
+                  <h5>{service.title}</h5>
+                  <p className="text-muted">{service.text}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* AI & ML Services Section */}
+      <div className="container mt-5">
+        <div className="row justify-content-center">
+          <div className="col-lg-8">
+            <div className="section-head text-center mb-60 style-5">
+              <h2 className="mb-20">
+                Our Top <span>AI & ML Services</span>
+              </h2>
+            </div>
+          </div>
+        </div>
+        <div className="row g-4">
+          {services.filter(service => service.category === 'ai').map((service, index) => (
+            <div className="col-lg-4" key={index}>
+              <div 
+                className={`service-card style-6 ${getSectionColor('ai')} p-4 rounded-3 cursor-pointer`}
+                onClick={() => handleServiceClick(service)}
+                style={{ 
+                  cursor: 'pointer',
+                  transition: 'transform 0.2s, box-shadow 0.2s',
+                  ':hover': {
+                    transform: 'translateY(-5px)',
+                    boxShadow: '0 4px 15px rgba(0,0,0,0.1)'
+                  }
+                }}
+              >
+                <div className="icon mb-3">
+                  <img src={service.icon} alt={service.iconAlt} />
+                </div>
+                <div className="info">
+                  <h5>{service.title}</h5>
+                  <p className="text-muted">{service.text}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <style jsx>{`
+        .bg-light-blue {
+          background-color: #e6f3ff;
+        }
+        .bg-light-green {
+          background-color: #e6fff0;
+        }
+        .bg-light-purple {
+          background-color: #f3e6ff;
+        }
+        .service-card {
+          transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .service-card:hover {
+          transform: translateY(-5px);
+          box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+        }
+      `}</style>
+    </section>
+  );
+};
+
+export default Services;

src/components/Software/Header.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 const Header = () => {
   return (
@@ -8,8 +8,14 @@ const Header = () => {
           <div className="row">
             <div className="col-lg-5">
               <div className="info">
-                <h1 className="h1">Make your life easier with help from <span>RootXwire</span></h1>
+                <h1 className="h1">
-                <p className="p">We help businesses elevate their value through custom software development, product design, QA & consultancy services.</p>
+                  Rooting Ideas, Wiring Solutions @<span>RootXwire</span>
+                </h1>
+                <p className="p">
+                  We design future-ready software, cloud, and infrastructure
+                  solutions that empower businesses to grow smarter, faster, and
+                  stronger.
+                </p>
                 {/* <h5 className="h5">Get Free Quote! <span className="fw-normal ms-1">We’ll contact back in 24h</span></h5>
                 <form action="contact.php" className="form mt-30" method="post">
                   <div className="row gx-3">
@@ -42,11 +48,19 @@ const Header = () => {
       </div>
       <div className="main-img">
         <img src="/assets/img/header/header_3.png" alt="" className="pattern" />
-        <img src="/assets/img/header/header_3_c.png" alt="" className="circle" />
+        <img
-        <img src="/assets/img/header/logo_sh_l.png" alt="" className="logo_shap" />
+          src="/assets/img/header/header_3_c.png"
+          alt=""
+          className="circle"
+        />
+        <img
+          src="/assets/img/header/logo_sh_l.png"
+          alt=""
+          className="logo_shap"
+        />
       </div>
     </header>
-  )
+  );
-}
+};
 
-export default Header
+export default Header;

src/components/Software/Services.jsx

@@ -7,22 +7,34 @@ const Services = () => {
     <section className="services style-3 section-padding pb-70" data-scroll-index="2">
       <div className="container">
         <div className="section-head style-3 d-flex align-items-center">
-          <h3>Our Main <span>Services</span></h3> <Link to="/page-services-5" className="text-muted ms-5 ps-5 mt-2">See full services <i className="bi bi-chevron-right ms-1"></i></Link>
+          <h3>Our Main <span>Services</span></h3>
         </div>
         <div className="row">
           {
             services.map((service, index) => (
-              <div className="col-lg-3 mb-30 mb-lg-0" key={index}>
+              <div className="col-lg-4 mb-30 mb-lg-0" key={index}>
                 <div className="service-card style-3">
                   <div className="icon">
-                    <img src={service.icon} alt="" />
+                    <img src={service.icon} alt={service.title} />
                   </div>
                   <div className="info">
-                    <h5 className="title">{ service.title }</h5>
+                    <h5 className="title">{service.title}</h5>
                     <div className="text">
-                      { service.details }
+                      {service.details}
                     </div>
-                    {/* <Link to="/page-portfolio-5"><span>see projects</span> <i className="bi bi-chevron-right ms-1"></i></Link> */}
+                    <div className="sub-services mt-4">
+                      <h6 className="mb-3">Our Top {service.title} Services:</h6>
+                      <ul className="list-unstyled">
+                        {service.subServices.map((subService, subIndex) => (
+                          <li key={subIndex} className="mb-2">
+                            <i className="bi bi-check-circle-fill text-primary me-2"></i>
+                            <strong>{subService.title}</strong>
+                            <p className="text-muted small mb-0">{subService.description}</p>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                    <Link to={service.link} className="mt-3 d-inline-block">Learn More <i className="bi bi-chevron-right ms-1"></i></Link>
                   </div>
                 </div>
               </div>

src/components/Style2/ServicesDetails/Details.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Details = () => {
+const Details = ({ service }) => {
   return (
     <section className="ser-details section-padding overflow-hidden">
       <div className="container">
@@ -9,74 +9,63 @@ const Details = () => {
             <div className="col-lg-8">
               <div className="main-info">
                 <div className="main-img img-cover">
-                  <img src="/assets/img/services/services2.png" alt="" />
+                  <img src={service.image} alt={service.title} />
                 </div>
-                <h3 className="text-capitalize mb-20"> Service Overview </h3>
+                <h3 className="text-capitalize mb-20">Service Overview</h3>
                 <p className="mb-10">
-                  the Best SMM Panel in the market. Perfect for agencies and resellers, Boost your brand quickly. Quick Response. Quick Boost In Sales. Real-Time Monitoring. Highlights: Live Customer  Support Available, Quick Help Available, Providing High Quality Services.
+                  {service.overview}
-                </p>
-                <p className="pb-50">
-                  What is an SMM panel? SMM panel is an SMM service online store where people can buy likes, follow views, website traffic, etc — the list of such services goes on and on. People choose SMM panels because of great prices and fast delivery. This is why this business is so popular, it&apos;s always with an demand. Though selling SMM services via panels is definitely not illegal, buying such services for your accounts is against the Terms of Service on various social media platforms.
                 </p>
                 <div className="imgs-items border-1 border-bottom border-top brd-gray">
-                  <div className="img-item my-5">
+                  {service.processes.map((process, index) => (
+                    <div className="img-item my-5" key={index}>
                       <div className="row align-items-center">
                         <div className="col-lg-2">
                           <div className="icon mb-3 mb-lg-0">
-                          <img src="/assets/img/icons/serv_icons/34.png" alt="" />
+                            <img src={process.icon} alt={process.title} />
                           </div>
                         </div>
                         <div className="col-lg-10">
-                        <h5 className="fw-bold mb-2"> Our Work Process </h5>
+                          <h5 className="fw-bold mb-2">{process.title}</h5>
-                        <p> SMM service online store where people can buy likes, follow views, website traffic, etc — the list of such services goes on and on. </p>
+                          <p>{process.description}</p>
                         </div>
                       </div>
                     </div>
-                  <div className="img-item my-5">
+                  ))}
-                    <div className="row align-items-center">
-                      <div className="col-lg-2">
-                        <div className="icon mb-3 mb-lg-0">
-                          <img src="/assets/img/icons/serv_icons/35.png" alt="" />
                 </div>
-                      </div>
+                <h4 className="mt-5 mb-4">Key Features</h4>
-                      <div className="col-lg-10">
+                {service.features.map((feature, index) => (
-                        <h5 className="fw-bold mb-2"> Troubleshooting Process </h5>
+                  <p className="mt-10" key={index}>
-                        <p> SMM service online store where people can buy likes, follow views, website traffic, etc — the list of such services goes on and on. </p>
+                    <i className="fas fa-check-circle color-blue5 me-2"></i>
-                      </div>
+                    <strong className="color-000">{feature.name}:</strong> {feature.description}
-                    </div>
+                  </p>
-                  </div>
+                ))}
-                </div>
-                <h4 className="mt-5 mb-4"> Going Beyond the Usual </h4>
-                <p className="mt-10"> <i className="fas fa-check-circle color-blue5 me-2"></i> <strong className="color-000"> Product Quality: </strong> Automatically syncs across all your devices. You can also access... </p>
-                <p className="mt-10"> <i className="fas fa-check-circle color-blue5 me-2"></i> <strong className="color-000"> On Demand Design: </strong> Images, videos, PDFs and audio files are supported. </p>
-                <p className="mt-10"> <i className="fas fa-check-circle color-blue5 me-2"></i> <strong className="color-000"> Choice of Service: </strong> Whatever your business needs, you can choose a service. </p>
 
                 <div className="testi-card mt-60">
                   <div className="icon">
                     <img src="/assets/img/testimonials/qout.png" alt="" />
                   </div>
                   <div className="text">
-                    “ Collecting customer feedback shows you value opinion. <br /> By asking your clients for feedback you communicate that their opinion is important to you. ”
+                    "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">
                       <img src="/assets/img/testimonials/user8.png" alt="" />
                     </div>
                     <div className="inf">
-                      <p> Head Of Idea </p>
+                      <p>CTO</p>
-                      <h6> Alonso D.Dowson </h6>
+                      <h6>John Smith</h6>
                     </div>
                   </div>
                 </div>
 
                 <div className="last-next-serv d-flex align-items-center justify-content-between mt-60">
-                  <a href="#" className="item">
+                  <a href="/services/details?service=storage" className="item">
-                    <p> Prev Service </p>
+                    <p>Previous Service</p>
-                    <h5 className="fw-bold"> Product Design </h5>
+                    <h5 className="fw-bold">Storage</h5>
                   </a>
-                  <a href="#" className="item text-end">
+                  <a href="/services/details?service=networking" className="item text-end">
-                    <p> Next Service </p>
+                    <p>Next Service</p>
-                    <h5 className="fw-bold"> Web Development </h5>
+                    <h5 className="fw-bold">Networking</h5>
                   </a>
                 </div>
               </div>
@@ -84,45 +73,32 @@ const Details = () => {
             <div className="col-lg-4">
               <div className="side-links mt-5 mt-lg-0">
                 <div className="links-card mb-40">
-                  <h5> Service Category </h5>
+                  <h5>Service Categories</h5>
                   <ul>
                     <li>
-                      <a href="#"> <i className="far fa-angle-right icon"></i> Social Media Marketing </a>
+                      <a href="/services/details?service=cpu-compute">
+                        <i className="far fa-angle-right icon"></i> CPU Compute
+                      </a>
                     </li>
                     <li>
-                      <a href="#"> <i className="far fa-angle-right icon"></i> Search Engine Optimization </a>
+                      <a href="/services/details?service=storage">
+                        <i className="far fa-angle-right icon"></i> Storage
+                      </a>
                     </li>
                     <li>
-                      <a href="#"> <i className="far fa-angle-right icon"></i> Product Design </a>
+                      <a href="/services/details?service=networking">
-                    </li>
+                        <i className="far fa-angle-right icon"></i> Networking
-                    <li>
+                      </a>
-                      <a href="#"> <i className="far fa-angle-right icon"></i> Email Marketing </a>
-                    </li>
-                    <li>
-                      <a href="#"> <i className="far fa-angle-right icon"></i> Web Development </a>
-                    </li>
-                    <li>
-                      <a href="#"> <i className="far fa-angle-right icon"></i> Game Design & Develop </a>
                     </li>
                   </ul>
                 </div>
-                <div className="banner1">
-                  <div className="title">
-                    <h6> Call To Action </h6>
-                    <h3> Make An Custom Request </h3>
-                  </div>
-                  <a href="#" className="butn bg-white rounded-pill hover-blue5">
-                    <span> Get A Quote <i className="far fa-long-arrow-right ms-2"></i> </span>
-                  </a>
-                  <img src="/assets/img/mob1.png" alt="" className="mob" />
-                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </section>
-  )
+  );
-}
+};
 
-export default Details
+export default Details;

src/components/Style2/ServicesDetails/rootxwireServiceDetails.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+
+const Details = () => {
+  return (
+    <section className="ser-details section-padding overflow-hidden">
+      <div className="container">
+        <div className="content">
+          <div className="row gx-5">
+            <div className="col-lg-8">
+              <div className="main-info">
+                <div className="main-img img-cover">
+                  <img src="/assets/img/services/services2.png" alt="" />
+                </div>
+                <h3 className="text-capitalize mb-20"> Service Overview </h3>
+                <p className="mb-10">
+                  the Best SMM Panel in the market. Perfect for agencies and resellers, Boost your brand quickly. Quick Response. Quick Boost In Sales. Real-Time Monitoring. Highlights: Live Customer  Support Available, Quick Help Available, Providing High Quality Services.
+                </p>
+                <p className="pb-50">
+                  What is an SMM panel? SMM panel is an SMM service online store where people can buy likes, follow views, website traffic, etc — the list of such services goes on and on. People choose SMM panels because of great prices and fast delivery. This is why this business is so popular, it&apos;s always with an demand. Though selling SMM services via panels is definitely not illegal, buying such services for your accounts is against the Terms of Service on various social media platforms.
+                </p>
+                <div className="imgs-items border-1 border-bottom border-top brd-gray">
+                  <div className="img-item my-5">
+                    <div className="row align-items-center">
+                      <div className="col-lg-2">
+                        <div className="icon mb-3 mb-lg-0">
+                          <img src="/assets/img/icons/serv_icons/34.png" alt="" />
+                        </div>
+                      </div>
+                      <div className="col-lg-10">
+                        <h5 className="fw-bold mb-2"> Our Work Process </h5>
+                        <p> SMM service online store where people can buy likes, follow views, website traffic, etc — the list of such services goes on and on. </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="img-item my-5">
+                    <div className="row align-items-center">
+                      <div className="col-lg-2">
+                        <div className="icon mb-3 mb-lg-0">
+                          <img src="/assets/img/icons/serv_icons/35.png" alt="" />
+                        </div>
+                      </div>
+                      <div className="col-lg-10">
+                        <h5 className="fw-bold mb-2"> Troubleshooting Process </h5>
+                        <p> SMM service online store where people can buy likes, follow views, website traffic, etc — the list of such services goes on and on. </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <h4 className="mt-5 mb-4"> Going Beyond the Usual </h4>
+                <p className="mt-10"> <i className="fas fa-check-circle color-blue5 me-2"></i> <strong className="color-000"> Product Quality: </strong> Automatically syncs across all your devices. You can also access... </p>
+                <p className="mt-10"> <i className="fas fa-check-circle color-blue5 me-2"></i> <strong className="color-000"> On Demand Design: </strong> Images, videos, PDFs and audio files are supported. </p>
+                <p className="mt-10"> <i className="fas fa-check-circle color-blue5 me-2"></i> <strong className="color-000"> Choice of Service: </strong> Whatever your business needs, you can choose a service. </p>
+
+                <div className="testi-card mt-60">
+                  <div className="icon">
+                    <img src="/assets/img/testimonials/qout.png" alt="" />
+                  </div>
+                  <div className="text">
+                    “ Collecting customer feedback shows you value opinion. <br /> By asking your clients for feedback you communicate that their opinion is important to you. ”
+                  </div>
+                  <div className="author">
+                    <div className="img icon-60 rounded-circle overflow-hidden img-cover me-3 flex-shrink-0">
+                      <img src="/assets/img/testimonials/user8.png" alt="" />
+                    </div>
+                    <div className="inf">
+                      <p> Head Of Idea </p>
+                      <h6> Alonso D.Dowson </h6>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="last-next-serv d-flex align-items-center justify-content-between mt-60">
+                  <a href="#" className="item">
+                    <p> Prev Service </p>
+                    <h5 className="fw-bold"> Product Design </h5>
+                  </a>
+                  <a href="#" className="item text-end">
+                    <p> Next Service </p>
+                    <h5 className="fw-bold"> Web Development </h5>
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-4">
+              <div className="side-links mt-5 mt-lg-0">
+                <div className="links-card mb-40">
+                  <h5> Service Category </h5>
+                  <ul>
+                    <li>
+                      <a href="#"> <i className="far fa-angle-right icon"></i> Social Media Marketing </a>
+                    </li>
+                    <li>
+                      <a href="#"> <i className="far fa-angle-right icon"></i> Search Engine Optimization </a>
+                    </li>
+                    <li>
+                      <a href="#"> <i className="far fa-angle-right icon"></i> Product Design </a>
+                    </li>
+                    <li>
+                      <a href="#"> <i className="far fa-angle-right icon"></i> Email Marketing </a>
+                    </li>
+                    <li>
+                      <a href="#"> <i className="far fa-angle-right icon"></i> Web Development </a>
+                    </li>
+                    <li>
+                      <a href="#"> <i className="far fa-angle-right icon"></i> Game Design & Develop </a>
+                    </li>
+                  </ul>
+                </div>
+                <div className="banner1">
+                  <div className="title">
+                    <h6> Call To Action </h6>
+                    <h3> Make An Custom Request </h3>
+                  </div>
+                  <a href="#" className="butn bg-white rounded-pill hover-blue5">
+                    <span> Get A Quote <i className="far fa-long-arrow-right ms-2"></i> </span>
+                  </a>
+                  <img src="/assets/img/mob1.png" alt="" className="mob" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Details

src/data/Software/services.json

@@ -1,22 +1,86 @@
 [
   {
-    "icon": "/assets/img/icons/serv_icons/10.png",
+    "icon": "/assets/img/icons/serv_icons/cloud.png",
-    "title": "IT Consultation",
+    "title": "Cloud Computing",
-    "details": "We provide best IT solutions for any type of business as stragegy, management."
+    "details": "Scalable cloud solutions including compute, storage, and networking services for your business needs.",
+    "link": "/services/details?service=cloud",
+    "subServices": [
+      {
+        "title": "Infrastructure as a Service (IaaS)",
+        "description": "Virtualized computing resources, storage, and networking on demand"
       },
       {
-    "icon": "/assets/img/icons/serv_icons/11.png",
+        "title": "Platform as a Service (PaaS)",
-    "title": "Software Development",
+        "description": "Development and deployment platforms in the cloud"
-    "details": "We bring methods for design and development as website, mobile app, etc"
       },
       {
-    "icon": "/assets/img/icons/serv_icons/12.png",
+        "title": "Software as a Service (SaaS)",
-    "title": "Data Security",
+        "description": "Cloud-based software applications and services"
-    "details": "Analys & Management Big Data alway big issue of companies management."
       },
       {
-    "icon": "/assets/img/icons/serv_icons/13.png",
+        "title": "Cloud Migration",
-    "title": "AI Machine Learning",
+        "description": "Seamless transition of applications and data to the cloud"
-    "details": "Turn AI & Machine Learning in the life. Enhance the quality and the effeciency"
+      },
+      {
+        "title": "Cloud Security",
+        "description": "Comprehensive security solutions for cloud infrastructure"
+      }
+    ]
+  },
+  {
+    "icon": "/assets/img/icons/serv_icons/app.png",
+    "title": "Application Development",
+    "details": "Comprehensive development services for web, mobile (Android/iOS), and IoT applications.",
+    "link": "/services/details?service=app-dev",
+    "subServices": [
+      {
+        "title": "Web Application Development",
+        "description": "Custom web applications using modern frameworks and technologies"
+      },
+      {
+        "title": "Mobile App Development",
+        "description": "Native and cross-platform mobile applications for iOS and Android"
+      },
+      {
+        "title": "IoT Solutions",
+        "description": "Connected device applications and IoT platform development"
+      },
+      {
+        "title": "API Development",
+        "description": "RESTful and GraphQL API design and implementation"
+      },
+      {
+        "title": "DevOps & CI/CD",
+        "description": "Automated deployment and continuous integration pipelines"
+      }
+    ]
+  },
+  {
+    "icon": "/assets/img/icons/serv_icons/ai.png",
+    "title": "AI & Machine Learning",
+    "details": "Advanced AI solutions including machine learning, computer vision, and natural language processing.",
+    "link": "/services/details?service=ai",
+    "subServices": [
+      {
+        "title": "Machine Learning Solutions",
+        "description": "Custom ML models and predictive analytics systems"
+      },
+      {
+        "title": "Computer Vision",
+        "description": "Image and video analysis applications"
+      },
+      {
+        "title": "Natural Language Processing",
+        "description": "Text analysis, chatbots, and language understanding systems"
+      },
+      {
+        "title": "Deep Learning",
+        "description": "Neural network solutions for complex problems"
+      },
+      {
+        "title": "AI Integration",
+        "description": "Seamless integration of AI capabilities into existing systems"
+      }
+    ]
   }
 ]

src/data/core-services.json

@@ -0,0 +1,45 @@
+{
+  "title": "Our Core Services",
+  "subtitle": "Comprehensive IT Solutions for Your Business",
+  "services": [
+    {
+      "icon": "/assets/img/icons/serv_icons/cloud.png",
+      "title": "Cloud Computing",
+      "description": "Scalable cloud solutions including compute, storage, and networking services for your business needs.",
+      "features": [
+        "Infrastructure as a Service (IaaS)",
+        "Platform as a Service (PaaS)",
+        "Software as a Service (SaaS)",
+        "Cloud Migration & Management",
+        "Hybrid Cloud Solutions"
+      ],
+      "link": "/services/details?service=cloud"
+    },
+    {
+      "icon": "/assets/img/icons/serv_icons/app.png",
+      "title": "Application Development",
+      "description": "Comprehensive development services for web, mobile (Android/iOS), and IoT applications.",
+      "features": [
+        "Web Application Development",
+        "Mobile App Development",
+        "IoT Solutions",
+        "Custom Software Development",
+        "Enterprise Applications"
+      ],
+      "link": "/services/details?service=app-dev"
+    },
+    {
+      "icon": "/assets/img/icons/serv_icons/ai.png",
+      "title": "AI & Machine Learning",
+      "description": "Advanced AI solutions including machine learning, computer vision, and natural language processing.",
+      "features": [
+        "Machine Learning Models",
+        "Computer Vision Solutions",
+        "Natural Language Processing",
+        "Predictive Analytics",
+        "AI Integration Services"
+      ],
+      "link": "/services/details?service=ai"
+    }
+  ]
+} 

src/data/services.json

@@ -0,0 +1,334 @@
+{
+    "services": [
+      {
+        "id": "iaas",
+        "category": "cloud",
+        "icon": "/assets/img/icons/serv_icons/iaas.png",
+        "iconAlt": "IaaS",
+        "title": "Infrastructure as a Service",
+        "text": "Virtualized computing resources, storage, and networking on demand"
+      },
+      {
+        "id": "paas",
+        "category": "cloud",
+        "icon": "/assets/img/icons/serv_icons/paas.png",
+        "iconAlt": "PaaS",
+        "title": "Platform as a Service",
+        "text": "Development and deployment platforms in the cloud"
+      },
+      {
+        "id": "saas",
+        "category": "cloud",
+        "icon": "/assets/img/icons/serv_icons/saas.png",
+        "iconAlt": "SaaS",
+        "title": "Software as a Service",
+        "text": "Cloud-based software applications and services"
+      },
+      {
+        "id": "cloud-migration",
+        "category": "cloud",
+        "icon": "/assets/img/icons/serv_icons/migration.png",
+        "iconAlt": "Cloud Migration",
+        "title": "Cloud Migration",
+        "text": "Seamless transition of applications and data to the cloud"
+      },
+      {
+        "id": "cloud-security",
+        "category": "cloud",
+        "icon": "/assets/img/icons/serv_icons/security.png",
+        "iconAlt": "Cloud Security",
+        "title": "Cloud Security",
+        "text": "Comprehensive security solutions for cloud infrastructure"
+      },
+      {
+        "id": "web-dev",
+        "category": "app-dev",
+        "icon": "/assets/img/icons/serv_icons/web.png",
+        "iconAlt": "Web Development",
+        "title": "Web Application Development",
+        "text": "Custom web applications using modern frameworks and technologies"
+      },
+      {
+        "id": "mobile-dev",
+        "category": "app-dev",
+        "icon": "/assets/img/icons/serv_icons/mobile.png",
+        "iconAlt": "Mobile Development",
+        "title": "Mobile App Development",
+        "text": "Native and cross-platform mobile applications for iOS and Android"
+      },
+      {
+        "id": "iot",
+        "category": "app-dev",
+        "icon": "/assets/img/icons/serv_icons/iot.png",
+        "iconAlt": "IoT Solutions",
+        "title": "IoT Solutions",
+        "text": "Connected device applications and IoT platform development"
+      },
+      {
+        "id": "api-dev",
+        "category": "app-dev",
+        "icon": "/assets/img/icons/serv_icons/api.png",
+        "iconAlt": "API Development",
+        "title": "API Development",
+        "text": "RESTful and GraphQL API design and implementation"
+      },
+      {
+        "id": "devops",
+        "category": "app-dev",
+        "icon": "/assets/img/icons/serv_icons/devops.png",
+        "iconAlt": "DevOps",
+        "title": "DevOps & CI/CD",
+        "text": "Automated deployment and continuous integration pipelines"
+      },
+      {
+        "id": "ml-models",
+        "category": "ai",
+        "icon": "/assets/img/icons/serv_icons/ml.png",
+        "iconAlt": "Machine Learning",
+        "title": "Machine Learning Models",
+        "text": "Custom ML models and predictive analytics systems"
+      },
+      {
+        "id": "computer-vision",
+        "category": "ai",
+        "icon": "/assets/img/icons/serv_icons/vision.png",
+        "iconAlt": "Computer Vision",
+        "title": "Computer Vision Solutions",
+        "text": "Image and video analysis applications"
+      },
+      {
+        "id": "nlp",
+        "category": "ai",
+        "icon": "/assets/img/icons/serv_icons/nlp.png",
+        "iconAlt": "NLP",
+        "title": "Natural Language Processing",
+        "text": "Text analysis, chatbots, and language understanding systems"
+      },
+      {
+        "id": "predictive-analytics",
+        "category": "ai",
+        "icon": "/assets/img/icons/serv_icons/analytics.png",
+        "iconAlt": "Predictive Analytics",
+        "title": "Predictive Analytics",
+        "text": "Data-driven forecasting and business intelligence solutions"
+      },
+      {
+        "id": "ai-integration",
+        "category": "ai",
+        "icon": "/assets/img/icons/serv_icons/integration.png",
+        "iconAlt": "AI Integration",
+        "title": "AI Integration Services",
+        "text": "Seamless integration of AI capabilities into existing systems"
+      },
+      {
+        "id": "cpu-compute",
+        "title": "CPU Compute",
+        "icon": "/assets/img/icons/serv_icons/34.png",
+        "iconAlt": "CPU Compute Icon",
+        "text": "Scalable virtual machines with KVM virtualization for high-performance workloads.",
+        "overview": {
+          "image": "/assets/img/services/services2.png",
+          "imageAlt": "RootXwire CPU Compute Infrastructure",
+          "description": [
+            "RootXwire's CPU Compute service provides scalable, high-performance virtual machines powered by advanced virtualization technology, perfect for businesses needing robust computing resources.",
+            "Enjoy instant provisioning, real-time monitoring, and seamless integration, delivering performance that rivals leading public cloud providers."
+          ]
+        },
+        "processes": [
+          {
+            "title": "Instance Deployment",
+            "icon": "/assets/img/icons/serv_icons/34.png",
+            "iconAlt": "Compute Deployment Icon",
+            "description": "Deploy virtual machines using KVM virtualization, with automated scaling to efficiently manage dynamic workloads."
+          },
+          {
+            "title": "Resource Optimization",
+            "icon": "/assets/img/icons/serv_icons/35.png",
+            "iconAlt": "Optimization Icon",
+            "description": "Optimize CPU resources with live migration and predictive analytics to ensure peak performance and minimal downtime."
+          }
+        ],
+        "features": [
+          {
+            "name": "KVM Virtualization",
+            "description": "Run workloads on secure, isolated virtual machines with hardware-assisted KVM for superior performance."
+          },
+          {
+            "name": "High Availability",
+            "description": "Maintain uptime with redundant infrastructure across multiple data centers."
+          },
+          {
+            "name": "Flexible Instances",
+            "description": "Select from CPU-optimized, memory-optimized, or general-purpose instances to match your needs."
+          }
+        ],
+        "testimonial": {
+          "quote": "RootXwire's CPU Compute service revolutionized our application hosting, delivering unmatched speed and reliability.",
+          "author": {
+            "name": "Alonso D. Dowson",
+            "title": "CTO, TechCorp",
+            "image": "/assets/img/testimonials/user8.png",
+            "imageAlt": "Alonso D. Dowson"
+          }
+        },
+        "navigation": {
+          "previous": {
+            "title": "Networking",
+            "url": "/services/details?service=networking"
+          },
+          "next": {
+            "title": "Storage",
+            "url": "/services/details?service=storage"
+          }
+        }
+      },
+      {
+        "id": "storage",
+        "title": "Storage",
+        "icon": "/assets/img/icons/serv_icons/35.png",
+        "iconAlt": "Storage Icon",
+        "text": "Durable block, object, and file storage with seamless scaling and redundancy.",
+        "overview": {
+          "image": "/assets/img/services/services2.png",
+          "imageAlt": "RootXwire Storage Solutions",
+          "description": [
+            "RootXwire's Storage service offers scalable, durable storage solutions for block, object, and file data, designed for all your enterprise needs.",
+            "Benefit from high-performance storage with redundancy, snapshots, and seamless integration, supporting mission-critical applications."
+          ]
+        },
+        "processes": [
+          {
+            "title": "Storage Provisioning",
+            "icon": "/assets/img/icons/serv_icons/34.png",
+            "iconAlt": "Storage Provisioning Icon",
+            "description": "Quickly provision block, object, or file storage with flexible configurations for diverse workloads."
+          },
+          {
+            "title": "Data Management",
+            "icon": "/assets/img/icons/serv_icons/35.png",
+            "iconAlt": "Data Management Icon",
+            "description": "Manage data with snapshots and automated backups for quick recovery and consistency."
+          }
+        ],
+        "features": [
+          {
+            "name": "Unified Storage",
+            "description": "Access block, object, and file storage through a single platform, simplifying data management."
+          },
+          {
+            "name": "High Durability",
+            "description": "Achieve 99.999999999% durability with multiple replicas across distributed systems."
+          },
+          {
+            "name": "Dynamic Scaling",
+            "description": "Scale storage capacity seamlessly to accommodate growing datasets without downtime."
+          }
+        ],
+        "testimonial": {
+          "quote": "RootXwire's storage solutions provided the reliability and flexibility we needed to manage massive datasets effortlessly.",
+          "author": {
+            "name": "Sarah K. Lee",
+            "title": "Data Engineer, DataWorks",
+            "image": "/assets/img/testimonials/user8.png",
+            "imageAlt": "Sarah K. Lee"
+          }
+        },
+        "navigation": {
+          "previous": {
+            "title": "CPU Compute",
+            "url": "/services/details?service=cpu-compute"
+          },
+          "next": {
+            "title": "Networking",
+            "url": "/services/details?service=networking"
+          }
+        }
+      },
+      {
+        "id": "networking",
+        "title": "Networking",
+        "icon": "/assets/img/icons/serv_icons/36.png",
+        "iconAlt": "Networking Icon",
+        "text": "Software-defined networking with security groups and global connectivity.",
+        "overview": {
+          "image": "/assets/img/services/services2.png",
+          "imageAlt": "RootXwire Networking Infrastructure",
+          "description": [
+            "RootXwire's Networking service delivers flexible, software-defined networking to connect and secure your cloud infrastructure efficiently.",
+            "Create private networks, manage traffic, and enhance security with advanced features, matching the capabilities of top cloud providers."
+          ]
+        },
+        "processes": [
+          {
+            "title": "Network Configuration",
+            "icon": "/assets/img/icons/serv_icons/34.png",
+            "iconAlt": "Network Configuration Icon",
+            "description": "Set up virtual private networks and subnets with intuitive tools for rapid deployment."
+          },
+          {
+            "title": "Traffic Management",
+            "icon": "/assets/img/icons/serv_icons/35.png",
+            "iconAlt": "Traffic Management Icon",
+            "description": "Optimize performance with load balancing and traffic routing tailored to your applications."
+          }
+        ],
+        "features": [
+          {
+            "name": "Software-Defined Networking",
+            "description": "Create isolated virtual networks with fine-grained control over traffic and policies."
+          },
+          {
+            "name": "Security Groups",
+            "description": "Implement robust firewall rules to protect your infrastructure from unauthorized access."
+          },
+          {
+            "name": "Global Connectivity",
+            "description": "Connect resources across regions with low-latency, high-bandwidth networks."
+          }
+        ],
+        "testimonial": {
+          "quote": "RootXwire's networking service simplified our global infrastructure, ensuring secure and fast connectivity.",
+          "author": {
+            "name": "Michael Chen",
+            "title": "Network Architect, GlobalNet",
+            "image": "/assets/img/testimonials/user8.png",
+            "imageAlt": "Michael Chen"
+          }
+        },
+        "navigation": {
+          "previous": {
+            "title": "Storage",
+            "url": "/services/details?service=storage"
+          },
+          "next": {
+            "title": "CPU Compute",
+            "url": "/services/details?service=cpu-compute"
+          }
+        }
+      }
+    ],
+    "sidebar": {
+      "categories": [
+        {
+          "title": "CPU Compute",
+          "url": "/services/details?service=cpu-compute"
+        },
+        {
+          "title": "Storage Solutions",
+          "url": "/services/details?service=storage"
+        },
+        {
+          "title": "Networking",
+          "url": "/services/details?service=networking"
+        }
+      ],
+      "cta": {
+        "title": "Request a Custom Cloud Solution",
+        "subtitle": "Tailored Compute, Storage, and Networking",
+        "buttonText": "Get a Quote",
+        "buttonUrl": "/contact",
+        "image": "/assets/img/mob1.png",
+        "imageAlt": "RootXwire Cloud CTA"
+      }
+    }
+  }

src/layouts/Main.jsx

@@ -4,7 +4,6 @@ import { Script } from "gatsby";
 //= Components
 import PreLoader from "components/PreLoader";
 import ScrollToTop from "components/ScrollToTop";
-import HomeSoftwareCompany from 'pages/home-software-company'
 
 //= Global CSS
 import "styles/globals.css";
@@ -12,12 +11,14 @@ import "styles/preloader.css";
 
 const MainLayout = ({ children, scrollTopText }) => {
   return (
-
     <>
       <PreLoader />
-      { children }
+      {children}
       <ScrollToTop topText={scrollTopText} />
-
+      <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
+      <link rel="stylesheet" href="/assets/css/style.css" />
+      <Script src="/assets/js/lib/jquery-3.6.0.min.js"></Script>
+      <Script src="/assets/js/lib/bootstrap.bundle.min.js"></Script>
       <Script src="/assets/js/main.js"></Script>
     </>
   );

src/pages/404/index.jsx

@@ -32,7 +32,7 @@ const Page404 = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - 404</title>
+ <title>Rootxwire - 404</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-app-landing-onePage/index.jsx

@@ -47,7 +47,7 @@ const HomeAppLandingOnePage = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - App Landing One Page</title>
+ <title>Rootxwire - App Landing One Page</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-app-landing/index.jsx

@@ -47,7 +47,7 @@ const HomeAppLanding = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - App Landing</title>
+ <title>Rootxwire - App Landing</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-cloud-hosting/index.jsx

@@ -42,7 +42,7 @@ const HomeCloudHosting = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Cloud Hosting</title>
+ <title>Rootxwire - Cloud Hosting</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-data-analysis/index.jsx

@@ -40,7 +40,7 @@ const HomeDataAnalysis = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Data Analysis</title>
+ <title>Rootxwire - Data Analysis</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-digital-agency-onePage/index.jsx

@@ -39,7 +39,7 @@ const HomeDigitalAgencyOnePage = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Digital Agency One Page</title>
+ <title>Rootxwire - Digital Agency One Page</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-digital-agency/index.jsx

@@ -39,7 +39,7 @@ const HomeDigitalAgency = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Digital Agency</title>
+ <title>Rootxwire - Digital Agency</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-it-solutions-onePage/index.jsx

@@ -33,7 +33,7 @@ const HomeITSolutionsOnePage = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - IT Solutions One Page</title>
+ <title>Rootxwire - IT Solutions One Page</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-it-solutions/index.jsx

@@ -33,7 +33,7 @@ const HomeITSolutions = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - IT Solutions</title>
+ <title>Rootxwire - IT Solutions</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-it-solutions2/index.jsx

@@ -41,7 +41,7 @@ const HomeItSolutions2 = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Creative It Solutions</title>
+ <title>Rootxwire - Creative It Solutions</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-marketing-startup-onePage/index.jsx

@@ -39,7 +39,7 @@ const HomeMarketingStartupOnePage = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Marketing Startup One Page</title>
+ <title>Rootxwire - Marketing Startup One Page</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-marketing-startup/index.jsx

@@ -39,7 +39,7 @@ const HomeMarketingStartup = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Marketing Startup</title>
+ <title>Rootxwire - Marketing Startup</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-modren-shop/index.jsx

@@ -31,7 +31,7 @@ const PageShopApp = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Shop App</title>
+ <title>Rootxwire - Shop App</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-saas-technology-onePage/index.jsx

@@ -45,7 +45,7 @@ const HomeSaasTechnologyOnePage = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Saas Technology One Page</title>
+ <title>Rootxwire - Saas Technology One Page</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-saas-technology/index.jsx

@@ -45,7 +45,7 @@ const HomeSaasTechnology = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Saas Technology</title>
+ <title>Rootxwire - Saas Technology</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-software-company-onePage/index.jsx

@@ -37,7 +37,7 @@ const HomeSoftwareCompanyOnePage = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Software Company One Page</title>
+ <title>Rootxwire - Software Company One Page</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/home-software-company/index.jsx

@@ -37,9 +37,7 @@ const HomeSoftwareCompany = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Software Company</title>
+      <title>Rootxwire - Software Company</title>
-      <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
-      <link rel="stylesheet" href="/assets/css/style.css" />
     </>
   )
 }

src/pages/index.jsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
+import SEO from "../components/SEO";
 //= Layout
 import PreviewLayout from 'layouts/Preview';
 //= Components
@@ -15,13 +16,15 @@ import AllFeatures from 'components/Preview/AllFeatures';
 import Testimonials from 'components/Preview/Testimonials';
 import CallToAction from 'components/Preview/CallToAction';
 //= Scripts
-import { fixPreviewStylesheetOrder } from 'common/fixStylesheetsOrder';
+import { fixPreviewStylesheetOrder } from "common/fixStylesheetsOrder";
-import HomeSoftwareCompany from 'pages/home-software-company'
+import HomeSoftwareCompany from "pages/home-software-company";
+import coreServices from 'data/core-services.json';
+import { Link } from 'gatsby';
 
 const LandingPreview = () => {
   useEffect(() => {
-    document.body.classList.add('index-main');
+    document.body.classList.add("index-main");
-    return () => document.body.classList.remove('index-main');
+    return () => document.body.classList.remove("index-main");
   }, []);
 
   useEffect(() => {
@@ -29,34 +32,85 @@ const LandingPreview = () => {
   }, []);
 
   return (
-
+    <>
+      <SEO
+        title="RootXwire - Cloud Solutions"
+        description="Discover RootXwire's cloud solutions, including compute, GPU, storage, and networking, rivaling top public cloud providers."
+        keywords="RootXwire, cloud computing, GPU, storage, networking"
+      />
       <HomeSoftwareCompany />
-    // <PreviewLayout>
+
-    //   <Header />
+      
-    //   <Features />
+      {/* <section className="core-services section-padding">
-    //   <Demos />
+        <div className="container">
-    //   <InnerPages />
+          <div className="row justify-content-center">
-    //   <BuyNow />
+            <div className="col-lg-8">
-    //   <Portfolio />
+              <div className="section-head text-center mb-60">
-    //   <Codei />
+                <h2 className="mb-20">{coreServices.title}</h2>
-    //   <BestFeatures />
+                <p>{coreServices.subtitle}</p>
-    //   <Responsive />
+              </div>
-    //   <AllFeatures />
+            </div>
-    //   <Testimonials />
+          </div>
-    //   <CallToAction />
+          <div className="row">
-    // </PreviewLayout>
+            {coreServices.services.map((service, index) => (
-  )
+              <div className="col-lg-4" key={index}>
-}
+                <div className="service-card">
+                  <div className="icon">
+                    <img src={service.icon} alt={service.title} />
+                  </div>
+                  <div className="content">
+                    <h5>{service.title}</h5>
+                    <p>{service.description}</p>
+                    <ul className="features">
+                      {service.features.map((feature, idx) => (
+                        <li key={idx}>
+                          <i className="bi bi-check2"></i>
+                          {feature}
+                        </li>
+                      ))}
+                    </ul>
+                    <Link to={service.link} className="btn btn-outline-primary">
+                      Learn More <i className="bi bi-arrow-right ms-1"></i>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section> */}
+
+
+
+
+      {/* <PreviewLayout>
+        <Header />
+        <Features />
+        <Demos />
+        <InnerPages />
+        <BuyNow />
+        <Portfolio />
+        <Codei />
+        <BestFeatures />
+        <Responsive />
+        <AllFeatures />
+        <Testimonials />
+        <CallToAction />
+      </PreviewLayout> */}
+    </>
+  );
+};
 
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Preview</title>
+      <SEO
-      <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
+        title="RootXwire - Cloud Solutions"
-      <link rel="stylesheet" href="/assets/css/style.css" />
+        description="Discover RootXwire's cloud solutions, including compute, GPU, storage, and networking, rivaling top public cloud providers."
-      <link rel="stylesheet" href="/landing-preview/css/preview-style.css" />
+        keywords="RootXwire, cloud computing, GPU, storage, networking"
+      />
     </>
-  )
+  );
-}
+};
 
 export default LandingPreview;

src/pages/page-404/index.jsx

@@ -32,7 +32,7 @@ const Page404 = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - 404</title>
+ <title>Rootxwire - 404</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-about-2/index.jsx

@@ -39,7 +39,7 @@ const PageAbout2 = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - About 2</title>
+ <title>Rootxwire - About 2</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-about-5/index.jsx

@@ -47,7 +47,7 @@ const PageAbout5 = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - About 5</title>
+ <title>Rootxwire - About 5</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-about-app/index.jsx

@@ -35,7 +35,7 @@ const PageAboutApp = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - About App</title>
+ <title>Rootxwire - About App</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-blog-5-left-sidebar/index.jsx

@@ -35,7 +35,7 @@ const PageBlog5LeftSidebar = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Blog 5 Left Sidebar</title>
+ <title>Rootxwire - Blog 5 Left Sidebar</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-blog-5-wide/index.jsx

@@ -35,7 +35,7 @@ const PageBlog5Wide = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Blog 5 Wide</title>
+ <title>Rootxwire - Blog 5 Wide</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-blog-5/index.jsx

@@ -35,7 +35,7 @@ const PageBlog5 = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Blog 5</title>
+ <title>Rootxwire - Blog 5</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-blog-app-left-sidebar/index.jsx

@@ -35,7 +35,7 @@ const PageBlogAppLeftSidebar = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Blog App Left Sidebar</title>
+ <title>Rootxwire - Blog App Left Sidebar</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-blog-app-wide/index.jsx

@@ -35,7 +35,7 @@ const PageBlogAppWide = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Blog App Wide</title>
+ <title>Rootxwire - Blog App Wide</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-blog-app/index.jsx

@@ -35,7 +35,7 @@ const PageBlogApp = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Blog App</title>
+ <title>Rootxwire - Blog App</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-career-details/index.jsx

@@ -37,7 +37,7 @@ const PageCareerDetails = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Career Details</title>
+ <title>Rootxwire - Career Details</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-careers-5/index.jsx

@@ -39,7 +39,7 @@ const PageCareers = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Careers</title>
+ <title>Rootxwire - Careers</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-comming-soon-5/index.jsx

@@ -32,7 +32,7 @@ const PageCommingSoon = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Comming Soon</title>
+ <title>Rootxwire - Comming Soon</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-contact-5/index.jsx

@@ -33,7 +33,7 @@ const PageContact5 = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Contact 5</title>
+ <title>Rootxwire - Contact 5</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-contact-app/index.jsx

@@ -35,7 +35,7 @@ const PageContactApp = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Contact App</title>
+ <title>Rootxwire - Contact App</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-faq-5/index.jsx

@@ -35,7 +35,7 @@ const PageFAQ = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - FAQ</title>
+ <title>Rootxwire - FAQ</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-portfolio-5/index.jsx

@@ -33,7 +33,7 @@ const PagePortfolio5 = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Portfolio 5</title>
+ <title>Rootxwire - Portfolio 5</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-portfolio-app/index.jsx

@@ -33,7 +33,7 @@ const PagePortfolioApp = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Portfolio App</title>
+ <title>Rootxwire - Portfolio App</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-product-5/index.jsx

@@ -35,7 +35,7 @@ const PageProduct5 = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Product 5</title>
+ <title>Rootxwire - Product 5</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-product-app/index.jsx

@@ -35,7 +35,7 @@ const PageProductApp = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Product App</title>
+ <title>Rootxwire - Product App</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

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

@@ -39,7 +39,7 @@ const PageServices5 = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Services 5</title>
+ <title>Rootxwire - Services 5</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-services-app/index.jsx

@@ -35,7 +35,7 @@ const PageServicesApp = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Services App</title>
+ <title>Rootxwire - Services App</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

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

@@ -35,7 +35,7 @@ const PageServiceDetails = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - 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" />
     </>

src/pages/page-shop-5/index.jsx

@@ -31,7 +31,7 @@ const PageShop5 = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Shop 5</title>
+ <title>Rootxwire - Shop 5</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-shop-app/index.jsx

@@ -31,7 +31,7 @@ const PageShopApp = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Shop App</title>
+ <title>Rootxwire - Shop App</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-sign-in/index.jsx

@@ -25,7 +25,7 @@ const PageSignin = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Sign in</title>
+ <title>Rootxwire - Sign in</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-single-post-5-left-sidebar/index.jsx

@@ -33,7 +33,7 @@ const PageSinglePostLeftSidebarApp = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Single Post 5 Left Sidebar</title>
+ <title>Rootxwire - Single Post 5 Left Sidebar</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-single-post-5-wide/index.jsx

@@ -33,7 +33,7 @@ const PageSinglePost5Wide = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Single Post 5 Wide</title>
+ <title>Rootxwire - Single Post 5 Wide</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-single-post-5/index.jsx

@@ -33,7 +33,7 @@ const PageSinglePost5 = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Single Post 5</title>
+ <title>Rootxwire - Single Post 5</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-single-post-app-left-sidebar/index.jsx

@@ -33,7 +33,7 @@ const PageSinglePostLeftSidebarApp = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Single Post App Left Sidebar</title>
+ <title>Rootxwire - Single Post App Left Sidebar</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-single-post-app-wide/index.jsx

@@ -33,7 +33,7 @@ const PageSinglePostWideApp = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Single Post Wide App</title>
+ <title>Rootxwire - Single Post Wide App</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-single-post-app/index.jsx

@@ -33,7 +33,7 @@ const PageSinglePostApp = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Single Post App</title>
+ <title>Rootxwire - Single Post App</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-single-project-5/index.jsx

@@ -39,7 +39,7 @@ const PageSingleProject5 = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Single Project 5</title>
+ <title>Rootxwire - Single Project 5</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/page-single-project-app/index.jsx

@@ -39,7 +39,7 @@ const PageSingleProjectApp = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - Single Project App</title>
+ <title>Rootxwire - Single Project App</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
     </>

src/pages/rtl-home-app-landing-onePage/index.jsx

@@ -53,7 +53,7 @@ const HomeAppLandingOnePage = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - App Landing One Page - RTL</title>
+ <title>Rootxwire - App Landing One Page - RTL</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.rtl.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
       <link rel="stylesheet" href="/assets/css/rtl_style.css" />

src/pages/rtl-home-marketing-startup-onePage/index.jsx

@@ -45,7 +45,7 @@ const RTLHomeMarketingStartupOnePage = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - التسويق الالكترونى صفحة واحدة</title>
+ <title>Rootxwire - التسويق الالكترونى صفحة واحدة</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.rtl.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
       <link rel="stylesheet" href="/assets/css/rtl_style.css" />

src/pages/rtl-home-marketing-startup/index.jsx

@@ -45,7 +45,7 @@ const RTLHomeMarketingStartup = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - التسويق الالكترونى</title>
+ <title>Rootxwire - التسويق الالكترونى</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.rtl.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
       <link rel="stylesheet" href="/assets/css/rtl_style.css" />

src/pages/rtl-page-about/index.jsx

@@ -43,7 +43,7 @@ const RTLPageAbout = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - من نحن</title>
+ <title>Rootxwire - من نحن</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.rtl.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
       <link rel="stylesheet" href="/assets/css/rtl_style.css" />

src/pages/rtl-page-blog/index.jsx

@@ -31,7 +31,7 @@ const RTLPageBlog = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - المدونة</title>
+ <title>Rootxwire - المدونة</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.rtl.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
       <link rel="stylesheet" href="/assets/css/rtl_style.css" />

src/pages/rtl-page-contact/index.jsx

@@ -29,7 +29,7 @@ const RTLPageContact = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - اتصل بنا</title>
+ <title>Rootxwire - اتصل بنا</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.rtl.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
       <link rel="stylesheet" href="/assets/css/rtl_style.css" />

src/pages/rtl-page-portfolio/index.jsx

@@ -29,7 +29,7 @@ const RTLPagePortfolio = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - المشاريع</title>
+ <title>Rootxwire - المشاريع</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.rtl.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
       <link rel="stylesheet" href="/assets/css/rtl_style.css" />

src/pages/rtl-page-product/index.jsx

@@ -31,7 +31,7 @@ const RTLPageProduct = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - المنتج</title>
+ <title>Rootxwire - المنتج</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.rtl.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
       <link rel="stylesheet" href="/assets/css/rtl_style.css" />

src/pages/rtl-page-services/index.jsx

@@ -35,7 +35,7 @@ const RTLPageServices = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - الخدمات</title>
+ <title>Rootxwire - الخدمات</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.rtl.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
       <link rel="stylesheet" href="/assets/css/rtl_style.css" />

src/pages/rtl-page-shop/index.jsx

@@ -27,7 +27,7 @@ const RTLPageShop = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - المتجر</title>
+ <title>Rootxwire - المتجر</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.rtl.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
       <link rel="stylesheet" href="/assets/css/rtl_style.css" />

src/pages/rtl-page-single-post/index.jsx

@@ -29,7 +29,7 @@ const RTLPageSinglePost = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - تفاصيل الخبر</title>
+ <title>Rootxwire - تفاصيل الخبر</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.rtl.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
       <link rel="stylesheet" href="/assets/css/rtl_style.css" />

src/pages/rtl-page-single-project/index.jsx

@@ -35,7 +35,7 @@ const RTLPageSingleProject = () => {
 export const Head = () => {
   return (
     <>
-      <title>Iteck - تفاصيل المشروع</title>
+ <title>Rootxwire - تفاصيل المشروع</title>
       <link rel="stylesheet" href="/assets/css/lib/bootstrap.rtl.min.css" />
       <link rel="stylesheet" href="/assets/css/style.css" />
       <link rel="stylesheet" href="/assets/css/rtl_style.css" />

src/pages/services/details.jsx

@@ -0,0 +1,144 @@
+import React, { useEffect, useRef } from 'react';
+import { useLocation } from '@reach/router';
+//= Scripts
+import navbarScrollEffect from "common/navbarScrollEffect";
+//= Layout
+import MainLayout from 'layouts/Main';
+//= Components
+import TopNav from 'components/Navbars/TopNav';
+import Navbar from 'components/Navbars/SaasNav';
+import Header from 'components/Style2/Header';
+import Details from 'components/Style2/ServicesDetails/Details';
+import Footer from 'components/Software/Footer';
+import SEO from '../../components/SEO';
+
+const ServiceDetailsPage = () => {
+  const navbarRef = useRef(null);
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const serviceId = queryParams.get('service') || 'cloud';
+
+  useEffect(() => {
+    navbarScrollEffect(navbarRef.current, true);
+  }, [navbarRef]);
+
+  const serviceData = {
+    'cloud': {
+      title: 'Cloud Computing',
+      description: 'Scalable cloud solutions for your business needs',
+      image: '/assets/img/services/cloud.png',
+      overview: 'RootXwire provides comprehensive cloud computing solutions including compute, storage, and networking services. Our cloud infrastructure is designed to scale with your business needs while maintaining high performance and security standards.',
+      processes: [
+        {
+          title: 'Infrastructure Setup',
+          icon: '/assets/img/icons/serv_icons/34.png',
+          description: 'Deploy and configure cloud infrastructure tailored to your specific requirements.'
+        },
+        {
+          title: 'Resource Management',
+          icon: '/assets/img/icons/serv_icons/35.png',
+          description: 'Optimize resource allocation and scaling based on workload demands.'
+        }
+      ],
+      features: [
+        {
+          name: 'Scalable Infrastructure',
+          description: 'Easily scale resources up or down based on your business needs.'
+        },
+        {
+          name: 'High Availability',
+          description: 'Built-in redundancy and failover mechanisms ensure maximum uptime.'
+        },
+        {
+          name: 'Security & Compliance',
+          description: 'Enterprise-grade security measures and compliance with industry standards.'
+        }
+      ]
+    },
+    'app-dev': {
+      title: 'Application Development',
+      description: 'Comprehensive development services for web, mobile, and IoT',
+      image: '/assets/img/services/app-dev.png',
+      overview: 'RootXwire offers end-to-end application development services covering web applications, mobile apps (Android/iOS), and IoT solutions. Our team follows industry best practices to deliver robust and scalable applications.',
+      processes: [
+        {
+          title: 'Requirement Analysis',
+          icon: '/assets/img/icons/serv_icons/34.png',
+          description: 'Thorough analysis of business requirements and technical specifications.'
+        },
+        {
+          title: 'Development & Testing',
+          icon: '/assets/img/icons/serv_icons/35.png',
+          description: 'Agile development process with continuous testing and quality assurance.'
+        }
+      ],
+      features: [
+        {
+          name: 'Cross-Platform Development',
+          description: 'Build applications that work seamlessly across multiple platforms.'
+        },
+        {
+          name: 'Modern Technologies',
+          description: 'Utilize the latest frameworks and technologies for optimal performance.'
+        },
+        {
+          name: 'IoT Integration',
+          description: 'Connect and manage IoT devices with custom applications.'
+        }
+      ]
+    },
+    'ai': {
+      title: 'AI & Machine Learning',
+      description: 'Advanced AI solutions for business transformation',
+      image: '/assets/img/services/ai.png',
+      overview: 'RootXwire delivers cutting-edge AI and machine learning solutions to help businesses automate processes, gain insights from data, and enhance decision-making capabilities.',
+      processes: [
+        {
+          title: 'Data Analysis',
+          icon: '/assets/img/icons/serv_icons/34.png',
+          description: 'Process and analyze data to identify patterns and insights.'
+        },
+        {
+          title: 'Model Development',
+          icon: '/assets/img/icons/serv_icons/35.png',
+          description: 'Develop and train machine learning models for specific use cases.'
+        }
+      ],
+      features: [
+        {
+          name: 'Machine Learning',
+          description: 'Implement predictive models and automated decision systems.'
+        },
+        {
+          name: 'Computer Vision',
+          description: 'Develop solutions for image and video analysis.'
+        },
+        {
+          name: 'Natural Language Processing',
+          description: 'Build systems that understand and process human language.'
+        }
+      ]
+    }
+  };
+
+  const service = serviceData[serviceId] || serviceData['cloud'];
+
+  return (
+    <MainLayout>
+      <SEO
+        title={`RootXwire - ${service.title}`}
+        description={service.description}
+        keywords={`${service.title}, RootXwire, ${serviceId === 'cloud' ? 'cloud computing' : serviceId === 'app-dev' ? 'application development' : 'AI machine learning'}`}
+      />
+      <TopNav style="5" />
+      <Navbar navbarRef={navbarRef} />
+      <Header page="Service Details" title={service.title} />
+      <main className="services-details-page style-5">
+        <Details service={service} />
+      </main>
+      <Footer />
+    </MainLayout>
+  );
+};
+
+export default ServiceDetailsPage;